WP_Theme_JSON::get_root_layout_rules │ public │ WP 6.1.0

Outputs the CSS for layout rules on the root.

Method of the class: WP_Theme_JSON{}

No Hooks.

Returns

String. The additional root rules CSS.

Usage

$WP_Theme_JSON = new WP_Theme_JSON();
$WP_Theme_JSON->get_root_layout_rules( $selector, $block_metadata );

$selector(string) (required)

The root node selector.

$block_metadata(array) (required)

The metadata for the root block.

Changelog

WP_Theme_JSON::get_root_layout_rules() WP Theme JSON::get root layout rules code ^{WP 6.9}

public function get_root_layout_rules( $selector, $block_metadata ) {
	$css              = '';
	$settings         = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
	$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];

	/*
	 * If there are content and wide widths in theme.json, output them
	 * as custom properties on the body element so all blocks can use them.
	 */
	if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
		$content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
		$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
		$wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
		$wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
		$css         .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
		$css         .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
	}

	/*
	 * Reset default browser margin on the body element.
	 * This is set on the body selector **before** generating the ruleset
	 * from the `theme.json`. This is to ensure that if the `theme.json` declares
	 * `margin` in its `spacing` declaration for the `body` element then these
	 * user-generated values take precedence in the CSS cascade.
	 * @link https://github.com/WordPress/gutenberg/issues/36147.
	 */
	$css .= ':where(body) { margin: 0; }';

	if ( $use_root_padding ) {
		// Top and bottom padding are applied to the outer block container.
		$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
		// Right and left padding are applied to the first container with `.has-global-padding` class.
		$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
		// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
		$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
		// Nested children of the container with left and right padding that are not full aligned do not get padding, unless they are direct children of an alignfull flow container.
		$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }';
		// Alignfull direct children of the containers that are targeted by the rule above do not need negative margins.
		$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }';
	}

	$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
	$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
	$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

	// Block gap styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
	if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
		$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
		$css            .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
		$css            .= ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
		$css            .= ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';

		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
		$css .= static::ROOT_CSS_PROPERTIES_SELECTOR . " { --wp--style--block-gap: $block_gap_value; }";
	}
	$css .= $this->get_layout_styles( $block_metadata );

	return $css;
}