Add: Frontend section presets output

[jorgefilipecosta]

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:

[jorgefilipecosta]

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!

[ockham]

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

cc/ @michalczaplinski

[michalczaplinski]

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

[oandregal]

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.

[Mamaduka]

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