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; }