Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Developer can style content types output differently per viewport #558

Closed
7 tasks done
tkacheva opened this issue Jul 8, 2020 · 8 comments · Fixed by #621, #623, #651 or #656
Closed
7 tasks done

Developer can style content types output differently per viewport #558

tkacheva opened this issue Jul 8, 2020 · 8 comments · Fixed by #621, #623, #651 or #656

Comments

@tkacheva
Copy link
Collaborator

tkacheva commented Jul 8, 2020

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:
Screenshot 2020-10-15 at 15 57 49

After:
Screenshot 2020-10-15 at 15 59 23

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
Copy link

m2-assistant bot commented Jul 8, 2020

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


@omiroshnichenko
Copy link
Contributor

omiroshnichenko commented Jul 9, 2020

Sub-tasks:

@hannahnida hannahnida self-assigned this Aug 25, 2020
@bluemwhitew bluemwhitew self-assigned this Aug 25, 2020
bluemwhitew added a commit that referenced this issue Aug 27, 2020
- Adding `removeAttribute()` Method
bluemwhitew added a commit that referenced this issue Aug 27, 2020
- Adding Converter to Remove `style` Attribute(s) from Page Builder
bluemwhitew added a commit that referenced this issue Aug 27, 2020
hannahnida added a commit that referenced this issue Sep 8, 2020
hannahnida added a commit that referenced this issue Sep 8, 2020
hannahnida added a commit that referenced this issue Sep 9, 2020
bluemwhitew added a commit that referenced this issue Sep 9, 2020
- Refactoring Using DOMDocument
- Adding `generateDataAttribute` Method
- Adding `generateInternalStyles` Method
- Modifying Ordering of Expected vs. Actual in PageBuilderStripStylesTest
bluemwhitew added a commit that referenced this issue Sep 9, 2020
omiroshnichenko added a commit that referenced this issue Oct 19, 2020
…ibute-removal

[WIP] #558 #7 Developer can style content types output differently per viewport - Fix broken tests
hannahnida added a commit to hannahnida/magento2 that referenced this issue Oct 20, 2020
…output differently per viewport - Added body id in Storefront, in tinymce4 in admin
hannahnida added a commit to hannahnida/magento2 that referenced this issue Oct 20, 2020
…output differently per viewport - Fixed quote marks
@bluemwhitew bluemwhitew mentioned this issue Oct 20, 2020
5 tasks
@dhaecker dhaecker linked a pull request Oct 20, 2020 that will close this issue
5 tasks
hannahnida added a commit to hannahnida/magento2 that referenced this issue Oct 20, 2020
…output differently per viewport - Fixed tinymce image selector
hannahnida added a commit to hannahnida/magento2 that referenced this issue Oct 20, 2020
…output differently per viewport - Fixed tinymce image selector
hannahnida added a commit to hannahnida/magento2 that referenced this issue Oct 20, 2020
…t types output differently per viewport - Fixed tinymce image selector"

This reverts commit 754eb5a.
omiroshnichenko added a commit that referenced this issue Oct 20, 2020
 - remove redundant layout
 - revert column-group styles back
omiroshnichenko added a commit that referenced this issue Oct 20, 2020
 - remove redundant layout
 - revert column-group styles back
dpatil-magento added a commit to magento/pwa-studio that referenced this issue Nov 2, 2020
)

* magento/magento2-page-builder#558: Developer can style content types output differently per viewport
- convert style blocks to inline styles to prevent BIC changes

* magento/magento2-page-builder#558: Developer can style content types output differently per viewport
- fix code style

Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
@engcom-Hotel engcom-Hotel moved this to Done in Backlog Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment