@wordpress/block-editor 13.3.0 → 14.0.0

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
 import {
@@ -34,6 +34,7 @@ function PatternTransformationsMenu( {
 } ) {
 	const [ showTransforms, setShowTransforms ] = useState( false );
 	const patterns = useTransformedPatterns( statePatterns, blocks );
+
 	if ( ! patterns.length ) {
 		return null;
 	}
@@ -60,21 +61,22 @@ function PatternTransformationsMenu( {
 }
 
 function PreviewPatternsPopover( { patterns, onSelect } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
-				>
-					<div className="block-editor-block-switcher__preview is-pattern-list-preview">
-						<BlockPatternsList
-							patterns={ patterns }
-							onSelect={ onSelect }
-						/>
-					</div>
-				</Popover>
-			</div>
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement={ isMobile ? 'bottom' : 'right-start' }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview is-pattern-list-preview">
+					<BlockPatternsList
+						patterns={ patterns }
+						onSelect={ onSelect }
+					/>
+				</div>
+			</Popover>
 		</div>
 	);
 }

package/src/components/block-switcher/preview-block-popover.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -10,22 +11,27 @@ import { Popover } from '@wordpress/components';
 import BlockPreview from '../block-preview';
 
 export default function PreviewBlockPopover( { blocks } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	if ( isMobile ) {
+		return null;
+	}
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					placement="bottom-start"
-					focusOnMount={ false }
-				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
-						<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement="right-start"
+				focusOnMount={ false }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview">
+					<div className="block-editor-block-switcher__preview-title">
+						{ __( 'Preview' ) }
 					</div>
-				</Popover>
-			</div>
+					<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+				</div>
+			</Popover>
 		</div>
 	);
 }

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

@@ -84,27 +84,18 @@
 	min-width: 300px;
 }
 
-.block-editor-block-switcher__popover__preview__parent {
-	.block-editor-block-switcher__popover__preview__container {
-		position: absolute;
-		top: -$grid-unit-15;
-		left: calc(100% + #{$grid-unit-20});
-	}
+.block-editor-block-switcher__popover-preview-container {
+	left: 0;
+	position: absolute;
+	top: -$border-width;
+	width: 100%;
+	bottom: 0;
+	pointer-events: none;
 }
 
-.block-editor-block-switcher__preview__popover {
-	display: none;
+.block-editor-block-switcher__popover-preview {
 	overflow: hidden;
 
-	// Position correctly. Needs specificity.
-	&.components-popover {
-		margin-top: $grid-unit-15 - $border-width;
-	}
-
-	@include break-medium() {
-		display: block;
-	}
-
 	.components-popover__content {
 		width: 300px;
 		border: $border-width solid $gray-900;

package/src/components/block-toolbar/shuffle.js

@@ -54,10 +54,16 @@ export default function Shuffle( { clientId, as = Container } ) {
 			return EMPTY_ARRAY;
 		}
 		return patterns.filter( ( pattern ) => {
+			const isCorePattern =
+				pattern.source === 'core' ||
+				( pattern.source?.startsWith( 'pattern-directory' ) &&
+					pattern.source !== 'pattern-directory/theme' );
 			return (
 				// Check if the pattern has only one top level block,
 				// otherwise we may shuffle to pattern that will not allow to continue shuffling.
 				pattern.blocks.length === 1 &&
+				// We exclude the core patterns and pattern directory patterns that are not theme patterns.
+				! isCorePattern &&
 				pattern.categories?.some( ( category ) => {
 					return categories.includes( category );
 				} ) &&
@@ -66,7 +72,8 @@ export default function Shuffle( { clientId, as = Container } ) {
 			);
 		} );
 	}, [ categories, patterns ] );
-	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
 		return null;
 	}
 

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

@@ -37,7 +37,7 @@ import BlockTitle from '../block-title';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -259,7 +259,6 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 								<Button
 									icon={ dragHandle }
 									className="block-selection-button_drag-handle"
-									aria-hidden="true"
 									label={ dragHandleLabel }
 									// Should not be able to tab to drag handle as this
 									// button can only be used with a pointer device.

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

@@ -251,12 +251,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ window.__experimentalEnableZoomedOutPatternsTab &&
-					isZoomOutMode && (
-						<ZoomOutModeInserters
-							__unstableContentRef={ __unstableContentRef }
-						/>
-					) }
+				{ isZoomOutMode && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);

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

@@ -285,3 +285,11 @@
 		border: none;
 	}
 }
+
+.block-editor-block-tools__zoom-out-mode-inserter-button {
+	visibility: hidden;
+
+	&.is-visible {
+		visibility: visible;
+	}
+}

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { hasStickyOrFixedPositionValue } from '../../hooks/position';
 
 const COMMON_PROPS = {

package/src/components/block-tools/use-show-block-tools.js

@@ -29,10 +29,11 @@ export function useShowBlockTools() {
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-		const block = getBlock( clientId ) || { name: '', attributes: {} };
+		const block = getBlock( clientId );
 		const editorMode = __unstableGetEditorMode();
-		const hasSelectedBlock = clientId && block?.name;
-		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
+		const hasSelectedBlock = !! clientId && !! block;
+		const isEmptyDefaultBlock =
+			hasSelectedBlock && isUnmodifiedDefaultBlock( block );
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&
@@ -43,8 +44,14 @@ export function useShowBlockTools() {
 			! hasMultiSelection() &&
 			editorMode === 'navigation';
 
+		const isZoomOut = editorMode === 'zoom-out';
+		const _showZoomOutToolbar =
+			isZoomOut &&
+			block?.attributes?.align === 'full' &&
+			! _showEmptyBlockSideInserter &&
+			! maybeShowBreadcrumb;
 		const _showBlockToolbarPopover =
-			editorMode !== 'zoom-out' &&
+			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -56,11 +63,7 @@ export function useShowBlockTools() {
 			showBreadcrumb:
 				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar:
-				editorMode === 'zoom-out' &&
-				! _showEmptyBlockSideInserter &&
-				! maybeShowBreadcrumb &&
-				! _showBlockToolbarPopover,
+			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserter-button.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+function ZoomOutModeInserterButton( { isVisible, onClick } ) {
+	const [
+		zoomOutModeInserterButtonHovered,
+		setZoomOutModeInserterButtonHovered,
+	] = useState( false );
+
+	return (
+		<Button
+			variant="primary"
+			icon={ plus }
+			size="compact"
+			className={ clsx(
+				'block-editor-button-pattern-inserter__button',
+				'block-editor-block-tools__zoom-out-mode-inserter-button',
+				{
+					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
+				}
+			) }
+			onClick={ onClick }
+			onMouseOver={ () => {
+				setZoomOutModeInserterButtonHovered( true );
+			} }
+			onMouseOut={ () => {
+				setZoomOutModeInserterButtonHovered( false );
+			} }
+			label={ _x(
+				'Add pattern',
+				'Generic label for pattern inserter button'
+			) }
+		/>
+	);
+}
+
+export default ZoomOutModeInserterButton;

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -1,58 +1,53 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import { plus } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
+import ZoomOutModeInserterButton from './zoom-out-mode-inserter-button';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
+		hasSelection,
+		blockInsertionPoint,
 		blockOrder,
-		sectionRootClientId,
-		insertionPoint,
+		blockInsertionPointVisible,
 		setInserterIsOpened,
-		hasSelection,
+		sectionRootClientId,
+		selectedBlockClientId,
+		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
-		const { getSettings, getBlockOrder, getSelectionStart } =
-			select( blockEditorStore );
+		const {
+			getSettings,
+			getBlockInsertionPoint,
+			getBlockOrder,
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getHoveredBlockClientId,
+			isBlockInsertionPointVisible,
+		} = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
-		// To do: move ZoomOutModeInserters to core/editor.
-		// Or we perhaps we should move the insertion point state to the
-		// block-editor store. I'm not sure what it was ever moved to the editor
-		// store, because all the inserter components all live in the
-		// block-editor package.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const editor = select( 'core/editor' );
 		return {
 			hasSelection: !! getSelectionStart().clientId,
+			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
+			selectedBlockClientId: getSelectedBlockClientId(),
+			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
-	const isMounted = useRef( false );
-
-	useEffect( () => {
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
-			return;
-		}
-		// reset insertion point when the block order changes
-		setInserterIsOpened( true );
-	}, [ blockOrder, setInserterIsOpened ] );
+	const { showInsertionPoint } = useDispatch( blockEditorStore );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -64,18 +59,33 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady || ! hasSelection ) {
+	if ( ! isReady ) {
 		return null;
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
+		const shouldRenderInsertionPoint =
+			blockInsertionPointVisible && blockInsertionPoint.index === index;
+
+		const previousClientId = clientId;
+		const nextClientId = blockOrder[ index ];
+
+		const isSelected =
+			hasSelection &&
+			( selectedBlockClientId === previousClientId ||
+				selectedBlockClientId === nextClientId );
+
+		const isHovered =
+			hoveredBlockClientId === previousClientId ||
+			hoveredBlockClientId === nextClientId;
+
 		return (
 			<BlockPopoverInbetween
 				key={ index }
-				previousClientId={ clientId }
-				nextClientId={ blockOrder[ index ] }
+				previousClientId={ previousClientId }
+				nextClientId={ nextClientId }
 			>
-				{ insertionPoint.insertionIndex === index && (
+				{ shouldRenderInsertionPoint && (
 					<div
 						style={ {
 							borderRadius: '0',
@@ -87,12 +97,9 @@ function ZoomOutModeInserters() {
 						className="block-editor-block-list__insertion-point-indicator"
 					/>
 				) }
-				{ insertionPoint.insertionIndex !== index && (
-					<Button
-						variant="primary"
-						icon={ plus }
-						size="compact"
-						className="block-editor-button-pattern-inserter__button"
+				{ ! shouldRenderInsertionPoint && (
+					<ZoomOutModeInserterButton
+						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,
@@ -100,11 +107,10 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
-						label={ _x(
-							'Add pattern',
-							'Generic label for pattern inserter button'
-						) }
 					/>
 				) }
 			</BlockPopoverInbetween>

package/src/components/block-tools/zoom-out-popover.js

@@ -28,6 +28,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 		...popoverProps,
 		placement: 'left-start',
 		flip: false,
+		shift: true,
 	};
 
 	return (

package/src/components/block-tools/zoom-out-toolbar.js

@@ -100,7 +100,6 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 						<Button
 							icon={ dragHandle }
 							className="block-selection-button_drag-handle zoom-out-toolbar-button"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							iconSize={ 24 }
 							size="compact"
@@ -129,7 +128,7 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 				<ToolbarButton
 					className="zoom-out-toolbar-button"
 					icon={ trash }
-					label="Delete"
+					label={ __( 'Delete' ) }
 					onClick={ () => {
 						removeBlock( clientId );
 					} }

package/src/components/button-block-appender/content.scss

@@ -52,7 +52,7 @@
 			left: 0;
 			pointer-events: none;
 			border: $border-width dashed currentColor;
-			@include placeholder-style();
+			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter {

package/src/components/child-layout-control/index.js

@@ -174,6 +174,8 @@ function FlexControls( {
 						} );
 					} }
 					value={ flexSize }
+					label={ flexResetLabel }
+					hideLabelFromVision
 				/>
 			) }
 		</VStack>

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -45,7 +45,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -220,7 +220,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
-                          data-active-item=""
+                          data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"

package/src/components/colors-gradients/test/control.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		render(
+		await render(
 			<ColorGradientControl
 				label="Test Color Gradient"
 				colorValue="#f00"

package/src/components/date-format-picker/index.js

@@ -10,18 +10,9 @@ import {
 	VisuallyHidden,
 	ToggleControl,
 	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
+	CustomSelectControl,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
-
 // So that we illustrate the different formats in the dropdown properly, show a date that is
 // somwhat recent, has a day greater than 12, and a month with more than three letters.
 const exampleDate = new Date();
@@ -126,7 +117,7 @@ function NonDefaultControls( { format, onChange } ) {
 		name: __( 'Custom' ),
 		className:
 			'block-editor-date-format-picker__custom-format-select-control__custom-option',
-		__experimentalHint: __( 'Enter your own date format' ),
+		hint: __( 'Enter your own date format' ),
 	};
 
 	const [ isCustom, setIsCustom ] = useState(

package/src/components/default-block-appender/index.js

@@ -24,10 +24,14 @@ import { store as blockEditorStore } from '../../store';
 export const ZWNBSP = '\ufeff';
 
 export default function DefaultBlockAppender( { rootClientId } ) {
-	const { showPrompt, isLocked, placeholder } = useSelect(
+	const { showPrompt, isLocked, placeholder, isManualGrid } = useSelect(
 		( select ) => {
-			const { getBlockCount, getSettings, getTemplateLock } =
-				select( blockEditorStore );
+			const {
+				getBlockCount,
+				getSettings,
+				getTemplateLock,
+				getBlockAttributes,
+			} = select( blockEditorStore );
 
 			const isEmpty = ! getBlockCount( rootClientId );
 			const { bodyPlaceholder } = getSettings();
@@ -36,6 +40,9 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 				showPrompt: isEmpty,
 				isLocked: !! getTemplateLock( rootClientId ),
 				placeholder: bodyPlaceholder,
+				isManualGrid:
+					getBlockAttributes( rootClientId )?.layout
+						?.isManualPlacement,
 			};
 		},
 		[ rootClientId ]
@@ -43,7 +50,7 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 
 	const { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );
 
-	if ( isLocked ) {
+	if ( isLocked || isManualGrid ) {
 		return null;
 	}
 

package/src/components/dimensions-tool/scale-tool.js

@@ -105,6 +105,7 @@ export default function ScaleTool( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				label={ __( 'Scale' ) }
 				isBlock
 				help={ scaleHelp[ displayValue ] }

package/src/components/font-appearance-control/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -9,11 +9,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
-import { unlock } from '../../lock-unlock';
 
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
 /**
  * Adjusts font appearance field label in case either font styles or weights
  * are disabled.

package/src/components/font-family/README.md

@@ -24,6 +24,7 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -69,3 +70,10 @@ The current font family value.
 - Default: ''
 
 The rest of the props are passed down to the underlying `<SelectControl />` instance.
+
+#### `__nextHasNoMarginBottom`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.