From 3edc22b88c2cfd6806e72f53efa66a2326c2d627 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Sun, 15 Jan 2023 13:56:57 +1000 Subject: [PATCH] Add global function to get block CSS selectors --- .../get-global-styles-and-settings.php | 135 ++++++++ .../class-wp-get-block-css-selectors-test.php | 319 ++++++++++++++++++ 2 files changed, 454 insertions(+) create mode 100644 phpunit/class-wp-get-block-css-selectors-test.php diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index e02a0466a0b98..186e38406d1ba 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -255,3 +255,138 @@ function _gutenberg_add_non_persistent_theme_json_cache_group() { wp_cache_add_non_persistent_groups( 'theme_json' ); } add_action( 'plugins_loaded', '_gutenberg_add_non_persistent_theme_json_cache_group' ); + +if ( ! function_exists( 'wp_get_block_css_selector' ) ) { + /** + * Determine the CSS selector for the block type and property provided, + * returning it if available. + * + * @param WP_Block_Type $block_type The block's type. + * @param string|array $target The desired selector's target, `root` or array path. + * @param boolean $fallback Whether or not to fallback to broader selector. + * + * @return string|null CSS selector or `null` if no selector available. + */ + function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = false ) { + if ( empty( $target ) ) { + return null; + } + + $has_selectors = isset( $block_type->selectors ) && ! empty( $block_type->selectors ); + + // Duotone (No fallback selectors for Duotone). + if ( 'duotone' === $target ) { + // If selectors API in use, only use it's value or null. + if ( $has_selectors ) { + return _wp_array_get( $block_type->selectors, array( 'color', 'duotone' ), null ); + } + + // Selectors API, not available, check for old experimental selector. + return _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), null ); + } + + // Root Selector. + + // Calculated before returning as it can be used as fallback for + // feature selectors later on. + $root_selector = null; + + if ( $has_selectors && isset( $block_type->selectors['root'] ) ) { + // Prefer the selectors API if available. + $root_selector = $block_type->selectors['root']; + } elseif ( isset( $block_type->supports['__experimentalSelector'] ) && is_string( $block_type->supports['__experimentalSelector'] ) ) { + // Use the old experimental selector supports property if set. + $root_selector = $block_type->supports['__experimentalSelector']; + } else { + // If no root selector found, generate default block class selector. + $block_name = str_replace( '/', '-', str_replace( 'core/', '', $block_type->name ) ); + $root_selector = ".wp-block-{$block_name}"; + } + + // Return selector if it's the root target we are looking for. + if ( 'root' === $target ) { + return $root_selector; + } + + // If target is not `root` or `duotone` we have a feature or subfeature + // as the target. If the target is a string convert to an array. + if ( is_string( $target ) ) { + $target = explode( '.', $target ); + } + + // Feature Selectors ( May fallback to root selector ). + if ( 1 === count( $target ) ) { + $fallback_selector = $fallback ? $root_selector : null; + + // Prefer the selectors API if available. + if ( $has_selectors ) { + // Look for selector under `feature.root`. + $path = array_merge( $target, array( 'root' ) ); + $feature_selector = _wp_array_get( $block_type->selectors, $path, null ); + + if ( $feature_selector ) { + return $feature_selector; + } + + // Check if feature selector set via shorthand. + $feature_selector = _wp_array_get( $block_type->selectors, $target, null ); + + return is_string( $feature_selector ) ? $feature_selector : $fallback_selector; + } + + // Try getting old experimental supports selector value. + $path = array_merge( $target, array( '__experimentalSelector' ) ); + $feature_selector = _wp_array_get( $block_type->supports, $path, null ); + + // Nothing to work with, provide fallback or null. + if ( null === $feature_selector ) { + return $fallback_selector; + } + + // Scope the feature selector by the block's root selector. + // TODO: Following is boilerplate from theme.json class. Is there a util? + $scopes = explode( ',', $root_selector ); + $selectors = explode( ',', $feature_selector ); + + $selectors_scoped = array(); + foreach ( $scopes as $outer ) { + foreach ( $selectors as $inner ) { + $outer = trim( $outer ); + $inner = trim( $inner ); + if ( ! empty( $outer ) && ! empty( $inner ) ) { + $selectors_scoped[] = $outer . ' ' . $inner; + } elseif ( empty( $outer ) ) { + $selectors_scoped[] = $inner; + } elseif ( empty( $inner ) ) { + $selectors_scoped[] = $outer; + } + } + } + + return implode( ', ', $selectors_scoped ); + } + + // Subfeature selector + // This may fallback either to parent feature or root selector. + $subfeature_selector = null; + // Use selectors API if available. + if ( $has_selectors ) { + $subfeature_selector = _wp_array_get( $block_type->selectors, $target, null ); + + // Only return if we have a subfeature selector. + if ( $subfeature_selector ) { + return $subfeature_selector; + } + } + + // To this point we don't have a subfeature selector. If a fallback + // has been requested, remove subfeature from target path and return + // results of a call for the parent feature's selector. + if ( $fallback ) { + return wp_get_block_css_selector( $block_type, $target[0], $fallback ); + } + + // We tried... + return null; + } +} diff --git a/phpunit/class-wp-get-block-css-selectors-test.php b/phpunit/class-wp-get-block-css-selectors-test.php new file mode 100644 index 0000000000000..6ca7b3f0eeddf --- /dev/null +++ b/phpunit/class-wp-get-block-css-selectors-test.php @@ -0,0 +1,319 @@ +test_block_name = null; + } + + public function tear_down() { + unregister_block_type( $this->test_block_name ); + $this->test_block_name = null; + parent::tear_down(); + } + + private function register_test_block( $name, $selectors = null, $supports = null ) { + $this->test_block_name = $name; + + return register_block_type( + $this->test_block_name, + array( + 'api_version' => 2, + 'attributes' => array(), + 'selectors' => $selectors, + 'supports' => $supports, + ) + ); + } + + public function test_get_root_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/block-with-selectors', + array( 'root' => '.wp-custom-block-class' ) + ); + + $selector = wp_get_block_css_selector( $block_type ); + $this->assertEquals( '.wp-custom-block-class', $selector ); + } + + public function test_get_root_selector_via_experimental_property() { + $block_type = self::register_test_block( + 'test/block-without-selectors', + null, + array( '__experimentalSelector' => '.experimental-selector' ) + ); + + $selector = wp_get_block_css_selector( $block_type ); + $this->assertEquals( '.experimental-selector', $selector ); + } + + public function test_default_root_selector_generation() { + $block_type = self::register_test_block( + 'test/without-selectors-or-supports', + null, + null + ); + + $selector = wp_get_block_css_selector( $block_type ); + $this->assertEquals( '.wp-block-test-without-selectors-or-supports', $selector ); + } + + public function test_get_duotone_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/duotone-selector', + array( + 'color' => array( 'duotone' => '.duotone-selector' ), + ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'duotone' ); + $this->assertEquals( '.duotone-selector', $selector ); + } + + 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, 'duotone' ); + $this->assertEquals( '.experimental-duotone', $selector ); + } + + public function test_no_duotone_selector_set() { + $block_type = self::register_test_block( + 'test/null-duotone-selector', + null, + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'duotone' ); + $this->assertEquals( '', $selector ); + } + + public function test_get_feature_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/feature-selector', + array( + 'root' => '.root', + 'typography' => array( 'root' => '.typography' ), + ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography' ); + $this->assertEquals( '.typography', $selector ); + } + + public function test_get_feature_selector_via_selectors_api_shorthand_property() { + $block_type = self::register_test_block( + 'test/shorthand-feature-selector', + array( + 'root' => '.root', + 'typography' => '.typography', + ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography' ); + $this->assertEquals( '.typography', $selector ); + } + + public function test_no_feature_level_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/null-feature-selector', + array( 'root' => '.fallback-root-selector' ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography' ); + $this->assertEquals( null, $selector ); + } + + public function test_fallback_feature_level_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/fallback-feature-selector', + array( 'root' => '.fallback-root-selector' ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography', true ); + $this->assertEquals( '.fallback-root-selector', $selector ); + } + + public function test_get_feature_selector_via_experimental_property() { + $block_type = self::register_test_block( + 'test/experimental-feature-selector', + null, + array( + 'typography' => array( + '__experimentalSelector' => '.experimental-typography', + ), + ) + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography' ); + $this->assertEquals( '.wp-block-test-experimental-feature-selector .experimental-typography', $selector ); + } + + public function test_fallback_feature_selector_via_experimental_property() { + $block_type = self::register_test_block( + 'test/fallback-feature-selector', + null, + array() + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography', true ); + $this->assertEquals( '.wp-block-test-fallback-feature-selector', $selector ); + } + + public function test_no_feature_selector_via_experimental_property() { + $block_type = self::register_test_block( + 'test/null-experimental-feature-selector', + null, + array() + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography' ); + $this->assertEquals( null, $selector ); + } + + public function test_get_subfeature_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/subfeature-selector', + array( + 'root' => '.root', + 'typography' => array( + 'root' => '.root .typography', + 'textDecoration' => '.root .typography .text-decoration', + ), + ), + null + ); + + $selector = wp_get_block_css_selector( + $block_type, + array( 'typography', 'textDecoration' ) + ); + + $this->assertEquals( '.root .typography .text-decoration', $selector ); + } + + public function test_fallback_subfeature_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/subfeature-selector', + array( + 'root' => '.root', + 'typography' => array( + 'root' => '.root .typography', + ), + ), + null + ); + + $selector = wp_get_block_css_selector( + $block_type, + array( 'typography', 'textDecoration' ), + true + ); + + $this->assertEquals( '.root .typography', $selector ); + } + + public function test_no_subfeature_level_selector_via_selectors_api() { + $block_type = self::register_test_block( + 'test/null-subfeature-selector', + array( 'root' => '.root' ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, array( 'typography', 'fontSize' ) ); + $this->assertEquals( null, $selector ); + } + + public function test_fallback_subfeature_selector_via_experimental_property() { + $block_type = self::register_test_block( + 'test/fallback-subfeature-selector', + null, + array() + ); + + $selector = wp_get_block_css_selector( + $block_type, + array( 'typography', 'fontSize' ), + true + ); + $this->assertEquals( '.wp-block-test-fallback-subfeature-selector', $selector ); + } + + public function test_no_subfeature_selector_via_experimental_property() { + $block_type = self::register_test_block( + 'test/null-experimental-subfeature-selector', + null, + array() + ); + + $selector = wp_get_block_css_selector( + $block_type, + array( 'typography', 'fontSize' ) + ); + $this->assertEquals( null, $selector ); + } + + public function test_empty_target_returns_null() { + $block_type = self::register_test_block( + 'test/null-experimental-subfeature-selector', + null, + array() + ); + + $selector = wp_get_block_css_selector( $block_type, array() ); + $this->assertEquals( null, $selector ); + + $selector = wp_get_block_css_selector( $block_type, '' ); + $this->assertEquals( null, $selector ); + } + + public function test_string_targets_for_features() { + $block_type = self::register_test_block( + 'test/target-types-for-features', + array( 'typography' => '.found' ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography' ); + $this->assertEquals( '.found', $selector ); + + $selector = wp_get_block_css_selector( $block_type, array( 'typography' ) ); + $this->assertEquals( '.found', $selector ); + } + + public function test_string_targets_for_subfeatures() { + $block_type = self::register_test_block( + 'test/target-types-for-features', + array( + 'typography' => array( 'fontSize' => '.found' ), + ), + null + ); + + $selector = wp_get_block_css_selector( $block_type, 'typography.fontSize' ); + $this->assertEquals( '.found', $selector ); + + $selector = wp_get_block_css_selector( $block_type, array( 'typography', 'fontSize' ) ); + $this->assertEquals( '.found', $selector ); + } +}