Duotone doesn't work with Media & Text block

[OlaIola]

Description

Duotone works with Image block but with Media & Text block it isn't working.

Expected behaviour

Duotone is supposed to work with all images (at least JPG and PNG).

Actual behaviour

WordPress information

• WordPress version: including 5.8 Beta 3

[thisissandip]

PR added: #32984

[ajlende]

Copying over #32984 (comment) for easier reference as to why this hasn't been completed and the workaround that can be used.

The media and text block doesn't support duotone because it allows for video elements with controls, and the SVG filter applies to the video controls as well causing contrast accessibility issues. (See #26361 (comment))

If you want to have a duotone image next to text, I'd suggest using columns to arrange the image and text side-by-side.

[mrwweb]

I would like to nudge this issue now that doing this has become harder in recent versions of WP.

Previous to 6.4 (or possibly 6.3?), I was registering a custom block style (e.g., .is-style-xxxxx-duotone { filter: var(--wp--preset--duotone--xxxxxxx) }) that referenced the matching SVG duotone filter. This method no longer reliably works, because duotone SVGs are only output on posts where a block is using that duotone filter. If my Media & Text block is the only block on that post that needs the filter, the SVG and custom property are not available.

I've switched to to inlining the SVG in the custom block style, but that is far from ideal. If it helps unblock this issue, I'd be quite happy if the duotone option was only available on Media & Text blocks using images rather than videos. I would think that can be detected, but I admittedly don't know.

Example of workaround for now

register_block_style(
	'core/media-text',
	array(
		'name' => 'newspaper-duotone',
		'label' => __( 'Newspaper Duotone', 'textdomain' ),
		'inline_style' => '.wp-block-media-text.is-style-newspaper-duotone .wp-block-media-text__media { filter: url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="wp-duotone-newspaper"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.1921568627451 0.89019607843137"></feFuncR><feFuncG type="table" tableValues="0.1921568627451 0.89019607843137"></feFuncG><feFuncB type="table" tableValues="0.1921568627451 0.89019607843137"></feFuncB><feFuncA type="table" tableValues="1 1"></feFuncA></feComponentTransfer><feComposite in2="SourceGraphic" operator="in"></feComposite></filter></defs></svg>#wp-duotone-newspaper\') }',
	)
);

[mrwweb]

I just had a client request this because it seemed obvious to them that if they could duotone an image, they should be able to duotone it with Media & Text. Given that Columns + Image wouldn't include the same responsive behavior or focal point picker, that's also not a viable workaround in many (most?) cases.

the media and text block doesn't support duotone because it allows for video elements

I want to first say that I ❤ the concern for accessibility. That is unambiguously good. To avoid the issue, maybe duotone support can only apply for the block with images? My gut says that wouldn't be that hard.