Merge branch 'trunk' into custom-select-control-width

WordPress · Feb 14, 2024 · 9f2d011 · 9f2d011
2 parents 53dacf2 + abdde7a
commit 9f2d011
Show file tree

Hide file tree

Showing 105 changed files with 1,710 additions and 1,116 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -15,10 +15,6 @@
 # Blocks
 /packages/block-library                         @ajitbohra
 /packages/block-library/src/gallery             @geriux
-/packages/block-library/src/navigation          @tellthemachines
-/packages/block-library/src/navigation-link     @tellthemachines
-/packages/block-library/src/navigation-submenu  @tellthemachines
-/packages/block-library/src/page-list           @tellthemachines
 /packages/block-library/src/comment-template    @michalczaplinski
 /packages/block-library/src/comments            @michalczaplinski
 /packages/block-library/src/table-of-contents   @ZebulanStanphill
@@ -34,6 +30,8 @@
 /packages/annotations                           @atimmer
 /packages/autop
 /packages/block-editor                          @ellatrix
+/packages/block-editor/src/hooks                @tellthemachines
+/packages/block-editor/src/layouts              @tellthemachines
 /packages/block-serialization-spec-parser       @dmsnell
 /packages/block-serialization-default-parser    @dmsnell
 /packages/blocks
@@ -49,9 +47,9 @@
 /packages/block-editor/src/components/link-control  @getdave
 
 # Widgets
-/packages/edit-widgets                          @draganescu @talldan @noisysocks @tellthemachines @adamziel @kevin940726
-/packages/customize-widgets                     @noisysocks
-/packages/widgets                               @noisysocks
+/packages/edit-widgets                          @draganescu @talldan @adamziel @kevin940726
+/packages/customize-widgets
+/packages/widgets
 
 # Full Site Editing
 /packages/edit-site
@@ -136,6 +134,8 @@
 
 # PHP
 /lib                                            @spacedmonkey
+/lib/block-supports/layout.php                  @tellthemachines
+/lib/class-wp-theme-json-gutenberg.php          @tellthemachines
 /lib/compat/*/html-api                          @dmsnell
 /lib/experimental/rest-api.php                  @timothybjacobs
 /lib/experimental/class-wp-rest-*               @timothybjacobs

diff --git a/docs/reference-guides/data/data-core-blocks.md b/docs/reference-guides/data/data-core-blocks.md
@@ -504,54 +504,6 @@ _Returns_
 
 -   `string?`: Name of the block for handling the grouping of blocks.
 
-### getHookedBlocks
-
-Returns the hooked blocks for a given anchor block.
-
-Given an anchor block name, returns an object whose keys are relative positions, and whose values are arrays of block names that are hooked to the anchor block at that relative position.
-
-_Usage_
-
-```js
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-
-const ExampleComponent = () => {
-	const hookedBlockNames = useSelect(
-		( select ) =>
-			select( blocksStore ).getHookedBlocks( 'core/navigation' ),
-		[]
-	);
-
-	return (
-		<ul>
-			{ Object.keys( hookedBlockNames ).length &&
-				Object.keys( hookedBlockNames ).map( ( relativePosition ) => (
-					<li key={ relativePosition }>
-						{ relativePosition }>
-						<ul>
-							{ hookedBlockNames[ relativePosition ].map(
-								( hookedBlock ) => (
-									<li key={ hookedBlock }>{ hookedBlock }</li>
-								)
-							) }
-						</ul>
-					</li>
-				) ) }
-		</ul>
-	);
-};
-```
-
-_Parameters_
-
--   _state_ `Object`: Data state.
--   _blockName_ `string`: Anchor block type name.
-
-_Returns_
-
--   `Object`: Lists of hooked block names for each relative position.
-
 ### getUnregisteredFallbackBlockName
 
 Returns the name of the block for handling unregistered blocks.

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -476,7 +476,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 
 			$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',
+				),
 			);
 		}
 
@@ -557,44 +560,95 @@ function gutenberg_incremental_id_per_prefix( $prefix = '' ) {
 function gutenberg_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, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
-	$layout_from_parent    = $block['attrs']['style']['layout']['selfStretch'] ?? null;
+	// If there is any value in style -> layout, the block has a child layout.
+	$child_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();
+	$outer_class_names         = array();
+	$container_content_class   = wp_unique_id( 'wp-container-content-' );
+	$child_layout_declarations = array();
+	$child_layout_styles       = array();
 
-	if ( 'fixed' === $layout_from_parent || 'fill' === $layout_from_parent ) {
-		$container_content_class = wp_unique_id( 'wp-container-content-' );
+	$self_stretch = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
 
-		$child_layout_styles = array();
+	if ( 'fixed' === $self_stretch && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
+		$child_layout_declarations['flex-basis'] = $block['attrs']['style']['layout']['flexSize'];
+		$child_layout_declarations['box-sizing'] = 'border-box';
+	} elseif ( 'fill' === $self_stretch ) {
+		$child_layout_declarations['flex-grow'] = '1';
+	}
 
-		if ( 'fixed' === $layout_from_parent && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
-			$child_layout_styles[] = array(
-				'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',
-				),
-			);
+	if ( isset( $block['attrs']['style']['layout']['columnSpan'] ) ) {
+		$column_span                              = $block['attrs']['style']['layout']['columnSpan'];
+		$child_layout_declarations['grid-column'] = "span $column_span";
+	}
+	if ( isset( $block['attrs']['style']['layout']['rowSpan'] ) ) {
+		$row_span                              = $block['attrs']['style']['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 ( isset( $block['attrs']['style']['layout']['columnSpan'] ) && isset( $block['attrs']['style']['layout']['parentColumnWidth'] ) ) {
+		$column_span_number  = floatval( $block['attrs']['style']['layout']['columnSpan'] );
+		$parent_column_width = $block['attrs']['style']['layout']['parentColumnWidth'];
+		$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';
+			}
 		}
 
-		gutenberg_style_engine_get_stylesheet_from_css_rules(
-			$child_layout_styles,
-			array(
-				'context'  => 'block-supports',
-				'prettify' => false,
-			)
+		/**
+		 * 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;
+
+		$child_layout_styles[] = array(
+			'rules_group'  => "@container (max-width: $container_query_value )",
+			'selector'     => ".$container_content_class",
+			'declarations' => array(
+				'grid-column' => '1/-1',
+			),
 		);
+	}
+
+	/**
+	 * Add to the style engine store to enqueue and render layout styles.
+	 * Return styles here just to check if any exist.
+	 */
+	$child_css = gutenberg_style_engine_get_stylesheet_from_css_rules(
+		$child_layout_styles,
+		array(
+			'context'  => 'block-supports',
+			'prettify' => false,
+		)
+	);
 
+	if ( $child_css ) {
 		$outer_class_names[] = $container_content_class;
 	}
 

diff --git a/lib/experimental/kses.php b/lib/experimental/kses.php
@@ -87,3 +87,17 @@ function allow_filter_in_styles( $allow_css, $css_test_string ) {
 	}
 }
 add_filter( 'safecss_filter_attr_allow_css', 'allow_filter_in_styles', 10, 2 );
+
+/**
+ * Update allowed inline style attributes list.
+ *
+ * @param string[] $attrs Array of allowed CSS attributes.
+ * @return string[] CSS attributes.
+ */
+function gutenberg_safe_grid_attrs( $attrs ) {
+	$attrs[] = 'grid-column';
+	$attrs[] = 'grid-row';
+	$attrs[] = 'container-type';
+	return $attrs;
+}
+add_filter( 'safe_style_css', 'gutenberg_safe_grid_attrs' );