@wordpress/block-editor 12.20.0 → 12.22.0

package/src/components/inserter/menu.native.js

@@ -177,7 +177,7 @@ function InserterMenu( {
 
 	return (
 		<BottomSheet
-			isVisible={ true }
+			isVisible
 			onClose={ onClose }
 			onKeyboardShow={ onKeyboardShow }
 			onKeyboardHide={ onKeyboardHide }
@@ -198,10 +198,10 @@ function InserterMenu( {
 				</>
 			}
 			hasNavigation
-			setMinHeightToMaxHeight={ true }
+			setMinHeightToMaxHeight
 			contentStyle={ styles[ 'inserter-menu__list' ] }
 			isFullScreen={ isFullScreen }
-			allowDragIndicator={ true }
+			allowDragIndicator
 		>
 			<BottomSheetConsumer>
 				{ ( { listProps } ) => (

package/src/components/inserter/mobile-tab-navigation.js

@@ -31,8 +31,8 @@ function ScreenHeader( { title } ) {
 								{ minWidth: 24, padding: 0 }
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
-							aria-label={ __( 'Navigate to the previous view' ) }
+							size="small"
+							label={ __( 'Back' ) }
 						/>
 						<Spacer>
 							<Heading level={ 5 }>{ title }</Heading>

package/src/components/inserter/style.scss

@@ -767,3 +767,13 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.is-zoom-out {
+	.block-editor-inserter__menu {
+		display: flex;
+	}
+
+	.block-editor-inserter__patterns-category-dialog {
+		position: static;
+	}
+}

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -68,8 +68,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			resetAll={ resetAll }
 			key={ panelId }
 			panelId={ panelId }
-			hasInnerWrapper={ true }
-			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			hasInnerWrapper
+			shouldRenderPlaceholderItems // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }

package/src/components/inspector-controls-tabs/advanced-controls-panel.native.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import groups from '../inspector-controls/groups';
+
+export default function AdvancedControls( props ) {
+	const Slot = groups.advanced?.Slot;
+	if ( ! Slot ) {
+		return null;
+	}
+
+	return (
+		<Slot { ...props }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+
+				return (
+					<PanelBody title={ __( 'Advanced' ) }>{ fills }</PanelBody>
+				);
+			} }
+		</Slot>
+	);
+}

package/src/components/inspector-controls-tabs/index.js

@@ -35,7 +35,7 @@ export default function InspectorControlsTabs( {
 
 	return (
 		<div className="block-editor-block-inspector__tabs">
-			<Tabs initialTabId={ initialTabName } key={ clientId }>
+			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) => (
 						<Tabs.Tab

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -9,10 +9,10 @@ import { __ } from '@wordpress/i18n';
  */
 import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<>

package/src/components/line-height-control/test/index.js

@@ -23,7 +23,7 @@ const ControlledLineHeightControl = () => {
 		<LineHeightControl
 			value={ value }
 			onChange={ setValue }
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 		/>
 	);
 };

package/src/components/link-control/link-preview.js

@@ -16,8 +16,9 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +34,12 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
 
@@ -139,7 +146,7 @@ export default function LinkPreview( {
 					label={ sprintf(
 						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
 						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL ? '' : ': ' + value.url
+						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
 					disabled={ isEmptyURL }

package/src/components/link-control/search-input.js

@@ -130,7 +130,7 @@ const LinkControlSearchInput = forwardRef(
 						showSuggestions ? handleRenderSuggestions : null
 					}
 					__experimentalFetchLinkSuggestions={ searchHandler }
-					__experimentalHandleURLSuggestions={ true }
+					__experimentalHandleURLSuggestions
 					__experimentalShowInitialSuggestions={
 						showInitialSuggestions
 					}

package/src/components/link-control/style.scss

@@ -34,6 +34,15 @@ $block-editor-link-control-number-of-actions: 1;
 				content: attr(aria-label);
 			}
 		}
+
+		.block-editor-link-control__search-item-top {
+			gap: $grid-unit-10;
+
+			.components-button.has-icon {
+				min-width: inherit;
+				width: min-content;
+			}
+		}
 	}
 }
 
@@ -84,11 +93,6 @@ $block-editor-link-control-number-of-actions: 1;
 	position: absolute;
 	right: 19px; // specific to place the button properly.
 	top: 3px;
-
-	svg {
-		position: relative;
-		top: -2px; // the icon itself is not centered within the bounds; this centers it.
-	}
 }
 
 .block-editor-link-control__search-actions {

package/src/components/list-view/block-select-button.js

@@ -47,7 +47,6 @@ function ListViewBlockSelectButton(
 		onDragEnd,
 		draggable,
 		isExpanded,
-		ariaLabel,
 		ariaDescribedBy,
 		updateFocusAndSelection,
 	},
@@ -249,7 +248,6 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-label={ ariaLabel }
 				aria-describedby={ ariaDescribedBy }
 				aria-expanded={ isExpanded }
 			>

package/src/components/list-view/block.js

@@ -21,7 +21,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -35,7 +35,11 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription, focusListItem } from './utils';
+import {
+	getBlockPositionDescription,
+	getBlockPropertiesDescription,
+	focusListItem,
+} from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
@@ -77,8 +81,6 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle =
-		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
 
 	const { block, blockName, blockEditingMode } = useSelect(
 		( select ) => {
@@ -93,6 +95,7 @@ function ListViewBlock( {
 		},
 		[ clientId ]
 	);
+
 	const allowRightClickOverrides = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().allowRightClickOverrides,
@@ -107,7 +110,7 @@ function ListViewBlock( {
 		// Don't show the settings menu if block is disabled or content only.
 		blockEditingMode === 'default';
 	const instanceId = useInstanceId( ListViewBlock );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
+	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
 	const {
 		expand,
@@ -247,19 +250,8 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockAriaLabel = isLocked
-		? sprintf(
-				// translators: %s: The title of the block. This string indicates a link to select the locked block.
-				__( '%s (locked)' ),
-				blockTitle
-		  )
-		: blockTitle;
-
-	const settingsAriaLabel = sprintf(
-		// translators: %s: The title of the block.
-		__( 'Options for %s' ),
-		blockTitle
-	);
+	const blockPropertiesDescription =
+		getBlockPropertiesDescription( isLocked );
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -352,12 +344,11 @@ function ListViewBlock( {
 							onFocus={ onFocus }
 							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
 							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ blockPositionDescription }
+							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
 						</AriaReferencedText>
 					</div>
 				) }
@@ -405,7 +396,7 @@ function ListViewBlock( {
 							clientIds={ dropdownClientIds }
 							block={ block }
 							icon={ moreVertical }
-							label={ settingsAriaLabel }
+							label={ __( 'Actions' ) }
 							popoverProps={ {
 								anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
 							} }

package/src/components/list-view/branch.js

@@ -251,7 +251,7 @@ function ListViewBranch( props ) {
 					level={ level }
 					setSize={ rowCount }
 					positionInSet={ rowCount }
-					isExpanded={ true }
+					isExpanded
 				>
 					<TreeGridCell>
 						{ ( treeGridCellProps ) => (

package/src/components/list-view/drop-indicator.js

@@ -298,7 +298,7 @@ export default function ListViewDropIndicatorPreview( {
 			className="block-editor-list-view-drop-indicator--preview"
 			variant="unstyled"
 			flip={ false }
-			resize={ true }
+			resize
 		>
 			<div
 				style={ style }

package/src/components/list-view/index.js

@@ -336,7 +336,7 @@ function ListViewComponent(
 		description && `block-editor-list-view-description-${ instanceId }`;
 
 	return (
-		<AsyncModeProvider value={ true }>
+		<AsyncModeProvider value>
 			<ListViewDropIndicatorPreview
 				draggedBlockClientId={ firstDraggedBlockClientId }
 				listViewRef={ elementRef }

package/src/components/list-view/style.scss

@@ -7,7 +7,7 @@
 	// Move upwards when in modal.
 	.components-modal__content & {
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
-		width: calc(100% + #{ $grid-unit-15 });
+		width: calc(100% + #{$grid-unit-15});
 	}
 
 	// Without setting `pointer-events: none`, when dragging over list view items,
@@ -71,7 +71,8 @@
 		&:focus::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -82,14 +83,16 @@
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 		}
 	}
 	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
@@ -181,7 +184,9 @@
 
 	&.is-after-dragged-blocks.is-displacement-down {
 		transition: transform 0.2s;
-		transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform:
+			translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
+			-1));
 		@include reduce-motion("transition");
 	}
 
@@ -217,7 +222,10 @@
 			content: "";
 			position: absolute;
 			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+			transition:
+				border-color 0.1s linear,
+				border-style 0.1s linear,
+				box-shadow 0.1s linear;
 			top: -2px;
 			right: 0;
 			left: 0;
@@ -242,7 +250,9 @@
 			bottom: 0;
 			left: 0;
 			border-radius: inherit;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 			z-index: 2;
 			pointer-events: none;
 		}
@@ -255,7 +265,9 @@
 
 	&.is-nesting .block-editor-list-view__menu,
 	.block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		z-index: 1;
 	}
 
@@ -458,7 +470,9 @@ $block-navigation-max-indent: 8;
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
+	margin-left:
+		($icon-size) * $block-navigation-max-indent + 4 *
+		($block-navigation-max-indent - 1);
 }
 
 .block-editor-list-view-leaf:not([aria-level="1"]) {
@@ -471,12 +485,12 @@ $block-navigation-max-indent: 8;
 // indentation in `use-list-view-drop-zone.js` must be updated as well
 // to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
-	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
+	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
+	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
-		}
-		@else {
-			margin-left: ( $icon-size * $i );
+			margin-left: ($icon-size * $i) + 4 * ($i - 1);
+		} @else {
+			margin-left: ($icon-size * $i);
 		}
 	}
 }
@@ -486,7 +500,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
@@ -494,7 +510,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;

package/src/components/list-view/use-clipboard-handler.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -15,6 +15,7 @@ import { getPasteBlocks, setClipboardBlocks } from '../writing-flow/utils';
 // This hook borrows from useClipboardHandler in ../writing-flow/use-clipboard-handler.js
 // and adds behaviour for the list view, while skipping partial selection.
 export default function useClipboardHandler( { selectBlock } ) {
+	const registry = useRegistry();
 	const {
 		getBlockOrder,
 		getBlockRootClientId,
@@ -106,7 +107,7 @@ export default function useClipboardHandler( { selectBlock } ) {
 
 				notifyCopy( event.type, selectedBlockClientIds );
 				const blocks = getBlocksByClientId( selectedBlockClientIds );
-				setClipboardBlocks( event, blocks );
+				setClipboardBlocks( event, blocks, registry );
 			}
 
 			if ( event.type === 'cut' ) {

package/src/components/list-view/utils.js

@@ -7,12 +7,15 @@ import { focus } from '@wordpress/dom';
 export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 	sprintf(
 		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
-		__( 'Block %1$d of %2$d, Level %3$d' ),
+		__( 'Block %1$d of %2$d, Level %3$d.' ),
 		position,
 		siblingCount,
 		level
 	);
 
+export const getBlockPropertiesDescription = ( isLocked ) =>
+	isLocked ? __( 'This block is locked.' ) : '';
+
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,
  * or false otherwise.

package/src/components/panel-color-settings/index.js

@@ -19,7 +19,7 @@ const PanelColorSettings = ( { colorSettings, ...props } ) => {
 		<PanelColorGradientSettings
 			settings={ settings }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 			{ ...props }
 		/>
 	);

package/src/components/panel-color-settings/test/index.js

@@ -16,7 +16,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
@@ -39,7 +39,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
@@ -63,7 +63,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',

package/src/components/provider/index.js

@@ -57,10 +57,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 export const BlockEditorProvider = ( props ) => {
 	return (
-		<ExperimentalBlockEditorProvider
-			{ ...props }
-			stripExperimentalSettings={ true }
-		>
+		<ExperimentalBlockEditorProvider { ...props } stripExperimentalSettings>
 			{ props.children }
 		</ExperimentalBlockEditorProvider>
 	);

package/src/components/resizable-box-popover/index.js

@@ -6,7 +6,7 @@ import { ResizableBox } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
 
 export default function ResizableBoxPopover( {
 	clientId,
@@ -14,14 +14,12 @@ export default function ResizableBoxPopover( {
 	...props
 } ) {
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
-			__unstablePopoverSlot="__unstable-block-tools-after"
-			shift={ false }
+			__unstablePopoverSlot="block-toolbar"
 			{ ...props }
 		>
 			<ResizableBox { ...resizableBoxProps } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

package/src/components/responsive-block-control/README.md

@@ -2,7 +2,7 @@
 
 `ResponsiveBlockControl` provides a standardised interface for the creation of Block controls that require **different settings per viewport** (ie: "responsive" settings).
 
-For example, imagine your Block provides a control which affords the ability to change a "padding" value used in the Block display. Consider that whilst this setting may work well on "large" screens, the same value may not work well on smaller screens (it may be too large for example). As a result, you now need to provide a padding control _per viewport/screensize_.
+For example, imagine your Block provides a control which affords the ability to change a "padding" value used in the Block display. Consider that whilst this setting may work well on "large" screens, the same value may not work well on smaller screens (it may be too large for example). As a result, you now need to provide a padding control _per viewport/screen size_.
 
 `ResponsiveBlockControl` provides a standardised component for the creation of such interfaces within Gutenberg.
 
@@ -25,7 +25,7 @@ import { useState } from 'react';
 import { registerBlockType } from '@wordpress/blocks';
 import {
 	InspectorControls,
-	ResponsiveBlockControl,
+	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
 import {
 	DimensionControl,
@@ -194,7 +194,7 @@ const renderResponsiveControls = ( viewports ) => {
 ### `toggleLabel`
 
 -   **Type:** `String`
--   **Default:** `Use the same %s on all screensizes.` (where "%s" is the `property` prop - see above )
+-   **Default:** `Use the same %s on all screen sizes.` (where "%s" is the `property` prop - see above )
 -   **Required:** `false`
 
 Optional label used for the toggle control which switches the interface between showing responsive controls or not.
@@ -213,7 +213,7 @@ Optional label used for the toggle control which switches the interface between
 
 -   **Required:** `false`
 
-Optional object describing the attributes of the default value. By default this is `All` which indicates the control will affect "all viewports/screensizes".
+Optional object describing the attributes of the default value. By default this is `All` which indicates the control will affect "all viewports/screen sizes".
 
 ### `viewports`
 

package/src/components/responsive-block-control/index.js

@@ -52,7 +52,7 @@ function ResponsiveBlockControl( props ) {
 		toggleLabel ||
 		sprintf(
 			/* translators: %s: Property value for the control (eg: margin, padding, etc.). */
-			__( 'Use the same %s on all screensizes.' ),
+			__( 'Use the same %s on all screen sizes.' ),
 			property
 		);