@wordpress/block-editor 14.2.0 → 14.2.1-next.1f6eadc42.0

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { forwardRef, useRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
@@ -43,22 +43,22 @@ function ButtonBlockAppender(
 				blockTitle,
 				hasSingleBlockType,
 			} ) => {
-				let label;
-				if ( hasSingleBlockType ) {
-					label = sprintf(
-						// translators: %s: the name of the block when there is only one
-						_x( 'Add %s', 'directly add the only allowed block' ),
-						blockTitle
-					);
-				} else {
-					label = _x(
-						'Add block',
-						'Generic label for block inserter button'
-					);
-				}
 				const isToggleButton = ! hasSingleBlockType;
+				const label = hasSingleBlockType
+					? sprintf(
+							// translators: %s: the name of the block when there is only one
+							_x(
+								'Add %s',
+								'directly add the only allowed block'
+							),
+							blockTitle
+					  )
+					: _x(
+							'Add block',
+							'Generic label for block inserter button'
+					  );
 
-				let inserterButton = (
+				return (
 					<Button
 						// TODO: Switch to `true` (40px size) if possible
 						__next40pxDefaultSize={ false }
@@ -76,20 +76,11 @@ function ButtonBlockAppender(
 						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
+						showTooltip
 					>
-						{ ! hasSingleBlockType && (
-							<VisuallyHidden as="span">{ label }</VisuallyHidden>
-						) }
 						<Icon icon={ plus } />
 					</Button>
 				);
-
-				if ( isToggleButton || hasSingleBlockType ) {
-					inserterButton = (
-						<Tooltip text={ label }>{ inserterButton }</Tooltip>
-					);
-				}
-				return inserterButton;
 			} }
 			isAppender
 		/>

package/src/components/global-styles/shadow-panel-components.js

@@ -10,7 +10,7 @@ import {
 	Button,
 	FlexItem,
 	Dropdown,
-	privateApis as componentsPrivateApis,
+	Composite,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -20,11 +20,6 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
  */
 import clsx from 'clsx';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
 /**
  * Shared reference to an empty array for cases where it is important to avoid
  * returning a new array reference on every invocation.
@@ -32,9 +27,6 @@ import { unlock } from '../../lock-unlock';
  * @type {Array}
  */
 const EMPTY_ARRAY = [];
-const { CompositeItemV2: CompositeItem, CompositeV2: Composite } = unlock(
-	componentsPrivateApis
-);
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const shadows = useShadowPresets( settings );
@@ -88,7 +80,7 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<CompositeItem
+		<Composite.Item
 			role="option"
 			aria-label={ label }
 			aria-selected={ isActive }

package/src/components/grid/grid-item-resizer.js

@@ -73,8 +73,8 @@ function GridItemResizerInner( {
 	}, [ blockElement, rootBlockElement ] );
 
 	const justification = {
-		right: 'flex-start',
-		left: 'flex-end',
+		right: 'left',
+		left: 'right',
 	};
 
 	const alignment = {

package/src/components/iframe/get-compatibility-styles.js

@@ -40,7 +40,12 @@ export function getCompatibilityStyles() {
 			// Don't try to add the reset styles, which were removed as a dependency
 			// from `edit-blocks` for the iframe since we don't need to reset admin
 			// styles.
-			if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+			if (
+				[
+					'wp-reset-editor-styles-css',
+					'wp-reset-editor-styles-rtl-css',
+				].includes( ownerNode.id )
+			) {
 				return accumulator;
 			}
 

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

@@ -155,15 +155,6 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	margin: auto $grid-unit-20 $grid-unit-20;
-}
-
-.block-editor-inserter__manage-reusable-blocks {
-	justify-content: center;
-	width: 100%;
-}
-
 .block-editor-inserter__no-results,
 .block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
@@ -709,3 +700,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/spacing-sizes-control/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
-import SidesDropdown from './sides-dropdown';
+import LinkedButton from './linked-button';
 import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
@@ -47,6 +47,10 @@ export default function SpacingSizesControl( {
 
 	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
+	const toggleLinked = () => {
+		setView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial );
+	};
+
 	const handleOnChange = ( nextValue ) => {
 		const newValues = { ...values, ...nextValue };
 		onChange( newValues );
@@ -91,12 +95,6 @@ export default function SpacingSizesControl( {
 		sideLabel
 	).trim();
 
-	const dropdownLabelText = sprintf(
-		// translators: %s: The current spacing property e.g. "Padding", "Margin".
-		_x( '%s options', 'Button label to reveal side configuration options' ),
-		labelProp
-	);
-
 	return (
 		<fieldset className="spacing-sizes-control">
 			<HStack className="spacing-sizes-control__header">
@@ -107,11 +105,10 @@ export default function SpacingSizesControl( {
 					{ label }
 				</BaseControl.VisualLabel>
 				{ ! hasOneSide && ! hasOnlyAxialSides && (
-					<SidesDropdown
-						label={ dropdownLabelText }
-						onChange={ setView }
-						sides={ sides }
-						value={ view }
+					<LinkedButton
+						label={ labelProp }
+						onClick={ toggleLinked }
+						isLinked={ view === VIEWS.axial }
 					/>
 				) }
 			</HStack>

package/src/components/spacing-sizes-control/linked-button.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Tooltip } from '@wordpress/components';
+import { link, linkOff } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function LinkedButton( { isLinked, ...props } ) {
+	const label = isLinked
+		? sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Unlink %1$s' ),
+				props.label.toLowerCase()
+		  ).trim()
+		: sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Link %1$s' ),
+				props.label.toLowerCase()
+		  ).trim();
+
+	return (
+		<Tooltip text={ label }>
+			<Button
+				{ ...props }
+				size="small"
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
+		</Tooltip>
+	);
+}

package/src/components/spacing-sizes-control/test/utils.js

@@ -373,8 +373,8 @@ describe( 'getInitialView', () => {
 				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
 			).toBe( VIEWS.custom );
 		} );
-		it( 'should not return custom view if there is only a single side value', () => {
-			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).not.toBe(
+		it( 'should return custom view if there is only a single side value', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
 				VIEWS.custom
 			);
 		} );
@@ -387,20 +387,19 @@ describe( 'getInitialView', () => {
 			);
 		} );
 
-		it( 'should return the single side view if there is only a single side value set and supported sides > 1', () => {
-			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.left
-			);
+		it( 'should return single side when only single side supported and no value defined', () => {
+			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
+		} );
+
+		it( 'should return single side when only single side supported and all values defined', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
+					[ 'top' ]
+				)
+			).toBe( VIEWS.top );
 		} );
+
 		it( 'should return single side view when only one side is supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
 				VIEWS.top