wp_get_layout_style() │ WP 5.9.0
Generates the CSS corresponding to the provided layout.
Internal function — this function is designed to be used by the kernel itself. It is not recommended to use this function in your code.
No Hooks.
Return
String. CSS styles on success. Else, empty string.
Usage
wp_get_layout_style( $selector, $layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_spacing );
- $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(true|false)
- Whether the theme has support for the block gap.
Default: false - $gap_value(string|string[]|null)
- The block gap value to apply.
Default: null - $should_skip_gap_serialization(true|false)
- Whether to skip applying the user-defined value set in the editor.
Default: false - $fallback_gap_value(string)
- The block gap value to apply.
Default: '0.5em' - $block_spacing(array|null)
- Custom spacing set on the block.
Default: null
Changelog
| Since 5.9.0 | Introduced. |
| Since 6.1.0 | Added $block_spacing param, use style engine to enqueue styles. |
| Since 6.3.0 | Added grid layout type. |
wp_get_layout_style() wp get layout style code WP 6.5.2
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', $block_spacing = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
$layout_styles = array();
if ( 'default' === $layout_type ) {
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
// Get spacing CSS variable from preset value if provided.
if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $gap_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
$gap_value = "var(--wp--preset--spacing--$slug)";
}
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
),
)
);
}
}
} elseif ( 'constrained' === $layout_type ) {
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
$justify_content = isset( $layout['justifyContent'] ) ? $layout['justifyContent'] : 'center';
$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] );
$margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important';
$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';
if ( $content_size || $wide_size ) {
array_push(
$layout_styles,
array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array(
'max-width' => $all_max_width_value,
'margin-left' => $margin_left,
'margin-right' => $margin_right,
),
),
array(
'selector' => "$selector > .alignwide",
'declarations' => array( 'max-width' => $wide_max_width_value ),
),
array(
'selector' => "$selector .alignfull",
'declarations' => array( 'max-width' => 'none' ),
)
);
if ( isset( $block_spacing ) ) {
$block_spacing_values = wp_style_engine_get_styles(
array(
'spacing' => $block_spacing,
)
);
/*
* Handle negative margins for alignfull children of blocks with custom padding set.
* They're added separately because padding might only be set on one side.
*/
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
$padding_right = $block_spacing_values['declarations']['padding-right'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
);
}
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
$padding_left = $block_spacing_values['declarations']['padding-left'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
);
}
}
}
if ( 'left' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-left' => '0 !important' ),
);
}
if ( 'right' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-right' => '0 !important' ),
);
}
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
// Get spacing CSS variable from preset value if provided.
if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $gap_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
$gap_value = "var(--wp--preset--spacing--$slug)";
}
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'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',
);
$vertical_alignment_options = array(
'top' => 'flex-start',
'center' => 'center',
'bottom' => 'flex-end',
);
if ( 'horizontal' === $layout_orientation ) {
$justify_content_options += array( 'space-between' => 'space-between' );
$vertical_alignment_options += array( 'stretch' => 'stretch' );
} else {
$justify_content_options += array( 'stretch' => 'stretch' );
$vertical_alignment_options += array( 'space-between' => 'space-between' );
}
if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-wrap' => 'nowrap' ),
);
}
if ( $has_block_gap_support && isset( $gap_value ) ) {
$combined_gap_value = '';
$gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
foreach ( $gap_sides as $gap_side ) {
$process_value = $gap_value;
if ( is_array( $gap_value ) ) {
$process_value = isset( $gap_value[ $gap_side ] ) ? $gap_value[ $gap_side ] : $fallback_gap_value;
}
// Get spacing CSS variable from preset value if provided.
if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $process_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
$process_value = "var(--wp--preset--spacing--$slug)";
}
$combined_gap_value .= "$process_value ";
}
$gap_value = trim( $combined_gap_value );
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
);
}
}
if ( 'horizontal' === $layout_orientation ) {
/*
* 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 ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ),
);
}
if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
} else {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-direction' => 'column' ),
);
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ),
);
} else {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => 'flex-start' ),
);
}
if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
}
} elseif ( 'grid' === $layout_type ) {
if ( ! empty( $layout['columnCount'] ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
);
} else {
$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ),
);
}
if ( $has_block_gap_support && isset( $gap_value ) ) {
$combined_gap_value = '';
$gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
foreach ( $gap_sides as $gap_side ) {
$process_value = $gap_value;
if ( is_array( $gap_value ) ) {
$process_value = isset( $gap_value[ $gap_side ] ) ? $gap_value[ $gap_side ] : $fallback_gap_value;
}
// Get spacing CSS variable from preset value if provided.
if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
$index_to_splice = strrpos( $process_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
$process_value = "var(--wp--preset--spacing--$slug)";
}
$combined_gap_value .= "$process_value ";
}
$gap_value = trim( $combined_gap_value );
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
);
}
}
}
if ( ! empty( $layout_styles ) ) {
/*
* Add to the style engine store to enqueue and render layout styles.
* Return compiled layout styles to retain backwards compatibility.
* Since https://github.com/WordPress/gutenberg/pull/42452,
* wp_enqueue_block_support_styles is no longer called in this block supports file.
*/
return wp_style_engine_get_stylesheet_from_css_rules(
$layout_styles,
array(
'context' => 'block-supports',
'prettify' => false,
)
);
}
return '';
}