@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

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

@@ -5,12 +5,14 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import {
-	ToggleControl,
-	__experimentalSpacer as Spacer,
+	MenuGroup,
+	MenuItem,
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
+import { check } from '@wordpress/icons';
+import { Text } from '@wordpress/ui';
 import EditContents from './edit-contents';
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
@@ -193,7 +195,7 @@ function BlockInspector() {
 		const _renderedBlockClientId = isWithinEditedSection
 			? _selectedBlockClientId
 			: getParentSectionBlock( _selectedBlockClientId ) ||
-			  _selectedBlockClientId;
+				_selectedBlockClientId;
 		const _renderedBlockName =
 			_renderedBlockClientId && getBlockName( _renderedBlockClientId );
 		const _blockType =
@@ -419,11 +421,13 @@ const BlockInspectorSingleBlock = ( {
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
-	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
 	const isEditingStyleState =
 		( hasViewportBlockStyleState( selectedBlockStyleState ) &&
 			isResponsiveEditing ) ||
 		hasPseudoBlockStyleState( selectedBlockStyleState );
+	// When a style state is active, the badges replace the block description.
+	const showStateBadges =
+		blockEditingMode === 'default' && isEditingStyleState;
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
@@ -458,6 +462,9 @@ const BlockInspectorSingleBlock = ( {
 			) }
 			<BlockCard
 				{ ...blockInformation }
+				description={
+					showStateBadges ? undefined : blockInformation.description
+				}
 				allowParentNavigation
 				className={ isBlockSynced && 'is-synced' }
 				isChild={ hasParentChildBlockCards }
@@ -469,25 +476,49 @@ const BlockInspectorSingleBlock = ( {
 							name={ blockName }
 							value={ selectedBlockStyleState }
 							onChange={ onBlockStyleStateChange }
-						/>
+						>
+							<MenuGroup>
+								<MenuItem
+									role="menuitemcheckbox"
+									isSelected={ showStateOnCanvas }
+									icon={ showStateOnCanvas ? check : null }
+									// Previewing is only meaningful while a
+									// non-default pseudo state is selected.
+									disabled={
+										! hasPseudoBlockStyleState(
+											selectedBlockStyleState
+										)
+									}
+									onClick={ () =>
+										onShowStateOnCanvasChange(
+											! showStateOnCanvas
+										)
+									}
+								>
+									{ __( 'Preview on canvas' ) }
+								</MenuItem>
+							</MenuGroup>
+						</BlockStatesControl>
 					)
 				}
 			/>
-			{ blockEditingMode === 'default' && isEditingStyleState && (
-				<Spacer paddingX={ 4 } paddingY={ 2 }>
-					{ hasPseudoState && (
-						<ToggleControl
-							label={ __( 'Show state on canvas' ) }
-							checked={ showStateOnCanvas }
-							onChange={ onShowStateOnCanvasChange }
-						/>
-					) }
+			{ showStateBadges && (
+				<div className="block-editor-block-inspector__state-badges">
+					<Text
+						variant="body-sm"
+						className="block-editor-block-inspector__state-badges-text"
+					>
+						{
+							/* translators: Instructive text shown before the style state badges in the block inspector; the badges indicate the style states the user is currently editing. */
+							__( 'Editing:' )
+						}
+					</Text>
 					<BlockStateBadges
 						name={ blockName }
 						value={ selectedBlockStyleState }
 						isResponsiveEditing={ isResponsiveEditing }
 					/>
-				</Spacer>
+				</div>
 			) }
 			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			<EditContents clientId={ renderedBlockClientId } />

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

@@ -51,6 +51,22 @@
 	text-align: center;
 }
 
+// Styles for the style state badges row, shown when a style state is
+// active. The badges replace the block description, so the row is pulled up
+// against the block card to match the description's spacing.
+.block-editor-block-inspector__state-badges {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: $grid-unit-10;
+	padding: $grid-unit-10 $grid-unit-20;
+	margin-top: -$grid-unit-20;
+}
+
+.block-editor-block-inspector__state-badges-text {
+	white-space: nowrap;
+}
+
 .block-editor-block-inspector__no-block-tools {
 	border-top: $border-width solid $gray-300;
 }

package/src/components/block-keyboard-shortcuts/index.jsx

@@ -67,7 +67,7 @@ function useApplyBlockShortcut() {
 			const variation = variationName
 				? getBlockVariations( targetBlockName )?.find(
 						( { name } ) => name === variationName
-				  )
+					)
 				: undefined;
 
 			// The block is already of the target type, so there is nothing to
@@ -111,7 +111,7 @@ function useApplyBlockShortcut() {
 										...newBlock.attributes,
 										...variation.attributes,
 									},
-							  }
+								}
 							: newBlock
 					);
 				}

package/src/components/block-list/block-html.jsx

@@ -1,4 +1,3 @@
-import TextareaAutosize from 'react-autosize-textarea';
 import { useEffect, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -49,7 +48,7 @@ function BlockHTML( { clientId } ) {
 					...block,
 					attributes,
 					originalContent: content,
-			  } )
+				} )
 			: [ true ];
 
 		updateBlock( clientId, {
@@ -69,7 +68,7 @@ function BlockHTML( { clientId } ) {
 	}, [ blockContent ] );
 
 	return (
-		<TextareaAutosize
+		<textarea
 			className="block-editor-block-list__block-html-textarea"
 			value={ html }
 			onBlur={ onChange }

package/src/components/block-list/block.jsx

@@ -391,12 +391,14 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 							}
 						}
 
+						// The store might have already removed the wrapper if
+						// it was unmodified. However, we still want to remove
+						// the wrapper unless there is content like a cite.
+						const wrapper = getBlock( _clientId );
 						if (
+							wrapper &&
 							! getBlockOrder( _clientId ).length &&
-							isUnmodifiedBlock(
-								getBlock( _clientId ),
-								'content'
-							)
+							isUnmodifiedBlock( wrapper, 'content' )
 						) {
 							removeBlock( _clientId, false );
 						}
@@ -575,7 +577,7 @@ function BlockListBlockProvider( props ) {
 						clientId: ghostBlock.clientId,
 						name: ghostBlock.name,
 						isValid: true,
-				  }
+					}
 				: undefined,
 		[ ghostBlock ]
 	);

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

@@ -369,7 +369,8 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	box-sizing: border-box;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
-	overflow: hidden;
+	field-sizing: content;
+	overflow: auto;
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	line-height: 1.5;
@@ -402,7 +403,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	font-size: $default-font-size;
 	font-family: $default-font;
 	color: $black;
-	font-weight: normal;
+	font-weight: 400;
 
 	.is-zoomed-out & {
 		// Maintains an absolute font-size by counter-scaling based on the zoom level.

package/src/components/block-list/layout.jsx

@@ -22,7 +22,10 @@ export function useLayout() {
 export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
 	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
-	const hasBlockGapSupport = blockGapSupport !== null;
+	// Like the server's `isset()` check, an unset or `null` setting means the
+	// theme has not opted into block gap.
+	const hasBlockGapSupport =
+		blockGapSupport !== null && blockGapSupport !== undefined;
 
 	if ( layoutType ) {
 		if ( css ) {

package/src/components/block-list/test/layout.jsdom.test.js

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { createElement } from '@wordpress/element';
+import { LayoutStyle } from '../layout';
+import { useSettings } from '../../use-settings';
+
+vi.mock( import( '../../use-settings' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSettings: vi.fn(),
+} ) );
+
+describe( 'LayoutStyle', () => {
+	const props = {
+		layout: { type: 'flex' },
+		style: { spacing: { blockGap: '10px' } },
+		selector: '.my-container',
+		blockName: 'test/block',
+	};
+
+	it.each( [ null, undefined ] )(
+		'outputs no layout styles when the block gap setting is %s',
+		( blockGapSetting ) => {
+			useSettings.mockReturnValue( [ blockGapSetting ] );
+
+			const { container } = render( createElement( LayoutStyle, props ) );
+
+			expect( container ).toBeEmptyDOMElement();
+		}
+	);
+
+	it( 'outputs block gap styles when the theme opts into block gap', () => {
+		useSettings.mockReturnValue( [ true ] );
+
+		const { container } = render( createElement( LayoutStyle, props ) );
+
+		expect( container.innerHTML ).toContain(
+			'.my-container { gap: 10px; }'
+		);
+	} );
+} );

package/src/components/block-list/use-block-props/index.js

@@ -190,7 +190,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
 				'--wp-admin-theme-color--rgb':
 					'var(--wp-block-synced-color--rgb)',
-		  }
+			}
 		: {};
 
 	// Use block visibility hook with data from context to avoid extra subscription.

package/src/components/block-lock/modal.jsx

@@ -52,9 +52,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		},
 		[ clientId ]
 	);
-	const [ applyTemplateLock, setApplyTemplateLock ] = useState(
-		!! templateLock
-	);
+	const [ applyTemplateLock, setApplyTemplateLock ] =
+		useState( !! templateLock );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 

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

@@ -44,7 +44,7 @@
 	.block-editor-block-lock-modal__lock-icon {
 		flex-shrink: 0;
 		margin-right: $grid-unit-15;
-		fill: $gray-900;
+		color: $gray-900;
 	}
 
 	&:hover {

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

@@ -96,17 +96,4 @@
 			animation-fill-mode: forwards;
 		}
 	}
-
-	// Don't show the focus inherited by the Button component.
-	&:focus,
-	&:focus:enabled,
-	// Override focus styles from the block toolbar
-	&:focus::before {
-		box-shadow: none;
-		outline: none;
-	}
-
-	&:focus-visible::before {
-		@include block-toolbar-button-style__focus();
-	}
 }

package/src/components/block-parent-selector/index.jsx

@@ -25,6 +25,7 @@ export default function BlockParentSelector() {
 				getBlockParents,
 				getSelectedBlockClientIds,
 				getParentSectionBlock,
+				getEnabledBlockParents,
 				getBlockName,
 				getNextBlockClientId,
 			} = unlock( select( blockEditorStore ) );
@@ -37,7 +38,12 @@ export default function BlockParentSelector() {
 			);
 			const parents = getBlockParents( selectedBlockClientId );
 			const immediateParentClientId = parents[ parents.length - 1 ];
-			const _parentClientId = parentSection ?? immediateParentClientId;
+			// The parent is the nearest one shown in List View and the
+			// breadcrumb, skipping any disabled blocks in between.
+			const _parentClientId = getEnabledBlockParents(
+				selectedBlockClientId,
+				true
+			)[ 0 ];
 			const parentBlockType = getBlockType(
 				getBlockName( _parentClientId )
 			);
@@ -53,12 +59,12 @@ export default function BlockParentSelector() {
 				nextSiblingClientId: getNextBlockClientId(
 					selectedBlockClientId
 				),
-				// When the shown parent is a section further up the tree
-				// rather than the direct parent, its content is locked and
-				// nothing can be inserted, so no button.
+				// No button when the parent shown is not the direct parent, nor
+				// within a section, where the structure is locked.
 				showInserter:
 					!! _parentClientId &&
 					_parentClientId === immediateParentClientId &&
+					! parentSection &&
 					! isTextFlowWrapper,
 			};
 		},
@@ -129,11 +135,11 @@ export default function BlockParentSelector() {
 													'directly add the only allowed block'
 												),
 												blockTitle.toLowerCase()
-										  )
+											)
 										: _x(
 												'Add block',
 												'Generic label for block inserter button'
-										  )
+											)
 								}
 								showTooltip
 								icon={ plus }

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

@@ -82,7 +82,7 @@
 		height: 24px;
 
 		.block-editor-patterns__pattern-icon {
-			fill: var(--wp-block-synced-color);
+			color: var(--wp-block-synced-color);
 		}
 	}
 }

package/src/components/block-popover/index.jsx

@@ -91,7 +91,7 @@ function BlockPopover(
 					? rectUnion(
 							getElementBounds( selectedElement ),
 							getElementBounds( lastSelectedElement )
-					  )
+						)
 					: getElementBounds( selectedElement );
 			},
 			contextElement: selectedElement,

package/src/components/block-rename/modal.jsx

@@ -59,12 +59,12 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 						/* translators: %s: new name/label for the block */
 						__( 'Block name reset to: "%s".' ),
 						editedBlockName
-				  )
+					)
 				: sprintf(
 						/* translators: %s: new name/label for the block */
 						__( 'Block name changed to: "%s".' ),
 						editedBlockName
-				  );
+					);
 
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
@@ -106,7 +106,7 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 							hasOverridesWarning
 								? __(
 										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
-								  )
+									)
 								: undefined
 						}
 						placeholder={ originalBlockName }

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

@@ -379,7 +379,7 @@ export function BlockSettingsDropdown( {
 									? children( { onClose } )
 									: Children.map( ( child ) =>
 											cloneElement( child, { onClose } )
-									  ) }
+										) }
 								{ canRemove && (
 									<MenuGroup>
 										<MenuItem

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

@@ -72,7 +72,7 @@ export function getRenderedStyles( styles ) {
 					isDefault: true,
 				},
 				...styles,
-		  ];
+			];
 }
 
 /**

package/src/components/block-switcher/index.jsx

@@ -131,11 +131,11 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 		? _x(
 				'This block is connected.',
 				'block toolbar button label and description'
-		  )
+			)
 		: _x(
 				'These blocks are connected.',
 				'block toolbar button label and description'
-		  );
+			);
 
 	return (
 		<div className="block-editor-block-switcher__container">
@@ -199,7 +199,7 @@ export const BlockSwitcher = ( { children, clientIds, label, text } ) => {
 					clientIds.length
 				),
 				clientIds.length
-		  );
+			);
 	return (
 		<ToolbarGroup>
 			<ToolbarItem>

package/src/components/block-toolbar/edit-section-button.jsx

@@ -53,9 +53,9 @@ export default function EditSectionButton( { clientId } ) {
 			<ToolbarButton onClick={ handleClick }>
 				{ isEditing
 					? /* translators: Button label to leave pattern editing mode. */
-					  __( 'Exit pattern' )
+						__( 'Exit pattern' )
 					: /* translators: Button label to enter pattern editing mode. */
-					  __( 'Edit pattern' ) }
+						__( 'Edit pattern' ) }
 			</ToolbarButton>
 		</ToolbarGroup>
 	);

package/src/components/block-toolbar/index.jsx

@@ -75,7 +75,6 @@ export function PrivateBlockToolbar( {
 		const {
 			getBlockName,
 			getBlockMode,
-			getBlockParents,
 			getSelectedBlockClientIds,
 			isBlockValid,
 			getBlockEditingMode,
@@ -83,6 +82,7 @@ export function PrivateBlockToolbar( {
 			getSettings,
 			getTemplateLock,
 			getParentSectionBlock,
+			getEnabledBlockParents,
 			isZoomOut,
 			isSectionBlock,
 			isBlockHiddenAtViewport,
@@ -91,9 +91,13 @@ export function PrivateBlockToolbar( {
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const parents = getBlockParents( selectedBlockClientId );
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
-		const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		// The parent is the nearest one shown in List View and the breadcrumb,
+		// skipping any disabled blocks in between.
+		const parentClientId = getEnabledBlockParents(
+			selectedBlockClientId,
+			true
+		)[ 0 ];
 		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
@@ -144,7 +148,7 @@ export function PrivateBlockToolbar( {
 			showParentSelector:
 				! _isZoomOut &&
 				parentBlockType &&
-				editingMode !== 'contentOnly' &&
+				( editingMode !== 'contentOnly' || !! parentSection ) &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,

package/src/components/block-toolbar/switch-section-style.jsx

@@ -62,7 +62,7 @@ function SwitchSectionStyle( { clientId } ) {
 				},
 				blockName,
 				activeStyle.name
-		  )?.color?.background
+			)?.color?.background
 		: undefined;
 
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {

package/src/components/block-variation-transforms/index.jsx

@@ -4,17 +4,15 @@ import {
 	Button,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { VisuallyHidden } from '@wordpress/ui';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Intentional early adoption of the new Menu, pending WordPress/gutenberg#76135.
+import { Menu, VisuallyHidden } from '@wordpress/ui';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { Menu } = unlock( componentsPrivateApis );
-
 function VariationsButtons( {
 	className,
 	onSelectVariation,
@@ -40,7 +38,7 @@ function VariationsButtons( {
 									/* translators: %s: Block or block variation name. */
 									__( 'Transform to %s' ),
 									variation.title
-							  )
+								)
 					}
 					onClick={ () => onSelectVariation( variation.name ) }
 					aria-label={ variation.title }
@@ -59,42 +57,45 @@ function VariationsDropdown( {
 } ) {
 	return (
 		<div className={ className }>
-			<Menu>
-				<Menu.TriggerButton
+			<Menu.Root>
+				<Menu.Trigger
 					render={
 						<Button
 							className="block-editor-block-variation-transforms__button"
 							__next40pxDefaultSize
 							variant="secondary"
-						>
-							{ __( 'Transform to variation' ) }
-						</Button>
+						/>
 					}
-				/>
-				<Menu.Popover position="bottom">
-					<Menu.Group>
+				>
+					{ __( 'Transform to variation' ) }
+				</Menu.Trigger>
+				<Menu.Popup
+					positioner={
+						<Menu.Positioner side="bottom" align="start" />
+					}
+				>
+					<Menu.RadioGroup
+						value={ selectedValue ?? null }
+						onValueChange={ onSelectVariation }
+					>
 						{ variations.map( ( variation ) => (
 							<Menu.RadioItem
 								key={ variation.name }
 								value={ variation.name }
-								checked={ selectedValue === variation.name }
-								onChange={ () =>
-									onSelectVariation( variation.name )
-								}
 							>
 								<Menu.ItemLabel>
 									{ variation.title }
 								</Menu.ItemLabel>
 								{ variation.description && (
-									<Menu.ItemHelpText>
+									<Menu.ItemDescription>
 										{ variation.description }
-									</Menu.ItemHelpText>
+									</Menu.ItemDescription>
 								) }
 							</Menu.RadioItem>
 						) ) }
-					</Menu.Group>
-				</Menu.Popover>
-			</Menu>
+					</Menu.RadioGroup>
+				</Menu.Popup>
+			</Menu.Root>
 		</div>
 	);
 }
@@ -127,7 +128,7 @@ function VariationsToggleGroupControl( {
 										/* translators: %s: Block or block variation name. */
 										__( 'Transform to %s' ),
 										variation.title
-								  )
+									)
 						}
 					/>
 				) ) }