Block.json: Refactor and stabilize selectors API

[ramonopoly]

This ticket tracks the backporting of PHP files for the following Gutenberg changes:

• ​https://github.com/WordPress/gutenberg/pull/46496
• ​https://github.com/WordPress/gutenberg/pull/46496

The selectors API is stabilized as part of this refactor.

cc @aaronrobertshaw

This is a backport PR for WordPress 6.3 that includes the following PHP Gutenberg changes:

• ​https://github.com/WordPress/gutenberg/pull/46496
• ​https://github.com/WordPress/gutenberg/pull/49427

Trac ticket: https://core.trac.wordpress.org/ticket/58586

cc @aaronrobertshaw

@ramonjd

A pretty rough start. I wasn't sure whether the following change to blocks.php had to be ported.

​https://github.com/WordPress/gutenberg/pull/46496/files#diff-12ada35a09133c5735dcc286bb738745777c30420bc40dbc04d751db5ecfe349R21

Didn't edit unit tests yet. Failures are expected 😄

A pretty rough start. I wasn't sure whether the following change to blocks.php had to be ported.

I can confirm, the changes referred to are expected to remain Gutenberg-only until 6.3 is the minimum supported version. That filter is there to ensure the selectors configuration from block.json metadata is honoured.

Didn't edit unit tests yet. Failures are expected 😄

Most of the test failures will relate to the ​removal of the "editor-only" selectors from the API.

The theme.json tests look to be failing due to the image/block.json not being updated yet.

The theme.json tests look to be failing due to the image/block.json not being updated yet.

🤔 I think we should revert that test until the block library package is backported. That should happen early next week.

Most of the test failures will relate to the ​removal of the "editor-only" selectors from the API.

I've fixed these for now.

I noticed that ​https://github.com/WordPress/wordpress-develop/pull/4619 is backporting the duotone changes only, so it looks like we'll have to port over the rest of the changes from

• ​https://github.com/WordPress/gutenberg/pull/49423
• ​https://github.com/WordPress/gutenberg/pull/49393

I've also removed the following test from Tests_Theme_WpGetBlockCssSelector, which was failing and I couldn't work out if it was required since the API was stabilized or because there are dependencies in ​https://github.com/WordPress/wordpress-develop/pull/4619.

public function test_get_duotone_selector_via_experimental_property() {
                $block_type = self::register_test_block(
                        'test/experimental-duotone-selector',
                        null,
                        array(
                                'color' => array(
                                        '__experimentalDuotone' => '.experimental-duotone',
                                ),
                        )
                );

                $selector = wp_get_block_css_selector( $block_type, 'filters.duotone' );
                $this->assertEquals( '.experimental-duotone', $selector );
        }

More to work to come on this one...

I'm getting ​1 failure for Tests_Theme_wpThemeJson::test_get_stylesheet where the image block class is being output twice for duotone: .wp-block-image .wp-block-image img, .wp-block-image .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.

Is that also dependent on block.json or the duotone backport changes @aaronrobertshaw ?

I'm getting ​1 failure

My ​expectation was that this test would be failing due to the image block.json needing to be updated. I'll go digging and see what I can find and see what else might need backporting.

I'm getting one failure

There's a ​duotone-related change that we'll need to include in this backport as well to get the tests passing.

Unfortunately, I don't have permission to push to your fork or this PR branch. Instead, below is a small diff that you can apply.

src/wp-includes/class-wp-theme-json.php

@@ -2389 +2389 @@
 
                 // 3. Generate and append the rules that use the duotone selector.
                 if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
-                        $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
-                        $block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
+                        $block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone );
                 }
 
                 // 4. Generate Layout block gap styles.

Thanks for doing the heavy thinking here @aaronrobertshaw I'll get these in tomorrow 👍

@MaggieCabrera @aaronrobertshaw

Just checking, as there might be some overlap between this PR and

• ​https://github.com/WordPress/wordpress-develop/pull/4619

Suggesting that one (maybe this PR) gets merged first and then we rebase ​https://github.com/WordPress/wordpress-develop/pull/4619?

@MaggieCabrera @aaronrobertshaw

Just checking, as there might be some overlap between this PR and

• ​Backport: Duotone changes #4619

Suggesting that one (maybe this PR) gets merged first and then we rebase #4619?

I think that's the right order, yes

Suggesting that one (maybe this PR) gets merged first and then we rebase ​https://github.com/WordPress/wordpress-develop/pull/4619?

Merging this PR first works for me, thanks 🙂

I'm happy to help out if I can on the duotone updates as well.

I'm happy to help out if I can on the duotone updates as well.

That'd be great, thank you!

I think this one seems to have fallen through the cracks? ​https://github.com/WordPress/gutenberg/pull/50678 Not sure.

I think this one seems to have fallen through the cracks? ​https://github.com/WordPress/gutenberg/pull/50678 Not sure.

Thanks for flagging that @ramonjd. It does appear to have been missed. It is related to duotone filters rather than the block selectors API so I think belongs in ​https://github.com/WordPress/wordpress-develop/pull/4619.

cc/ @MaggieCabrera

[audrasjb]

Converting to a task as this can ship after beta 1 is released.

[isabel_brison]

In 56058:

Editor: refactor and stabilize selectors API.

Restructures the block.json selectors API by moving __experimentalSelector props into their own config, stabilizing the selectors API, and enabling more flexible styling options.

Props ramonopoly, spacedmonkey, aaronrobertshaw, onemaggie.
Fixes #58586.

committed in r56058 / ​8b9d8d8.

[mukesh27]

@isabel_brison the multiline comment indention is wrong in src/wp-includes/block-supports/settings.php line no 99. ​https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/settings.php#L99-L102

Trac ticket: https://core.trac.wordpress.org/ticket/58586

Fix comment indentation issue noted here

[isabel_brison]

In 56146:

Editor: fix comment indentation.

Fixes multiline comment indentation in wp-includes/block-supports/settings.php. Also fixes typo in the comment.

Props mukesh27.
See #58586.

Committed in r56146 / ​21c74f1.