gutenberg Add: Frontend section presets output

Part of https://github.com/WordPress/gutenberg/issues/40318.

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

Continuation of https://github.com/WordPress/gutenberg/pull/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 https://github.com/WordPress/gutenberg/pull/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:

Jul 04 '22 13:07 jorgefilipecosta

@jorgefilipecosta looks like something is wrong with the merge. maybe this needs a rebase off of a common ancestor of both branches? I think this branch has updates from trunk in it that the base branch doesn't.

Sep 15 '22 18:09 dmsnell

@jorgefilipecosta looks like something is wrong with the merge. maybe this needs a rebase off of a common ancestor of both branches? I think this branch has updates from trunk in it that the base branch doesn't.

Yes, there was an issue when changing base, that's why GitHub added so many reviewers. It should be fixed.

Sep 19 '22 18:09 jorgefilipecosta

Size Change: 0 B

Total Size: 1.26 MB

ℹ️ View Unchanged

Filename	Size
`build/a11y/index.min.js`	982 B
`build/annotations/index.min.js`	2.76 kB
`build/api-fetch/index.min.js`	2.26 kB
`build/autop/index.min.js`	2.14 kB
`build/blob/index.min.js`	475 B
`build/block-directory/index.min.js`	7.08 kB
`build/block-directory/style-rtl.css`	990 B
`build/block-directory/style.css`	991 B
`build/block-editor/default-editor-styles-rtl.css`	378 B
`build/block-editor/default-editor-styles.css`	378 B
`build/block-editor/index.min.js`	163 kB
`build/block-editor/style-rtl.css`	15.4 kB
`build/block-editor/style.css`	15.4 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	150 B
`build/block-library/blocks/audio/editor.css`	150 B
`build/block-library/blocks/audio/style-rtl.css`	122 B
`build/block-library/blocks/audio/style.css`	122 B
`build/block-library/blocks/audio/theme-rtl.css`	126 B
`build/block-library/blocks/audio/theme.css`	126 B
`build/block-library/blocks/avatar/editor-rtl.css`	116 B
`build/block-library/blocks/avatar/editor.css`	116 B
`build/block-library/blocks/avatar/style-rtl.css`	84 B
`build/block-library/blocks/avatar/style.css`	84 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	482 B
`build/block-library/blocks/button/editor.css`	482 B
`build/block-library/blocks/button/style-rtl.css`	523 B
`build/block-library/blocks/button/style.css`	523 B
`build/block-library/blocks/buttons/editor-rtl.css`	337 B
`build/block-library/blocks/buttons/editor.css`	337 B
`build/block-library/blocks/buttons/style-rtl.css`	332 B
`build/block-library/blocks/buttons/style.css`	332 B
`build/block-library/blocks/calendar/style-rtl.css`	239 B
`build/block-library/blocks/calendar/style.css`	239 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	100 B
`build/block-library/blocks/categories/style.css`	100 B
`build/block-library/blocks/code/editor-rtl.css`	53 B
`build/block-library/blocks/code/editor.css`	53 B
`build/block-library/blocks/code/style-rtl.css`	103 B
`build/block-library/blocks/code/style.css`	103 B
`build/block-library/blocks/code/theme-rtl.css`	124 B
`build/block-library/blocks/code/theme.css`	124 B
`build/block-library/blocks/columns/editor-rtl.css`	108 B
`build/block-library/blocks/columns/editor.css`	108 B
`build/block-library/blocks/columns/style-rtl.css`	406 B
`build/block-library/blocks/columns/style.css`	406 B
`build/block-library/blocks/comment-author-avatar/editor-rtl.css`	125 B
`build/block-library/blocks/comment-author-avatar/editor.css`	125 B
`build/block-library/blocks/comment-content/style-rtl.css`	92 B
`build/block-library/blocks/comment-content/style.css`	92 B
`build/block-library/blocks/comment-template/style-rtl.css`	187 B
`build/block-library/blocks/comment-template/style.css`	185 B
`build/block-library/blocks/comments-pagination-numbers/editor-rtl.css`	123 B
`build/block-library/blocks/comments-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/comments-pagination/editor-rtl.css`	222 B
`build/block-library/blocks/comments-pagination/editor.css`	209 B
`build/block-library/blocks/comments-pagination/style-rtl.css`	235 B
`build/block-library/blocks/comments-pagination/style.css`	231 B
`build/block-library/blocks/comments-title/editor-rtl.css`	75 B
`build/block-library/blocks/comments-title/editor.css`	75 B
`build/block-library/blocks/comments/editor-rtl.css`	834 B
`build/block-library/blocks/comments/editor.css`	832 B
`build/block-library/blocks/comments/style-rtl.css`	632 B
`build/block-library/blocks/comments/style.css`	630 B
`build/block-library/blocks/cover/editor-rtl.css`	605 B
`build/block-library/blocks/cover/editor.css`	607 B
`build/block-library/blocks/cover/style-rtl.css`	1.57 kB
`build/block-library/blocks/cover/style.css`	1.55 kB
`build/block-library/blocks/embed/editor-rtl.css`	293 B
`build/block-library/blocks/embed/editor.css`	293 B
`build/block-library/blocks/embed/style-rtl.css`	410 B
`build/block-library/blocks/embed/style.css`	410 B
`build/block-library/blocks/embed/theme-rtl.css`	126 B
`build/block-library/blocks/embed/theme.css`	126 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	253 B
`build/block-library/blocks/file/style.css`	254 B
`build/block-library/blocks/file/view.min.js`	346 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	948 B
`build/block-library/blocks/gallery/editor.css`	950 B
`build/block-library/blocks/gallery/style-rtl.css`	1.53 kB
`build/block-library/blocks/gallery/style.css`	1.53 kB
`build/block-library/blocks/gallery/theme-rtl.css`	108 B
`build/block-library/blocks/gallery/theme.css`	108 B
`build/block-library/blocks/group/editor-rtl.css`	337 B
`build/block-library/blocks/group/editor.css`	337 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	78 B
`build/block-library/blocks/group/theme.css`	78 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/html/editor-rtl.css`	327 B
`build/block-library/blocks/html/editor.css`	329 B
`build/block-library/blocks/image/editor-rtl.css`	876 B
`build/block-library/blocks/image/editor.css`	873 B
`build/block-library/blocks/image/style-rtl.css`	627 B
`build/block-library/blocks/image/style.css`	630 B
`build/block-library/blocks/image/theme-rtl.css`	126 B
`build/block-library/blocks/image/theme.css`	126 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	213 B
`build/block-library/blocks/latest-posts/editor.css`	212 B
`build/block-library/blocks/latest-posts/style-rtl.css`	463 B
`build/block-library/blocks/latest-posts/style.css`	462 B
`build/block-library/blocks/list/style-rtl.css`	88 B
`build/block-library/blocks/list/style.css`	88 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	507 B
`build/block-library/blocks/media-text/style.css`	505 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	705 B
`build/block-library/blocks/navigation-link/editor.css`	703 B
`build/block-library/blocks/navigation-link/style-rtl.css`	115 B
`build/block-library/blocks/navigation-link/style.css`	115 B
`build/block-library/blocks/navigation-submenu/editor-rtl.css`	296 B
`build/block-library/blocks/navigation-submenu/editor.css`	295 B
`build/block-library/blocks/navigation-submenu/view.min.js`	423 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.99 kB
`build/block-library/blocks/navigation/editor.css`	2 kB
`build/block-library/blocks/navigation/style-rtl.css`	2.17 kB
`build/block-library/blocks/navigation/style.css`	2.16 kB
`build/block-library/blocks/navigation/view-modal.min.js`	2.78 kB
`build/block-library/blocks/navigation/view.min.js`	443 B
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	363 B
`build/block-library/blocks/page-list/editor.css`	363 B
`build/block-library/blocks/page-list/style-rtl.css`	175 B
`build/block-library/blocks/page-list/style.css`	175 B
`build/block-library/blocks/paragraph/editor-rtl.css`	174 B
`build/block-library/blocks/paragraph/editor.css`	174 B
`build/block-library/blocks/paragraph/style-rtl.css`	260 B
`build/block-library/blocks/paragraph/style.css`	260 B
`build/block-library/blocks/post-author/style-rtl.css`	175 B
`build/block-library/blocks/post-author/style.css`	176 B
`build/block-library/blocks/post-comments-form/editor-rtl.css`	96 B
`build/block-library/blocks/post-comments-form/editor.css`	96 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	493 B
`build/block-library/blocks/post-comments-form/style.css`	493 B
`build/block-library/blocks/post-date/style-rtl.css`	61 B
`build/block-library/blocks/post-date/style.css`	61 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	547 B
`build/block-library/blocks/post-featured-image/editor.css`	545 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	315 B
`build/block-library/blocks/post-featured-image/style.css`	315 B
`build/block-library/blocks/post-navigation-link/style-rtl.css`	153 B
`build/block-library/blocks/post-navigation-link/style.css`	153 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	282 B
`build/block-library/blocks/post-template/style.css`	282 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	100 B
`build/block-library/blocks/post-title/style.css`	100 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	135 B
`build/block-library/blocks/pullquote/editor.css`	135 B
`build/block-library/blocks/pullquote/style-rtl.css`	326 B
`build/block-library/blocks/pullquote/style.css`	325 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	221 B
`build/block-library/blocks/query-pagination/editor.css`	211 B
`build/block-library/blocks/query-pagination/style-rtl.css`	282 B
`build/block-library/blocks/query-pagination/style.css`	278 B
`build/block-library/blocks/query-title/style-rtl.css`	63 B
`build/block-library/blocks/query-title/style.css`	63 B
`build/block-library/blocks/query/editor-rtl.css`	439 B
`build/block-library/blocks/query/editor.css`	439 B
`build/block-library/blocks/quote/style-rtl.css`	213 B
`build/block-library/blocks/quote/style.css`	213 B
`build/block-library/blocks/quote/theme-rtl.css`	223 B
`build/block-library/blocks/quote/theme.css`	226 B
`build/block-library/blocks/read-more/style-rtl.css`	132 B
`build/block-library/blocks/read-more/style.css`	132 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	409 B
`build/block-library/blocks/search/style.css`	406 B
`build/block-library/blocks/search/theme-rtl.css`	114 B
`build/block-library/blocks/search/theme.css`	114 B
`build/block-library/blocks/separator/editor-rtl.css`	146 B
`build/block-library/blocks/separator/editor.css`	146 B
`build/block-library/blocks/separator/style-rtl.css`	234 B
`build/block-library/blocks/separator/style.css`	234 B
`build/block-library/blocks/separator/theme-rtl.css`	194 B
`build/block-library/blocks/separator/theme.css`	194 B
`build/block-library/blocks/shortcode/editor-rtl.css`	464 B
`build/block-library/blocks/shortcode/editor.css`	464 B
`build/block-library/blocks/site-logo/editor-rtl.css`	488 B
`build/block-library/blocks/site-logo/editor.css`	488 B
`build/block-library/blocks/site-logo/style-rtl.css`	203 B
`build/block-library/blocks/site-logo/style.css`	203 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	184 B
`build/block-library/blocks/social-link/editor.css`	184 B
`build/block-library/blocks/social-links/editor-rtl.css`	674 B
`build/block-library/blocks/social-links/editor.css`	673 B
`build/block-library/blocks/social-links/style-rtl.css`	1.4 kB
`build/block-library/blocks/social-links/style.css`	1.39 kB
`build/block-library/blocks/spacer/editor-rtl.css`	322 B
`build/block-library/blocks/spacer/editor.css`	322 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	494 B
`build/block-library/blocks/table/editor.css`	494 B
`build/block-library/blocks/table/style-rtl.css`	611 B
`build/block-library/blocks/table/style.css`	609 B
`build/block-library/blocks/table/theme-rtl.css`	190 B
`build/block-library/blocks/table/theme.css`	190 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	239 B
`build/block-library/blocks/tag-cloud/style.css`	239 B
`build/block-library/blocks/template-part/editor-rtl.css`	235 B
`build/block-library/blocks/template-part/editor.css`	235 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	561 B
`build/block-library/blocks/video/editor.css`	563 B
`build/block-library/blocks/video/style-rtl.css`	174 B
`build/block-library/blocks/video/style.css`	174 B
`build/block-library/blocks/video/theme-rtl.css`	126 B
`build/block-library/blocks/video/theme.css`	126 B
`build/block-library/common-rtl.css`	1.02 kB
`build/block-library/common.css`	1.02 kB
`build/block-library/editor-elements-rtl.css`	75 B
`build/block-library/editor-elements.css`	75 B
`build/block-library/editor-rtl.css`	11 kB
`build/block-library/editor.css`	11 kB
`build/block-library/elements-rtl.css`	54 B
`build/block-library/elements.css`	54 B
`build/block-library/index.min.js`	190 kB
`build/block-library/reset-rtl.css`	478 B
`build/block-library/reset.css`	478 B
`build/block-library/style-rtl.css`	12.2 kB
`build/block-library/style.css`	12.2 kB
`build/block-library/theme-rtl.css`	719 B
`build/block-library/theme.css`	722 B
`build/block-serialization-default-parser/index.min.js`	1.1 kB
`build/block-serialization-spec-parser/index.min.js`	2.83 kB
`build/blocks/index.min.js`	49.8 kB
`build/components/index.min.js`	198 kB
`build/components/style-rtl.css`	11.4 kB
`build/components/style.css`	11.5 kB
`build/compose/index.min.js`	12.5 kB
`build/core-data/index.min.js`	15.5 kB
`build/customize-widgets/index.min.js`	11.3 kB
`build/customize-widgets/style-rtl.css`	1.38 kB
`build/customize-widgets/style.css`	1.38 kB
`build/data-controls/index.min.js`	653 B
`build/data/index.min.js`	8.08 kB
`build/date/index.min.js`	32.1 kB
`build/deprecated/index.min.js`	507 B
`build/dom-ready/index.min.js`	324 B
`build/dom/index.min.js`	4.7 kB
`build/edit-navigation/index.min.js`	16 kB
`build/edit-navigation/style-rtl.css`	3.99 kB
`build/edit-navigation/style.css`	4 kB
`build/edit-post/classic-rtl.css`	546 B
`build/edit-post/classic.css`	547 B
`build/edit-post/index.min.js`	30.8 kB
`build/edit-post/style-rtl.css`	6.94 kB
`build/edit-post/style.css`	6.94 kB
`build/edit-site/index.min.js`	57.6 kB
`build/edit-site/style-rtl.css`	8.36 kB
`build/edit-site/style.css`	8.34 kB
`build/edit-widgets/index.min.js`	16.5 kB
`build/edit-widgets/style-rtl.css`	4.34 kB
`build/edit-widgets/style.css`	4.34 kB
`build/editor/index.min.js`	41.6 kB
`build/editor/style-rtl.css`	3.62 kB
`build/editor/style.css`	3.61 kB
`build/element/index.min.js`	4.68 kB
`build/escape-html/index.min.js`	537 B
`build/format-library/index.min.js`	6.76 kB
`build/format-library/style-rtl.css`	571 B
`build/format-library/style.css`	571 B
`build/hooks/index.min.js`	1.64 kB
`build/html-entities/index.min.js`	448 B
`build/i18n/index.min.js`	3.77 kB
`build/is-shallow-equal/index.min.js`	527 B
`build/keyboard-shortcuts/index.min.js`	1.78 kB
`build/keycodes/index.min.js`	1.83 kB
`build/list-reusable-blocks/index.min.js`	1.74 kB
`build/list-reusable-blocks/style-rtl.css`	835 B
`build/list-reusable-blocks/style.css`	835 B
`build/media-utils/index.min.js`	2.93 kB
`build/notices/index.min.js`	953 B
`build/nux/index.min.js`	2.05 kB
`build/nux/style-rtl.css`	732 B
`build/nux/style.css`	728 B
`build/plugins/index.min.js`	1.94 kB
`build/preferences-persistence/index.min.js`	2.22 kB
`build/preferences/index.min.js`	1.3 kB
`build/primitives/index.min.js`	933 B
`build/priority-queue/index.min.js`	1.58 kB
`build/react-i18n/index.min.js`	696 B
`build/react-refresh-entry/index.min.js`	8.44 kB
`build/react-refresh-runtime/index.min.js`	7.31 kB
`build/redux-routine/index.min.js`	2.74 kB
`build/reusable-blocks/index.min.js`	2.21 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.6 kB
`build/server-side-render/index.min.js`	1.61 kB
`build/shortcode/index.min.js`	1.53 kB
`build/style-engine/index.min.js`	1.45 kB
`build/token-list/index.min.js`	644 B
`build/url/index.min.js`	3.61 kB
`build/vendors/react-dom.min.js`	38.5 kB
`build/vendors/react.min.js`	4.34 kB
`build/viewport/index.min.js`	1.09 kB
`build/warning/index.min.js`	268 B
`build/widgets/index.min.js`	7.18 kB
`build/widgets/style-rtl.css`	1.18 kB
`build/widgets/style.css`	1.19 kB
`build/wordcount/index.min.js`	1.06 kB

_{compressed-size-action}

Sep 19 '22 18:09 github-actions[bot]

:wave: In terms of naming, I'd make this about the settings block supports, not about the presets. That way is in line with any other block supports and it's more future-proof (in case we need this block support to process things other than presets).

rename block-level-presets.php to settings.php
rename wp-block-level-presets-ID to wp-settings-ID (or reuse an existing such as wp-container-ID if that makes sense)

Sep 20 '22 11:09 oandregal

I've tested that this works in the use case suggested and also in some other scenarios. This is one of them:

The theme.json of the theme defines a top-level palette that contain a color whose slug is slug.
The theme.json of the theme defines a block-level palette for a few blocks that contains a color whose slug is slug.
The theme.json of the section defines a top-level palette that contains a color with the same slug.

The expectation is that the different layers override each other in this hierarchy:

top-level from theme.json > block-level from theme.json > top-level from section > block-level from section

So, in the example above, the expected result is that the color defined at the section-level wins.

See codepen.

This is the markup:

<body>
  <div class="wp-settings-id">
    <span class="wp-block-name has-slug-color">Selector: .wp-block-name (010).</span>
    <p class="has-slug-color">Selector: p (001).</p>
    <div class="wp-block-other">
        <div class="intermediate">
            <div class="leaf has-slug-color">
                Selector: .wp-block-button .wp-block-button-link (020)
            </div>
        </div>
    </div>
  </div>
<body/>

This is the resulting CSS using this PR:

/* PRESETS DEFINED VIA THEME.JSON */
/* top-level */
body { --wp--color--slug: aquamarine; }
.has-slug-color { color: var(--wp--color--slug); }

/* block-level */
.wp-block-name { --wp--color--slug: red; }
.wp-block-name.has-slug-color { color: var(--wp--color--slug); }

p { --wp--color--slug: green; }
p.has-slug-color { color: var(--wp--color--slug); }

.wp-block-other .intermediate .leaf { --wp--color--slug: blue; }
.wp-block-other .intermediate .leaf.has-slug-color { color: var(--wp--color--slug); }

/*
 * PRESETS DEFINED VIA SETTINGS OF THE CONTAINER.
 */
.wp-settings-id,
.wp-settings-id [class*="wp-block"],
.wp-settings-id p,
.wp-settings-id .wp-block-other .intermediate .leaf { --wp--color--slug: hotpink; }

.wp-settings-id.has-slug-color,
.wp-settings-id *.has-slug-color { color: var(--wp--color--slug); }

Sep 20 '22 15:09 oandregal

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

.wp-settings-4884af9a06466a917323943b61ae5826,
[class*="wp-block"] .wp-settings-4884af9a06466a917323943b61ae5826,
li .wp-settings-4884af9a06466a917323943b61ae5826,
.wp-block-button .wp-block-button__link .wp-settings-4884af9a06466a917323943b61ae5826,
h1 .wp-settings-4884af9a06466a917323943b61ae5826,
h2 .wp-settings-4884af9a06466a917323943b61ae5826,
h3 .wp-settings-4884af9a06466a917323943b61ae5826,
h4 .wp-settings-4884af9a06466a917323943b61ae5826,
h5 .wp-settings-4884af9a06466a917323943b61ae5826,
h6 .wp-settings-4884af9a06466a917323943b61ae5826,
ol .wp-settings-4884af9a06466a917323943b61ae5826,
ul .wp-settings-4884af9a06466a917323943b61ae5826,
p .wp-settings-4884af9a06466a917323943b61ae5826,
.wp-block-table > table .wp-settings-4884af9a06466a917323943b61ae5826,
.wp-settings-4884af9a06466a917323943b61ae5826 * {
  --wp--preset--color--global-aquamarine: aquamarine;
  --wp--preset--color--global-pink: pink;
}

.wp-settings-4884af9a06466a917323943b61ae5826 .wp-block-button .wp-block-button__link {
  --wp--preset--color--button-red: red;
  --wp--preset--color--button-blue: blue;
}```

Sep 22 '22 18:09 oandregal

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!

Sep 23 '22 17:09 jorgefilipecosta

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

cc/ @michalczaplinski

Sep 26 '22 11:09 ockham

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

Sep 26 '22 21:09 michalczaplinski

Hey, while working on https://github.com/WordPress/gutenberg/pull/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.

Dec 16 '22 09:12 oandregal

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

Feb 06 '23 14:02 Mamaduka