mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-30 00:34:57 +02:00
Editor: Improves layout block support in wp_get_layout_style().
This commit merges the remaining changes from [https://github.com/WordPress/gutenberg/pull/40875 Gutenberg PR 40875]. It's Part 2 (see [54162] for Part 1) of a layout improvement initiative and targets `wp_get_layout_style()` in `layout.php`. Context: The overall initiative is to improve layout block support: >to use centralised layout definitions, output base layout styles from global styles, introduce a layout type semantic classname, reduce duplication of container class and style tag output, and fix blockGap at the block level in global styles. Changes include: * Adding an optional parameter `$block_spacing` to `wp_get_layout_style()` for setting a custom spacing on the block. * Adding handle for the block spacing. * Using the style engine to to enqueue and render layout styles via `wp_style_engine_get_stylesheet_from_css_rules()`. * Introduces a new test file for `wp_get_layout_style()`. Follow-up to [54162], [54160], [54159], [53421], [52380], [53085], [52069]. Props andrewserong, isabel_brison, costdev, hellofromTonya. See #56467. Built from https://develop.svn.wordpress.org/trunk@54274 git-svn-id: http://core.svn.wordpress.org/trunk@53833 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
hellofromTonya
parent
73cf7271bc
commit
04166db031
|
|
@ -33,24 +33,52 @@ function wp_register_layout_support( $block_type ) {
|
||||||
* Generates the CSS corresponding to the provided layout.
|
* Generates the CSS corresponding to the provided layout.
|
||||||
*
|
*
|
||||||
* @since 5.9.0
|
* @since 5.9.0
|
||||||
|
* @since 6.1.0 Added `$block_spacing` param, use style engine to enqueue styles.
|
||||||
* @access private
|
* @access private
|
||||||
*
|
*
|
||||||
* @param string $selector CSS selector.
|
* @param string $selector CSS selector.
|
||||||
* @param array $layout Layout object. The one that is passed has already checked
|
* @param array $layout Layout object. The one that is passed has already checked
|
||||||
* the existence of default block layout.
|
* the existence of default block layout.
|
||||||
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
|
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
|
||||||
* @param string $gap_value The block gap value to apply.
|
* @param string|string[]|null $gap_value Optional. The block gap value to apply. Default null.
|
||||||
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
|
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
|
||||||
* @param string $fallback_gap_value The custom fallback value for block gap.
|
* @param string $fallback_gap_value The block gap value to apply.
|
||||||
|
* @param array|null $block_spacing Optional. Custom spacing set on the block. Default null.
|
||||||
* @return string CSS style.
|
* @return string CSS style.
|
||||||
*/
|
*/
|
||||||
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' ) {
|
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_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
|
||||||
|
$layout_styles = array();
|
||||||
|
|
||||||
$style = '';
|
|
||||||
if ( 'default' === $layout_type ) {
|
if ( 'default' === $layout_type ) {
|
||||||
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
|
if ( $has_block_gap_support ) {
|
||||||
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
|
if ( is_array( $gap_value ) ) {
|
||||||
|
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
|
||||||
|
}
|
||||||
|
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
|
||||||
|
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;
|
$all_max_width_value = $content_size ? $content_size : $wide_size;
|
||||||
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
|
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
|
||||||
|
|
@ -59,27 +87,102 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
|
||||||
$all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
|
$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] );
|
$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
|
||||||
|
|
||||||
if ( $content_size || $wide_size ) {
|
$margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important';
|
||||||
$style = "$selector > :where(:not(.alignleft):not(.alignright)) {";
|
$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';
|
||||||
$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 ) . ';}';
|
if ( $content_size || $wide_size ) {
|
||||||
$style .= "$selector .alignfull { max-width: none; }";
|
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' ),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
$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 ( $has_block_gap_support ) {
|
||||||
if ( is_array( $gap_value ) ) {
|
if ( is_array( $gap_value ) ) {
|
||||||
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
|
$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 )';
|
if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
|
||||||
$style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
|
// Get spacing CSS variable from preset value if provided.
|
||||||
$style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
|
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 ) {
|
} elseif ( 'flex' === $layout_type ) {
|
||||||
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
|
$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
|
||||||
|
|
@ -90,54 +193,102 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
|
||||||
'center' => 'center',
|
'center' => 'center',
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$vertical_alignment_options = array(
|
||||||
|
'top' => 'flex-start',
|
||||||
|
'center' => 'center',
|
||||||
|
'bottom' => 'flex-end',
|
||||||
|
);
|
||||||
|
|
||||||
if ( 'horizontal' === $layout_orientation ) {
|
if ( 'horizontal' === $layout_orientation ) {
|
||||||
$justify_content_options += array( 'space-between' => 'space-between' );
|
$justify_content_options += array( 'space-between' => 'space-between' );
|
||||||
}
|
}
|
||||||
|
|
||||||
$flex_wrap_options = array( 'wrap', 'nowrap' );
|
if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
|
||||||
$flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
|
$layout_styles[] = array(
|
||||||
$layout['flexWrap'] :
|
'selector' => $selector,
|
||||||
'wrap';
|
'declarations' => array( 'flex-wrap' => 'nowrap' ),
|
||||||
|
);
|
||||||
$style = "$selector {";
|
}
|
||||||
$style .= 'display: flex;';
|
|
||||||
if ( $has_block_gap_support ) {
|
if ( $has_block_gap_support && isset( $gap_value ) ) {
|
||||||
if ( is_array( $gap_value ) ) {
|
$combined_gap_value = '';
|
||||||
$gap_row = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap_value;
|
$gap_sides = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
|
||||||
$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap_value;
|
|
||||||
$gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
|
foreach ( $gap_sides as $gap_side ) {
|
||||||
}
|
$process_value = is_string( $gap_value ) ? $gap_value : _wp_array_get( $gap_value, array( $gap_side ), $fallback_gap_value );
|
||||||
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : "var( --wp--style--block-gap, $fallback_gap_value )";
|
// Get spacing CSS variable from preset value if provided.
|
||||||
$style .= "gap: $gap_style;";
|
if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
|
||||||
} else {
|
$index_to_splice = strrpos( $process_value, '|' ) + 1;
|
||||||
$style .= "gap: $fallback_gap_value;";
|
$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 ),
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$style .= "flex-wrap: $flex_wrap;";
|
|
||||||
if ( 'horizontal' === $layout_orientation ) {
|
if ( 'horizontal' === $layout_orientation ) {
|
||||||
$style .= 'align-items: center;';
|
/*
|
||||||
/**
|
|
||||||
* Add this style only if is not empty for backwards compatibility,
|
* Add this style only if is not empty for backwards compatibility,
|
||||||
* since we intend to convert blocks that had flex layout implemented
|
* since we intend to convert blocks that had flex layout implemented
|
||||||
* by custom css.
|
* by custom css.
|
||||||
*/
|
*/
|
||||||
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
|
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
|
||||||
$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
|
$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 {
|
} else {
|
||||||
$style .= 'flex-direction: column;';
|
$layout_styles[] = array(
|
||||||
|
'selector' => $selector,
|
||||||
|
'declarations' => array( 'flex-direction' => 'column' ),
|
||||||
|
);
|
||||||
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
|
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
|
||||||
$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
|
$layout_styles[] = array(
|
||||||
|
'selector' => $selector,
|
||||||
|
'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ),
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
$style .= 'align-items: flex-start;';
|
$layout_styles[] = array(
|
||||||
|
'selector' => $selector,
|
||||||
|
'declarations' => array( 'align-items' => 'flex-start' ),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$style .= '}';
|
|
||||||
|
|
||||||
$style .= "$selector > * { margin: 0; }";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return $style;
|
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 '';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -158,26 +309,43 @@ function wp_render_layout_support_flag( $block_content, $block ) {
|
||||||
return $block_content;
|
return $block_content;
|
||||||
}
|
}
|
||||||
|
|
||||||
$block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
|
$block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
|
||||||
$default_layout = wp_get_global_settings( array( 'layout' ) );
|
$global_layout_settings = wp_get_global_settings( array( 'layout' ) );
|
||||||
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
|
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
|
||||||
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
|
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
|
||||||
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
|
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
|
||||||
|
|
||||||
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
|
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
|
||||||
if ( ! $default_layout ) {
|
if ( ! $global_layout_settings ) {
|
||||||
return $block_content;
|
return $block_content;
|
||||||
}
|
}
|
||||||
$used_layout = $default_layout;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$class_names = array();
|
$class_names = array();
|
||||||
$container_class = wp_unique_id( 'wp-container-' );
|
$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
|
||||||
$class_names[] = $container_class;
|
$block_classname = wp_get_block_default_classname( $block['blockName'] );
|
||||||
|
$container_class = wp_unique_id( 'wp-container-' );
|
||||||
|
$layout_classname = '';
|
||||||
|
|
||||||
// The following section was added to reintroduce a small set of layout classnames that were
|
// Set the correct layout type for blocks using legacy content width.
|
||||||
// removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
|
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
|
||||||
// not intended to provide an extended set of classes to match all block layout attributes
|
$used_layout['type'] = 'constrained';
|
||||||
// here.
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
wp_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) &&
|
||||||
|
isset( $used_layout['type'] ) &&
|
||||||
|
'constrained' === $used_layout['type']
|
||||||
|
) {
|
||||||
|
$class_names[] = 'has-global-padding';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* The following section was added to reintroduce a small set of layout classnames that were
|
||||||
|
* removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
|
||||||
|
* not intended to provide an extended set of classes to match all block layout attributes
|
||||||
|
* here.
|
||||||
|
*/
|
||||||
if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
|
if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
|
||||||
$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
|
$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
|
||||||
}
|
}
|
||||||
|
|
@ -190,26 +358,66 @@ function wp_render_layout_support_flag( $block_content, $block ) {
|
||||||
$class_names[] = 'is-nowrap';
|
$class_names[] = 'is-nowrap';
|
||||||
}
|
}
|
||||||
|
|
||||||
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
|
// Get classname for layout type.
|
||||||
// Skip if gap value contains unsupported characters.
|
if ( isset( $used_layout['type'] ) ) {
|
||||||
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
|
$layout_classname = _wp_array_get( $layout_definitions, array( $used_layout['type'], 'className' ), '' );
|
||||||
// because we only want to match against the value, not the CSS attribute.
|
|
||||||
if ( is_array( $gap_value ) ) {
|
|
||||||
foreach ( $gap_value as $key => $value ) {
|
|
||||||
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
|
$layout_classname = _wp_array_get( $layout_definitions, array( 'default', 'className' ), '' );
|
||||||
}
|
}
|
||||||
|
|
||||||
$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
|
if ( $layout_classname && is_string( $layout_classname ) ) {
|
||||||
|
$class_names[] = sanitize_title( $layout_classname );
|
||||||
|
}
|
||||||
|
|
||||||
// If a block's block.json skips serialization for spacing or spacing.blockGap,
|
/*
|
||||||
// don't apply the user-defined value to the styles.
|
* Only generate Layout styles if the theme has not opted-out.
|
||||||
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
|
* Attribute-based Layout classnames are output in all cases.
|
||||||
$style = wp_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
|
*/
|
||||||
// This assumes the hook only applies to blocks with a single wrapper.
|
if ( ! current_theme_supports( 'disable-layout-styles' ) ) {
|
||||||
// I think this is a reasonable limitation for that particular hook.
|
|
||||||
|
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
|
||||||
|
/*
|
||||||
|
* Skip if gap value contains unsupported characters.
|
||||||
|
* Regex for CSS value borrowed from `safecss_filter_attr`, and used here
|
||||||
|
* to only match against the value, not the CSS attribute.
|
||||||
|
*/
|
||||||
|
if ( is_array( $gap_value ) ) {
|
||||||
|
foreach ( $gap_value as $key => $value ) {
|
||||||
|
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
|
||||||
|
}
|
||||||
|
|
||||||
|
$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
|
||||||
|
$block_spacing = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null );
|
||||||
|
|
||||||
|
/*
|
||||||
|
* If a block's block.json skips serialization for spacing or spacing.blockGap,
|
||||||
|
* don't apply the user-defined value to the styles.
|
||||||
|
*/
|
||||||
|
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
|
||||||
|
|
||||||
|
$style = wp_get_layout_style(
|
||||||
|
".$block_classname.$container_class",
|
||||||
|
$used_layout,
|
||||||
|
$has_block_gap_support,
|
||||||
|
$gap_value,
|
||||||
|
$should_skip_gap_serialization,
|
||||||
|
$fallback_gap_value,
|
||||||
|
$block_spacing
|
||||||
|
);
|
||||||
|
|
||||||
|
// Only add container class and enqueue block support styles if unique styles were generated.
|
||||||
|
if ( ! empty( $style ) ) {
|
||||||
|
$class_names[] = $container_class;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* This assumes the hook only applies to blocks with a single wrapper.
|
||||||
|
* A limitation of this hook is that nested inner blocks wrappers are not yet supported.
|
||||||
|
*/
|
||||||
$content = preg_replace(
|
$content = preg_replace(
|
||||||
'/' . preg_quote( 'class="', '/' ) . '/',
|
'/' . preg_quote( 'class="', '/' ) . '/',
|
||||||
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
|
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
|
||||||
|
|
@ -217,8 +425,6 @@ function wp_render_layout_support_flag( $block_content, $block ) {
|
||||||
1
|
1
|
||||||
);
|
);
|
||||||
|
|
||||||
wp_enqueue_block_support_styles( $style );
|
|
||||||
|
|
||||||
return $content;
|
return $content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '6.1-alpha-54273';
|
$wp_version = '6.1-alpha-54274';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user