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