diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index ef950f80ce944..afb521f5ea73e 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -436,54 +436,67 @@ function gutenberg_render_duotone_support( $block_content, $block ) { $duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false ); } - $has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] ); + // The block should have a duotone attribute or have duotone defined in its theme.json to be processed. + $has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] ); + $has_global_styles_duotone = array_key_exists( $block['blockName'], WP_Duotone::$global_styles_block_names ); if ( + empty( $block_content ) || ! $duotone_support || - ! $has_duotone_attribute + ( ! $has_duotone_attribute && ! $has_global_styles_duotone ) ) { return $block_content; } - // Possible values for duotone attribute: - // 1. Array of colors - e.g. array('#000000', '#ffffff'). - // 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue'. - // 3. A CSS string - e.g. 'unset' to remove globally applied duotone. - $duotone_attr = $block['attrs']['style']['color']['duotone']; + // Generate the pieces needed for rendering a duotone to the page. + if ( $has_duotone_attribute ) { - $is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0; - $is_css = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false; - $is_custom = is_array( $duotone_attr ); + // Possible values for duotone attribute: + // 1. Array of colors - e.g. array('#000000', '#ffffff'). + // 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)'' + // 3. A CSS string - e.g. 'unset' to remove globally applied duotone. - // Generate the pieces needed for rendering a duotone to the page. - if ( $is_preset ) { - // Extract the slug from the preset variable string. - $slug = str_replace( 'var:preset|duotone|', '', $duotone_attr ); + $duotone_attr = $block['attrs']['style']['color']['duotone']; + $is_preset = is_string( $duotone_attr ) && WP_Duotone::is_preset( $duotone_attr ); + $is_css = is_string( $duotone_attr ) && ! $is_preset; + $is_custom = is_array( $duotone_attr ); + + if ( $is_preset ) { + + // Extract the slug from the preset variable string. + $slug = WP_Duotone::gutenberg_get_slug_from_attr( $duotone_attr ); + + // Utilize existing preset CSS custom property. + $filter_property = "var(--wp--preset--duotone--$slug)"; + + WP_Duotone::$output[ $slug ] = WP_Duotone::$global_styles_presets[ $slug ]; + + } elseif ( $is_css ) { + // Build a unique slug for the filter based on the CSS value. + $slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); + + // Pass through the CSS value. + $filter_property = $duotone_attr; + } elseif ( $is_custom ) { + // Build a unique slug for the filter based on the array of colors. + $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); + + $filter_data = array( + 'slug' => $slug, + 'colors' => $duotone_attr, + ); + // Build a customized CSS filter property for unique slug. + $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); + + WP_Duotone::$output[ $slug ] = $filter_data; + } + } elseif ( $has_global_styles_duotone ) { + $slug = WP_Duotone::$global_styles_block_names[ $block['blockName'] ]; // Utilize existing preset CSS custom property. $filter_property = "var(--wp--preset--duotone--$slug)"; - } elseif ( $is_css ) { - // Build a unique slug for the filter based on the CSS value. - $slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); - - // Pass through the CSS value. - $filter_property = $duotone_attr; - } elseif ( $is_custom ) { - // Build a unique slug for the filter based on the array of colors. - $slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); - - // This has the same shape as a preset, so it can be used in place of a - // preset when getting the filter property and SVG filter. - $filter_data = array( - 'slug' => $slug, - 'colors' => $duotone_attr, - ); - // Build a customized CSS filter property for unique slug. - $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); - - // SVG will be output on the page later. - $filter_svg = gutenberg_get_duotone_filter_svg( $filter_data ); + WP_Duotone::$output[ $slug ] = WP_Duotone::$global_styles_presets[ $slug ]; } // - Applied as a class attribute to the block wrapper. @@ -493,6 +506,11 @@ function gutenberg_render_duotone_support( $block_content, $block ) { // Build the CSS selectors to which the filter will be applied. $selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support ); + // We only want to add the selector if we have it in the output already, essentially skipping 'unset'. + if ( array_key_exists( $slug, WP_Duotone::$output ) ) { + WP_Duotone::$output[ $slug ]['selector'] = $selector; + } + // Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that // the styles are rendered in an inline for block supports because we're // using the `context` option to instruct it so. @@ -514,33 +532,6 @@ function gutenberg_render_duotone_support( $block_content, $block ) { ) ); - // If we needed to generate an SVG, output it on the page. - if ( isset( $filter_svg ) ) { - add_action( - 'wp_footer', - static function () use ( $filter_svg, $selector ) { - echo $filter_svg; - - /* - * Safari renders elements incorrectly on first paint when the - * SVG filter comes after the content that it is filtering, so - * we force a repaint with a WebKit hack which solves the issue. - */ - global $is_safari; - if ( $is_safari ) { - /* - * Simply accessing el.offsetHeight flushes layout and style - * changes in WebKit without having to wait for setTimeout. - */ - printf( - '', - wp_json_encode( $selector ) - ); - } - } - ); - } - // Like the layout hook, this assumes the hook only applies to blocks with a single wrapper. return preg_replace( '/' . preg_quote( 'class="', '/' ) . '/', @@ -550,6 +541,81 @@ static function () use ( $filter_svg, $selector ) { ); } + +add_action( + 'wp_footer', + static function () { + + foreach ( WP_Duotone::$output as $filter_data ) { + + $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); + // SVG will be output on the page later. + $filter_svg = gutenberg_get_duotone_filter_svg( $filter_data ); + + echo $filter_svg; + + // This is for classic themes - in block themes, the CSS is added in the head via the value_func. + if ( ! wp_is_block_theme() ) { + $duotone_preset_css_var = WP_Theme_JSON_Gutenberg::get_preset_css_var( array( 'color', 'duotone' ), $filter_data['slug'] ); + wp_add_inline_style( 'core-block-supports', 'body{' . $duotone_preset_css_var . ' :' . $filter_property . ';}' ); + } + + global $is_safari; + if ( $is_safari ) { + duotone_safari_rerender_hack( $filter_data['selector'] ); + } + } + } +); + +/** + * Appends the used duotone fitler CSS Vars to the inline global styles CSS + */ +add_action( + 'wp_enqueue_scripts', + static function() { + + if ( empty( WP_Duotone::$output ) ) { + return; + } + + $duotone_css_vars = ''; + + foreach ( WP_Duotone::$output as $filter_data ) { + if ( ! array_key_exists( $filter_data['slug'], WP_Duotone::$global_styles_presets ) ) { + continue; + } + + $filter_property = gutenberg_get_duotone_filter_property( $filter_data ); + + $duotone_preset_css_var = WP_Theme_JSON_Gutenberg::get_preset_css_var( array( 'color', 'duotone' ), $filter_data['slug'] ); + $duotone_css_vars .= $duotone_preset_css_var . ': ' . $filter_property . ';'; + } + + if ( ! empty( $duotone_css_vars ) ) { + wp_add_inline_style( 'global-styles', 'body{' . $duotone_css_vars . '}' ); + } + }, + 11 +); + +/** + * Safari renders elements incorrectly on first paint when the SVG filter comes after the content that it is filtering, + * so we force a repaint with a WebKit hack which solves the issue. + * + * @param string $selector The selector to apply the hack for. + */ +function duotone_safari_rerender_hack( $selector ) { + /* + * Simply accessing el.offsetHeight flushes layout and style + * changes in WebKit without having to wait for setTimeout. + */ + printf( + '', + wp_json_encode( $selector ) + ); +} + // Register the block support. WP_Block_Supports::get_instance()->register( 'duotone', diff --git a/lib/class-wp-duotone.php b/lib/class-wp-duotone.php new file mode 100644 index 0000000000000..8f15efbecf0ad --- /dev/null +++ b/lib/class-wp-duotone.php @@ -0,0 +1,150 @@ + + * [ + * 'slug' => 'blue-orange', + * 'colors' => [ '#0000ff', '#ffcc00' ], + * ] + * ], + * … + * ] + * + * @since 6.3.0 + * @var array + */ + static $global_styles_presets = array(); + + /** + * An array of block names from global, theme, and custom styles that have duotone presets. We'll use this to quickly + * check if a block being rendered needs to have duotone applied, and which duotone preset to use. + * + * Example: + * [ + * 'core/featured-image' => 'blue-orange', + * … + * ] + * + * @since 6.3.0 + * @var array + */ + static $global_styles_block_names = array(); + + /** + * An array of Duotone SVG and CSS ouput needed for the frontend duotone rendering based on what is + * being ouptput on the page. Organized by a slug of the preset/color group and the information needed + * to generate the SVG and CSS at render. + * + * Example: + * [ + * 'blue-orange' => [ + * 'slug' => 'blue-orange', + * 'colors' => [ '#0000ff', '#ffcc00' ], + * ], + * 'wp-duotone-000000-ffffff-2' => [ + * 'slug' => 'wp-duotone-000000-ffffff-2', + * 'colors' => [ '#000000', '#ffffff' ], + * ], + * ] + * + * @since 6.3.0 + * @var array + */ + static $output = array(); + + /** + * Get all possible duotone presets from global and theme styles and store as slug => [ colors array ] + * We only want to process this one time. On block render we'll access and output only the needed presets for that page. + */ + static function set_global_styles_presets() { + // Get the per block settings from the theme.json. + $tree = gutenberg_get_global_settings(); + $presets_by_origin = _wp_array_get( $tree, array( 'color', 'duotone' ), array() ); + + foreach ( $presets_by_origin as $presets ) { + foreach ( $presets as $preset ) { + self::$global_styles_presets[ _wp_to_kebab_case( $preset['slug'] ) ] = array( + 'slug' => $preset['slug'], + 'colors' => $preset['colors'], + ); + } + } + } + + /** + * Scrape all block names from global styles and store in WP_Duotone::$global_styles_block_names + */ + static function set_global_style_block_names() { + // Get the per block settings from the theme.json. + $tree = WP_Theme_JSON_Resolver::get_merged_data(); + $block_nodes = $tree->get_styles_block_nodes(); + $theme_json = $tree->get_raw_data(); + + foreach ( $block_nodes as $block_node ) { + // This block definition doesn't include any duotone settings. Skip it. + if ( empty( $block_node['duotone'] ) ) { + continue; + } + + // Value looks like this: 'var(--wp--preset--duotone--blue-orange)' or 'var:preset|duotone|default-filter'. + $duotone_attr_path = array_merge( $block_node['path'], array( 'filter', 'duotone' ) ); + $duotone_attr = _wp_array_get( $theme_json, $duotone_attr_path, array() ); + + if ( empty( $duotone_attr ) ) { + continue; + } + // If it has a duotone filter preset, save the block name and the preset slug. + $slug = self::gutenberg_get_slug_from_attr( $duotone_attr ); + + if ( $slug && $slug !== $duotone_attr ) { + self::$global_styles_block_names[ $block_node['name'] ] = $slug; + } + } + } + + /** + * Take the inline CSS duotone variable from a block and return the slug. Handles styles slugs like: + * var:preset|duotone|default-filter + * var(--wp--preset--duotone--blue-orange) + * + * @param string $duotone_attr The duotone attribute from a block. + * @return string The slug of the duotone preset or an empty string if no slug is found. + */ + static function gutenberg_get_slug_from_attr( $duotone_attr ) { + // Uses Branch Reset Groups `(?|…)` to return one capture group. + preg_match( '/(?|var:preset\|duotone\|(\S+)|var\(--wp--preset--duotone--(\S+)\))/', $duotone_attr, $matches ); + + return ! empty( $matches[1] ) ? $matches[1] : ''; + } + + /** + * Check if we have a valid duotone preset. + * + * @param string $duotone_attr The duotone attribute from a block. + * @return bool True if the duotone preset present and valid. + */ + static function is_preset( $duotone_attr ) { + $slug = WP_Duotone::gutenberg_get_slug_from_attr( $duotone_attr ); + + return array_key_exists( $slug, WP_Duotone::$global_styles_presets ); + } +} + +add_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_styles_presets' ), 10 ); +add_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_style_block_names' ), 10 ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 673e97d2b84e5..c13bd36baaf47 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -144,7 +144,7 @@ class WP_Theme_JSON_Gutenberg { 'path' => array( 'color', 'duotone' ), 'prevent_override' => array( 'color', 'defaultDuotone' ), 'use_default_names' => false, - 'value_func' => 'gutenberg_get_duotone_filter_property', + 'value_func' => null, // Don't output CSS Custom Properties for duotone. 'css_vars' => '--wp--preset--duotone--$slug', 'classes' => array(), 'properties' => array( 'filter' ), @@ -3480,4 +3480,39 @@ public function set_spacing_sizes() { _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); } + + /** + * Returns the CSS variable for a preset. + * + * @since 6.3.0 + * + * @param array $path Path to the preset. + * @param string $slug Slug of the preset. + * @return string CSS variable. + */ + public static function get_preset_css_var( $path, $slug ) { + $duotone_preset_metadata = static::get_preset_metadata_from_path( $path ); + return static::replace_slug_in_string( $duotone_preset_metadata['css_vars'], $slug ); + } + + /** + * Returns the metadata for a preset. + * + * @since 6.3.0 + * + * @param array $path Path to the preset. + * @return array Preset metadata. + */ + static function get_preset_metadata_from_path( $path ) { + $preset_metadata = array_filter( + static::PRESETS_METADATA, + function( $preset ) use ( &$path ) { + if ( $preset['path'] === $path ) { + return $preset; + } + } + ); + + return reset( $preset_metadata ); + } } diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php index 149a6a18e1450..876d14902fdcb 100644 --- a/lib/compat/wordpress-6.2/script-loader.php +++ b/lib/compat/wordpress-6.2/script-loader.php @@ -191,3 +191,7 @@ function gutenberg_enqueue_global_styles_custom_css() { } } add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_custom_css' ); + + +remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); +remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); diff --git a/lib/load.php b/lib/load.php index a5be015320652..5d8babd052568 100644 --- a/lib/load.php +++ b/lib/load.php @@ -131,6 +131,7 @@ function gutenberg_is_experiment_enabled( $name ) { // Plugin specific code. require __DIR__ . '/class-wp-theme-json-gutenberg.php'; require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php'; +require __DIR__ . '/class-wp-duotone.php'; require __DIR__ . '/blocks.php'; require __DIR__ . '/client-assets.php'; require __DIR__ . '/demo.php'; diff --git a/phpunit/block-supports/duotone-test.php b/phpunit/block-supports/duotone-test.php index 3588950468aba..306ad977fba5d 100644 --- a/phpunit/block-supports/duotone-test.php +++ b/phpunit/block-supports/duotone-test.php @@ -10,10 +10,10 @@ class WP_Block_Supports_Duotone_Test extends WP_UnitTestCase { public function test_gutenberg_render_duotone_support_preset() { $block = array( 'blockName' => 'core/image', - 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|slug' ) ) ), + 'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ), ); $block_content = '
'; - $expected = '
'; + $expected = '
'; $this->assertSame( $expected, gutenberg_render_duotone_support( $block_content, $block ) ); } @@ -37,4 +37,41 @@ public function test_gutenberg_render_duotone_support_custom() { $this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) ); } + public function data_gutenberg_get_slug_from_attr() { + return array( + 'pipe-slug' => array( 'var:preset|duotone|blue-orange', 'blue-orange' ), + 'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ), + 'css-var-weird-chars' => array( 'var(--wp--preset--duotone--.)', '.' ), + 'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ), + 'invalid' => array( 'not a valid attribute', '' ), + 'css-var-no-value' => array( 'var(--wp--preset--duotone--)', '' ), + 'pipe-slug-no-value' => array( 'var:preset|duotone|', '' ), + 'css-var-spaces' => array( 'var(--wp--preset--duotone-- ', '' ), + 'pipe-slug-spaces' => array( 'var:preset|duotone| ', '' ), + ); + } + + /** + * @dataProvider data_gutenberg_get_slug_from_attr + */ + public function test_gutenberg_get_slug_from_attr( $data_attr, $expected ) { + $this->assertSame( $expected, WP_Duotone::gutenberg_get_slug_from_attr( $data_attr ) ); + } + + public function data_is_preset() { + return array( + 'pipe-slug' => array( 'var:preset|duotone|blue-orange', true ), + 'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', true ), + 'css-var-weird-chars' => array( 'var(--wp--preset--duotone--.)', false ), + 'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ), + 'invalid' => array( 'not a valid attribute', false ), + ); + } + + /** + * @dataProvider data_is_preset + */ + public function test_is_preset( $data_attr, $expected ) { + $this->assertSame( $expected, WP_Duotone::is_preset( $data_attr ) ); + } }