Problem/Motivation

Sometimes we need to style a selected paragraph in a custom way,
which we usually use a custom CSS class or an id

Proposed resolution

We could have something like:
paragraphs with css classes and remove continer dev varbase4c

Remaining tasks

  • Add the custom fields which only for paragraph types.
  • Add Remove Container checkbox field [bp_remove_container]
  • Have the update path
  • More testing.

    which will work with:
    composer create-project vardot/varbase-project:8.4.x-dev PROJECT_DIR_NAME --stability dev --no-interaction

User interface changes

  • Each paragraph type will have new instance fields in the Styling Settings

API changes

Data model changes

  • Classes text field [bp_classes]
  • ID text field [bp_id]. Not to have an id field . so this will be removed.
  • Remove Container checkbox field [bp_remove_container]

Original report by Omar Alahmad

CommentFileSizeAuthor
#30 Test-Container---Columns--Two-Uneven--dev-varbase4c.png5.09 MBRajab Natshah
#30 Test-Container---Rich-Text---dev-varbase4c.png1.82 MBRajab Natshah
#27 paragraphs-with-css-classes--and-remove-continer-dev-varbase4c.png33.85 KBRajab Natshah
#25 css-classes-dev-varbase4c.png22.8 KBRajab Natshah
#15 Edit-Landing-page-Test-Landing-page--13---Drupal-Block---dev-varbase4c.png439.25 KBRajab Natshah
#15 Test-Landing-page--13---Drupal-Block---dev-varbase4c.png136.57 KBRajab Natshah
#15 Test-Landing-page--13---Drupal-Block---dev-varbase4c.png136.57 KBRajab Natshah
#14 Edit-Landing-page-Test-Landing-page--12---Accordion---dev-varbase4c.png386.14 KBRajab Natshah
#14 HTML-Test-Landing-page--12---Accordion---dev-varbase4c.png438.17 KBRajab Natshah
#14 Test-Landing-page--12---Accordion---dev-varbase4c.png200.97 KBRajab Natshah
#14 Edit-Landing-page-Test-Landing-page--11---Carousel---dev-varbase4c.png442.88 KBRajab Natshah
#14 HTML-Test-Landing-page--11---Carousel---dev-varbase4c.png818.63 KBRajab Natshah
#14 Test-Landing-page--11---Carousel---dev-varbase4c.png1.16 MBRajab Natshah
#13 Edit-Landing-page-Test-Landing-page--10---Columns--Equal----dev-varbase4c.png430.56 KBRajab Natshah
#13 HTML-Test-Landing-page--10---Columns--Equal----dev-varbase4c.png498.49 KBRajab Natshah
#13 Test-Landing-page--10---Columns--Equal----dev-varbase4c.png113.56 KBRajab Natshah
#13 Edit-Landing-page-Test-Landing-page--9---Columns--Three-Uneven----dev-varbase4c.png497.93 KBRajab Natshah
#13 HTML-Test-Landing-page--9---Columns--Three-Uneven----dev-varbase4c.png492.04 KBRajab Natshah
#13 Test-Landing-page--9---Columns--Three-Uneven----dev-varbase4c.png739.28 KBRajab Natshah
#12 Edit-Landing-page-Test-Landing-page--8---Columns--Two-Uneven----dev-varbase4c.png429.84 KBRajab Natshah
#12 HTML-Test-Landing-page--8---Columns--Two-Uneven----dev-varbase4c.png494.47 KBRajab Natshah
#12 Test-Landing-page--8---Columns--Two-Uneven----dev-varbase4c.png203.74 KBRajab Natshah
#12 Edit-Landing-page-Test-Landing-page--7---Images---dev-varbase4c.png499.78 KBRajab Natshah
#12 HTML-Test-Landing-page--7---Images---dev-varbase4c.png754.18 KBRajab Natshah
#12 Test-Landing-page--7---Images---dev-varbase4c.png944.59 KBRajab Natshah
#11 Edit-Landing-page-Test-Landing-page--6---Modals---dev-varbase4c.png371.82 KBRajab Natshah
#11 HTML-Test-Landing-page--6---Modals---dev-varbase4c.png471.38 KBRajab Natshah
#11 Test-Landing-page--6---Modals---dev-varbase4c.png109.71 KBRajab Natshah
#11 Edit-Landing-page-Test-Landing-page--5---Tabs---dev-varbase4c.png513.82 KBRajab Natshah
#11 HTML-Test-Landing-page--5---Tabs---dev-varbase4c.png422.89 KBRajab Natshah
#11 Test-Landing-page--5---Tabs---dev-varbase4c.png198.33 KBRajab Natshah
#10 Edit-Landing-page-Test-Landing-page--4---Views---dev-varbase4c.png464.3 KBRajab Natshah
#10 HTML-Test-Landing-page--4---Views---dev-varbase4c.png474.22 KBRajab Natshah
#10 Test-Landing-page--4---Views---dev-varbase4c.png247.16 KBRajab Natshah
#10 Edit-Landing-page-Test-Landing-page--3---Webform---dev-varbase4c.png479.35 KBRajab Natshah
#10 HTML-Test-Landing-page--3---Webform---dev-varbase4c.png441.12 KBRajab Natshah
#10 Test-Landing-page--3---Webform---dev-varbase4c.png209.86 KBRajab Natshah
#9 Edit-Landing-page-Test-Landing-page--2---Text-and-image---dev-varbase4c.png806.75 KBRajab Natshah
#9 HTML-Test-Landing-page--2---Text-and-image---dev-varbase4c.png853.74 KBRajab Natshah
#9 Test-Landing-page--2---Text-and-image---dev-varbase4c.png2.2 MBRajab Natshah
#9 Edit-Landing-page-Test-Landing-page--1---Rich-Text---dev-varbase4c.png524.29 KBRajab Natshah
#9 HTML-Test-Landing-page--1---Text--dev-varbase4c.png440.31 KBRajab Natshah
#9 Test-Landing-page--1---Rich-Text---dev-varbase4c.png124.71 KBRajab Natshah
paragraph-css-properties.png47.18 KBRajab Natshah
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RajabNatshah created an issue. See original summary.

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Title: Add Paragraphs classes/id to all paragraph types » Add Paragraphs classes/id to [Styling settings] for all paragraph types
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes

Rajab Natshah’s picture

  • RajabNatshah committed c474635 on 8.x-4.x
    Issue #2925242: Add Paragraphs classes/id to [Styling settings] for all...
Rajab Natshah’s picture

Title: Add Paragraphs classes/id to [Styling settings] for all paragraph types » Add Paragraphs classes/id and the option of [Remove Container] to [Styling settings] in all paragraph types
Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes

Rajab Natshah’s picture

Rajab Natshah’s picture

Issue summary: View changes

After a feedback by Mohammed J. Razem

Better not to have an ID field. so this will be removed.
we can manage by the auto generated id, something like vbp-[paragraph:id]

Rajab Natshah’s picture

Title: Add Paragraphs classes/id and the option of [Remove Container] to [Styling settings] in all paragraph types » Add Paragraphs classes, and [Remove Container] option to [Styling settings] in all paragraph types

  • RajabNatshah committed 217e223 on 8.x-4.x
    Issue #2925242: Removed bp_id field, and bettered up the [CSS class(es)...
Rajab Natshah’s picture

Issue summary: View changes
FileSize
22.8 KB

paragraph css clasess, id styling properties

Rajab Natshah’s picture

Assigned: Rajab Natshah » Mohammed J. Razem
Issue summary: View changes
Status: Needs work » Needs review
Issue tags: +varbase-8.4.13
FileSize
33.85 KB

paragraphs with css classes and remove continer dev varbase4c

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Assigned: Mohammed J. Razem » Rajab Natshah
Status: Needs review » Needs work
Rajab Natshah’s picture

Test Container Rich Text dev varbase4c

Test Container Rich Text dev varbase4c

Test Container Columns Two Uneven dev varbase4c

Test Container Columns Two Uneven dev varbase4c

  • RajabNatshah committed c7e2bed on 8.x-4.x
    Issue #2925242: Add Paragraphs classes, and [Remove Container] option to...
Rajab Natshah’s picture

Assigned: Mohammed J. Razem » Unassigned
Status: Needs review » Fixed

  • RajabNatshah committed 1e3bd86 on 8.x-4.x
    Issue #2925242: Add Paragraphs classes, and [Remove Container] option to...
Rajab Natshah’s picture

Status: Fixed » Closed (fixed)