Developer can style content types output differently per viewport

[tkacheva]

Story

As a developer I want to easily create themes and customizations to existing Page Builder content types to enable me align their visual output with my desired theme

Business Value

ability to style content with CSS classes not using !important

Acceptance Criteria

• Developers are no longer required to use !important to style CSS properties

Technical Vision

• Remove the usage of style attributes
• Utilize style block generation and include a single block per instance
• Consider including an optimizer to further decrease the size of the payload: https://github.com/css/csso

Test Plan

Manual Testing Scenarios

• [x] Migration of Existing Page Builder Content
  1. Create a Magento Commerce Cloud instance on the develop branch of Page Builder
  2. Create various combinations of Page Builder content (Block, Dynamic Block, Page, Categories, Product) including all possible content types:
     • Row
     • Column
     • Tabs (incl. Tab)
     • Text
     • Heading
     • Buttons (incl. Button)
     • Divider
     • HTML Code
     • Image
     • Video
     • Banner
     • Slider (incl. Slide)
     • Map
     • Block Dynamic Block
     • Products
  3. Create screenshots of each instance of Page Builder that will be tested
  4. Update the Magento Commerce Cloud instance to the csso-alternative branch of Page Builder
  5. Run bin/magento setup:upgrade and re-deploy
  6. Verify that all instances of Page Builder are working as expected; in content editing, content staging, and on the storefront
  7. Create screenshots of each instance of Page Builder
  8. Compare "before" and "after" screenshots to ensure no visual defects
  9. Ensure instances of Page Builder contain no inline styles (except for HTML Code content types where inline styles have been defined)

Update working as expected. No visual differences, and no inline styles after conversion to csso-alternative branch.

Page: https://588-manual-tests-dg3iscy-vzsrtettsztvg.us-4.magentosite.cloud/issue-558

Ghost Inspector: https://ghostinspector-prod.s3.amazonaws.com/screenshots/bdf4afb7-bf2b-40f7-81d3-2c74cfa143a3-compareOriginal.png

• [x] CSS Specificity

  1. Create a new Page (Content » Pages » Add New Page)
  2. Click Edit with Page Builder
  3. Add Heading and HTML Code content types, and configure with the following:

  Content Type	Label	Value
  Heading	Heading Type	H2
  	Heading Text	CSS Specificity
  	Alignment	Left
  	Border	None
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	css__specificity
  	Margins and Padding	Default
  HTML Code	WYSIWYG	See Below
  	Alignment	Default
  	Border	Default
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	Default

  <!-- WYSIWYG Content -->
  <style type="text/css">
      .css__specificity {
          text-align: center;
      }
  </style>

4. Click Save

5. Browse to your newly created CMS Page

6. Confirm Heading ("CSS Specificity") is aligned to the left

7. Edit the Page created in Step 1.

8. Click Edit with Page Builder

9. Replace HTML Code contents with:

   <!-- WYSIWYG Content -->
   <style type="text/css">
       #html-body .css__specificity {
           text-align: center;
       }
   </style>

10. Click Save

11. Browse to your newly created CMS Page again

12. Confirm Heading ("CSS Specificity") is aligned to the center

Page: https://588-manual-tests-dg3iscy-vzsrtettsztvg.us-4.magentosite.cloud/css-specificity

• [x] CSS Responsive Styling

  1. Create a new Page (Content » Pages » Add New Page)
  2. Click Edit with Page Builder
  3. Add Heading and HTML Code content types, and configure with the following:

  Content Type	Label	Value
  Heading	Heading Type	H2
  	Heading Text	CSS Responsive Styling
  	Alignment	Default
  	Border	None
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	css__responsive-styling
  	Margins and Padding	Default
  HTML Code	WYSIWYG	See Below
  	Alignment	Default
  	Border	Default
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	Default

  <!-- WYSIWYG Content -->
  <style type="text/css">
      #html-body .css__responsive-styling {
          color: #0af;
          font-weight: 700;
      }
  
      #html-body .css__responsive-styling:after {
          color: #fa0;
          content: ' for XS';
      }
  
      @media (min-width: 576px) {
          #html-body .css__responsive-styling:after {
              content: ' for SM';
          }
      }
  
      @media (min-width: 768px) {
          #html-body .css__responsive-styling:after {
              content: ' for MD';
          }
      }
  
      @media (min-width: 992px) {
          #html-body .css__responsive-styling:after {
              content: ' for LG';
          }
      }
  
      @media (min-width: 1200px) {
          #html-body .css__responsive-styling:after {
              content: ' for XL';
          }
      }
  </style>

5. Click Save
6. Browse to your newly created CMS Page
7. Confirm Heading ("CSS Responsive Styling") is:
   • Blue #00aaff
   • Bold
8. Confirm that Heading ("CSS Responsive Styling") has been appended with a viewport indicator:
   • Content: "for XS", "for SM", "for MD", "for LG", or "for XL"
   • Orange #ffaa00
9. Resize the browser window below (or use device emulation to achieve the same result)
10. Confirm that Heading ("CSS Responsive Styling") appended viewport indicator changes according to the viewport size Page: https://588-manual-tests-dg3iscy-vzsrtettsztvg.us-4.magentosite.cloud/css-responsive-styling

• [x] Custom Content Types

  1. Install Page Builder Examples
  2. Create a new Page (Content » Pages » Add New Page)
  3. Click Edit with Page Builder
  4. Add Heading and HTML Code content types, and configure with the following:

  Content Type	Label	Value
  Heading	Heading Type	H2
  	Heading Text	Custom Content Types
  	Alignment	Left
  	Border	None
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	Default
  Quote	Quote	Use the Force, Harry
  	Quote Color	Blue
  	Author	Gandalf
  	WYSIWYG	Default
  	Background Image	Select from Gallery
  	Background Mobile Image	Select from Gallery
  	Background Size	Contain
  	Background Position	Center
  	Background Attachment	Default
  	Background Repeat	Default
  	Alignment	Center
  	Border	Default
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	Default

5. Click Save

6. Browse to your newly created CMS Page

7. Confirm Quote appears centred, converted styles (to internal CSS)

   • [x] Inline Styles in PWA Studio (Requires PWA Studio)

8. Create a new Page (Content » Pages » Add New Page)

9. Click Edit with Page Builder

10. Add Heading and HTML Code content types, and configure with the following:

    Content Type	Label	Value
    Heading	Heading Type	H2
    	Heading Text	Inline Styles in PWA Studio
    	Alignment	Center
    	Border	Solid
    	Border Color	00aaff
    	Border Width	1
    	Border Radius	Default
    	CSS Classes	Default
    	Margins and Padding	20 20 20 20 10 10 10 10

11. Click Save

12. Browse to your newly created CMS Page within PWA Studio

13. Confirm Heading appears centred, and contains inline styles (not internal CSS)

14. Copy database field from Migration of Existing Page Builder Content Manual Test and verify each content type in Venia

Before:

After:

Automated MFTF Tests

• [x] Created Tests

N/A

• [x] Amended Tests

Note: This list doesn't include modifications to existing Data, Action Groups, or Sections.

1. PageBuilderCmsBlockAddAndEditRowColumnSlideTest
2. PageBuilderCmsBlockVerifyCanDuplicateContentTypesFromOnHoverOptionMenusTest
3. PageBuilderCmsBlockVerifyCanEditContentTypesFromOnHoverOptionMenusTest
4. PageBuilderCatalogProductAddAndEditRowColumnSlideTest
5. PageBuilderCatalogProductVerifyCanDuplicateContentTypesFromOnHoverOptionMenusTest
6. PageBuilderCatalogProductVerifyCanEditContentTypesFromOnClickOptionMenusTest
7. PageBuilderCatalogProductVerifyCanEditContentTypesFromOnHoverOptionMenusTest
8. PageBuilderWorksForEachCatalogProductAttributeTest
9. AdvancedConfigurationFunctionalAlignmentTest
10. AdvancedConfigurationFunctionalAllAttributesTest
11. AdvancedConfigurationFunctionalBorder1Test
12. AdvancedConfigurationFunctionalBorder2Test
13. AdvancedConfigurationFunctionalBorderColorTest
14. AdvancedConfigurationFunctionalBorderRadiusTest
15. AdvancedConfigurationFunctionalBorderWidth500Test
16. AdvancedConfigurationFunctionalBorderWidthTest
17. AdvancedConfigurationFunctionalCSSClassesTest
18. AdvancedConfigurationFunctionalMargins500Test
19. AdvancedConfigurationFunctionalMarginsTest
20. AdvancedConfigurationFunctionalPadding500Test
21. AdvancedConfigurationFunctionalPaddingTest
22. AdvancedConfigurationInvalidBorderRadiusTest
23. AdvancedConfigurationInvalidBorderWidthTest
24. AdvancedConfigurationInvalidMarginsTest
25. AdvancedConfigurationInvalidPaddingTest
26. BackgroundAttachmentFixedTest
27. BackgroundAttachmentScrollTest
28. BackgroundColorEmptyTest
29. BackgroundColorHSLTest
30. BackgroundColorHSVTest
31. BackgroundColorHexTest
32. BackgroundColorInvalidTest
33. BackgroundColorPlainTextTest
34. BackgroundColorRGBTest
35. BackgroundColorRGBaTest
36. BackgroundImageGIFTest
37. BackgroundImageInvalidFileSizeTest
38. BackgroundImageInvalidFileTypeTest
39. BackgroundImageJPGTest
40. BackgroundImagePNGTest
41. BackgroundImageSelectFromGalleryJPGTest
42. BackgroundImageSpecialCharactersTest
43. BackgroundMobileImageGIFTest
44. BackgroundMobileImageInvalidFileSizeTest
45. BackgroundMobileImageInvalidFileTypeTest
46. BackgroundMobileImageJPGTest
47. BackgroundMobileImagePNGTest
48. BackgroundMobileImageSelectFromGalleryJPGTest
49. BackgroundMobileImageSpecialCharactersTest
50. BackgroundPositionBottomCenterTest
51. BackgroundPositionBottomLeftTest
52. BackgroundPositionBottomRightTest
53. BackgroundPositionCenterLeftTest
54. BackgroundPositionCenterRightTest
55. BackgroundPositionCenterTest
56. BackgroundPositionTopCenterTest
57. BackgroundPositionTopLeftTest
58. BackgroundPositionTopRightTest
59. BackgroundRepeatDisabledTest
60. BackgroundRepeatEnabledTest
61. BackgroundSizeAutoTest
62. BackgroundSizeContainTest
63. BackgroundSizeCoverTest
64. BannerContentBlockDeleteImageTest
65. ValidateShowHideOnBannerTest
66. BlockRenderDividerThroughBlockContentTypeTest
67. TextHeightConsistencyBetweenContentTypeAndBlockOnStorefrontTest
68. BlockRenderColumnFullHeightAppearanceThroughBlockContentTypeTest
69. BlockRenderContainedRowMinHeightThroughBlockContentTypeTest
70. BlockRenderFullBleedRowMinHeightThroughBlockContentTypeTest
71. BlockRenderFullWidthRowMinHeightThroughBlockContentTypeTest
72. BlockRenderRowContainedAppearanceThroughBlockContentTypeTest
73. BlockRenderRowContainedAppearanceWithParallaxThroughBlockContentTypeTest
74. BlockRenderRowFullBleedAppearanceThroughBlockContentTypeTest
75. BlockRenderRowFullBleedAppearanceWithParallaxThroughBlockContentTypeTest
76. BlockRenderRowFullWidthAppearanceThroughBlockContentTypeTest
77. BlockRenderRowFullWidthAppearanceWithParallaxThroughBlockContentTypeTest
78. BlockRenderTabsThroughBlockContentTypeTest
79. BlockRowContentIsVerticallyAlignedTest
80. BlockImageIsRightAlignedTest
81. BlockRenderBannerCollageCenterMinHeightThroughBlockContentTypeTest
82. BlockRenderBannerCollageCenteredAppearanceThroughBlockContentTypeTest
83. BlockRenderBannerCollageLeftAppearanceThroughBlockContentTypeTest
84. BlockRenderBannerCollageLeftMinHeightThroughBlockContentTypeTest
85. BlockRenderBannerCollageRightAppearanceThroughBlockContentTypeTest
86. BlockRenderBannerCollageRightMinHeightThroughBlockContentTypeTest
87. BlockRenderBannerPosterAppearanceThroughBlockContentTypeTest
88. BlockRenderBannerPosterMinHeightThroughBlockContentTypeTest
89. BlockRenderSlideItemCollageCenterAppearanceThroughBlockContentTypeTest
90. BlockRenderSlideItemCollageLeftAppearanceThroughBlockContentTypeTest
91. BlockRenderSlideItemCollageRightAppearanceThroughBlockContentTypeTest
92. BlockRenderSlideItemPosterAppearanceThroughBlockContentTypeTest
93. BlockRenderSliderMinHeightWithCollageCenterSlideMinHeightThroughBlockContentTypeTest
94. BlockRenderSliderMinHeightWithCollageLeftSlideMinHeightThroughBlockContentTypeTest
95. BlockRenderSliderMinHeightWithCollageRightSlideMinHeightThroughBlockContentTypeTest
96. BlockRenderSliderMinHeightWithPosterSlideMinHeightThroughBlockContentTypeTest
97. BlockRenderSliderThroughBlockContentTypeTest
98. BlockDuplicateTest
99. BlockUpdateAdvancedConfigurationValuesTest
100. BlockValidateAdvancedConfigurationDefaultValuesTest
101. ValidateShowHideOnBlockTest
102. ButtonGroupDuplicateTest
103. ButtonGroupUpdateAdvancedConfigurationValuesTest
104. ButtonGroupUpdateAllAttributesTest
105. ButtonGroupValidateAdvancedConfigurationDefaultValuesTest
106. ValidateShowHideOnButtonsOnStackedAppearanceTest
107. ValidateShowHideOnButtonsTest
108. ButtonItemDuplicateTest
109. ButtonItemUpdateAdvancedConfigurationValuesTest
110. ButtonItemValidateAdvancedConfigurationDefaultValuesTest
111. ColumnValidateBackgroundFormTest
112. ColumnValidateBackgroundSectionDefaultValuesTest
113. ColumnAppearanceSettingsShowOnFrontendTest
114. ColumnBackgroundColorPreservedTest
115. ColumnContentIsVerticallyAlignedTest
116. ColumnContentIsVerticallyAlignedWithAppearanceAndDifferentMinimumHeightsTest
117. ColumnFullHeightShowsOnFrontendTest
118. ColumnSettingsAppearInAdminTest
119. ColumnValidateDefaultAndUpdateAdvancedConfigurationDefaultValuesTest
120. RemovingColumnDistributesWidthTest
121. ValidateColumnChildHideShowTest
122. DividerEmptyLineColorTest
123. DividerEmptyLineThicknessTest
124. DividerHSLALineColorTest
125. DividerHSLLineColorTest
126. DividerHexLineColorTest
127. DividerInvalidLineColorTest
128. DividerNegativeLineThicknessTest
129. DividerNormalLineThicknessTest
130. DividerRGBALineColorTest
131. DividerRGBLineColorTest
132. DividerYellowLineColorTest
133. DividerZeroLineThicknessTest
134. DividerAddToCMSPageTest
135. DividerDuplicateTest
136. DividerNoRequiredTest
137. DividerUpdateAdvancedConfigurationValuesTest
138. DividerValidateAdvancedConfigurationDefaultValuesTest
139. DividerValidateGeneralDefaultValuesTest
140. ValidateShowHideOnDividerTest
141. HeadingDuplicateTest
142. HeadingUpdateAdvancedConfigurationValuesTest
143. HeadingValidateAdvancedConfigurationDefaultValuesTest
144. ValidateShowHideOnHeadingTest
145. HtmlDuplicateTest
146. HtmlUpdateAdvancedConfigurationValuesTest
147. HtmlValidateAdvancedConfigurationDefaultValuesTest
148. ValidateShowHideOnHtmlTest
149. ImageAddImageContentTypeToCMSPageTest
150. ImageUpdateAdvancedConfigurationValuesTest
151. ImageValidateAdvancedConfigurationDefaultValuesTest
152. ValidateShowHideOnImageTest
153. MapAddAllAttributesTest
154. MapDefaultStateTest
155. MapDuplicateTest
156. MapUpdateAdvancedConfigurationValuesTest
157. MapValidateAdvancedConfigurationDefaultValuesTest
158. MapHeightValidCharacterSetsTest
159. MapShowControlsEnabledAndDisabledTest
160. AdminPageBuilderProductsCarouselUpdateAdvancedConfigurationValuesTest
161. ProductsValidateAdvancedConfigurationDefaultValuesTest
162. ValidateShowHideOnProductsTest
163. ProductsUpdateAdvancedConfigurationValuesTest
164. RowValidateBackgroundFormTest
165. RowValidateBackgroundSectionDefaultValuesTest
166. RowContentIsVerticallyAlignedTest
167. RowContentIsVerticallyAlignedWithDifferentMinimumHeightsTest
168. RowMinHeightInvalidInputsTest
169. RowValidateLayoutSectionDefaultValuesTest
170. RowAddAdditionalRowAboveInitialRowTest
171. RowAddAdditionalRowBelowInitialRowTest
172. RowDuplicateTest
173. RowMinimumHeightIsObeyedWhenParallaxIsEnabledTest
174. RowUpdateAdvancedConfigurationValuesTest
175. RowValidateAdvancedConfigurationDefaultValuesTest
176. RowValidateBorderOnAppearanceChangeTest
177. RowWithParallaxEnabledStillShowsBackgroundImageAfterAddingColumnToItTest
178. ValidateShowHideOnRowTest
179. SlideCollageCenteredMobileWithoutMobileImageValuesTest
180. SlideItemCollageCenterUpdateAdvancedConfigurationValuesTest
181. SlideItemCollageCenterUpdateAllAttributesTest
182. SlideItemCollageLeftUpdateAdvancedConfigurationValuesTest
183. SlideItemCollageLeftUpdateAllAttributesTest
184. SlideItemCollageRightUpdateAdvancedConfigurationValuesTest
185. SlideItemCollageRightUpdateAllAttributesTest
186. SlideItemPosterButtonNeverShowTest
187. SlideItemPosterButtonOnHoverTest
188. SlideItemPosterOverlayAndButtonOnHoverTest
189. SlideItemPosterOverlayNeverShowTest
190. SlideItemPosterOverlayOnHoverTest
191. SlideItemPosterUpdateAdvancedConfigurationValuesTest
192. SlideItemPosterUpdateAllAttributesTest
193. SliderPosterValidatePaddingOnAppearanceChangeTest
194. SlideItemBackgroundColorAlwaysDisplayedTest
195. SlideItemBackgroundSectionDefaultsTest
196. SlideItemContentSectionDefaultsTest
197. SlideItemDeleteImageTest
198. SlideItemUploadImageFromStageTest
199. SlideItemValidateAdvancedConfigurationDefaultValuesTest
200. SlideItemVerifyEmptySlideDefaultStateTest
201. SliderAllAttributesTest
202. SliderDuplicateTest
203. SliderMoveSliderTest
204. SliderSettingsSectionDefaultsTest
205. SliderUpdateAdvancedConfigurationValuesTest
206. SliderValidateAdvancedConfigurationDefaultValuesTest
207. SliderValidateShowHideOnSliderTest
208. TabsAdvancedSettingsApplyInAdminPreviewAndStorefrontTest
209. TabsDuplicateTabWithCustomizedTabSettingsTest
210. TabsMinHeightAppliesInAdminPreviewAndStorefrontTest
211. TabsNavAlignCenterAppliesInAdminPreviewAndStorefrontTest
212. TabsNavAlignRightAppliesInAdminPreviewAndStorefrontTest
213. TabsValidateAdvancedConfigurationDefaultValuesTest
214. ValidateShowHideOnTabsTest
215. ValidateTabChildHideShowTest
216. TabItemValidateBackgroundFormTest
217. TabItemValidateBackgroundSectionDefaultValuesTest
218. AddTabsWithBackgroundColorAndMinHeightTest
219. AddTabsWithBackgroundGifBottomAutoContainScrollFixedYesBackgroundRepeatAfterSaveTest
220. AddTabsWithBackgroundGifCenterAutoContainFixedNoBackgroundRepeatTest
221. AddTabsWithBackgroundJpgBottomCoverScrollFixedNoBackgroundRepeatTest
222. AddTabsWithBackgroundJpgCenterAutoContainScrollFixedNoBackgroundRepeatTest
223. AddTabsWithBackgroundJpgCenterCoverScrollFixedNoBackgroundRepeatTest
224. AddTabsWithBackgroundJpgCenterCoverScrollFixedYesBackgroundRepeatTest
225. AddTabsWithBackgroundJpgTopCoverScrollFixedNoBackgroundRepeatTest
226. AddTabsWithBackgroundJpgTopCoverScrollFixedYesBackgroundRepeatTest
227. AddTabsWithBackgroundPngBottomAutoContainScrollNoBackgroundRepeatAfterSaveTest
228. AddTabsWithBackgroundPngTopAutoContainScrollFixedYesBackgroundRepeatTest
229. DefaultTabItemStateOnAddingNewTabTest
230. TabItemUpdateAdvancedConfigurationValuesTest
231. CanAddColumnToTabTest
232. CanAddDividerToTabTest
233. CanAddSliderToSecondaryTabTest
234. CanAddSliderToTabTest
235. TabsRemoveConfiguredTabsContainerWithConfirmationTest
236. TabContentIsVerticallyAlignedBottomTest
237. TabContentIsVerticallyAlignedBottomWithMinimumHeightsTest
238. TabContentIsVerticallyAlignedCenterTest
239. TabContentIsVerticallyAlignedCenterWithMinimumHeightTest
240. TabContentIsVerticallyAlignedTopTest
241. TabContentIsVerticallyAlignedTopWithMinimumHeightTest
242. TabItemMinHeightInvalidInputsTest
243. TabItemValidateLayoutSectionDefaultValuesTest
244. TextDuplicateTest
245. TextHeightConsistencyBetweenStageAndStorefrontTest
246. TextUpdateAdvancedConfigurationValuesTest
247. TextValidateAdvancedConfigurationDefaultValuesTest
248. ValidateShowHideOnTextTest
249. ValidateShowHideOnVideoTest
250. VideoDuplicateTest
251. VideoUpdateAdvancedConfigurationValuesTest
252. VideoValidateAdvancedConfigurationDefaultValuesTest

Manual Hip Tests

N/A

[m2-assistant[bot]]

Hi @tkacheva. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[omiroshnichenko]

Sub-tasks:

• [x] 1. Support of pre-existent content - create an upgrade patch to replace inline styles with style blocks.(https://github.com/magento/magento2-page-builder/pull/396/ example) @bluemwhitew
• [x] 2. Implement csso conversion of the inline styles on the page builder(frontend) side. @omiroshnichenko
• [x] 3. Local Load Performance testing.
  • empty, small, medium, large timing
  • @dhaecker provide data snapshots
  • @omiroshnichenko prepare a patch for perf-generator to generate PB data. PB-Performance-generator.txt
• [x] 4. Change css selectors in less files to be less specific(storefront)
• [x] 5. Change css selectors in less files to be less specific(adminhtml)
• [x] 6. Run Performance Acceptance Tests build
• [x] 7. Fix functional tests @hannahnida
• [ ] 8. Merge PWA PR https://github.com/magento/pwa-studio/pull/2694
• [x] 9. Create Test Plan @bluemwhitew
  • check each content type on absence of inline style attribute @dhaecker
• [x] 10. Run visual comparison tests against the resgression tests data @omiroshnichenko

[bdenham]

To @bluemwhitew, @omiroshnichenko, @lbvaimo: Can one of you add 2 or 3 use cases for how this changes what developers can do with CSS vs what they had to do before. From that, I can develop all the specific docs for Page Builder. And document the more general specificity rules and what has changed with this story. Thanks!

[omiroshnichenko]

@bdenham We have 3 levels of styling. They are applying in the order:

1. Page Builder internal .less styles
2. Page Builder content type specific styles
3. Extension developer styles

Before this story, we had the next specificity level:

1. classes, arguments, and tags. (0-n-n)
2. inline styles. (1-0-0-0)
3. !important suffix(very bad practice). (1-0-0-0-0)

After this story, we will have the next specificity level:

1. classes, arguments, and tags. (0-n-n)
2. id and class. (1-1-0)
3. id, classes, arguments, and tags. ( 1-n-n)

More explanations about CSS specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[bluemwhitew]

Batch conversion test results per 0c3aa56c4015dec9741d4fe53245727bec79c542 and implementing the patch included above:

Real (Seconds) | User (Seconds) | Sys (Seconds) | Profile | page_builder_templates | cms_pages | cms_blocks | dynamic_blocks
-- | -- | -- | -- | -- | -- | -- | --
32.157 | 23.551 | 2.208 | Small | 10 | 40 | 20 | 20
26.7 | 19.422 | 1.95 | Small | 10 | 40 | 20 | 20
34.23 | 26.133 | 2.479 | Small | 10 | 40 | 20 | 20
26.939 | 19.076 | 1.892 | Small | 20 | 80 | 40 | 40
28.592 | 21.736 | 2.005 | Small | 20 | 80 | 40 | 40
27.195 | 19.154 | 1.846 | Small | 20 | 80 | 40 | 40
27.402 | 19.422 | 2.02 | Small | 40 | 160 | 80 | 80
27.63 | 19.577 | 1.969 | Small | 40 | 160 | 80 | 80
24.716 | 18.617 | 1.546 | Small | 40 | 160 | 80 | 80
29.989 | 20.295 | 2.105 | Small | 80 | 320 | 160 | 160
27.952 | 19.605 | 2.003 | Small | 80 | 320 | 160 | 160
30.742 | 21.371 | 2.166 | Small | 80 | 320 | 160 | 160
35.218 | 19.893 | 2.314 | Small | 400 | 1600 | 800 | 800
38.077 | 21.094 | 2.391 | Small | 400 | 1600 | 800 | 800
29.263 | 18.732 | 1.68 | Small | 400 | 1600 | 800 | 800
36.885 | 19.874 | 2.067 | Small | 800 | 3200 | 1600 | 1600
40.181 | 19.777 | 2.403 | Small | 800 | 3200 | 1600 | 1600
40.193 | 20.687 | 2.45 | Small | 800 | 3200 | 1600 | 1600
48.571 | 20.585 | 2.25 | Medium | 10 | 40 | 20 | 20
46.627 | 20.205 | 1.961 | Medium | 10 | 40 | 20 | 20
45.311 | 20.172 | 1.945 | Medium | 10 | 40 | 20 | 20
47.764 | 19.9 | 1.911 | Medium | 20 | 80 | 40 | 40
57.912 | 22.444 | 2.965 | Medium | 20 | 80 | 40 | 40
55.087 | 22.886 | 2.712 | Medium | 20 | 80 | 40 | 40
62.22 | 21.649 | 2.719 | Medium | 40 | 160 | 80 | 80
54.25 | 23.507 | 2.873 | Medium | 40 | 160 | 80 | 80
53.927 | 21.675 | 2.434 | Medium | 40 | 160 | 80 | 80
63.329 | 23.72 | 2.886 | Medium | 80 | 320 | 160 | 160
56.759 | 20.729 | 2.642 | Medium | 80 | 320 | 160 | 160
47.709 | 20.467 | 2.055 | Medium | 80 | 320 | 160 | 160
56.801 | 21.372 | 2.171 | Medium | 400 | 1600 | 800 | 800
54.378 | 22.532 | 2.452 | Medium | 400 | 1600 | 800 | 800
54.944 | 20.859 | 2.651 | Medium | 400 | 1600 | 800 | 800
54.193 | 20.162 | 2.062 | Medium | 800 | 3200 | 1600 | 1600
72.746 | 24.815 | 3.046 | Medium | 800 | 3200 | 1600 | 1600
73.793 | 25.788 | 3.287 | Medium | 800 | 3200 | 1600 | 1600
135.859 | 25.754 | 5.211 | Large | 10 | 40 | 20 | 20
128.923 | 24.232 | 4.701 | Large | 10 | 40 | 20 | 20
116.248 | 24.504 | 4.58 | Large | 10 | 40 | 20 | 20
125.958 | 24.007 | 4.635 | Large | 20 | 80 | 40 | 40
114.061 | 24.626 | 4.767 | Large | 20 | 80 | 40 | 40
120.952 | 24.327 | 4.566 | Large | 20 | 80 | 40 | 40
117.224 | 23.832 | 4.568 | Large | 40 | 160 | 80 | 80
114.009 | 23.979 | 4.66 | Large | 40 | 160 | 80 | 80
116.945 | 23.463 | 4.495 | Large | 40 | 160 | 80 | 80
112.454 | 24.512 | 4.753 | Large | 80 | 320 | 160 | 160
119.145 | 23.991 | 4.847 | Large | 80 | 320 | 160 | 160
116.214 | 24.406 | 4.686 | Large | 80 | 320 | 160 | 160
149.195 | 38.856 | 6.582 | Large | 400 | 1600 | 800 | 800
123.006 | 25.647 | 4.783 | Large | 400 | 1600 | 800 | 800
131.025 | 26.974 | 4.818 | Large | 400 | 1600 | 800 | 800
173.643 | 32.308 | 5.589 | Large | 800 | 3200 | 1600 | 1600
118.768 | 23.996 | 4.583 | Large | 800 | 3200 | 1600 | 1600
146.792 | 25.899 | 5.258 | Large | 800 | 3200 | 1600 | 1600
164.808 | 28.389 | 7.417 | Extra Large | 10 | 40 | 20 | 20
162.64 | 28.661 | 7.799 | Extra Large | 10 | 40 | 20 | 20
175.533 | 39.321 | 9.509 | Extra Large | 10 | 40 | 20 | 20
171.979 | 27.547 | 6.781 | Extra Large | 20 | 80 | 40 | 40
171.98 | 27.507 | 7.049 | Extra Large | 20 | 80 | 40 | 40
172.59 | 27.569 | 6.938 | Extra Large | 20 | 80 | 40 | 40
217.556 | 29.771 | 7.069 | Extra Large | 40 | 160 | 80 | 80
239.41 | 29.476 | 7.801 | Extra Large | 40 | 160 | 80 | 80
220.093 | 29.183 | 7.419 | Extra Large | 40 | 160 | 80 | 80
172.383 | 27.534 | 6.799 | Extra Large | 80 | 320 | 160 | 160
173.321 | 27.537 | 6.968 | Extra Large | 80 | 320 | 160 | 160
173.33 | 27.469 | 7.044 | Extra Large | 80 | 320 | 160 | 160
220.286 | 36.888 | 8.67 | Extra Large | 400 | 1600 | 800 | 800
175.64 | 27.516 | 7.101 | Extra Large | 400 | 1600 | 800 | 800
201.97 | 28.532 | 7.376 | Extra Large | 400 | 1600 | 800 | 800
190.75 | 28.385 | 7.011 | Extra Large | 800 | 3200 | 1600 | 1600
183.461 | 28.572 | 7.194 | Extra Large | 800 | 3200 | 1600 | 1600
226.562 | 34.163 | 8.728 | Extra Large | 800 | 3200 | 1600 | 1600

Tested using the following:

cd ~/www/magento/magento2-page-builder
git checkout develop
sh ~/scripts/install.sh pb-b2b # Install Script
cd ~/www/magento/magento2ce
bin/magento setup:upgrade
composer require phpgt/dom:dev-master
cd ~/www/magento/magento2-page-builder
git checkout 558_1_content-type-style-attribute-removal
cd ~/www/magento/magento2ce
time bin/magento setup:upgrade --keep-generated # Conversion Test Results

558.xlsx XLS included (see attached).

/cc @omiroshnichenko

[bluemwhitew]

Manual Testing Scenarios

• [x] Migration of Existing Page Builder Content

Update working as expected. No visual differences, and no inline styles after conversion to csso-alternative branch.

Page: https://588-manual-tests-dg3iscy-vzsrtettsztvg.us-4.magentosite.cloud/issue-558

Ghost Inspector: https://ghostinspector-prod.s3.amazonaws.com/screenshots/bdf4afb7-bf2b-40f7-81d3-2c74cfa143a3-compareOriginal.png

• [x] CSS Specificity

Page: https://588-manual-tests-dg3iscy-vzsrtettsztvg.us-4.magentosite.cloud/css-specificity

• [x] CSS Responsive Styling

Page: https://588-manual-tests-dg3iscy-vzsrtettsztvg.us-4.magentosite.cloud/css-responsive-styling

[bluemwhitew]

• [x] Custom Content Types

  1. Install Page Builder Examples
  2. Create a new Page (Content » Pages » Add New Page)
  3. Click Edit with Page Builder
  4. Add Heading and HTML Code content types, and configure with the following:

  Content Type	Label	Value
  Heading	Heading Type	H2
  	Heading Text	Custom Content Types
  	Alignment	Left
  	Border	None
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	Default
  Quote	Quote	Use the Force, Harry
  	Quote Color	Blue
  	Author	Gandalf
  	WYSIWYG	Default
  	Background Image	Select from Gallery
  	Background Mobile Image	Select from Gallery
  	Background Size	Contain
  	Background Position	Center
  	Background Attachment	Default
  	Background Repeat	Default
  	Alignment	Center
  	Border	Default
  	Border Color	Default
  	Border Width	Default
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	Default

5. Click Save
6. Browse to your newly created CMS Page
7. Confirm Quote appears centred, converted styles (to internal CSS)

[bluemwhitew]

• [x] Inline Styles in PWA Studio (Requires PWA Studio)

  1. Create a new Page (Content » Pages » Add New Page)
  2. Click Edit with Page Builder
  3. Add Heading and HTML Code content types, and configure with the following:

  Content Type	Label	Value
  Heading	Heading Type	H2
  	Heading Text	Inline Styles in PWA Studio
  	Alignment	Center
  	Border	Solid
  	Border Color	00aaff
  	Border Width	1
  	Border Radius	Default
  	CSS Classes	Default
  	Margins and Padding	20 20 20 20 10 10 10 10

4. Click Save
5. Browse to your newly created CMS Page within PWA Studio
6. Confirm Heading appears centred, and contains inline styles (not internal CSS)
7. Copy database field from Migration of Existing Page Builder Content Manual Test and verify each content type in Venia

Before:

After: