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

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,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -8,9 +13,11 @@ import {
 	__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
@@ -63,14 +70,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 +104,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 }

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>
+			<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,42 @@
+.block-editor-patterns__grid-pagination {
+	border-top: 1px solid $gray-800;
+	padding: $grid-unit-05;
+
+	.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(

package/src/components/block-tools/block-contextual-toolbar.js

@@ -86,9 +86,15 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const isFullscreen =
 		document.body.classList.contains( 'is-fullscreen-mode' );
 
+	/**
+	 * The following code is a workaround to fix the width of the toolbar
+	 * it should be removed when the toolbar will be rendered inline
+	 * FIXME: remove this layout effect when the toolbar is no longer
+	 * 				absolutely positioned
+	 */
 	useLayoutEffect( () => {
 		// don't do anything if not fixed toolbar
-		if ( ! isFixed || ! blockType ) {
+		if ( ! isFixed ) {
 			return;
 		}
 
@@ -100,6 +106,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			return;
 		}
 
+		if ( ! blockType ) {
+			blockToolbar.style.width = 'initial';
+			return;
+		}
+
 		if ( ! isLargerThanTabletViewport ) {
 			// set the width of the toolbar to auto
 			blockToolbar.style = {};
@@ -112,11 +123,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			return;
 		}
 
-		// get the width of the pinned items in the post editor
+		// get the width of the pinned items in the post editor or widget editor
 		const pinnedItems = document.querySelector(
-			'.edit-post-header__settings'
+			'.edit-post-header__settings, .edit-widgets-header__actions'
 		);
-
 		// get the width of the left header in the site editor
 		const leftHeader = document.querySelector(
 			'.edit-site-header-edit-mode__end'
@@ -132,7 +142,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 
 		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
 		const pinnedItemsWidth = computedPinnedItemsStyle
-			? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding
+			? parseFloat( computedPinnedItemsStyle.width )
 			: 0;
 		const leftHeaderWidth = computedLeftHeaderStyle
 			? parseFloat( computedLeftHeaderStyle.width )
@@ -143,6 +153,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			leftHeaderWidth +
 			pinnedItemsWidth +
 			marginLeft +
+			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
 			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
 		}px)`;
 	}, [

package/src/components/block-tools/block-selection-button.js

@@ -165,7 +165,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				selectedBlockClientId;
 		} else if ( navigateIn ) {
 			focusedBlockUid =
-				getClientIdsOfDescendants( [ selectedBlockClientId ] )[ 0 ] ??
+				getClientIdsOfDescendants( selectedBlockClientId )[ 0 ] ??
 				selectedBlockClientId;
 		}
 		const startingBlockClientId = hasBlockMovingClientId();
@@ -193,6 +193,14 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			selectBlock( startingBlockClientId );
 			setBlockMovingClientId( null );
 		}
+		// Prevent the block from being moved into itself.
+		if (
+			startingBlockClientId &&
+			selectedBlockClientId === startingBlockClientId &&
+			navigateIn
+		) {
+			return;
+		}
 		if ( navigateDown || navigateUp || navigateOut || navigateIn ) {
 			if ( focusedBlockUid ) {
 				event.preventDefault();