WP_Duotone::render_duotone_support( string $block_content, array $block, WP_Block $wp_block ): string

Render out the duotone CSS styles and SVG.

Description

The hooks self::set_global_style_block_names and self::set_global_styles_presets must be called before this function.

Parameters

$block_contentstringrequired
Rendered block content.
$blockarrayrequired
Block object.
$wp_blockWP_Blockrequired
The block instance.

Return

string Filtered block content.

Source

public static function render_duotone_support( $block_content, $block, $wp_block ) {	if ( ! $block['blockName'] ) {	return $block_content;	}	$duotone_selector = self::get_selector( $wp_block->block_type );	if ( ! $duotone_selector ) {	return $block_content;	}	$global_styles_block_names = self::get_all_global_style_block_names();	// The block should have a duotone attribute or have duotone defined in its theme.json to be processed.	$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );	$has_global_styles_duotone = array_key_exists( $block['blockName'], $global_styles_block_names );	if ( ! $has_duotone_attribute && ! $has_global_styles_duotone ) {	return $block_content;	}	// Generate the pieces needed for rendering a duotone to the page.	if ( $has_duotone_attribute ) {	/* * Possible values for duotone attribute: * 1. Array of colors - e.g. array('#000000', '#ffffff'). * 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|blue-orange' or 'var(--wp--preset--duotone--blue-orange)'' * 3. A CSS string - e.g. 'unset' to remove globally applied duotone. */	$duotone_attr = $block['attrs']['style']['color']['duotone'];	$is_preset = is_string( $duotone_attr ) && self::is_preset( $duotone_attr );	$is_css = is_string( $duotone_attr ) && ! $is_preset;	$is_custom = is_array( $duotone_attr );	if ( $is_preset ) {	$slug = self::get_slug_from_attribute( $duotone_attr ); // e.g. 'blue-orange'.	$filter_id = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-blue-orange'.	$filter_value = self::get_css_var( $slug ); // e.g. 'var(--wp--preset--duotone--blue-orange)'.	// CSS custom property, SVG filter, and block CSS.	self::enqueue_global_styles_preset( $filter_id, $duotone_selector, $filter_value );	} elseif ( $is_css ) {	$slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); // e.g. 'unset-1'.	$filter_id = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-unset-1'.	$filter_value = $duotone_attr; // e.g. 'unset'.	// Just block CSS.	self::enqueue_block_css( $filter_id, $duotone_selector, $filter_value );	} elseif ( $is_custom ) {	$slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); // e.g. '000000-ffffff-2'.	$filter_id = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-000000-ffffff-2'.	$filter_value = self::get_filter_url( $filter_id ); // e.g. 'url(#wp-duotone-filter-000000-ffffff-2)'.	$filter_data = array(	'slug' => $slug,	'colors' => $duotone_attr,	);	// SVG filter and block CSS.	self::enqueue_custom_filter( $filter_id, $duotone_selector, $filter_value, $filter_data );	}	} elseif ( $has_global_styles_duotone ) {	$slug = $global_styles_block_names[ $block['blockName'] ]; // e.g. 'blue-orange'.	$filter_id = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-blue-orange'.	$filter_value = self::get_css_var( $slug ); // e.g. 'var(--wp--preset--duotone--blue-orange)'.	// CSS custom property, SVG filter, and block CSS.	self::enqueue_global_styles_preset( $filter_id, $duotone_selector, $filter_value );	}	// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.	$tags = new WP_HTML_Tag_Processor( $block_content );	if ( $tags->next_tag() ) {	$tags->add_class( $filter_id );	}	return $tags->get_updated_html(); } 

Changelog

VersionDescription
6.3.0Introduced.

User Contributed Notes

You must log in before being able to contribute a note or feedback.