prep build 11/21

docs/README.md

@@ -58,8 +58,8 @@ This handbook should be considered the canonical resource for all things related
 - [**WordPress Developer Blog**](https://developer.wordpress.org/news/) - An ever-growing resource of technical articles covering specific topics related to block development and a wide variety of use cases. The blog is also an excellent way to [keep up with the latest developments in WordPress](https://developer.wordpress.org/news/tag/roundup/).
 - [**Learn WordPress**](https://learn.wordpress.org/) - The WordPress hub for learning resources where you can find courses like [Introduction to Block Development: Build your first custom block](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/), [Converting a Shortcode to a Block](https://learn.wordpress.org/course/converting-a-shortcode-to-a-block/) or [Using the WordPress Data Layer](https://learn.wordpress.org/course/using-the-wordpress-data-layer/)
 - [**WordPress.tv**](https://wordpress.tv/) - A hub of WordPress-related videos (from talks at WordCamps to recordings of online workshops) curated and moderated by the WordPress.org community. You’re sure to find something to aid your learning about [block development](https://wordpress.tv/?s=block%20development&sort=newest) or the [block-editor](https://wordpress.tv/?s=block%20editor&sort=relevance) here.
-- [**Gutenberg repository**](https://github.com/WordPress/gutenberg/) - Development of the block editor project is carried out in this GitHub repository. It contains the code of interesting packages such as [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (core blocks) or [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (common UI elements). _The [block-development-examples](https://github.com/WordPress/block-development-examples) repository is another useful reference._
-
+- [**Gutenberg repository**](https://github.com/WordPress/gutenberg/) - Development of the block editor project is carried out in this GitHub repository. It contains the code of interesting packages such as [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (core blocks) or [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (common UI elements). _The [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository is another useful reference._
+- [**End User Documentation**](https://wordpress.org/documentation/) - Documentation site targeted to the end user (not developers) where you can also find documentation about the [Block Editor](https://wordpress.org/documentation/category/block-editor/) and [working with blocks](https://wordpress.org/documentation/article/work-with-blocks/).
 
 ## Are you in the right place?
 

docs/reference-guides/data/data-core.md

@@ -420,6 +420,39 @@ _Returns_
 
 -   A value whose reference will change only when an edit occurs.
 
+### getRevision
+
+Returns a single, specific revision of a parent entity.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _recordKey_ `EntityRecordKey`: The key of the entity record whose revisions you want to fetch.
+-   _revisionKey_ `EntityRecordKey`: The revision's key.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [entity kind]".
+
+_Returns_
+
+-   `RevisionRecord | Record< PropertyKey, never > | undefined`: Record.
+
+### getRevisions
+
+Returns an entity's revisions.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _recordKey_ `EntityRecordKey`: The key of the entity record whose revisions you want to fetch.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [Entity kind]".
+
+_Returns_
+
+-   `RevisionRecord[] | null`: Record.
+
 ### getThemeSupports
 
 Return theme supports data in the index.
@@ -704,6 +737,24 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveRevisions
+
+Returns an action object used in signalling that revisions have been received.
+
+_Parameters_
+
+-   _kind_ `string`: Kind of the received entity record revisions.
+-   _name_ `string`: Name of the received entity record revisions.
+-   _recordKey_ `number|string`: The key of the entity record whose revisions you want to fetch.
+-   _records_ `Array|Object`: Revisions received.
+-   _query_ `?Object`: Query Object.
+-   _invalidateCache_ `?boolean`: Should invalidate query caches.
+-   _meta_ `?Object`: Meta information about pagination.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveThemeSupports
 
 > **Deprecated** since WP 5.9, this is not useful anymore, use the selector direclty.

lib/class-wp-duotone-gutenberg.php

@@ -938,9 +938,17 @@ public static function output_footer_assets() {
 			echo self::get_svg_definitions( self::$used_svg_filter_data );
 		}
 
-		// This is for classic themes - in block themes, the CSS is added in the head via wp_add_inline_style in the wp_enqueue_scripts action.
-		if ( ! wp_is_block_theme() && ! empty( self::$used_global_styles_presets ) ) {
-			wp_add_inline_style( 'core-block-supports', self::get_global_styles_presets( self::$used_global_styles_presets ) );
+		// In block themes, the CSS is added in the head via wp_add_inline_style in the wp_enqueue_scripts action.
+		if ( ! wp_is_block_theme() ) {
+			$style_tag_id = 'core-block-supports-duotone';
+			wp_register_style( $style_tag_id, false );
+			if ( ! empty( self::$used_global_styles_presets ) ) {
+				wp_add_inline_style( $style_tag_id, self::get_global_styles_presets( self::$used_global_styles_presets ) );
+			}
+			if ( ! empty( self::$block_css_declarations ) ) {
+				wp_add_inline_style( $style_tag_id, gutenberg_style_engine_get_stylesheet_from_css_rules( self::$block_css_declarations ) );
+			}
+			wp_enqueue_style( $style_tag_id );
 		}
 	}
 

packages/block-editor/README.md

@@ -954,7 +954,7 @@ _Parameters_
 
 ### useSetting
 
-> **Deprecated** 6.4.0 Use useSettings instead.
+> **Deprecated** 6.5.0 Use useSettings instead.
 
 Hook that retrieves the given setting for the block instance in use.
 

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

@@ -5,9 +5,7 @@ import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
@@ -22,6 +20,13 @@ import BlockPreview from '../block-preview';
 import SetupToolbar from './setup-toolbar';
 import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 const SetupContent = ( {
 	viewMode,
@@ -30,8 +35,9 @@ const SetupContent = ( {
 	onBlockPatternSelect,
 	showTitles,
 } ) => {
-	const composite = useCompositeState();
+	const compositeStore = useCompositeStore();
 	const containerClass = 'block-editor-block-pattern-setup__container';
+
 	if ( viewMode === VIEWMODES.carousel ) {
 		const slideClass = new Map( [
 			[ activeSlide, 'active-slide' ],
@@ -41,23 +47,25 @@ const SetupContent = ( {
 		return (
 			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
-					<ul className="carousel-container">
+					<div className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
 							<BlockPatternSlide
+								active={ index === activeSlide }
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
 							/>
 						) ) }
-					</ul>
+					</div>
 				</div>
 			</div>
 		);
 	}
+
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				{ ...composite }
+				store={ compositeStore }
 				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
@@ -67,7 +75,6 @@ const SetupContent = ( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
-						composite={ composite }
 						showTitles={ showTitles }
 					/>
 				) ) }
@@ -76,24 +83,27 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
+function BlockPattern( { pattern, onSelect, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPattern,
 		`${ baseClassName }__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
+		<div className={ `${ baseClassName }__list-item` }>
 			<CompositeItem
+				render={
+					<div
+						aria-describedby={
+							description ? descriptionId : undefined
+						}
+						aria-label={ pattern.title }
+						className={ `${ baseClassName }__item` }
+					/>
+				}
+				id={ `${ baseClassName }__pattern__${ pattern.name }` }
 				role="option"
-				as="div"
-				{ ...composite }
-				className={ `${ baseClassName }__item` }
 				onClick={ () => onSelect( blocks ) }
 			>
 				<BlockPreview
@@ -115,14 +125,16 @@ function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	);
 }
 
-function BlockPatternSlide( { className, pattern, minHeight } ) {
+function BlockPatternSlide( { active, className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
 		'block-editor-block-pattern-setup-list__item-description'
 	);
 	return (
-		<li
+		<div
+			aria-hidden={ ! active }
+			role="img"
 			className={ `pattern-slide ${ className }` }
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
@@ -133,7 +145,7 @@ function BlockPatternSlide( { className, pattern, minHeight } ) {
 					{ description }
 				</VisuallyHidden>
 			) }
-		</li>
+		</div>
 	);
 }
 
@@ -178,10 +190,14 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					totalSlides={ patterns.length }
 					handleNext={ () => {
-						setActiveSlide( ( active ) => active + 1 );
+						setActiveSlide( ( active ) =>
+							Math.min( active + 1, patterns.length - 1 )
+						);
 					} }
 					handlePrevious={ () => {
-						setActiveSlide( ( active ) => active - 1 );
+						setActiveSlide( ( active ) =>
+							Math.max( active - 1, 0 )
+						);
 					} }
 					onBlockPatternSelect={ () => {
 						onPatternSelectCallback(

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

@@ -35,12 +35,14 @@ const CarouselNavigation = ( {
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
+			__experimentalIsFocusable
 		/>
 		<Button
 			icon={ chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }
+			__experimentalIsFocusable
 		/>
 	</div>
 );

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

@@ -32,6 +32,8 @@
 			}
 
 			.block-editor-block-pattern-setup-list__item {
+				scroll-margin: 5px 0;
+
 				&:hover .block-editor-block-preview__container {
 					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 				}
@@ -44,6 +46,7 @@
 					color: var(--wp-admin-theme-color);
 				}
 			}
+
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
@@ -85,7 +88,7 @@
 		align-items: center;
 		justify-content: space-between;
 		border-top: 1px solid $gray-300;
-		align-self: flex-end;
+		align-self: stretch;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;

packages/block-editor/src/components/inner-blocks/index.js

@@ -172,7 +172,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	const {
 		__unstableDisableLayoutClassNames,
 		__unstableDisableDropZone,
-		__unstableDropZoneElement,
+		dropZoneElement,
 	} = options;
 	const {
 		clientId,
@@ -214,7 +214,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
-		dropZoneElement: __unstableDropZoneElement,
+		dropZoneElement,
 		rootClientId: clientId,
 	} );
 

packages/block-editor/src/components/rich-text/use-input-rules.js

@@ -3,7 +3,7 @@
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import { insert, isCollapsed, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -42,6 +42,34 @@ function findSelection( blocks ) {
 	return [];
 }
 
+/**
+ * An input rule that replaces two spaces with an en space, and an en space
+ * followed by a space with an em space.
+ *
+ * @param {Object} value Value to replace spaces in.
+ *
+ * @return {Object} Value with spaces replaced.
+ */
+function replacePrecedingSpaces( value ) {
+	if ( ! isCollapsed( value ) ) {
+		return value;
+	}
+
+	const { text, start } = value;
+	const lastTwoCharacters = text.slice( start - 2, start );
+
+	// Replace two spaces with an em space.
+	if ( lastTwoCharacters === '  ' ) {
+		return insert( value, '\u2002', start - 2, start );
+	}
+	// Replace an en space followed by a space with an em space.
+	else if ( lastTwoCharacters === '\u2002 ' ) {
+		return insert( value, '\u2003', start - 2, start );
+	}
+
+	return value;
+}
+
 export function useInputRules( props ) {
 	const {
 		__unstableMarkLastChangeAsPersistent,
@@ -122,7 +150,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				preventEventDiscovery( value )
+				preventEventDiscovery( replacePrecedingSpaces( value ) )
 			);
 
 			if ( transformed !== value ) {

packages/block-editor/src/components/url-input/README.md

@@ -103,7 +103,7 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
-### `onKeydown`: `( event: KeyboardEvent ) => void`
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
 
 A callback invoked on the keydown event.
 

packages/block-editor/src/components/use-settings/index.js

@@ -254,15 +254,15 @@ export function useSettings( ...paths ) {
  *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
- * @deprecated 6.4.0 Use useSettings instead.
+ * @deprecated 6.5.0 Use useSettings instead.
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );
  * ```
  */
 export function useSetting( path ) {
 	deprecated( 'wp.blockEditor.useSetting', {
-		since: '6.4',
+		since: '6.5',
 		alternative: 'wp.blockEditor.useSettings',
 		note: 'The new useSettings function can retrieve multiple settings at once, with better performance.',
 	} );