Duotone: Output duotone presets per block

lib/block-supports/duotone.php

@@ -304,6 +304,12 @@ function gutenberg_get_duotone_filter_id( $preset ) {
 	return 'wp-duotone-' . $preset['slug'];
 }
 
+function gutenberg_get_duotone_preset_value( $preset ) {
+	if( array_key_exists( $preset['slug'], WP_Duotone::$duotone_output ) ) {
+		return gutenberg_get_duotone_filter_property( $preset );
+	}
+}
+
 /**
  * Returns the CSS filter property url to reference the rendered SVG.
  *
@@ -418,6 +424,139 @@ function gutenberg_register_duotone_support( $block_type ) {
 	}
 }
 
+class WP_Duotone {
+	/**
+	 * An array of Duotone presets from global, theme, and custom styles.
+	 * 
+	 * Example: 
+	 * [
+	 * 		'blue-orange' => 
+	 * 			[
+	 * 				'slug'	=> 'blue-orange',
+	 * 				'colors' => [ '#0000ff', '#ffcc00' ],
+	 * 			]
+	 * 		],
+	 * 		…
+	 * ]
+	 * 
+	 * @since 6.3.0
+	 * @var array
+	 */
+	static $duotone_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',
+	 * 		 …
+	 * 	]
+	 *
+	 */
+	static $duotone_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 $duotone_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 gutenberg_save_duotone_presets() {
+		// Get the per block settings from the theme.json.
+		$tree = WP_Theme_JSON_Resolver::get_merged_data();
+		$settings = $tree->get_settings();
+		$presets_by_origin = _wp_array_get( $settings, array( 'color', 'duotone' ), array() );
+		$flat_presets = [];
+		// Flatten the array
+		foreach( $presets_by_origin as $presets ) {
+			foreach( $presets as $preset ) {
+				// $flat_presets[ _wp_to_kebab_case( $preset['slug'] ) ] = $preset;
+				self::$duotone_presets[ _wp_to_kebab_case( $preset['slug'] ) ] = [
+					'slug'	=> $preset[ 'slug' ],
+					'colors' => $preset[ 'colors' ],
+				];
+			}
+		}
+	}
+
+	static function gutenberg_save_duotone_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)'
+			$duotone_filter_path = array_merge( $block_node['path'], array( 'filter', 'duotone' ) );
+			$duotone_filter = _wp_array_get( $theme_json, $duotone_filter_path, array() );
+
+			if( empty( $duotone_filter ) ) {
+				continue;
+			}
+
+			// If it has a duotone preset, save the block name and the preset slug.
+			self::$duotone_block_names[ $block_node[ 'name' ] ] = self::gutenberg_get_duotone_slug_from_preset_css_variable( $duotone_filter );
+		}
+	}
+
+	static function gutenberg_get_duotone_slug_from_preset_css_variable( $css_variable ) {
+		if ( ! empty( $css_variable ) ) {
+			// Get the preset slug from the filter.
+			// TODO: Support var:preset|duotone|slug syntax.
+			preg_match('/var\(--wp--preset--duotone--(.*)\)/', $css_variable, $matches );
+			if ( $matches[1] ) {
+				return $matches[1];
+			}
+		}
+	}
+
+	/**
+	 * Get all possible duotone presets from global and theme styles. 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 gutenberg_identify_used_duotone_blocks( $block_content, $block ) {
+		// If the block name exists in our pre-defined list of block selectors that use duotone in theme.json (or related), add it to our list of duotone to output
+		if( array_key_exists( $block['blockName'], self::$duotone_block_names ) ) {
+			$preset_slug = self::$duotone_block_names[ $block['blockName'] ];
+
+			self::$duotone_output[ $preset_slug ] = self::$duotone_presets[ $preset_slug ];
+		}
+
+		return $block_content;
+	}
+}
+
 /**
  * Render out the duotone stylesheet and SVG.
  *
@@ -513,31 +652,13 @@ function gutenberg_render_duotone_support( $block_content, $block ) {
 	// For *non*-presets then generate an SVG for the filter.
 	// Note: duotone presets are already pre-generated so no need to do this again.
 	if ( $is_duotone_colors_array ) {
-		$filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset );
-
-		add_action(
-			'wp_footer',
-			static function () use ( $filter_svg, $selector ) {
-				echo $filter_svg;
+		WP_Duotone::$duotone_output[ $filter_preset[ 'slug' ] ] = $filter_preset;
+	} else if ( ! $is_duotone_unset ) {
+		WP_Duotone::$duotone_output[ $filter_preset['slug'] ] = WP_Duotone::$duotone_presets[ $filter_preset['slug'] ];
+	}
 
-				/*
-				 * 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(
-						'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
-						wp_json_encode( $selector )
-					);
-				}
-			}
-		);
+	if( ! $is_duotone_unset ) {
+		duotone_safari_rerender_hack( $selector );
 	}
 
 	// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
@@ -560,3 +681,52 @@ static function () use ( $filter_svg, $selector ) {
 // Remove WordPress core filter to avoid rendering duplicate support elements.
 remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
 add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 );
+
+add_action(
+	'wp_footer',
+	static function () {
+		foreach( WP_Duotone::$duotone_output as $duotone_data ) {
+			// Convert $preset from a slug to an array of colors.
+			$filter_svg = gutenberg_get_duotone_filter_svg( $duotone_data );
+			$filter_css = gutenberg_get_duotone_filter_property( $duotone_data );
+
+			echo $filter_svg;
+
+			// This is for classic themes - in block themes, the CSS is added in the head via the value_func.
+			$duotone_preset_css_var = WP_Theme_JSON_Gutenberg::get_preset_css_var( array( 'color', 'duotone' ), $duotone_data[ 'slug'] );
+			wp_add_inline_style( 'core-block-supports', 'body{' . $duotone_preset_css_var . ' :' . $filter_css . ';}' );
+
+		}
+	}
+);
+
+/**
+ * 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 ) {
+	add_action(
+		'wp_footer',
+		static function () use ( $selector ) {
+			global $is_safari;
+
+			// TODO: Move is_safari check to before the add_action, so we don't add the action unless we're on safari
+			if ( $is_safari ) {
+				/*
+				* Simply accessing el.offsetHeight flushes layout and style
+				* changes in WebKit without having to wait for setTimeout.
+				*/
+				printf(
+					'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
+					wp_json_encode( $selector )
+				);
+			}
+		}
+	);
+}
+
+add_action( 'wp_loaded', array( 'WP_Duotone', 'gutenberg_save_duotone_presets' ), 10 );
+add_action( 'wp_loaded', array( 'WP_Duotone', 'gutenberg_save_duotone_block_names' ), 10 );
+add_filter( 'block_render', array( 'WP_Duotone', 'gutenberg_identify_used_duotone_blocks' ), 10, 2 );

lib/class-wp-theme-json-gutenberg.php

@@ -152,7 +152,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'        => 'gutenberg_get_duotone_preset_value',
 			'css_vars'          => '--wp--preset--duotone--$slug',
 			'classes'           => array(),
 			'properties'        => array( 'filter' ),
@@ -1634,12 +1634,12 @@ protected static function get_settings_values_by_slug( $settings, $preset_metada
 				) {
 					$value_func = $preset_metadata['value_func'];
 					$value      = call_user_func( $value_func, $preset );
-				} else {
-					// If we don't have a value, then don't add it to the result.
-					continue;
 				}
 
-				$result[ $slug ] = $value;
+				// If we don't have a value, then don't add it to the result.
+				if ( ! empty( $value) ) {
+					$result[ $slug ] = $value;
+				}
 			}
 		}
 		return $result;
@@ -3460,4 +3460,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 );
+	}
 }

lib/compat/wordpress-6.2/get-global-styles-and-settings.php

@@ -161,6 +161,8 @@ function gutenberg_get_global_stylesheet( $types = array() ) {
 		}
 		$styles_rest = $tree->get_stylesheet( $types, $origins );
 	}
+
+
 	$stylesheet = $styles_variables . $styles_rest;
 	if ( $can_use_cached ) {
 		wp_cache_set( $cache_key, $stylesheet, $cache_group );

lib/compat/wordpress-6.2/script-loader.php

@@ -191,3 +191,6 @@ 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' );