Merge branch 'trunk' into rnmobile/fix/block-actions-menu

.eslintrc.js

@@ -107,6 +107,7 @@ const restrictedImports = [
 			'negate',
 			'noop',
 			'nth',
+			'omit',
 			'omitBy',
 			'once',
 			'orderby',

docs/README.md

@@ -29,7 +29,7 @@ The Editor offers rich new value to users with visual, drag-and-drop creation to
 Whether you want to extend the functionality of the block editor, or create a plugin based on it, [see the developer documentation](/docs/how-to-guides/README.md) to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.
 
 -   [Gutenberg Architecture](/docs/explanations/architecture/README.md)
--   [Block Styles](/docs/reference-guides/filters/block-filters.md#block-styles)
+-   [Block Styles](/docs/reference-guides/block-api/block-styles.md)
 -   [Creating Block Patterns](/docs/reference-guides/block-api/block-patterns.md)
 -   [Theming for the Block Editor](/docs/how-to-guides/themes/README.md)
 -   [Block API Reference](/docs/reference-guides/block-api/README.md)

docs/how-to-guides/javascript/extending-the-block-editor.md

@@ -1,6 +1,6 @@
 # Extending the Block Editor
 
-Let's look at using the [Block Style example](/docs/reference-guides/filters/block-filters.md#block-styles) to extend the editor. This example allows you to add your own custom CSS class name to any core block type.
+Let's look at using the [Block Style example](/docs/reference-guides/block-api/block-styles.md) to extend the editor. This example allows you to add your own custom CSS class name to any core block type.
 
 Replace the existing `console.log()` code in your `myguten.js` file with:
 

docs/reference-guides/block-api/block-deprecation.md

@@ -234,7 +234,6 @@ E.g: a block wants to migrate a title attribute to a paragraph innerBlock.
 
 ```js
 const { registerBlockType } = wp.blocks;
-const { omit } = lodash;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -254,8 +253,10 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 			},
 
 			migrate( attributes, innerBlocks ) {
+				const { title, ...restAttributes } = attributes;
+
 				return [
-					omit( attributes, 'title' ),
+					restAttributes,
 					[
 						createBlock( 'core/paragraph', {
 							content: attributes.title,
@@ -278,8 +279,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 
 ```js
 var el = wp.element.createElement,
-	registerBlockType = wp.blocks.registerBlockType,
-	omit = lodash.omit;
+	registerBlockType = wp.blocks.registerBlockType;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -295,8 +295,10 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 			},
 
 			migrate: function ( attributes, innerBlocks ) {
+				const { title, ...restAttributes } = attributes;
+
 				return [
-					omit( attributes, 'title' ),
+					restAttributes,
 					[
 						createBlock( 'core/paragraph', {
 							content: attributes.title,

docs/reference-guides/block-api/block-metadata.md

@@ -408,7 +408,7 @@ It contains as set of options to control features used in the editor. See the [t
 
 Block styles can be used to provide alternative styles to block. It works by adding a class name to the block's wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.
 
-Plugins and Themes can also register [custom block style](/docs/reference-guides/filters/block-filters.md#block-styles) for existing blocks.
+Plugins and Themes can also register [custom block style](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 ### Example
 

docs/reference-guides/block-api/block-patterns.md

@@ -34,6 +34,7 @@ The properties available for block patterns are:
 -   `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter.
 -   `blockTypes` (optional): An array of block types that the pattern is intended to be used with. Each value needs to be the declared block's `name`.
 -   `postTypes` (optional): An array of post types that the pattern is restricted to be used with. The pattern will only be available when editing one of the post types passed on the array, for all the other post types the pattern is not available at all.
+-   `templateTypes` (optional): An array of template types where the pattern makes sense e.g: '404' if the pattern is for a 404 page, single-post if the pattern is for showing a single post.
 -   `inserter` (optional): By default, all patterns will appear in the inserter. To hide a pattern so that it can only be inserted programmatically, set the `inserter` to `false`.
 
 The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern':

docs/reference-guides/block-api/block-registration.md

@@ -145,7 +145,7 @@ styles: [
 ],
 ```
 
-Plugins and Themes can also register [custom block style](/docs/reference-guides/filters/block-filters.md#block-styles) for existing blocks.
+Plugins and Themes can also register [custom block style](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 #### attributes (optional)
 

lib/compat/wordpress-6.2/block-patterns.php

@@ -225,6 +225,7 @@ function gutenberg_register_theme_block_patterns() {
 		'blockTypes'    => 'Block Types',
 		'postTypes'     => 'Post Types',
 		'inserter'      => 'Inserter',
+		'templateTypes' => 'Template Types',
 	);
 
 	/*
@@ -294,7 +295,7 @@ function gutenberg_register_theme_block_patterns() {
 					}
 
 					// For properties of type array, parse data as comma-separated.
-					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes' ) as $property ) {
+					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes', 'templateTypes' ) as $property ) {
 						if ( ! empty( $pattern_data[ $property ] ) ) {
 							$pattern_data[ $property ] = array_filter(
 								preg_split(

lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php

@@ -34,6 +34,128 @@ class Gutenberg_REST_Block_Patterns_Controller_6_2 extends Gutenberg_REST_Block_
 		'query'   => 'posts',
 	);
 
+	/**
+	 * Prepare a raw block pattern before it gets output in a REST API response.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @param array           $item    Raw pattern as registered, before any changes.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function prepare_item_for_response( $item, $request ) {
+		$fields = $this->get_fields_for_response( $request );
+		$keys   = array(
+			'name'          => 'name',
+			'title'         => 'title',
+			'description'   => 'description',
+			'viewportWidth' => 'viewport_width',
+			'blockTypes'    => 'block_types',
+			'postTypes'     => 'post_types',
+			'categories'    => 'categories',
+			'keywords'      => 'keywords',
+			'content'       => 'content',
+			'inserter'      => 'inserter',
+			'templateTypes' => 'template_types',
+		);
+		$data   = array();
+		foreach ( $keys as $item_key => $rest_key ) {
+			if ( isset( $item[ $item_key ] ) && rest_is_field_included( $rest_key, $fields ) ) {
+				$data[ $rest_key ] = $item[ $item_key ];
+			}
+		}
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * Retrieves the block pattern schema, conforming to JSON Schema.
+	 *
+	 * @since 6.0.0
+	 * @since 6.1.0 Added `post_types` property.
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		$schema = array(
+			'$schema'    => 'http://json-schema.org/draft-04/schema#',
+			'title'      => 'block-pattern',
+			'type'       => 'object',
+			'properties' => array(
+				'name'           => array(
+					'description' => __( 'The pattern name.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'title'          => array(
+					'description' => __( 'The pattern title, in human readable format.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'description'    => array(
+					'description' => __( 'The pattern detailed description.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'viewport_width' => array(
+					'description' => __( 'The pattern viewport width for inserter preview.', 'gutenberg' ),
+					'type'        => 'number',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'block_types'    => array(
+					'description' => __( 'Block types that the pattern is intended to be used with.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'post_types'     => array(
+					'description' => __( 'An array of post types that the pattern is restricted to be used with.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'categories'     => array(
+					'description' => __( 'The pattern category slugs.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'keywords'       => array(
+					'description' => __( 'The pattern keywords.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'template_types' => array(
+					'description' => __( 'An array of template types where the pattern fits.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'content'        => array(
+					'description' => __( 'The pattern content.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'inserter'       => array(
+					'description' => __( 'Determines whether the pattern is visible in inserter.', 'gutenberg' ),
+					'type'        => 'boolean',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+			),
+		);
+
+		return $this->add_additional_fields_schema( $schema );
+	}
+
 	/**
 	 * Registers the routes for the objects of the controller.
 	 *

packages/block-editor/src/components/block-pattern-setup/index.js

@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	showTitles,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -67,14 +68,15 @@ const SetupContent = ( {
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
 						composite={ composite }
+						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
 		</div>
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -98,12 +100,17 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
 			</CompositeItem>
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
 		</div>
 	);
 }
@@ -139,6 +146,7 @@ const BlockPatternSetup = ( {
 	filterPatternsFn,
 	onBlockPatternSelect,
 	initialViewMode = VIEWMODES.carousel,
+	showTitles = false,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
@@ -165,6 +173,7 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					showTitles={ showTitles }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }

packages/block-editor/src/components/block-pattern-setup/style.scss

@@ -7,6 +7,8 @@
 	border-radius: $radius-block-ui;
 
 	&.view-mode-grid {
+		padding-top: $grid-unit-05;
+
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
 		}
@@ -29,10 +31,33 @@
 				cursor: pointer;
 			}
 
+			.block-editor-block-pattern-setup-list__item {
+				&:hover .block-editor-block-preview__container {
+					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				}
+
+				&:focus .block-editor-block-preview__container {
+					box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+					// Windows High Contrast mode will show this outline, but not the box-shadow.
+					outline: 2px solid transparent;
+				}
+				&:hover .block-editor-block-pattern-setup-list__item-title,
+				&:focus .block-editor-block-pattern-setup-list__item-title {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
 
+				.block-editor-block-pattern-setup-list__item-title {
+					padding-top: $grid-unit-10;
+					font-size: 12px;
+					text-align: center;
+					cursor: pointer;
+				}
+
 				.block-editor-block-preview__container {
 					min-height: 100px;
 					border-radius: $radius-block-ui;

packages/block-editor/src/components/block-variation-picker/index.js

@@ -43,7 +43,11 @@ function BlockVariationPicker( {
 					<li key={ variation.name }>
 						<Button
 							variant="secondary"
-							icon={ variation.icon }
+							icon={
+								variation.icon && variation.icon.src
+									? variation.icon.src
+									: variation.icon
+							}
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"

packages/block-library/src/query/edit/index.js

@@ -92,6 +92,7 @@ function PatternSelectionModal( {
 					blockName={ blockNameForPatterns }
 					clientId={ clientId }
 					onBlockPatternSelect={ onBlockPatternSelect }
+					showTitles={ true }
 				/>
 			</BlockContextProvider>
 		</Modal>

packages/components/CHANGELOG.md

@@ -50,6 +50,7 @@
 -   `TabPanel`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 -   `BottomSheetPickerCell`: Refactor away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 -   Refactor global styles context away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `Dropdown`: Convert to TypeScript ([#45787](https://github.com/WordPress/gutenberg/pull/45787)).
 
 ### Documentation