WP_Theme_JSON::get_layout_styles( array $block_metadata ): string

In this article

Gets the CSS layout rules for a particular block from theme.json layout definitions.

Parameters

$block_metadataarrayrequired
Metadata about the block to get styles for.

Return

string Layout styles for the block.

Source

			if ( count( $part ) !== 2 ) {
				continue;
			}
			$nested_selector = $part[0];
			$css_value       = $part[1];
			$part_selector   = str_starts_with( $nested_selector, ' ' )
				? static::scope_selector( $selector, $nested_selector )
				: static::append_to_selector( $selector, $nested_selector );
			$processed_css  .= $part_selector . '{' . trim( $css_value ) . '}';
		}
	}
	return $processed_css;
}

/**
 * Returns the global styles custom CSS.
 *
 * @since 6.2.0
 *
 * @return string The global styles custom CSS.
 */
public function get_custom_css() {
	// Add the global styles root CSS.
	$stylesheet = isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : '';

	// Add the global styles block CSS.
	if ( isset( $this->theme_json['styles']['blocks'] ) ) {
		foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
			$custom_block_css = isset( $this->theme_json['styles']['blocks'][ $name ]['css'] )
				? $this->theme_json['styles']['blocks'][ $name ]['css']
				: null;
			if ( $custom_block_css ) {
				$selector    = static::$blocks_metadata[ $name ]['selector'];
				$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
			}
		}
	}

	return $stylesheet;
}

/**
 * Returns the page templates of the active theme.
 *
 * @since 5.9.0
 *
 * @return array
 */
public function get_custom_templates() {
	$custom_templates = array();
	if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) {
		return $custom_templates;
	}

	foreach ( $this->theme_json['customTemplates'] as $item ) {
		if ( isset( $item['name'] ) ) {
			$custom_templates[ $item['name'] ] = array(
				'title'     => isset( $item['title'] ) ? $item['title'] : '',
				'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ),
			);
		}
	}
	return $custom_templates;
}

/**
 * Returns the template part data of active theme.
 *
 * @since 5.9.0
 *
 * @return array
 */
public function get_template_parts() {
	$template_parts = array();
	if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
		return $template_parts;
	}

	foreach ( $this->theme_json['templateParts'] as $item ) {
		if ( isset( $item['name'] ) ) {
			$template_parts[ $item['name'] ] = array(
				'title' => isset( $item['title'] ) ? $item['title'] : '',
				'area'  => isset( $item['area'] ) ? $item['area'] : '',
			);
		}
	}
	return $template_parts;
}

/**
 * Converts each style section into a list of rulesets
 * containing the block styles to be appended to the stylesheet.
 *
 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
 *
 * For each section this creates a new ruleset such as:
 *
 *   block-selector {
 *     style-property-one: value;
 *   }
 *
 * @since 5.8.0 As `get_block_styles()`.
 * @since 5.9.0 Renamed from `get_block_styles()` to `get_block_classes()`
 *              and no longer returns preset classes.
 *              Removed the `$setting_nodes` parameter.
 * @since 6.1.0 Moved most internal logic to `get_styles_for_block()`.
 *
 * @param array $style_nodes Nodes with styles.
 * @return string The new stylesheet.
 */
protected function get_block_classes( $style_nodes ) {
	$block_rules = '';

	foreach ( $style_nodes as $metadata ) {
		if ( null === $metadata['selector'] ) {
			continue;
		}
		$block_rules .= static::get_styles_for_block( $metadata );
	}

	return $block_rules;
}

/**
 * Gets the CSS layout rules for a particular block from theme.json layout definitions.
 *
 * @since 6.1.0
 * @since 6.3.0 Reduced specificity for layout margin rules.
 *
 * @param array $block_metadata Metadata about the block to get styles for.
 * @return string Layout styles for the block.
 */
protected function get_layout_styles( $block_metadata ) {
	$block_rules = '';
	$block_type  = null;

	// Skip outputting layout styles if explicitly disabled.
	if ( current_theme_supports( 'disable-layout-styles' ) ) {
		return $block_rules;
	}

	if ( isset( $block_metadata['name'] ) ) {
		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
		if ( ! block_has_support( $block_type, 'layout', false ) && ! block_has_support( $block_type, '__experimentalLayout', false ) ) {
			return $block_rules;
		}
	}

	$selector                 = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
	$has_block_gap_support    = isset( $this->theme_json['settings']['spacing']['blockGap'] );
	$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
	$node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
	$layout_definitions       = wp_get_layout_definitions();
	$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.

	/*
	 * Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
	 * Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
	 */
	if ( $has_block_gap_support || $has_fallback_gap_support ) {
		$block_gap_value = null;
		// Use a fallback gap value if block gap support is not available.
		if ( ! $has_block_gap_support ) {
			$block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null;
			if ( ! empty( $block_type ) ) {
				$block_gap_value = isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] )
					? $block_type->supports['spacing']['blockGap']['__experimentalDefault']
					: null;
			}
		} else {
			$block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
		}

		// Support split row / column values and concatenate to a shorthand value.
		if ( is_array( $block_gap_value ) ) {
			if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {

Changelog

VersionDescription
6.3.0Reduced specificity for layout margin rules.
6.1.0Introduced.

User Contributed Notes

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