wpseek.com
A WordPress-centric search engine for devs and theme authors



wp_render_elements_support_styles › WordPress Function

Since6.0.0
Deprecatedn/a
wp_render_elements_support_styles ( $parsed_block )
Access:
  • private
Parameters:
  • (array) $parsed_block The parsed block.
    Required: Yes
Returns:
  • (array) The same parsed block with elements classname added if appropriate.
Defined at:
Codex:
Change Log:
  • 6.1.0
  • 6.6.0

Render the elements stylesheet and adds elements class name to block as required.

In the case of nested blocks we want the parent element styles to be rendered before their descendants. This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant: we want the descendant style to take priority, and this is done by loading it after, in DOM order.


Source

function wp_render_elements_support_styles( $parsed_block ) {
	/*
	 * The generation of element styles and classname were moved to the
	 * `render_block_data` filter in 6.6.0 to avoid filtered attributes
	 * breaking the application of the elements CSS class.
	 *
	 * @see https://github.com/WordPress/gutenberg/pull/59535
	 *
	 * The change in filter means, the argument types for this function
	 * have changed and require deprecating.
	 */
	if ( is_string( $parsed_block ) ) {
		_deprecated_argument(
			__FUNCTION__,
			'6.6.0',
			__( 'Use as a `pre_render_block` filter is deprecated. Use with `render_block_data` instead.' )
		);
	}

	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] );
	$element_block_styles = isset( $parsed_block['attrs']['style']['elements'] ) ? $parsed_block['attrs']['style']['elements'] : null;

	if ( ! $element_block_styles ) {
		return $parsed_block;
	}

	$skip_link_color_serialization         = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
	$skip_heading_color_serialization      = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
	$skip_button_color_serialization       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
	$skips_all_element_color_serialization = $skip_link_color_serialization &&
		$skip_heading_color_serialization &&
		$skip_button_color_serialization;

	if ( $skips_all_element_color_serialization ) {
		return $parsed_block;
	}

	$options = array(
		'button'  => array( 'skip' => $skip_button_color_serialization ),
		'link'    => array( 'skip' => $skip_link_color_serialization ),
		'heading' => array( 'skip' => $skip_heading_color_serialization ),
	);

	if ( ! wp_should_add_elements_class_name( $parsed_block, $options ) ) {
		return $parsed_block;
	}

	$class_name         = wp_get_elements_class_name( $parsed_block );
	$updated_class_name = isset( $parsed_block['attrs']['className'] ) ? $parsed_block['attrs']['className'] . " $class_name" : $class_name;

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

	// Generate element styles based on selector and store in style engine for enqueuing.
	$element_types = array(
		'button'  => array(
			'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
			'skip'     => $skip_button_color_serialization,
		),
		'link'    => array(
			'selector'       => ".$class_name a:where(:not(.wp-element-button))",
			'hover_selector' => ".$class_name a:where(:not(.wp-element-button)):hover",
			'skip'           => $skip_link_color_serialization,
		),
		'heading' => array(
			'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
			'skip'     => $skip_heading_color_serialization,
			'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
		),
	);

	foreach ( $element_types as $element_type => $element_config ) {
		if ( $element_config['skip'] ) {
			continue;
		}

		$element_style_object = isset( $element_block_styles[ $element_type ] ) ? $element_block_styles[ $element_type ] : null;

		// Process primary element type styles.
		if ( $element_style_object ) {
			wp_style_engine_get_styles(
				$element_style_object,
				array(
					'selector' => $element_config['selector'],
					'context'  => 'block-supports',
				)
			);

			if ( isset( $element_style_object[':hover'] ) ) {
				wp_style_engine_get_styles(
					$element_style_object[':hover'],
					array(
						'selector' => $element_config['hover_selector'],
						'context'  => 'block-supports',
					)
				);
			}
		}

		// Process related elements e.g. h1-h6 for headings.
		if ( isset( $element_config['elements'] ) ) {
			foreach ( $element_config['elements'] as $element ) {
				$element_style_object = isset( $element_block_styles[ $element ] )
					? $element_block_styles[ $element ]
					: null;

				if ( $element_style_object ) {
					wp_style_engine_get_styles(
						$element_style_object,
						array(
							'selector' => ".$class_name $element",
							'context'  => 'block-supports',
						)
					);
				}
			}
		}
	}

	return $parsed_block;
}