Adding duotone support to core block via filter does not enqueue front-end duotone styles/SVG

[mrwweb]

Description

Because of #32972 I'm adding Duotone to the Media & Text block for a client project. I have it working in the editor by filtering blocks.registerBlockType to set supports.filter.duotone true. This works as expected in the editor, including for custom duotones.

However, on the front-end, I cannot get it to work. My expectation is that if a block supports duotone filters, then it should trigger the required front-end styles.

I have tried both the deprecated wp_render_duotone_support() and WP_Duotone::render_duotone_support() in a render_block filter, but neither seems to output the SVGs and styles needed to render the filter. Although the deprecation message for wp_render_duotone_support() references the WP_Duotone::render_duotone_support(), it doesn't seem like a simple straight replacement.

This is closely related to #53662, but feels different. I do wonder if they could both be solved together.

Step-by-step reproduction instructions

Here is my index.js compiled via @wordpress/scripts that adds duotone support to the Media & Text block which works as expected in the editor.

/**
 * WordPress dependencies
 */
import { addFilter } from "@wordpress/hooks";

/**
 * Adds duotone support to Media & Text block
 *
 * @param {Object} settings - The original block settings.
 * @param {string} name - The name of the block.
 *
 * @returns {Object} The modified block settings with added border support.
 *
 * @see https://nickdiego.com/how-to-modify-block-supports-using-client-side-filters/
 */
function addDuotoneSupport(settings, name) {
	// Bail early if the block does not have supports.
	if (!settings?.supports) {
		return settings;
	}
	if (name === "core/media-text") {
		return Object.assign({}, settings, {
			supports: Object.assign(settings.supports, {
				filter: {
					duotone: true,
				},
			}),
			selectors: Object.assign(settings.selectors, {
				filter: {
					duotone: ".wp-block-media-text .wp-block-media-text__media",
				},
			}),
		});
	}

	return settings;
}

addFilter(
	"blocks.registerBlockType",
	"mrw/media-text-duotone",
	addDuotoneSupport,
);

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.5.4, 6.5.5, and 6.6-RC1
• No Gutenberg
• Twenty Twenty Four
• Plugins: The plugin to add duotone to Media & Text, Query Monitor

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[gyurmey2]

I tried to provide support for core/group or core/gallery blocks, but it doesn't work on the frontend either.

[t-hamano]

As I understand it, the duotone styles on the frontend are generated server-side, i.e. by PHP.
Therefore, I think a PHP hook would be enough.

function custom_register_block_type_args( $args, $block_type ) {
	if ( 'core/media-text' !== $block_type ) {
			return $args;
	}

	if ( ! isset( $args['supports'] ) ) {
		$args['supports'] = array();
	}

	if ( ! isset( $args['selectors'] ) ) {
		$args['selectors'] = array();
	}

	$args['supports'] = array_merge(
		$args['supports'],
		array(
			'filter' => array(
				'duotone' => true,
			),
		)
	);

	$args['selectors'] = array_merge(
		$args['selectors'],
		array(
			'filter' => array(
				'duotone' => '.wp-block-media-text .wp-block-media-text__media',
			),
		)
	);

	return $args;
}
add_filter( 'register_block_type_args', 'custom_register_block_type_args', 10, 2 );

[gyurmey2]

@t-hamano, Thank you, it works!

[mrwweb]

@t-hamano Thank you for this! That is a clear answer and makes total sense.

[ndiego]

Just noting for completeness that you can also achieve the same result using the block_type_metadata hook.

function example_add_duotone_to_media_text_blocks( $metadata ) {

	// Only apply the filter to Media & Text blocks.
	if ( ! isset( $metadata['name'] ) || 'core/media-text' !== $metadata['name'] ) {
		return $metadata;
	}

	if ( ! isset( $metadata['supports'] ) ) {
		$metadata['supports'] = array();
	}

	if ( ! isset( $metadata['selectors'] ) ) {
		$metadata['selectors'] = array();
	}

	$metadata['supports'] = array_merge(
		$metadata['supports'],
		array(
			'filter' => array(
				'duotone' => true,
			),
		)
	);

	$metadata['selectors'] = array_merge(
		$metadata['selectors'],
		array(
			'filter' => array(
				'duotone' => '.wp-block-media-text .wp-block-media-text__media',
			),
		)
	);

	return $metadata;
}
add_filter( 'block_type_metadata', 'example_add_duotone_to_media_text_blocks' );

[mrwweb]

@ndiego Thanks for including that! Would you say there is a benefit to block_type_metadata vs register_block_type_args?