Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Editor: add column and row spans to grid children. 

Adds support for setting spans using `grid-column` and `grid-row` properties on children of blocks with grid layout.

Props isabel_brison, andrewserong, peterwilsoncc, mukesh27.
Fixes #61111.

Built from https://develop.svn.wordpress.org/trunk@58170


git-svn-id: http://core.svn.wordpress.org/trunk@57633 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
isabel_brison 2024-05-18 20:32:17 +00:00
parent c4ff251f13
commit ab8cc6dce3
3 changed files with 103 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
wp-includes/block-supports/layout.php
View File

@ -489,7 +489,10 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ),
'declarations' => array(
'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
'container-type' => 'inline-size',
),
);
}
@ -555,37 +558,92 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
function wp_render_layout_support_flag( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$block_supports_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false );
$layout_from_parent = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
$child_layout = isset( $block['attrs']['style']['layout'] ) ? $block['attrs']['style']['layout'] : null;
if ( ! $block_supports_layout && ! $layout_from_parent ) {
if ( ! $block_supports_layout && ! $child_layout ) {
return $block_content;
}
$outer_class_names = array();
if ( 'fixed' === $layout_from_parent || 'fill' === $layout_from_parent ) {
$container_content_class = wp_unique_id( 'wp-container-content-' );
// Child layout specific logic.
if ( $child_layout ) {
$container_content_class = wp_unique_prefixed_id( 'wp-container-content-' );
$child_layout_declarations = array();
$child_layout_styles = array();
$child_layout_styles = array();
$self_stretch = isset( $child_layout['selfStretch'] ) ? $child_layout['selfStretch'] : null;
if ( 'fixed' === $self_stretch && isset( $child_layout['flexSize'] ) ) {
$child_layout_declarations['flex-basis'] = $child_layout['flexSize'];
$child_layout_declarations['box-sizing'] = 'border-box';
} elseif ( 'fill' === $self_stretch ) {
$child_layout_declarations['flex-grow'] = '1';
}
if ( isset( $child_layout['columnSpan'] ) ) {
$column_span = $child_layout['columnSpan'];
$child_layout_declarations['grid-column'] = "span $column_span";
}
if ( isset( $child_layout['rowSpan'] ) ) {
$row_span = $child_layout['rowSpan'];
$child_layout_declarations['grid-row'] = "span $row_span";
}
$child_layout_styles[] = array(
'selector' => ".$container_content_class",
'declarations' => $child_layout_declarations,
);
/*
* If columnSpan is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set,
* the columnSpan should be removed on small grids. If there's a minimumColumnWidth, the grid is responsive.
* But if the minimumColumnWidth value wasn't changed, it won't be set. In that case, if columnCount doesn't
* exist, we can assume that the grid is responsive.
*/
if ( isset( $child_layout['columnSpan'] ) && ( isset( $block['parentLayout']['minimumColumnWidth'] ) || ! isset( $block['parentLayout']['columnCount'] ) ) ) {
$column_span_number = floatval( $child_layout['columnSpan'] );
$parent_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : '12rem';
$parent_column_value = floatval( $parent_column_width );
$parent_column_unit = explode( $parent_column_value, $parent_column_width );
/*
* If there is no unit, the width has somehow been mangled so we reset both unit and value
* to defaults.
* Additionally, the unit should be one of px, rem or em, so that also needs to be checked.
*/
if ( count( $parent_column_unit ) <= 1 ) {
$parent_column_unit = 'rem';
$parent_column_value = 12;
} else {
$parent_column_unit = $parent_column_unit[1];
if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) {
$parent_column_unit = 'rem';
}
}
/*
* A default gap value is used for this computation because custom gap values may not be
* viable to use in the computation of the container query value.
*/
$default_gap_value = 'px' === $parent_column_unit ? 24 : 1.5;
$container_query_value = $column_span_number * $parent_column_value + ( $column_span_number - 1 ) * $default_gap_value;
$container_query_value = $container_query_value . $parent_column_unit;
if ( 'fixed' === $layout_from_parent && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
$child_layout_styles[] = array(
'rules_group' => "@container (max-width: $container_query_value )",
'selector' => ".$container_content_class",
'declarations' => array(
'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
'box-sizing' => 'border-box',
),
);
} elseif ( 'fill' === $layout_from_parent ) {
$child_layout_styles[] = array(
'selector' => ".$container_content_class",
'declarations' => array(
'flex-grow' => '1',
'grid-column' => '1/-1',
),
);
}
wp_style_engine_get_stylesheet_from_css_rules(
/*
* Add to the style engine store to enqueue and render layout styles.
* Return styles here just to check if any exist.
*/
$child_css = wp_style_engine_get_stylesheet_from_css_rules(
$child_layout_styles,
array(
'context' => 'block-supports',
@ -593,7 +651,9 @@ function wp_render_layout_support_flag( $block_content, $block ) {
)
);
$outer_class_names[] = $container_content_class;
if ( $child_css ) {
$outer_class_names[] = $container_content_class;
}
}
// Prep the processor for modifying the block output.
@ -851,6 +911,27 @@ function wp_render_layout_support_flag( $block_content, $block ) {
return $processor->get_updated_html();
}
/**
* Check if the parent block exists and if it has a layout attribute.
* If it does, add the parent layout to the parsed block
*
* @since 6.6.0
* @access private
*
* @param array $parsed_block The parsed block.
* @param array $source_block The source block.
* @param WP_Block $parent_block The parent block.
* @return array The parsed block with parent layout attribute if it exists.
*/
function wp_add_parent_layout_to_parsed_block( $parsed_block, $source_block, $parent_block ) {
if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) {
$parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout'];
}
return $parsed_block;
}
add_filter( 'render_block_data', 'wp_add_parent_layout_to_parsed_block', 10, 3 );
// Register the block support.
WP_Block_Supports::get_instance()->register(
'layout',

3
wp-includes/kses.php
View File

@ -2441,11 +2441,13 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'grid-auto-columns',
'grid-column-start',
'grid-column-end',
'grid-column',
'grid-column-gap',
'grid-template-rows',
'grid-auto-rows',
'grid-row-start',
'grid-row-end',
'grid-row',
'grid-row-gap',
'grid-gap',
@ -2475,6 +2477,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'z-index',
'box-shadow',
'aspect-ratio',
'container-type',
// Custom CSS properties.
'--*',

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.6-alpha-58169';
$wp_version = '6.6-alpha-58170';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.