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

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();
}

View all references View on Trac View on GitHub