wp_render_custom_css_support_styles() │ WP 7.0.0

Render the custom CSS stylesheet and add class name to block as required.

No Hooks.

Returns

Array. The same parsed block with custom CSS class name added if appropriate.

Usage

wp_render_custom_css_support_styles( $parsed_block );

$parsed_block(array) (required)

The parsed block.

Changelog

wp_render_custom_css_support_styles() wp render custom css support styles code ^{WP 7.0}

function wp_render_custom_css_support_styles( $parsed_block ) {
	$custom_css = $parsed_block['attrs']['style']['css'] ?? null;
	if ( ! is_string( $custom_css ) || '' === trim( $custom_css ) ) {
		return $parsed_block;
	}

	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] );
	if ( ! block_has_support( $block_type, 'customCSS', true ) ) {
		return $parsed_block;
	}

	// Validate CSS doesn't contain HTML markup (same validation as global styles REST API).
	if ( preg_match( '#</?\w+#', $custom_css ) ) {
		return $parsed_block;
	}

	// Generate a unique class name for this block instance.
	$class_name          = wp_unique_id_from_values( $parsed_block, 'wp-custom-css-' );
	$existing_class_name = $parsed_block['attrs']['className'] ?? null;
	$updated_class_name  = is_string( $existing_class_name )
		? "$existing_class_name $class_name"
		: $class_name;

	_wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name );

	// Process the custom CSS using the same method as global styles.
	$selector      = '.' . $class_name;
	$processed_css = WP_Theme_JSON::process_blocks_custom_css( $custom_css, $selector );

	if ( ! empty( $processed_css ) ) {
		/*
		 * Register and add inline style for block custom CSS.
		 * The style depends on global-styles to ensure custom CSS loads after
		 * and can override global styles.
		 */
		wp_register_style( 'wp-block-custom-css', false, array( 'global-styles' ) );
		wp_add_inline_style( 'wp-block-custom-css', $processed_css );
	}

	return $parsed_block;
}