wp_get_layout_style() – Generates the CSS corresponding to the provided layout.

You appear to be a bot. Output may be restricted

Description

Generates the CSS corresponding to the provided layout.

Usage

$string = wp_get_layout_style( $selector, $layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );

Parameters

$selector
( string ) required – CSS selector.
$layout
( array ) required – Layout object. The one that is passed has already checked the existence of default block layout.
$has_block_gap_support
( boolean ) optional – Whether the theme has support for the block gap.
$gap_value
( string ) optional – The block gap value to apply.
$should_skip_gap_serialization
( boolean ) optional – Whether to skip applying the user-defined value set in the editor.
$fallback_gap_value
( string ) optional default: 0.5em – The custom fallback value for block gap.

Returns

string CSS style.

Source

File name: wordpress/wp-includes/block-supports/layout.php
Lines:

1 to 95 of 95
function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
  $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

  $style = '';
  if ( 'default' === $layout_type ) {
    $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
    $wide_size    = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';

    $all_max_width_value  = $content_size ? $content_size : $wide_size;
    $wide_max_width_value = $wide_size ? $wide_size : $content_size;

    // Make sure there is a single CSS rule, and all tags are stripped for security.
    $all_max_width_value  = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
    $wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );

    if ( $content_size || $wide_size ) {
      $style  = "$selector > :where(:not(.alignleft):not(.alignright)) {";
      $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
      $style .= 'margin-left: auto !important;';
      $style .= 'margin-right: auto !important;';
      $style .= '}';

      $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
      $style .= "$selector .alignfull { max-width: none; }";
    }

    $style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
    $style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
    $style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
    if ( $has_block_gap_support ) {
      if ( is_array( $gap_value ) ) {
        $gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
      }
      $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
      $style    .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
      $style    .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
    }
  } elseif ( 'flex' === $layout_type ) {
    $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';

    $justify_content_options = array(
      'left'   => 'flex-start',
      'right'  => 'flex-end',
      'center' => 'center',
    );

    if ( 'horizontal' === $layout_orientation ) {
      $justify_content_options += array( 'space-between' => 'space-between' );
    }

    $flex_wrap_options = array( 'wrap', 'nowrap' );
    $flex_wrap         = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
      $layout['flexWrap'] :
      'wrap';

    $style  = "$selector {";
    $style .= 'display: flex;';
    if ( $has_block_gap_support ) {
      if ( is_array( $gap_value ) ) {
        $gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap_value;
        $gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap_value;
        $gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
      }
      $gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : "var( --wp--style--block-gap, $fallback_gap_value )";
      $style    .= "gap: $gap_style;";
    } else {
      $style .= "gap: $fallback_gap_value;";
    }

    $style .= "flex-wrap: $flex_wrap;";
    if ( 'horizontal' === $layout_orientation ) {
      $style .= 'align-items: center;';
      
/**
 * Add this style only if is not empty for backwards compatibility,
 * since we intend to convert blocks that had flex layout implemented
 * by custom css.
 */
      if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
        $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
      }
    } else {
      $style .= 'flex-direction: column;';
      if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
        $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
      } else {
        $style .= 'align-items: flex-start;';
      }
    }
    $style .= '}';

    $style .= "$selector > * { margin: 0; }";
  }

  return $style;
}
 

 View on GitHub View on Trac