Manages duotone block supports and global styles.

Source: wp-includes/class-wp-duotone.php
Since: 6.3.0
Access: Private/Internal

Overview

Duotone applies a two-color gradient effect to images using SVG filters. WP_Duotone handles:

1. Color parsing (hex, RGB, HSL)
2. SVG filter generation
3. CSS custom properties for presets
4. Block attribute processing

Static Properties

Public Methods

register_duotone_support()

Registers duotone block attributes.

public static function register_duotone_support( WP_Block_Type $block_type )

Called during block type registration. Adds style attribute if block has filter.duotone support.

render_duotone_support()

Renders duotone CSS and SVG for a block.

public static function render_duotone_support( 
    string $block_content, 
    array $block, 
    WP_Block $wp_block 
): string

Returns: Modified block content with duotone class.

Processing Flow:

1. Check block has duotone selector
2. Check for duotone attribute or global styles
3. Determine if preset, CSS string, or custom colors
4. Enqueue appropriate CSS/SVG
5. Add filter class to block wrapper

Duotone Attribute Formats:

// Preset reference
'var:preset|duotone|blue-orange'
'var(--wp--preset--duotone--blue-orange)'

// Custom colors
array( '#000000', '#ffffff' )

// CSS value (e.g., to reset)
'unset'

restore_image_outer_container()

Fixes duotone class placement in classic themes.

public static function restore_image_outer_container( string $block_content ): string

Moves duotone class from inner element to wrapper div for wp-block-image.

output_block_styles()

Outputs block CSS declarations.

public static function output_block_styles()

Appends duotone filter declarations to inline block supports CSS.

output_global_styles()

Outputs CSS custom properties for presets.

public static function output_global_styles()

Adds duotone preset variables to global styles.

output_footer_assets()

Outputs SVG definitions and CSS for classic themes.

public static function output_footer_assets()

Renders:

• SVG filter definitions
• CSS custom properties (classic themes only)
• Block CSS declarations (classic themes only)

add_editor_settings()

Adds duotone SVGs and CSS to block editor.

public static function add_editor_settings( array $settings ): array

Injects duotone assets for editor preview rendering.

migrate_experimental_duotone_support_flag()

Migrates legacy color.__experimentalDuotone to filter.duotone.

public static function migrate_experimental_duotone_support_flag( 
    array $settings, 
    array $metadata 
): array

Color Parsing (Private)

Ported from colord library.

Supported Formats

Internal Methods

SVG Filter Generation

get_filter_svg()

Generates the SVG filter definition.

private static function get_filter_svg( string $filter_id, array $colors ): string

SVG Structure:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" 
     width="0" height="0" style="visibility: hidden; ...">
    <defs>
        <filter id="wp-duotone-blue-orange">
            <!-- Convert to grayscale -->
            <feColorMatrix type="matrix" values="
                .299 .587 .114 0 0
                .299 .587 .114 0 0
                .299 .587 .114 0 0
                .299 .587 .114 0 0
            "/>
            <!-- Map grayscale to duotone colors -->
            <feComponentTransfer>
                <feFuncR type="table" tableValues="0 1"/>
                <feFuncG type="table" tableValues="0 0.8"/>
                <feFuncB type="table" tableValues="1 0.5"/>
                <feFuncA type="table" tableValues="1 1"/>
            </feComponentTransfer>
            <feComposite in2="SourceGraphic" operator="in"/>
        </filter>
    </defs>
</svg>

CSS Output

CSS Custom Properties

:root {
    --wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');
}

Block CSS

.wp-duotone-blue-orange.wp-block-image img {
    filter: var(--wp--preset--duotone--blue-orange);
}

theme.json Integration

Defining Presets

{
    "settings": {
        "color": {
            "duotone": [
                {
                    "slug": "blue-orange",
                    "colors": ["#0000ff", "#ffcc00"],
                    "name": "Blue and Orange"
                }
            ]
        }
    }
}

Applying to Blocks

{
    "styles": {
        "blocks": {
            "core/image": {
                "filter": {
                    "duotone": "var:preset|duotone|blue-orange"
                }
            }
        }
    }
}

Block Support

Add duotone support to custom blocks:

{
    "supports": {
        "filter": {
            "duotone": true
        }
    }
}

Or with custom selector:

{
    "supports": {
        "filter": {
            "duotone": ".my-block img"
        }
    }
}

Legacy support (color.__experimentalDuotone) is automatically migrated.