@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align text"
   >
     <div>
       <button
@@ -66,7 +66,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align text"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -93,7 +93,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align text"
   >
     <div>
       <button

package/src/components/alignment-control/test/index.js

@@ -14,8 +14,6 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
-jest.useFakeTimers();
-
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
@@ -50,9 +48,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<AlignmentUI
@@ -70,7 +66,7 @@ describe( 'AlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align text',
 			} )
 		);
 
@@ -85,9 +81,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should call on change with undefined when a control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<AlignmentUI
@@ -111,9 +105,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should call on change a new value when the control is not active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<AlignmentUI
@@ -136,9 +128,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should allow custom alignment controls to be specified', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { container } = render(
 			<AlignmentUI

package/src/components/alignment-control/ui.js

@@ -32,7 +32,7 @@ function AlignmentUI( {
 	value,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-	label = __( 'Align' ),
+	label = __( 'Align text' ),
 	describedBy = __( 'Change text alignment' ),
 	isCollapsed = true,
 	isToolbar,

package/src/components/autocomplete/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clone } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -44,7 +39,9 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 		if ( hasFilter( 'editor.Autocomplete.completers' ) ) {
 			// Provide copies so filters may directly modify them.
 			if ( filteredCompleters === completers ) {
-				filteredCompleters = filteredCompleters.map( clone );
+				filteredCompleters = filteredCompleters.map(
+					( completer ) => ( { ...completer } )
+				);
 			}
 
 			filteredCompleters = applyFilters(

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

@@ -12,6 +12,7 @@ import {
  * Internal dependencies
  */
 import { useNotifyCopy } from '../copy-handler';
+import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockActions( {
@@ -60,6 +61,7 @@ export default function BlockActions( {
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
+	const pasteStyles = usePasteStyles();
 
 	return children( {
 		canDuplicate,
@@ -128,5 +130,8 @@ export default function BlockActions( {
 			}
 			notifyCopy( 'copy', selectedBlockClientIds );
 		},
+		async onPasteStyles() {
+			await pasteStyles( blocks );
+		},
 	} );
 }

package/src/components/block-alignment-control/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
-jest.useFakeTimers();
-
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();
@@ -45,9 +43,7 @@ describe( 'BlockAlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<BlockAlignmentUI
@@ -80,9 +76,7 @@ describe( 'BlockAlignmentUI', () => {
 	} );
 
 	test( 'should call onChange with undefined, when the control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockAlignmentUI
@@ -105,9 +99,7 @@ describe( 'BlockAlignmentUI', () => {
 	} );
 
 	test( 'should call onChange with alignment value when the control is inactive', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockAlignmentUI

package/src/components/block-alignment-matrix-control/index.js

@@ -23,8 +23,7 @@ function BlockAlignmentMatrixControl( props ) {
 
 	return (
 		<Dropdown
-			position="bottom right"
-			popoverProps={ { variant: 'toolbar' } }
+			popoverProps={ { variant: 'toolbar', placement: 'bottom-start' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

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

@@ -27,9 +27,6 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 		( { title, icon, description } = blockType );
 	}
 
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const { parentNavBlockClientId } = useSelect( ( select ) => {
 		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
 			select( blockEditorStore );
@@ -49,7 +46,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 
 	return (
 		<div className={ classnames( 'block-editor-block-card', className ) }>
-			{ isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && (
+			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
 					onClick={ () => selectBlock( parentNavBlockClientId ) }
 					label={ __( 'Go to parent Navigation block' ) }

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

@@ -14,17 +14,17 @@
 		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
 	}
 
-	&::after {
+	&:not(.is-multi-selected)::after {
 		content: none !important;
 	}
 
-	&:hover:not(.is-dragging-blocks)::before {
+	&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
-	&.is-reusable:hover:not(.is-dragging-blocks)::before,
-	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
+	&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
+	&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
 		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
 	}

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

@@ -3,6 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 
+import { hasBlockSupport } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -20,11 +21,24 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
+	const {
+		name,
+		isSelected,
+		clientId,
+		attributes = {},
+		__unstableLayoutClassNames,
+	} = props;
+	const { layout = null } = attributes;
+	const layoutSupport = hasBlockSupport(
+		name,
+		'__experimentalLayout',
+		false
+	);
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		layout: layoutSupport ? layout : null,
 		__unstableLayoutClassNames,
 	};
 	return (

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

@@ -0,0 +1,31 @@
+.block-editor-block-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+
+	&.has-colors {
+		svg {
+			fill: currentColor;
+
+			// Optimizate for high contrast modes.
+			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
+			@media (forced-colors: active) {
+				fill: CanvasText;
+			}
+		}
+	}
+
+	// Icons with width/height attributes below 20px will be sized up to 20px,
+	// and icons with width/height attributes above 24px will be sized down to
+	// 24px. Icons with width/height >=20px and <=24px will display at the
+	// indicated size.
+	// See: https://github.com/WordPress/gutenberg/pull/9828
+	svg {
+		min-width: 20px;
+		min-height: 20px;
+		max-width: 24px;
+		max-height: 24px;
+	}
+}

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

@@ -35,6 +35,7 @@ import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
+import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -172,12 +173,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const blockInspectorAnimationSettings = useSelect(
 		( select ) => {
-			if ( isOffCanvasNavigationEditorEnabled ) {
+			if ( blockType ) {
 				const globalBlockInspectorAnimationSettings =
 					select( blockEditorStore ).getSettings()
 						.__experimentalBlockInspectorAnimation;
@@ -187,7 +185,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			}
 			return null;
 		},
-		[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
+		[ selectedBlockClientId, blockType ]
 	);
 
 	if ( count > 1 ) {
@@ -200,22 +198,23 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 					<>
 						<InspectorControls.Slot />
 						<InspectorControls.Slot
-							__experimentalGroup="color"
+							group="color"
 							label={ __( 'Color' ) }
 							className="color-block-support-panel__inner-wrapper"
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="typography"
+							group="typography"
 							label={ __( 'Typography' ) }
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="dimensions"
+							group="dimensions"
 							label={ __( 'Dimensions' ) }
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="border"
+							group="border"
 							label={ __( 'Border' ) }
 						/>
+						<InspectorControls.Slot group="styles" />
 					</>
 				) }
 			</div>
@@ -253,10 +252,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 
 	return (
 		<BlockInspectorSingleBlockWrapper
-			animate={
-				isOffCanvasNavigationEditorEnabled &&
-				blockInspectorAnimationSettings
-			}
+			animate={ blockInspectorAnimationSettings }
 			wrapper={ ( children ) => (
 				<AnimatedContainer
 					blockInspectorAnimationSettings={
@@ -361,22 +357,24 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot
-						__experimentalGroup="color"
+						group="color"
 						label={ __( 'Color' ) }
 						className="color-block-support-panel__inner-wrapper"
 					/>
 					<InspectorControls.Slot
-						__experimentalGroup="typography"
+						group="typography"
 						label={ __( 'Typography' ) }
 					/>
 					<InspectorControls.Slot
-						__experimentalGroup="dimensions"
+						group="dimensions"
 						label={ __( 'Dimensions' ) }
 					/>
 					<InspectorControls.Slot
-						__experimentalGroup="border"
+						group="border"
 						label={ __( 'Border' ) }
 					/>
+					<InspectorControls.Slot group="styles" />
+					<PositionControls />
 					<div>
 						<AdvancedControls />
 					</div>

package/src/components/block-list/use-in-between-inserter.js

@@ -43,6 +43,11 @@ export function useInBetweenInserter() {
 					return;
 				}
 
+				// Ignore text nodes sometimes detected in FireFox.
+				if ( event.target.nodeType === event.target.TEXT_NODE ) {
+					return;
+				}
+
 				if ( isMultiSelecting() ) {
 					return;
 				}

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

@@ -88,7 +88,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 				blockInformation.title
 			) }
 			overlayClassName="block-editor-block-lock-modal"
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
 			<p>

package/src/components/block-mover/mover-description.js

@@ -32,7 +32,7 @@ const getMovementDirection = ( moveDirection, orientation ) => {
  * @param {string}  orientation   The orientation of the block movers, vertical or
  *                                horizontal.
  *
- * @return {string} Label for the block movement controls.
+ * @return {string | undefined} Label for the block movement controls.
  */
 export function getBlockMoverDescription(
 	selectedCount,
@@ -227,7 +227,7 @@ export function getBlockMoverDescription(
  * @param {string}  orientation   The orientation of the block movers, vertical or
  *                                horizontal.
  *
- * @return {string} Label for the block movement controls.
+ * @return {string | undefined} Label for the block movement controls.
  */
 export function getMultiBlockMoverDescription(
 	selectedCount,

package/src/components/block-mover/stories/index.js

@@ -11,7 +11,7 @@ import { Toolbar } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockMover from '../';
-import BlockEditorProvider from '../../provider';
+import { ExperimentalBlockEditorProvider } from '../../provider';
 import { store as blockEditorStore } from '../../../store';
 
 registerCoreBlocks();
@@ -35,9 +35,9 @@ function Provider( { children } ) {
 
 	return (
 		<div style={ wrapperStyle }>
-			<BlockEditorProvider value={ blocks }>
+			<ExperimentalBlockEditorProvider value={ blocks }>
 				{ children }
-			</BlockEditorProvider>
+			</ExperimentalBlockEditorProvider>
 		</div>
 	);
 }

package/src/components/block-navigation/dropdown.js

@@ -56,7 +56,7 @@ function BlockNavigationDropdown( { isDisabled, ...props }, ref ) {
 	return (
 		<Dropdown
 			contentClassName="block-editor-block-navigation__popover"
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<BlockNavigationDropdownToggle
 					{ ...props }

package/src/components/block-pattern-setup/index.js

@@ -127,10 +127,7 @@ function BlockPatternSlide( { className, pattern, minHeight } ) {
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview
-				blocks={ blocks }
-				__experimentalMinHeight={ minHeight }
-			/>
+			<BlockPreview blocks={ blocks } minHeight={ minHeight } />
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }

package/src/components/block-pattern-setup/use-patterns-setup.js

@@ -13,7 +13,7 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) {
 		( select ) => {
 			const {
 				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
+				getPatternsByBlockTypes,
 				__experimentalGetAllowedPatterns,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
@@ -22,10 +22,7 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) {
 					filterPatternsFn
 				);
 			}
-			return __experimentalGetPatternsByBlockTypes(
-				blockName,
-				rootClientId
-			);
+			return getPatternsByBlockTypes( blockName, rootClientId );
 		},
 		[ clientId, blockName, filterPatternsFn ]
 	);

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__unstableComposite as Composite,
@@ -28,9 +29,11 @@ function BlockPattern( {
 	isDraggable,
 	pattern,
 	onClick,
+	onHover,
 	composite,
 	showTooltip,
 } ) {
+	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
@@ -45,8 +48,19 @@ function BlockPattern( {
 				<div
 					className="block-editor-block-patterns-list__list-item"
 					draggable={ draggable }
-					onDragStart={ onDragStart }
-					onDragEnd={ onDragEnd }
+					onDragStart={ ( event ) => {
+						setIsDragging( true );
+						if ( onDragStart ) {
+							onHover?.( null );
+							onDragStart( event );
+						}
+					} }
+					onDragEnd={ ( event ) => {
+						setIsDragging( false );
+						if ( onDragEnd ) {
+							onDragEnd( event );
+						}
+					} }
 				>
 					<WithToolTip
 						showTooltip={ showTooltip }
@@ -57,7 +71,17 @@ function BlockPattern( {
 							as="div"
 							{ ...composite }
 							className="block-editor-block-patterns-list__item"
-							onClick={ () => onClick( pattern, blocks ) }
+							onClick={ () => {
+								onClick( pattern, blocks );
+								onHover?.( null );
+							} }
+							onMouseEnter={ () => {
+								if ( isDragging ) {
+									return;
+								}
+								onHover?.( pattern );
+							} }
+							onMouseLeave={ () => onHover?.( null ) }
 							aria-label={ pattern.title }
 							aria-describedby={
 								pattern.description ? descriptionId : undefined
@@ -95,6 +119,7 @@ function BlockPatternList( {
 	isDraggable,
 	blockPatterns,
 	shownPatterns,
+	onHover,
 	onClickPattern,
 	orientation,
 	label = __( 'Block Patterns' ),
@@ -115,6 +140,7 @@ function BlockPatternList( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onClick={ onClickPattern }
+						onHover={ onHover }
 						isDraggable={ isDraggable }
 						composite={ composite }
 						showTooltip={ showTitlesAsTooltip }

package/src/components/block-preview/README.md

@@ -30,26 +30,26 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 Set `viewportWidth` to `0` to make the viewport the same width as the container.
 
-### `__experimentalPadding`
+### minHeight
 
--   **Type** `Int`
--   **Default** `undefined`
+Minimum height of the preview iframe in pixels.
 
-Padding for the preview container body.
+-   **Type:** `Int`
+-   **Default:** `undefined`
 
-### `__experimentalStyles`
+### `additionalStyles`
 
 List of additional editor styles to load into the preview iframe. Each object
 should contain a `css` attribute. See `EditorStyles` for more info.
 
 ```jsx
 <BlockPreview
-    blocks={ blocks }
-	__experimentalStyles={ [
-		{ css: '.wp-block { margin: 16px; }' },
+	blocks={ blocks }
+	additionalStyles={ [
+		{ css: 'body { padding: 16px; }' },
 	] }
 />
 ```
 
--   **Type** `Int`
+-   **Type** `Array`
 -   **Default** `[]`