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

Add: Frontend section presets output #42124

Merged
merged 2 commits into from
Sep 23, 2022

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Jul 4, 2022

Part of #40318.

This PR allows a block to define the preset settings of its nested blocks using the same shape as theme.json.

Continuation of #40547.

Shape

<!-- wp:group {"settings":{"blocks":{"core/button":{"color":{"palette":{"custom":[{"slug":"button-red","color":"red","name":"button red"},{"slug":"button-blue","color":"blue","name":"button blue"}]}}}},"color":{"palette":{"custom":[{"slug":"global-aquamarine","color":"aquamarine","name":"Global aquamarine"},{"slug":"global-pink","color":"pink","name":"Global Pink"}]}}}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Leaf paragraph of inner group block.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"button-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-button-blue-background-color has-background wp-element-button">blue</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"button-red"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-button-red-background-color has-background wp-element-button">red</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"backgroundColor":"global-aquamarine"} -->
<p class="has-global-aquamarine-background-color has-background">global-aquamarine</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"global-pink"} -->
<p class="has-global-pink-background-color has-background">global-pink</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Formatted json:

{
   "settings":{
      "blocks":{
         "core/button":{
            "color":{
               "palette":{
                  "custom":[
                     {
                        "slug":"button-red",
                        "color":"red",
                        "name":"button red"
                     },
                     {
                        "slug":"button-blue",
                        "color":"blue",
                        "name":"button blue"
                     }
                  ]
               }
            }
         }
      },
      "color":{
         "palette":{
            "custom":[
               {
                  "slug":"global-aquamarine",
                  "color":"aquamarine",
                  "name":"Global aquamarine"
               },
               {
                  "slug":"global-pink",
                  "color":"pink",
                  "name":"Global Pink"
               }
            ]
         }
      }
   }
}

Engine output

.wp-block-level-presets-4884af9a06466a917323943b61ae5826, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 [class*="wp-block"], .wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 h1, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 h2, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 h3, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 h4, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 h5, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 h6, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 ol, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 ul, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 p, .wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-table > table{
    --wp--preset--color--global-aquamarine: aquamarine;
    --wp--preset--color--global-pink: pink;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link{
    --wp--preset--color--button-red: red;
    --wp--preset--color--button-blue: blue;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826.has-global-aquamarine-color,.wp-block-level-presets-4884af9a06466a917323943b61ae5826 *.has-global-aquamarine-color{
    color: var(--wp--preset--color--global-aquamarine) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826.has-global-pink-color,.wp-block-level-presets-4884af9a06466a917323943b61ae5826 *.has-global-pink-color{
    color: var(--wp--preset--color--global-pink) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826.has-global-aquamarine-background-color,.wp-block-level-presets-4884af9a06466a917323943b61ae5826 *.has-global-aquamarine-background-color{
    background-color: var(--wp--preset--color--global-aquamarine) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826.has-global-pink-background-color,.wp-block-level-presets-4884af9a06466a917323943b61ae5826 *.has-global-pink-background-color{
    background-color: var(--wp--preset--color--global-pink) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826.has-global-aquamarine-border-color,.wp-block-level-presets-4884af9a06466a917323943b61ae5826 *.has-global-aquamarine-border-color{
    border-color: var(--wp--preset--color--global-aquamarine) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826.has-global-pink-border-color,.wp-block-level-presets-4884af9a06466a917323943b61ae5826 *.has-global-pink-border-color{
    border-color: var(--wp--preset--color--global-pink) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link.has-button-red-color{
    color: var(--wp--preset--color--button-red) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link.has-button-blue-color{
    color: var(--wp--preset--color--button-blue) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link.has-button-red-background-color{
    background-color: var(--wp--preset--color--button-red) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link.has-button-blue-background-color{
    background-color: var(--wp--preset--color--button-blue) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link.has-button-red-border-color{
    border-color: var(--wp--preset--color--button-red) !important;
}
.wp-block-level-presets-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link.has-button-blue-border-color{
    border-color: var(--wp--preset--color--button-blue) !important;
}
  
 

What?

It follows what was defined in #40547. The presets of a section overwrite everything set on the theme.json, even block-specific presets, so for the global presets of a section, we need to overwrite any block-specific settings as discussed in the other PR, which makes a complex CSS rule.
It follows the algorithms that were discussed with @oandregal and @youknowriad.

Testing

I pasted the group block above in the editor and verified the output on the front was the one also shared above and identical to the following screenshot:
image

@jorgefilipecosta
Copy link
Member Author

Thank you a lot for the review @oandregal!

It seems the selectors for the CSS Custom Properties are scoped the other way around:

The parameters order was wrong on the last commit. It is fixed.

All the feedback was applied!

@jorgefilipecosta jorgefilipecosta merged commit 8b9df32 into trunk Sep 23, 2022
@jorgefilipecosta jorgefilipecosta deleted the add/frontend-section-presets-output branch September 23, 2022 19:44
@jorgefilipecosta jorgefilipecosta added the Needs PHP backport Needs PHP backport to Core label Sep 23, 2022
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 23, 2022
jorgefilipecosta added a commit to jorgefilipecosta/wordpress-develop that referenced this pull request Sep 23, 2022
Backports PHP changes in WordPress/gutenberg#42124 to the core. Adds the missing mechanism to output frontend styles of block level presets to the core.
Props mcsf, oandregal, dmsnell, draganescu.
See #56467.
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 26, 2022
Backports PHP changes in WordPress/gutenberg#42124 to the core. Adds the missing mechanism to output frontend styles of block level presets to the core.

Props mcsf, oandregal, dmsnell, draganescu.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54305


git-svn-id: http://core.svn.wordpress.org/trunk@53864 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 26, 2022
Backports PHP changes in WordPress/gutenberg#42124 to the core. Adds the missing mechanism to output frontend styles of block level presets to the core.

Props mcsf, oandregal, dmsnell, draganescu.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54305


git-svn-id: https://core.svn.wordpress.org/trunk@53864 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@ockham
Copy link
Contributor

ockham commented Sep 26, 2022

IIUC, we'll want to include this in GB 14.2 in order to unblock this wordpress-develop PR.

cc/ @michalczaplinski

@michalczaplinski michalczaplinski added the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Sep 26, 2022
@michalczaplinski
Copy link
Contributor

Cherry-picked this into release/14.2 in 09b46dd 👍

@michalczaplinski michalczaplinski removed the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Sep 26, 2022
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
Backports PHP changes in WordPress/gutenberg#42124 to the core. Adds the missing mechanism to output frontend styles of block level presets to the core.

Props mcsf, oandregal, dmsnell, draganescu.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54305 602fd350-edb4-49c9-b593-d223f7449a82
@oandregal
Copy link
Member

Hey, while working on #46579 I realized this PR was not backported to WordPress 6.1. When we land that PR and then backport to WordPress 6.2 everything will be fine, but I wanted to raise in case you think this should be ported for a potential WordPress 6.1.X release.

dmsnell added a commit that referenced this pull request Dec 16, 2022
…ement

When we introduced #42124 new block supports behavior we did so with a
PCRE replacement that opened the possibility for a few bugs related to
processing the HTML attributes. It was noted in that PR that this would
be a good candidate for the `WP_HTML_Tag_Processor`.

In this patch we're performing that replacement as follow-up work. This
should improve the reliability and hopefully the readability of what is
being done to the HTML as it renders.
dmsnell added a commit that referenced this pull request Jan 11, 2023
…pper.

When we introduced #42124 new block supports behavior we did so with a
PCRE replacement that opened the possibility for a few bugs related to
processing the HTML attributes. It was noted in that PR that this would
be a good candidate for the `WP_HTML_Tag_Processor`.

In this patch we're performing that replacement as follow-up work. This
should improve the reliability and hopefully the readability of what is
being done to the HTML as it renders.
@Mamaduka
Copy link
Member

Mamaduka commented Feb 6, 2023

@jorgefilipecosta, does this change have a WP core backport PR? Unfortunately, I wasn't able to find any.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Group Affects the Group Block [Block] Pattern Affects the Patterns Block Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants