@wordpress/block-editor 11.2.0 → 11.3.1

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

@@ -58,6 +58,8 @@ export default function BlockActions( {
 		setBlockMovingClientId,
 		setNavigationMode,
 		selectBlock,
+		clearSelectedBlock,
+		multiSelect,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -132,6 +134,13 @@ export default function BlockActions( {
 		},
 		async onPasteStyles() {
 			await pasteStyles( blocks );
+
+			// Need to reselect the block(s) in order for optional tool panel control changes to register.
+			clearSelectedBlock();
+			multiSelect(
+				blocks[ 0 ].clientId,
+				blocks[ blocks.length - 1 ].clientId
+			);
 		},
 	} );
 }

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

@@ -173,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 && blockType ) {
+			if ( blockType ) {
 				const globalBlockInspectorAnimationSettings =
 					select( blockEditorStore ).getSettings()
 						.__experimentalBlockInspectorAnimation;
@@ -188,7 +185,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			}
 			return null;
 		},
-		[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
+		[ selectedBlockClientId, blockType ]
 	);
 
 	if ( count > 1 ) {
@@ -201,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>
@@ -254,10 +252,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 
 	return (
 		<BlockInspectorSingleBlockWrapper
-			animate={
-				isOffCanvasNavigationEditorEnabled &&
-				blockInspectorAnimationSettings
-			}
+			animate={ blockInspectorAnimationSettings }
 			wrapper={ ( children ) => (
 				<AnimatedContainer
 					blockInspectorAnimationSettings={
@@ -362,22 +357,23 @@ 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 />

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** `[]`

package/src/components/block-preview/auto.js

@@ -23,9 +23,8 @@ const MAX_HEIGHT = 2000;
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
-	__experimentalPadding,
-	__experimentalMinHeight,
-	__experimentalStyles,
+	minHeight,
+	additionalStyles = [],
 } ) {
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;
@@ -46,16 +45,16 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
-				...__experimentalStyles,
 				{
-					css: 'body{height:auto;overflow:hidden;border:none;}',
+					css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
 					__unstableType: 'presets',
 				},
+				...additionalStyles,
 			];
 		}
 
 		return styles;
-	}, [ styles, __experimentalStyles ] );
+	}, [ styles, additionalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
@@ -73,7 +72,7 @@ function ScaledBlockPreview( {
 				height: contentHeight * scale,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
-				minHeight: __experimentalMinHeight,
+				minHeight,
 			} }
 		>
 			<Iframe
@@ -87,7 +86,6 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					bodyElement.style.padding = __experimentalPadding + 'px';
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
@@ -105,9 +103,9 @@ function ScaledBlockPreview( {
 					// See: https://github.com/WordPress/gutenberg/pull/38175.
 					maxHeight: MAX_HEIGHT,
 					minHeight:
-						scale !== 0 && scale < 1 && __experimentalMinHeight
-							? __experimentalMinHeight / scale
-							: __experimentalMinHeight,
+						scale !== 0 && scale < 1 && minHeight
+							? minHeight / scale
+							: minHeight,
 				} }
 			>
 				{ contentResizeListener }

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

@@ -2,3 +2,26 @@
 .block-editor-block-preview__content-iframe .block-list-appender {
 	display: none;
 }
+
+.block-editor-block-preview__live-content {
+	* {
+		pointer-events: none;
+	}
+
+	// Hide the block appender, as the block is not editable in this context.
+	.block-list-appender {
+		display: none;
+	}
+
+	// Revert button disable styles to ensure that button styles render as they will on the
+	// front end of the site. For example, this ensures that Social Links icons display correctly.
+	.components-button:disabled {
+		opacity: initial;
+	}
+
+	// Hide placeholders.
+	.components-placeholder,
+	.block-editor-block-list__block[data-empty="true"] {
+		display: none;
+	}
+}