Add: Frontend section presets output by jorgefilipecosta · Pull Request #42124 · WordPress/gutenberg

jorgefilipecosta · 2022-07-04T13:13:01Z

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:

oandregal · 2022-09-22T17:38:51Z

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

+			foreach ( $selectors as $inner ) {
+				$outer = trim( $outer );
+				$inner = trim( $inner );
+				if ( empty( $outer ) ) {


This is purely a style choice, it's totally up to you. Personally, I find this more readable:

if ( empty( $outer ) && empty( $inner) ) { } else if ( empty( $outer ) ) {} else if ( empty( $inner ) ) {} else {}

oandregal · 2022-09-22T17:41:02Z

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

+	 * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+	 * </code>
+	 *
+	 * @since 5.9.0


Is it removing this and add a comment with what changed? I understand the change is making sure no empty scope ends up being used, but not sure why we didn't that before.

I don't think the changes we are making to the function are worth a comment. We are just fixing some cases with empty selectors.

oandregal · 2022-09-22T18:11:36Z

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;
}```

oandregal · 2022-09-22T18:19:28Z

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

 		$style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata );
 		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );

+		$root_style_key    = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );


Nice one ❤️ Wasn't super comfortable hard-coding the 0 index.

oandregal · 2022-09-22T18:23:18Z

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

 			}
 			$stylesheet .= $this->get_block_classes( $style_nodes );
 		} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
+			$root_selector    = static::ROOT_BLOCK_SELECTOR;


This gist of code is not used at the moment, correct? My understanding is that it is just a way to make the scope and root_selector options work with this part of the code as well. I wasn't sure how to test this.

Yes, it is not used at the moment, but it is to make sure the function also works with base-layout-styles origin. I don't think it will be needed but I preferred to make the function consistent.

oandregal · 2022-09-22T18:23:40Z

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

 		} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
+			$root_selector    = static::ROOT_BLOCK_SELECTOR;
+			$columns_selector = '.wp-block-columns';
+			if ( ! empty( $options['scope'] ) ) {


Shouldn't this be?

Suggested change

if ( ! empty( $options['scope'] ) ) {

if ( ! empty( $options['root_selector'] ) ) {

oandregal

Thanks for the quick turnaround, Jorge!

I've left some minor comments, but I won't be available tomorrow to review/re-approve, so I trust they'll be addressed.

I'm more comfortable with this approach, as it doesn't introduce new APIs just yet. Through the conversations in this thread, I've learned that WP_Theme_JSON is no longer agnostic of the context it runs into, and the changes here go a step in the direction of making them agnostic again. It's far for complete, though.

jorgefilipecosta · 2022-09-23T17:37:50Z

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 · 2022-09-26T11:09:05Z

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

cc/ @michalczaplinski

michalczaplinski · 2022-09-26T21:12:07Z

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

oandregal · 2022-12-16T09:12:35Z

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 · 2023-02-06T14:42:24Z

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

jorgefilipecosta added [Block] Group Affects the Group Block (and row, stack and grid variants) Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Block] Pattern Affects the Patterns Block labels Jul 4, 2022

jorgefilipecosta requested a review from spacedmonkey as a code owner July 4, 2022 13:13

luisherranz mentioned this pull request Jul 5, 2022

Governing block settings and interactions #41547

Open

luisherranz mentioned this pull request Aug 3, 2022

Move block css from supports > __experimentalStyle to a top level style key in block.json #41873

Closed

jorgefilipecosta force-pushed the add/frontend-section-presets-output branch from 2614fb1 to 51b5d5f Compare September 15, 2022 15:28

jorgefilipecosta removed request for ZebulanStanphill, ajlende, fabiankaegy, juanmaguitar, michalczaplinski and mmtr September 21, 2022 10:46

jorgefilipecosta force-pushed the add/frontend-section-presets-output branch from f8f9a66 to dee4708 Compare September 22, 2022 15:32

Add: Frontend section presets output.

97499c4

jorgefilipecosta force-pushed the add/frontend-section-presets-output branch from dee4708 to 97499c4 Compare September 22, 2022 15:37

oandregal reviewed Sep 22, 2022

View reviewed changes

oandregal approved these changes Sep 22, 2022

View reviewed changes

feedback and fixes

5b2f8a4

jorgefilipecosta merged commit 8b9df32 into trunk Sep 23, 2022

jorgefilipecosta deleted the add/frontend-section-presets-output branch September 23, 2022 19:44

jorgefilipecosta mentioned this pull request Sep 23, 2022

Editor: Fix missing frontend section presets output. WordPress/wordpress-develop#3322

Closed

oandregal mentioned this pull request Dec 16, 2022

Try: bundle WP_Theme_JSON class instead of inheriting per WordPress version #46579

Merged

oandregal mentioned this pull request Jan 17, 2023

Section specific Theme.json #40318

Open

Mamaduka mentioned this pull request Jan 17, 2023

Plugin: Backport PHP changes for WordPress 6.2 release #47187

Closed

85 tasks

jorgefilipecosta mentioned this pull request Feb 6, 2023

Update: Backport block settings to core. WordPress/wordpress-develop#4013

Closed

ramonjd mentioned this pull request Apr 5, 2023

Block level settings: remove WP filters in Gutenberg #49598

Merged

	if ( ! empty( $options['scope'] ) ) {
	if ( ! empty( $options['root_selector'] ) ) {

Conversation

jorgefilipecosta commented Jul 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Shape

Formatted json:

Engine output

What?

Testing

Uh oh!

oandregal Sep 22, 2022

Choose a reason for hiding this comment

Uh oh!

oandregal Sep 22, 2022

Choose a reason for hiding this comment

Uh oh!

jorgefilipecosta Sep 22, 2022

Choose a reason for hiding this comment

Uh oh!

oandregal commented Sep 22, 2022

Uh oh!

oandregal Sep 22, 2022

Choose a reason for hiding this comment

Uh oh!

oandregal Sep 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jorgefilipecosta Sep 23, 2022

Choose a reason for hiding this comment

Uh oh!

oandregal Sep 22, 2022

Choose a reason for hiding this comment

Uh oh!

oandregal left a comment

Choose a reason for hiding this comment

Uh oh!

jorgefilipecosta commented Sep 23, 2022

Uh oh!

ockham commented Sep 26, 2022

Uh oh!

michalczaplinski commented Sep 26, 2022

Uh oh!

oandregal commented Dec 16, 2022

Uh oh!

Mamaduka commented Feb 6, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

jorgefilipecosta commented Jul 4, 2022 •

edited

Loading

oandregal Sep 22, 2022 •

edited

Loading