You appear to be a bot. Output may be restricted

Description

Outputs the CSS for layout rules on the root.

Usage

$string = WP_Theme_JSON::get_root_layout_rules( $selector, $block_metadata );

Parameters

$selector

( string ) required – The root node selector.

$block_metadata

( array ) required – The metadata for the root block.

Returns

string The additional root rules CSS.

Source

File name: wordpress/wp-includes/class-wp-theme-json.php
Lines:

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

    /*
		* Reset default browser margin on the root body element.
		* This is set on the root 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 .= 'body { margin: 0;';

    /*
		* 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         .= '--wp--style--global--content-size: ' . $content_size . ';';
      $css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
    }

    $css .= ' }';

    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); }';
      // Nested containers with `.has-global-padding` class do not get padding.
      $css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
      // 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); }';
      // The above rule is negated for alignfull children of nested containers.
      $css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
      // Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
      $css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
      // The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
      $css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 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_value       = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
    $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
    if ( $has_block_gap_support ) {
      $block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
      $css            .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
      $css            .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";

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

    return $css;
  }
 

 View on GitHub View on Trac