@wordpress/block-editor 14.2.0 → 14.2.1-next.5368f64a9.0

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -17,6 +17,7 @@ import {
 	__experimentalText as Text,
 	FlexBlock,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,6 +33,7 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
+import { store as blockEditorStore } from '../../../store';
 
 const noop = () => {};
 
@@ -42,6 +44,11 @@ export function PatternCategoryPreviews( {
 	category,
 	showTitlesAsTooltip,
 } ) {
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId,
@@ -163,22 +170,32 @@ export function PatternCategoryPreviews( {
 					</Text>
 				) }
 			</VStack>
-
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternsList
-					ref={ scrollContainerRef }
-					shownPatterns={ pagingProps.categoryPatternsAsyncList }
-					blockPatterns={ pagingProps.categoryPatterns }
-					onClickPattern={ onClickPattern }
-					onHover={ onHover }
-					label={ category.label }
-					orientation="vertical"
-					category={ category.name }
-					isDraggable
-					showTitlesAsTooltip={ showTitlesAsTooltip }
-					patternFilter={ patternSourceFilter }
-					pagingProps={ pagingProps }
-				/>
+				<>
+					{ isZoomOutMode && (
+						<Text
+							size="12"
+							as="p"
+							className="block-editor-inserter__help-text"
+						>
+							{ __( 'Drag and drop patterns into the canvas.' ) }
+						</Text>
+					) }
+					<BlockPatternsList
+						ref={ scrollContainerRef }
+						shownPatterns={ pagingProps.categoryPatternsAsyncList }
+						blockPatterns={ pagingProps.categoryPatterns }
+						onClickPattern={ onClickPattern }
+						onHover={ onHover }
+						label={ category.label }
+						orientation="vertical"
+						category={ category.name }
+						isDraggable
+						showTitlesAsTooltip={ showTitlesAsTooltip }
+						patternFilter={ patternSourceFilter }
+						pagingProps={ pagingProps }
+					/>
+				</>
 			) }
 		</>
 	);

package/src/components/inserter/index.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { forwardRef, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
@@ -76,7 +76,7 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class PrivateInserter extends Component {
+class Inserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -222,7 +222,7 @@ class PrivateInserter extends Component {
 	}
 }
 
-export const ComposedPrivateInserter = compose( [
+export default compose( [
 	withSelect(
 		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
 			const {
@@ -418,10 +418,4 @@ export const ComposedPrivateInserter = compose( [
 		( { hasItems, isAppender, rootClientId, clientId } ) =>
 			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
 	),
-] )( PrivateInserter );
-
-const Inserter = forwardRef( ( props, ref ) => {
-	return <ComposedPrivateInserter ref={ ref } { ...props } />;
-} );
-
-export default Inserter;
+] )( Inserter );

package/src/components/inserter/media-tab/media-list.js

@@ -1,16 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { MediaPreview } from './media-preview';
-import { unlock } from '../../../lock-unlock';
-
-const { CompositeV2: Composite } = unlock( componentsPrivateApis );
 
 function MediaList( {
 	mediaList,

package/src/components/inserter/media-tab/media-preview.js

@@ -16,7 +16,7 @@ import {
 	Flex,
 	FlexItem,
 	Button,
-	privateApis as componentsPrivateApis,
+	Composite,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -33,7 +33,6 @@ import { isBlobURL } from '@wordpress/blob';
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const MAXIMUM_TITLE_LENGTH = 25;
@@ -43,8 +42,6 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };
 
-const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
-
 function MediaPreviewOptions( { category, media } ) {
 	if ( ! category.getReportUrl ) {
 		return null;
@@ -249,7 +246,7 @@ export function MediaPreview( { media, onClick, category } ) {
 							onMouseLeave={ onMouseLeave }
 						>
 							<Tooltip text={ truncatedTitle || title }>
-								<CompositeItem
+								<Composite.Item
 									render={
 										<div
 											aria-label={ title }
@@ -267,7 +264,7 @@ export function MediaPreview( { media, onClick, category } ) {
 											</div>
 										) }
 									</div>
-								</CompositeItem>
+								</Composite.Item>
 							</Tooltip>
 							{ ! isInserting && (
 								<MediaPreviewOptions

package/src/components/inserter/quick-inserter.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, SearchControl } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -82,8 +82,6 @@ export default function QuickInserter( {
 		}
 	}, [ setInserterIsOpened ] );
 
-	const { showInsertionPoint } = useDispatch( blockEditorStore );
-
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
@@ -93,7 +91,6 @@ export default function QuickInserter( {
 			filterValue,
 			onSelect,
 		} );
-		showInsertionPoint( rootClientId, insertionIndex );
 	};
 
 	let maxBlockPatterns = 0;

package/src/components/inserter/style.scss

@@ -709,3 +709,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+	padding: 0 $grid-unit-30 $grid-unit-20;
+}

package/src/components/inserter-listbox/index.js

@@ -1,19 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
-const { CompositeV2: Composite } = unlock( componentsPrivateApis );
-
 function InserterListbox( { children } ) {
 	return (
 		<Composite focusShift focusWrap="horizontal" render={ <></> }>

package/src/components/inserter-listbox/item.js

@@ -1,28 +1,18 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Button, Composite } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
-
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
 	return (
-		<CompositeItem
+		<Composite.Item
 			ref={ ref }
 			role="option"
-			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// Use the Composite.Item `accessibleWhenDisabled` prop
 			// over Button's `isFocusable`. The latter was shown to
 			// cause an issue with tab order in the inserter list.
 			accessibleWhenDisabled

package/src/components/inserter-listbox/row.js

@@ -2,17 +2,10 @@
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
+import { Composite } from '@wordpress/components';
 
 function InserterListboxRow( props, ref ) {
-	return <CompositeGroup role="presentation" ref={ ref } { ...props } />;
+	return <Composite.Group role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );

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

@@ -119,20 +119,16 @@ function ListViewComponent(
 	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
 	const { getBlock } = useSelect( blockEditorStore );
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
+	const { visibleBlockCount } = useSelect(
 		( select ) => {
-			const {
-				getGlobalBlockCount,
-				getClientIdsOfDescendants,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+			const { getGlobalBlockCount, getClientIdsOfDescendants } =
+				select( blockEditorStore );
 			const draggedBlockCount =
 				draggedClientIds?.length > 0
 					? getClientIdsOfDescendants( draggedClientIds ).length + 1
 					: 0;
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
-				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
 			};
 		},
 		[ draggedClientIds ]
@@ -397,7 +393,6 @@ function ListViewComponent(
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
-						shouldShowInnerBlocks={ shouldShowInnerBlocks }
 						showAppender={ showAppender }
 					/>
 				</ListViewContext.Provider>

package/src/components/media-placeholder/README.md

@@ -198,9 +198,9 @@ Callback called when urls can be configured. No media insertion from url will be
 
 ### handleUpload
 
-When set to false the handling of the upload is left to the calling component.
+When the value is set to `false` or returned as `false`, the handling of the upload is left to the consumer component. The function signature accepts an array containing the files to be uploaded.
 
--   Type: `Boolean`
+-   Type: `Boolean|Function`
 -   Required: No
 -   Default: `true`
 -   Platform: Web

package/src/components/media-placeholder/index.js

@@ -172,7 +172,10 @@ export function MediaPlaceholder( {
 	};
 
 	const onFilesUpload = ( files ) => {
-		if ( ! handleUpload ) {
+		if (
+			! handleUpload ||
+			( typeof handleUpload === 'function' && ! handleUpload( files ) )
+		) {
 			return onSelect( files );
 		}
 		onFilesPreUpload( files );
@@ -320,15 +323,15 @@ export function MediaPlaceholder( {
 
 				if ( isAudio ) {
 					instructions = __(
-						'Upload an audio file, pick one from your media library, or add one with a URL.'
+						'Upload or drag an audio file here, or pick one from your library.'
 					);
 				} else if ( isImage ) {
 					instructions = __(
-						'Upload an image file, pick one from your media library, or add one with a URL.'
+						'Upload or drag an image file here, or pick one from your library.'
 					);
 				} else if ( isVideo ) {
 					instructions = __(
-						'Upload a video file, pick one from your media library, or add one with a URL.'
+						'Upload or drag a video file here, or pick one from your library.'
 					);
 				}
 			}

package/src/components/use-block-drop-zone/index.js

@@ -274,6 +274,23 @@ export function isDropTargetValid(
 	return areBlocksAllowed && targetMatchesDraggedBlockParents;
 }
 
+/**
+ * Checks if the given element is an insertion point.
+ *
+ * @param {EventTarget|null} targetToCheck - The element to check.
+ * @param {Document}         ownerDocument - The owner document of the element.
+ * @return {boolean} True if the element is a insertion point, false otherwise.
+ */
+function isInsertionPoint( targetToCheck, ownerDocument ) {
+	const { defaultView } = ownerDocument;
+
+	return !! (
+		defaultView &&
+		targetToCheck instanceof defaultView.HTMLElement &&
+		targetToCheck.dataset.isInsertionPoint
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
@@ -422,6 +439,10 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation, nearestSide ] =
 					dropTargetPosition;
 
+				if ( isZoomOutMode() && operation !== 'insert' ) {
+					return;
+				}
+
 				if ( operation === 'group' ) {
 					const targetBlock = blocks[ targetIndex ];
 					const areAllImages = [
@@ -521,7 +542,18 @@ export default function useBlockDropZone( {
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget.ownerDocument );
 		},
-		onDragLeave() {
+		onDragLeave( event ) {
+			const { ownerDocument } = event.currentTarget;
+
+			// If the drag event is leaving the drop zone and entering an insertion point,
+			// do not hide the insertion point as it is conceptually within the dropzone.
+			if (
+				isInsertionPoint( event.relatedTarget, ownerDocument ) ||
+				isInsertionPoint( event.target, ownerDocument )
+			) {
+				return;
+			}
+
 			throttled.cancel();
 			hideInsertionPoint();
 		},

package/src/hooks/layout.js

@@ -233,7 +233,6 @@ function LayoutPanelPure( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||

package/src/hooks/layout.scss

@@ -1,23 +1,13 @@
-.block-editor-hooks__layout-controls-units {
-	display: flex;
-	flex-direction: column;
-	gap: $grid-unit-20;
-}
-
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
-	margin-bottom: 0;
-}
-
-.block-editor-hooks__layout-controls-reset {
-	display: flex;
-	justify-content: flex-end;
-	margin-bottom: $grid-unit-30;
+.block-editor-hooks__layout-constrained {
+	.components-base-control {
+		margin-bottom: 0; // Cancel out margins added by block inspector
+	}
 }
 
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
 	color: $gray-700;
 	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0; // Cancel out margins added by common.css
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -27,7 +17,3 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
-
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-	margin-bottom: $grid-unit-20;
-}

package/src/layouts/constrained.js

@@ -7,6 +7,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -70,12 +71,14 @@ export default {
 			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
-			<>
+			<VStack
+				spacing={ 4 }
+				className="block-editor-hooks__layout-constrained"
+			>
 				{ allowCustomContentAndWideSize && (
-					<div className="block-editor-hooks__layout-controls-units">
+					<>
 						<UnitControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Content width' ) }
 							labelPosition="top"
 							value={ contentSize || wideSize || '' }
@@ -98,7 +101,6 @@ export default {
 						/>
 						<UnitControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Wide width' ) }
 							labelPosition="top"
 							value={ wideSize || contentSize || '' }
@@ -119,12 +121,12 @@ export default {
 								</InputControlPrefixWrapper>
 							}
 						/>
-						<p className="block-editor-hooks__layout-controls-helptext">
+						<p className="block-editor-hooks__layout-constrained-helptext">
 							{ __(
 								'Customize the width for all elements that are assigned to the center or wide columns.'
 							) }
 						</p>
-					</div>
+					</>
 				) }
 				{ allowJustification && (
 					<ToggleGroupControl
@@ -148,7 +150,7 @@ export default {
 						) }
 					</ToggleGroupControl>
 				) }
-			</>
+			</VStack>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls( {

package/src/layouts/grid.js

@@ -13,6 +13,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -74,7 +75,8 @@ export default {
 		// In the experiment we want to also show column control in Auto mode, and
 		// the minimum width control in Manual mode.
 		const showColumnsControl =
-			window.__experimentalEnableGridInteractivity || layout?.columnCount;
+			window.__experimentalEnableGridInteractivity ||
+			!! layout?.columnCount;
 		const showMinWidthControl =
 			window.__experimentalEnableGridInteractivity ||
 			! layout?.columnCount;
@@ -84,19 +86,21 @@ export default {
 					layout={ layout }
 					onChange={ onChange }
 				/>
-				{ showColumnsControl && (
-					<GridLayoutColumnsAndRowsControl
-						layout={ layout }
-						onChange={ onChange }
-						allowSizingOnChildren={ allowSizingOnChildren }
-					/>
-				) }
-				{ showMinWidthControl && (
-					<GridLayoutMinimumWidthControl
-						layout={ layout }
-						onChange={ onChange }
-					/>
-				) }
+				<VStack spacing={ 4 }>
+					{ showColumnsControl && (
+						<GridLayoutColumnsAndRowsControl
+							layout={ layout }
+							onChange={ onChange }
+							allowSizingOnChildren={ allowSizingOnChildren }
+						/>
+					) }
+					{ showMinWidthControl && (
+						<GridLayoutMinimumWidthControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					) }
+				</VStack>
 			</>
 		);
 	},
@@ -317,7 +321,7 @@ function GridLayoutColumnsAndRowsControl( {
 									const defaultNewColumnCount =
 										isManualPlacement ? 1 : undefined;
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? defaultNewColumnCount
 											: parseInt( value, 10 );
 									onChange( {
@@ -327,7 +331,7 @@ function GridLayoutColumnsAndRowsControl( {
 								} else {
 									// Don't allow unsetting the column count.
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -337,7 +341,7 @@ function GridLayoutColumnsAndRowsControl( {
 								}
 							} }
 							value={ columnCount }
-							min={ 0 }
+							min={ 1 }
 							label={ __( 'Columns' ) }
 							hideLabelFromVision={
 								! window.__experimentalEnableGridInteractivity ||
@@ -355,7 +359,7 @@ function GridLayoutColumnsAndRowsControl( {
 								onChange={ ( value ) => {
 									// Don't allow unsetting the row count.
 									const newRowCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -364,21 +368,24 @@ function GridLayoutColumnsAndRowsControl( {
 									} );
 								} }
 								value={ rowCount }
-								min={ 0 }
+								min={ 1 }
 								label={ __( 'Rows' ) }
 							/>
 						) : (
 							<RangeControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								value={ columnCount ?? 0 }
+								value={ columnCount ?? 1 }
 								onChange={ ( value ) =>
 									onChange( {
 										...layout,
-										columnCount: value,
+										columnCount:
+											value === '' || value === '0'
+												? 1
+												: value,
 									} )
 								}
-								min={ 0 }
+								min={ 1 }
 								max={ 16 }
 								withInputField={ false }
 								label={ __( 'Columns' ) }

package/src/private-apis.js

@@ -6,7 +6,6 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
-import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import {
 	extractWords,
@@ -60,7 +59,6 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,
-	PrivateInserter,
 	PrivateQuickInserter,
 	extractWords,
 	getNormalizedSearchTerms,