[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-includes/block-supports/ -> layout.php (source)

   1  <?php
   2  /**
   3   * Layout block support flag.
   4   *
   5   * @package WordPress
   6   * @since 5.8.0
   7   */
   8  
   9  /**
  10   * Registers the layout block attribute for block types that support it.
  11   *
  12   * @since 5.8.0
  13   * @access private
  14   *
  15   * @param WP_Block_Type $block_type Block Type.
  16   */
  17  function wp_register_layout_support( $block_type ) {
  18      $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
  19      if ( $support_layout ) {
  20          if ( ! $block_type->attributes ) {
  21              $block_type->attributes = array();
  22          }
  23  
  24          if ( ! array_key_exists( 'layout', $block_type->attributes ) ) {
  25              $block_type->attributes['layout'] = array(
  26                  'type' => 'object',
  27              );
  28          }
  29      }
  30  }
  31  
  32  /**
  33   * Generates the CSS corresponding to the provided layout.
  34   *
  35   * @since 5.9.0
  36   * @access private
  37   *
  38   * @param string $selector              CSS selector.
  39   * @param array  $layout                Layout object. The one that is passed has already checked
  40   *                                      the existance of default block layout.
  41   * @param bool   $has_block_gap_support Whether the theme has support for the block gap.
  42   * @return string CSS style.
  43   */
  44  function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
  45      $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
  46  
  47      $style = '';
  48      if ( 'default' === $layout_type ) {
  49          $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null;
  50          $wide_size    = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null;
  51  
  52          $all_max_width_value  = $content_size ? $content_size : $wide_size;
  53          $wide_max_width_value = $wide_size ? $wide_size : $content_size;
  54  
  55          // Make sure there is a single CSS rule, and all tags are stripped for security.
  56          // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched.
  57          $all_max_width_value  = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
  58          $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );
  59  
  60          $style = '';
  61          if ( $content_size || $wide_size ) {
  62              $style  = "$selector > * {";
  63              $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
  64              $style .= 'margin-left: auto !important;';
  65              $style .= 'margin-right: auto !important;';
  66              $style .= '}';
  67  
  68              $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
  69              $style .= "$selector .alignfull { max-width: none; }";
  70          }
  71  
  72          $style .= "$selector .alignleft { float: left; margin-right: 2em; }";
  73          $style .= "$selector .alignright { float: right; margin-left: 2em; }";
  74          if ( $has_block_gap_support ) {
  75              $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
  76              $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
  77          }
  78      } elseif ( 'flex' === $layout_type ) {
  79          $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
  80  
  81          $justify_content_options = array(
  82              'left'   => 'flex-start',
  83              'right'  => 'flex-end',
  84              'center' => 'center',
  85          );
  86  
  87          if ( 'horizontal' === $layout_orientation ) {
  88              $justify_content_options += array( 'space-between' => 'space-between' );
  89          }
  90  
  91          $flex_wrap_options = array( 'wrap', 'nowrap' );
  92          $flex_wrap         = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
  93              $layout['flexWrap'] :
  94              'wrap';
  95  
  96          $style  = "$selector {";
  97          $style .= 'display: flex;';
  98          if ( $has_block_gap_support ) {
  99              $style .= 'gap: var( --wp--style--block-gap, 0.5em );';
 100          } else {
 101              $style .= 'gap: 0.5em;';
 102          }
 103          $style .= "flex-wrap: $flex_wrap;";
 104          $style .= 'align-items: center;';
 105          if ( 'horizontal' === $layout_orientation ) {
 106              $style .= 'align-items: center;';
 107              if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
 108                  $style .= '--layout-direction: row;';
 109              }
 110              /**
 111               * Add this style only if is not empty for backwards compatibility,
 112               * since we intend to convert blocks that had flex layout implemented
 113               * by custom css.
 114               */
 115              if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 116                  $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
 117                  if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
 118                      // --layout-justification-setting allows children to inherit the value regardless or row or column direction.
 119                      $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
 120                      $style .= "--layout-wrap: $flex_wrap;";
 121                      $style .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};";
 122                      $style .= '--layout-align: center;';
 123                  }
 124              }
 125          } else {
 126              $style .= 'flex-direction: column;';
 127              if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 128                  $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
 129                  if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
 130                      $style .= '--layout-direction: column;';
 131                  }
 132                  if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
 133                      // --layout-justification-setting allows children to inherit the value regardless or row or column direction.
 134                      $style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
 135                      $style .= '--layout-justify: initial;';
 136                      $style .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};";
 137                  }
 138              }
 139          }
 140          $style .= '}';
 141  
 142          $style .= "$selector > * { margin: 0; }";
 143      }
 144  
 145      return $style;
 146  }
 147  
 148  /**
 149   * Renders the layout config to the block wrapper.
 150   *
 151   * @since 5.8.0
 152   * @access private
 153   *
 154   * @param string $block_content Rendered block content.
 155   * @param array  $block         Block object.
 156   * @return string Filtered block content.
 157   */
 158  function wp_render_layout_support_flag( $block_content, $block ) {
 159      $block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
 160      $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
 161  
 162      if ( ! $support_layout ) {
 163          return $block_content;
 164      }
 165  
 166      $block_gap             = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
 167      $default_layout        = wp_get_global_settings( array( 'layout' ) );
 168      $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
 169      $default_block_layout  = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
 170      $used_layout           = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
 171      if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
 172          if ( ! $default_layout ) {
 173              return $block_content;
 174          }
 175          $used_layout = $default_layout;
 176      }
 177  
 178      $id    = uniqid();
 179      $style = wp_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
 180      // This assumes the hook only applies to blocks with a single wrapper.
 181      // I think this is a reasonable limitation for that particular hook.
 182      $content = preg_replace(
 183          '/' . preg_quote( 'class="', '/' ) . '/',
 184          'class="wp-container-' . $id . ' ',
 185          $block_content,
 186          1
 187      );
 188  
 189      /*
 190       * Ideally styles should be loaded in the head, but blocks may be parsed
 191       * after that, so loading in the footer for now.
 192       * See https://core.trac.wordpress.org/ticket/53494.
 193       */
 194      add_action(
 195          'wp_footer',
 196          static function () use ( $style ) {
 197              echo '<style>' . $style . '</style>';
 198          }
 199      );
 200  
 201      return $content;
 202  }
 203  
 204  // Register the block support.
 205  WP_Block_Supports::get_instance()->register(
 206      'layout',
 207      array(
 208          'register_attribute' => 'wp_register_layout_support',
 209      )
 210  );
 211  add_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
 212  
 213  /**
 214   * For themes without theme.json file, make sure
 215   * to restore the inner div for the group block
 216   * to avoid breaking styles relying on that div.
 217   *
 218   * @since 5.8.0
 219   * @access private
 220   *
 221   * @param string $block_content Rendered block content.
 222   * @param array  $block         Block object.
 223   * @return string Filtered block content.
 224   */
 225  function wp_restore_group_inner_container( $block_content, $block ) {
 226      $tag_name                         = isset( $block['attrs']['tagName'] ) ? $block['attrs']['tagName'] : 'div';
 227      $group_with_inner_container_regex = sprintf(
 228          '/(^\s*<%1$s\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/U',
 229          preg_quote( $tag_name, '/' )
 230      );
 231  
 232      if (
 233          'core/group' !== $block['blockName'] ||
 234          WP_Theme_JSON_Resolver::theme_has_support() ||
 235          1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
 236          ( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] )
 237      ) {
 238          return $block_content;
 239      }
 240  
 241      $replace_regex   = sprintf(
 242          '/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms',
 243          preg_quote( $tag_name, '/' )
 244      );
 245      $updated_content = preg_replace_callback(
 246          $replace_regex,
 247          static function( $matches ) {
 248              return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
 249          },
 250          $block_content
 251      );
 252      return $updated_content;
 253  }
 254  
 255  add_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );


Generated: Wed Dec 8 01:00:03 2021 Cross-referenced by PHPXref 0.7.1