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

• 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

• 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

• 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>
   

4. Click Save

5. Browse to your newly created CMS Page

6. Confirm Heading ("CSS Responsive Styling") is:

   • Blue #00aaff
   • Bold

7. 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

8. Resize the browser window below (or use device emulation to achieve the same result)

9. 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

• 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)

• 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:

Automated MFTF Tests

• Created Tests

N/A

• 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]

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:

• 1. Support of pre-existent content - create an upgrade patch to replace inline styles with style blocks.([Owls] Extensions utilizing Page Builder as their content creation tool will break with upgrade #396 example) @bluemwhitew
• 2. Implement csso conversion of the inline styles on the page builder(frontend) side. @omiroshnichenko
• 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
• 4. Change css selectors in less files to be less specific(storefront)
• 5. Change css selectors in less files to be less specific(adminhtml)
• 6. Run Performance Acceptance Tests build
• 7. Fix functional tests @hannahnida
• 8. Merge PWA PR Developer can style content types output differently per viewport pwa-studio#2694
• 9. Create Test Plan @bluemwhitew
  - check each content type on absence of inline style attribute @dhaecker
• 10. Run visual comparison tests against the resgression tests data @omiroshnichenko