This repository has been archived by the owner on Nov 19, 2024. It is now read-only.
[DOCS] 558: Page Builder styling improvements. #15
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bdenham
added
documentation
dhaecker
reviewed
Nov 17, 2020
|
|
||
| 1. **Html-body id**. The first thing to notice is the CSS `id=html-body` assigned to Magento storefront pages. Page Builder uses this `id` to construct all the CSS selectors it applies to its content types. | ||
|
|
||
| 2. **Internal style block**. Page Builder adds all the unique `data-pb-style` attribute styles (one for each content type on the page) to a single `<style>` block. This creates what's called an internal stylesheet for the page. In this example, the page contains three content types. So Page Builder has added three CSS rulesets to the `<style>` block, one for each content type on the page. If the page contained 10 content types, the `<style>` block would contain 10 CSS rulesets. |
There was a problem hiding this comment.
I would be less specific about the count of rulesets because they are not aligned with a number of content types
|
|
||
| 2. **Internal style block**. Page Builder adds all the unique `data-pb-style` attribute styles (one for each content type on the page) to a single `<style>` block. This creates what's called an internal stylesheet for the page. In this example, the page contains three content types. So Page Builder has added three CSS rulesets to the `<style>` block, one for each content type on the page. If the page contained 10 content types, the `<style>` block would contain 10 CSS rulesets. | ||
|
|
||
| 3. **Applied styles**. The dynamic `data-pb-style` attributes on the content types match their respective CSS styles in the `<style>` block, and the browser does the rest. For custom content types (and many native content types), Page Builder applies the `data-pb-style` attribute to the top-level container element. However, for some content types, like the Row shown in this example, the `data-pb-style` attribute is added to an inner element. |
There was a problem hiding this comment.
We are adding data-pb-style to each element in content type which contains styles
|
|
||
|  | ||
|
|
||
| This CSS selector results in a CSS specificity value of 120, which overrides the 110 specificity for Page Builder styles, while keeping the specificity relatively low for any additional overrides, as needed. |
There was a problem hiding this comment.
I really like that you are adding specificity value to make it more understandable!
magento-devops-reposync-svc
pushed a commit
that referenced
this pull request
Jun 29, 2022
PageBuilder Release notes 244
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds documentation for the new Page Builder CSS styling described in magento/magento2-page-builder#558.
Preview
You must be logged into Adobe's AnyConnect VPN to view the following previews:
Overview topic: https://devdocs.magedevteam.com/77/page-builder/docs/styling/how-pagebuilder-styles-content.html
How to override topic: https://devdocs.magedevteam.com/77/page-builder/docs/styling/how-to-add-custom-styles.html