diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php index fac777864200a8..e15509e43143eb 100644 --- a/phpunit/bootstrap.php +++ b/phpunit/bootstrap.php @@ -134,6 +134,46 @@ function gutenberg_register_test_block_for_feature_selectors() { ), ) ); + + WP_Block_Type_Registry::get_instance()->register( + 'my/block-with-selectors', + array( + 'api_version' => 2, + 'attributes' => array( + 'textColor' => array( + 'type' => 'string', + ), + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + '__experimentalBorder' => array( + 'radius' => true, + ), + 'color' => array( + 'background' => true, + 'text' => true, + ), + 'spacing' => array( + 'padding' => true, + ), + 'typography' => array( + 'fontSize' => true, + ), + ), + 'selectors' => array( + 'root' => '.custom-root-selector', + 'border' => array( + 'root' => '.custom-root-selector img', + ), + 'color' => array( + 'text' => '.custom-root-selector > figcaption', + ), + 'typography' => '.custom-root-selector > figcaption', + ), + ) + ); } tests_add_filter( 'init', 'gutenberg_register_test_block_for_feature_selectors' ); @@ -142,4 +182,3 @@ function gutenberg_register_test_block_for_feature_selectors() { // Use existing behavior for wp_die during actual test execution. remove_filter( 'wp_die_handler', 'fail_if_died' ); - diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index b46838c0275b1a..eeb5940f44cd35 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -803,7 +803,7 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu * bootstrap. After a core block adopts feature level selectors we could * remove that filter and instead use the core block for the following test. */ - public function test_get_stylesheet_with_block_support_feature_level_selectors() { + public function test_get_stylesheet_with_deprecated_feature_level_selectors() { $theme_json = new WP_Theme_JSON_Gutenberg( array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, @@ -856,6 +856,68 @@ public function test_get_stylesheet_with_block_support_feature_level_selectors() $this->assertEquals( $expected, $theme_json->get_stylesheet() ); } + /** + * This test relies on a block having already been registered prior to + * theme.json generating block metadata. Until a core block adopts the + * new selectors API, we need to register a test block. + * This is achieved via `tests_add_filter()` in Gutenberg's phpunit + * bootstrap. After a core block adopts feature level selectors we could + * remove that filter and instead use the core block for the following test. + */ + public function test_get_stylesheet_with_block_json_selectors() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'border' => array( + 'radius' => true, + ), + 'color' => array( + 'custom' => false, + 'palette' => array( + array( + 'slug' => 'green', + 'color' => 'green', + ), + ), + ), + 'spacing' => array( + 'padding' => true, + ), + 'typography' => array( + 'fontSize' => true, + ), + ), + 'styles' => array( + 'blocks' => array( + 'my/block-with-selectors' => array( + 'border' => array( + 'radius' => '9999px', + ), + 'color' => array( + 'background' => 'grey', + 'text' => 'navy', + ), + 'spacing' => array( + 'padding' => '20px', + ), + 'typography' => array( + 'fontSize' => '3em', + ), + ), + ), + ), + ) + ); + + $base_styles = 'body{--wp--preset--color--green: green;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; + $block_styles = '.custom-root-selector{background-color: grey;padding: 20px;}.custom-root-selector img{border-radius: 9999px;}.custom-root-selector > figcaption{color: navy;font-size: 3em;}'; + $preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}'; + $expected = $base_styles . $block_styles . $preset_styles; + + $this->assertEquals( $expected, $theme_json->get_stylesheet() ); + } + public function test_allow_indirect_properties() { $actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties( array(