@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.1

package/src/components/block-canvas/index.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockList from '../block-list';
+import EditorStyles from '../editor-styles';
+import Iframe from '../iframe';
+import WritingFlow from '../writing-flow';
+import { useMouseMoveTypingReset } from '../observe-typing';
+import { useClipboardHandler } from '../copy-handler';
+import { useBlockSelectionClearer } from '../block-selection-clearer';
+
+export function ExperimentalBlockCanvas( {
+	shouldIframe = true,
+	height = '300px',
+	children = <BlockList />,
+	styles,
+	contentRef: contentRefProp,
+	iframeProps,
+} ) {
+	const resetTypingRef = useMouseMoveTypingReset();
+	const copyHandler = useClipboardHandler();
+	const clearerRef = useBlockSelectionClearer();
+	const contentRef = useMergeRefs( [
+		copyHandler,
+		contentRefProp,
+		clearerRef,
+	] );
+
+	if ( ! shouldIframe ) {
+		return (
+			<>
+				<EditorStyles
+					styles={ styles }
+					scope=".editor-styles-wrapper"
+				/>
+				<WritingFlow
+					ref={ contentRef }
+					className="editor-styles-wrapper"
+					tabIndex={ -1 }
+					style={ { height } }
+				>
+					{ children }
+				</WritingFlow>
+			</>
+		);
+	}
+
+	return (
+		<Iframe
+			{ ...iframeProps }
+			ref={ resetTypingRef }
+			contentRef={ contentRef }
+			style={ {
+				width: '100%',
+				height,
+				...iframeProps?.style,
+			} }
+			name="editor-canvas"
+		>
+			<EditorStyles styles={ styles } />
+			{ children }
+		</Iframe>
+	);
+}
+
+/**
+ * BlockCanvas component is a component used to display the canvas of the block editor.
+ * What we call the canvas is an iframe containing the block list that you can manipulate.
+ * The component is also responsible of wiring up all the necessary hooks to enable
+ * the keyboard navigation across blocks in the editor and inject content styles into the iframe.
+ *
+ * @example
+ *
+ * ```jsx
+ * function MyBlockEditor() {
+ *   const [ blocks, updateBlocks ] = useState([]);
+ *   return (
+ *     <BlockEditorProvider
+ *       value={ blocks }
+ *       onInput={ updateBlocks }
+ *       onChange={ persistBlocks }
+ *      >
+ *        <BlockCanvas height="400px" />
+ *      </BlockEditorProvider>
+ *    );
+ * }
+ * ```
+ *
+ * @param {Object}    props          Component props.
+ * @param {string}    props.height   Canvas height, defaults to 300px.
+ * @param {Array}     props.styles   Content styles to inject into the iframe.
+ * @param {WPElement} props.children Content of the canvas, defaults to the BlockList component.
+ * @return {WPElement}               Block Breadcrumb.
+ */
+function BlockCanvas( { children, height, styles } ) {
+	return (
+		<ExperimentalBlockCanvas height={ height } styles={ styles }>
+			{ children }
+		</ExperimentalBlockCanvas>
+	);
+}
+
+export default BlockCanvas;

package/src/components/block-inspector/index.js

@@ -39,7 +39,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				getBlockName,
 				getBlockEditingMode,
 			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( [ topLevelLockedBlock ] ).filter(
+			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
 				( clientId ) =>
 					getBlockName( clientId ) !== 'core/list-item' &&
 					getBlockEditingMode( clientId ) === 'contentOnly'
@@ -300,6 +300,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Border' ) }
 					/>
 					<InspectorControls.Slot group="styles" />
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background' ) }
+					/>
 					<PositionControls />
 					<div>
 						<AdvancedControls />

package/src/components/block-list/content.scss

@@ -426,7 +426,6 @@
 }
 
 .block-editor-iframe__body {
-	background-color: $white;
 	transition: all 0.3s;
 	transform-origin: top center;
 }

package/src/components/block-patterns-list/index.js

@@ -1,22 +1,30 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 	Tooltip,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { Icon, symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import BlockPatternsPaging from '../block-patterns-paging';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -63,14 +71,20 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={ showTooltip }
+						showTooltip={ showTooltip && ! pattern.id }
 						title={ pattern.title }
 					>
 						<CompositeItem
 							role="option"
 							as="div"
 							{ ...composite }
-							className="block-editor-block-patterns-list__item"
+							className={ classnames(
+								'block-editor-block-patterns-list__item',
+								{
+									'block-editor-block-patterns-list__list-item-synced':
+										pattern.id && ! pattern.syncStatus,
+								}
+							) }
 							onClick={ () => {
 								onClick( pattern, blocks );
 								onHover?.( null );
@@ -91,11 +105,23 @@ function BlockPattern( {
 								blocks={ blocks }
 								viewportWidth={ viewportWidth }
 							/>
-							{ ! showTooltip && (
-								<div className="block-editor-block-patterns-list__item-title">
-									{ pattern.title }
-								</div>
-							) }
+
+							<HStack className="block-editor-patterns__pattern-details">
+								{ pattern.id && ! pattern.syncStatus && (
+									<div className="block-editor-patterns__pattern-icon-wrapper">
+										<Icon
+											className="block-editor-patterns__pattern-icon"
+											icon={ symbol }
+										/>
+									</div>
+								) }
+								{ ( ! showTooltip || pattern.id ) && (
+									<div className="block-editor-block-patterns-list__item-title">
+										{ pattern.title }
+									</div>
+								) }
+							</HStack>
+
 							{ !! pattern.description && (
 								<VisuallyHidden id={ descriptionId }>
 									{ pattern.description }
@@ -115,16 +141,20 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList( {
-	isDraggable,
-	blockPatterns,
-	shownPatterns,
-	onHover,
-	onClickPattern,
-	orientation,
-	label = __( 'Block Patterns' ),
-	showTitlesAsTooltip,
-} ) {
+function BlockPatternList(
+	{
+		isDraggable,
+		blockPatterns,
+		shownPatterns,
+		onHover,
+		onClickPattern,
+		orientation,
+		label = __( 'Block Patterns' ),
+		showTitlesAsTooltip,
+		pagingProps,
+	},
+	ref
+) {
 	const composite = useCompositeState( { orientation } );
 	return (
 		<Composite
@@ -132,6 +162,7 @@ function BlockPatternList( {
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
+			ref={ ref }
 		>
 			{ blockPatterns.map( ( pattern ) => {
 				const isShown = shownPatterns.includes( pattern );
@@ -149,8 +180,11 @@ function BlockPatternList( {
 					<BlockPatternPlaceholder key={ pattern.name } />
 				);
 			} ) }
+			{ pagingProps && pagingProps.numPages > 1 && (
+				<BlockPatternsPaging { ...pagingProps } />
+			) }
 		</Composite>
 	);
 }
 
-export default BlockPatternList;
+export default forwardRef( BlockPatternList );

package/src/components/block-patterns-list/style.scss

@@ -11,7 +11,7 @@
 		min-height: 100px;
 	}
 
-	&[draggable="true"] .block-editor-block-preview__container {
+	&[draggable="true"] {
 		cursor: grab;
 	}
 }
@@ -27,22 +27,39 @@
 	}
 
 	.block-editor-block-patterns-list__item-title {
-		padding-top: $grid-unit-10;
-		font-size: 12px;
-		text-align: center;
+		text-align: left;
+		flex-grow: 1;
 	}
 
 	&:hover .block-editor-block-preview__container {
-		box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px $gray-900;
 	}
 
 	&:focus .block-editor-block-preview__container {
-		@include button-style-outset__focus(var(--wp-admin-theme-color));
+		@include button-style-outset__focus($gray-900);
 	}
 
+	&.block-editor-block-patterns-list__list-item-synced {
+		&:hover,
+		&:focus {
+			.block-editor-block-preview__container {
+				box-shadow:
+					0 0 0 2px var(--wp-block-synced-color),
+					0 15px 25px rgb(0 0 0 / 7%);
+			}
+		}
+	}
+
+	.block-editor-patterns__pattern-details {
+		align-items: center;
+		margin-top: $grid-unit-10;
+	}
 
-	&:hover .block-editor-block-patterns-list__item-title,
-	&:focus .block-editor-block-patterns-list__item-title {
-		color: var(--wp-admin-theme-color);
+	.block-editor-patterns__pattern-icon-wrapper {
+		min-width: 24px;
+		height: 24px;
+		.block-editor-patterns__pattern-icon {
+			fill: var(--wp-block-synced-color);
+		}
 	}
 }

package/src/components/block-patterns-paging/index.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+
+export default function Pagination( {
+	currentPage,
+	numPages,
+	changePage,
+	totalItems,
+} ) {
+	return (
+		<VStack className="block-editor-patterns__grid-pagination-wrapper">
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of patterns.
+					sprintf(
+						// translators: %s: Total number of patterns.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</Text>
+			<HStack
+				expanded={ false }
+				spacing={ 3 }
+				justify="flex-start"
+				className="block-editor-patterns__grid-pagination"
+			>
+				<HStack
+					expanded={ false }
+					spacing={ 1 }
+					className="block-editor-patterns__grid-pagination-previous"
+				>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( 1 ) }
+						disabled={ currentPage === 1 }
+						aria-label={ __( 'First page' ) }
+					>
+						<span>«</span>
+					</Button>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( currentPage - 1 ) }
+						disabled={ currentPage === 1 }
+						aria-label={ __( 'Previous page' ) }
+					>
+						<span>‹</span>
+					</Button>
+				</HStack>
+				<Text variant="muted">
+					{ sprintf(
+						// translators: %1$s: Current page number, %2$s: Total number of pages.
+						_x( '%1$s of %2$s', 'paging' ),
+						currentPage,
+						numPages
+					) }
+				</Text>
+				<HStack
+					expanded={ false }
+					spacing={ 1 }
+					className="block-editor-patterns__grid-pagination-next"
+				>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( currentPage + 1 ) }
+						disabled={ currentPage === numPages }
+						aria-label={ __( 'Next page' ) }
+					>
+						<span>›</span>
+					</Button>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( numPages ) }
+						disabled={ currentPage === numPages }
+						aria-label={ __( 'Last page' ) }
+						size="default"
+					>
+						<span>»</span>
+					</Button>
+				</HStack>
+			</HStack>
+		</VStack>
+	);
+}

package/src/components/block-patterns-paging/style.scss

@@ -0,0 +1,45 @@
+.block-editor-patterns__grid-pagination-wrapper {
+
+	.block-editor-patterns__grid-pagination {
+		border-top: 1px solid $gray-800;
+		padding: $grid-unit-05;
+		justify-content: center;
+		.components-button.is-tertiary {
+			width: auto;
+			height: $button-size-compact;
+			justify-content: center;
+
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
+
+			&:hover:not(:disabled) {
+				color: $white;
+				background-color: $gray-700;
+			}
+		}
+	}
+}
+
+.show-icon-labels {
+	.block-editor-patterns__grid-pagination {
+		flex-direction: column;
+		.block-editor-patterns__grid-pagination-previous,
+		.block-editor-patterns__grid-pagination-next {
+			flex-direction: column;
+		}
+		.components-button {
+			width: auto;
+			// Hide the button icons when labels are set to display...
+			span {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
+}

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -31,6 +31,7 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
@@ -47,12 +48,15 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 }
 
 export function BlockSettingsDropdown( {
+	block,
 	clientIds,
 	__experimentalSelectBlock,
 	children,
 	__unstableDisplayLocation,
 	...props
 } ) {
+	// Get the client id of the current block for this menu, if one is set.
+	const currentClientId = block?.clientId;
 	const blockClientIds = Array.isArray( clientIds )
 		? clientIds
 		: [ clientIds ];
@@ -102,6 +106,16 @@ export function BlockSettingsDropdown( {
 	const { getBlockOrder, getSelectedBlockClientIds } =
 		useSelect( blockEditorStore );
 
+	const openedBlockSettingsMenu = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getOpenedBlockSettingsMenu(),
+		[]
+	);
+
+	const { setOpenedBlockSettingsMenu } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
 	const shortcuts = useSelect( ( select ) => {
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		return {
@@ -174,6 +188,32 @@ export function BlockSettingsDropdown( {
 	const parentBlockIsSelected =
 		selectedBlockClientIds?.includes( firstParentClientId );
 
+	// When a currentClientId is in use, treat the menu as a controlled component.
+	// This ensures that only one block settings menu is open at a time.
+	// This is a temporary solution to work around an issue with `onFocusOutside`
+	// where it does not allow a dropdown to be closed if focus was never within
+	// the dropdown to begin with. Examples include a user either CMD+Clicking or
+	// right clicking into an inactive window.
+	// See: https://github.com/WordPress/gutenberg/pull/54083
+	const open = ! currentClientId
+		? undefined
+		: openedBlockSettingsMenu === currentClientId || false;
+
+	const onToggle = useCallback(
+		( localOpen ) => {
+			if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
+				setOpenedBlockSettingsMenu( currentClientId );
+			} else if (
+				! localOpen &&
+				openedBlockSettingsMenu &&
+				openedBlockSettingsMenu === currentClientId
+			) {
+				setOpenedBlockSettingsMenu( undefined );
+			}
+		},
+		[ currentClientId, openedBlockSettingsMenu, setOpenedBlockSettingsMenu ]
+	);
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -199,6 +239,8 @@ export function BlockSettingsDropdown( {
 					label={ __( 'Options' ) }
 					className="block-editor-block-settings-menu"
 					popoverProps={ POPOVER_PROPS }
+					open={ open }
+					onToggle={ onToggle }
 					noIcons
 					menuProps={ {
 						/**
@@ -230,6 +272,7 @@ export function BlockSettingsDropdown( {
 								canInsertDefaultBlock
 							) {
 								event.preventDefault();
+								setOpenedBlockSettingsMenu( undefined );
 								onInsertAfter();
 							} else if (
 								isMatch(
@@ -239,6 +282,7 @@ export function BlockSettingsDropdown( {
 								canInsertDefaultBlock
 							) {
 								event.preventDefault();
+								setOpenedBlockSettingsMenu( undefined );
 								onInsertBefore();
 							}
 						},

package/src/components/block-settings-menu-controls/index.js

@@ -29,19 +29,15 @@ const BlockSettingsMenuControlsSlot = ( {
 	clientIds = null,
 	__unstableDisplayLocation,
 } ) => {
-	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
+	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
-			const {
-				getBlockNamesByClientId,
-				getSelectedBlockClientIds,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlockNamesByClientId, getSelectedBlockClientIds } =
+				select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: getBlockNamesByClientId( ids ),
 				selectedClientIds: ids,
-				canRemove: canRemoveBlocks( ids ),
 			};
 		},
 		[ clientIds ]
@@ -55,8 +51,7 @@ const BlockSettingsMenuControlsSlot = ( {
 	const convertToGroupButtonProps =
 		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
-	const showConvertToGroupButton =
-		( isGroupable || isUngroupable ) && canRemove;
+	const showConvertToGroupButton = isGroupable || isUngroupable;
 
 	return (
 		<Slot

package/src/components/block-styles/index.js

@@ -71,6 +71,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 					return (
 						<Button
+							__next40pxDefaultSize
 							className={ classnames(
 								'block-editor-block-styles__item',
 								{

package/src/components/block-styles/style.scss

@@ -36,13 +36,13 @@
 
 	button.components-button.block-editor-block-styles__item {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 1px $gray-400;
+		box-shadow: inset 0 0 0 $border-width $gray-300;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
 
 		&:hover {
 			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 1px $gray-400;
+			box-shadow: inset 0 0 0 $border-width $gray-300;
 		}
 
 		&.is-active,
@@ -58,7 +58,7 @@
 
 		&:focus,
 		&.is-active:focus {
-			@include button-style__focus();
+			box-shadow: inset 0 0 0 $border-width var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 		}
 	}
 

package/src/components/block-toolbar/block-toolbar-menu.native.js

@@ -60,7 +60,6 @@ const BlockActionsMenu = ( {
 	rootClientId,
 	selectedBlockClientId,
 	selectedBlockPossibleTransformations,
-	canRemove,
 	// Dispatch.
 	createSuccessNotice,
 	convertToRegularBlocks,
@@ -106,8 +105,7 @@ const BlockActionsMenu = ( {
 		selectedBlockClientId ? [ selectedBlockClientId ] : []
 	);
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
-	const showConvertToGroupButton =
-		( isGroupable || isUngroupable ) && canRemove;
+	const showConvertToGroupButton = isGroupable || isUngroupable;
 	const convertToGroupButtons = useConvertToGroupButtons( {
 		...convertToGroupButtonProps,
 	} );
@@ -348,7 +346,6 @@ export default compose(
 			getSelectedBlockClientIds,
 			canInsertBlockType,
 			getTemplateLock,
-			canRemoveBlock,
 		} = select( blockEditorStore );
 		const block = getBlock( clientId );
 		const blockName = getBlockName( clientId );
@@ -385,7 +382,6 @@ export default compose(
 		const selectedBlockPossibleTransformations = selectedBlock
 			? getBlockTransformItems( selectedBlock, rootClientId )
 			: EMPTY_BLOCK_LIST;
-		const canRemove = canRemoveBlock( selectedBlockClientId );
 
 		const isReusableBlockType = block ? isReusableBlock( block ) : false;
 		const reusableBlock = isReusableBlockType
@@ -411,7 +407,6 @@ export default compose(
 			rootClientId,
 			selectedBlockClientId,
 			selectedBlockPossibleTransformations,
-			canRemove,
 		};
 	} ),
 	withDispatch(