@wordpress/block-editor 14.1.0 → 14.2.0

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { dragHandle, trash } from '@wordpress/icons';
+import { dragHandle, trash, edit } from '@wordpress/icons';
 import { Button, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
@@ -21,7 +21,7 @@ import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
 
-export default function ZoomOutToolbar( { clientId, rootClientId } ) {
+export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
@@ -61,11 +61,11 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId, rootClientId ),
-				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId ),
+				canMove: canMoveBlock( clientId ),
 			};
 		},
-		[ clientId, rootClientId ]
+		[ clientId ]
 	);
 
 	const {
@@ -77,7 +77,8 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 		canMove,
 	} = selected;
 
-	const { removeBlock } = useDispatch( blockEditorStore );
+	const { removeBlock, __unstableSetEditorMode } =
+		useDispatch( blockEditorStore );
 
 	const classNames = clsx( 'zoom-out-toolbar', {
 		'is-block-moving-mode': !! blockMovingMode,
@@ -124,6 +125,19 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 			{ canMove && canRemove && (
 				<Shuffle clientId={ clientId } as={ ToolbarButton } />
 			) }
+
+			{ ! isBlockTemplatePart && (
+				<ToolbarButton
+					className="zoom-out-toolbar-button"
+					icon={ edit }
+					label={ __( 'Edit' ) }
+					onClick={ () => {
+						__unstableSetEditorMode( 'edit' );
+						__unstableContentRef.current?.focus();
+					} }
+				/>
+			) }
+
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
 					className="zoom-out-toolbar-button"

package/src/components/block-variation-picker/README.md

@@ -19,9 +19,9 @@ Renders the variations of a block.
 ```jsx
 import { useSelect } from '@wordpress/data';
 import {
-	__experimentalBlockVariationPicker as BlockVariationPicker,
-	store as blockEditorStore,
+	__experimentalBlockVariationPicker as BlockVariationPicker
 } from '@wordpress/block-editor';
+import { store as blocksStore } from '@wordpress/blocks';
 
 const MyBlockVariationPicker = ( { blockName } ) => {
 	const variations = useSelect(

package/src/components/block-variation-picker/index.js

@@ -63,7 +63,12 @@ function BlockVariationPicker( {
 			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
-					<Button variant="link" onClick={ () => onSelect() }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="link"
+						onClick={ () => onSelect() }
+					>
 						{ __( 'Skip' ) }
 					</Button>
 				</div>

package/src/components/block-variation-transforms/index.js

@@ -35,6 +35,8 @@ function VariationsButtons( {
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					key={ variation.name }
 					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }

package/src/components/block-variation-transforms/style.scss

@@ -4,7 +4,7 @@
 
 	.components-dropdown-menu__toggle {
 		border: $border-width solid $gray-700;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		min-height: 30px;
 		width: 100%;
 		position: relative;

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

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

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

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -16,17 +16,26 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Inserter from '../inserter';
+import { useMergeRefs } from '@wordpress/compose';
 
 function ButtonBlockAppender(
 	{ rootClientId, className, onFocus, tabIndex, onSelect },
 	ref
 ) {
+	const inserterButtonRef = useRef();
+
+	const mergedInserterButtonRef = useMergeRefs( [ inserterButtonRef, ref ] );
 	return (
 		<Inserter
 			position="bottom center"
 			rootClientId={ rootClientId }
 			__experimentalIsQuick
-			onSelectOrClose={ onSelect }
+			onSelectOrClose={ ( ...args ) => {
+				if ( onSelect && typeof onSelect === 'function' ) {
+					onSelect( ...args );
+				}
+				inserterButtonRef.current?.focus();
+			} }
 			renderToggle={ ( {
 				onToggle,
 				disabled,
@@ -51,7 +60,9 @@ function ButtonBlockAppender(
 
 				let inserterButton = (
 					<Button
-						ref={ ref }
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						ref={ mergedInserterButtonRef }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
 						className={ clsx(

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, waitFor, queryByAttribute } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,22 @@ import ColorPaletteControl from '../control';
 
 const noop = () => {};
 
+async function renderAndValidate( ...renderArgs ) {
+	const view = render( ...renderArgs );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			'true'
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
-		const { container } = render(
+		const { container } = await renderAndValidate(
 			<ColorPaletteControl
 				label="Test Color"
 				value="#f00"

package/src/components/colors-gradients/dropdown.js

@@ -88,7 +88,11 @@ const renderToggle =
 		};
 
 		return (
-			<Button { ...toggleProps }>
+			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
+				{ ...toggleProps }
+			>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }

package/src/components/colors-gradients/style.scss

@@ -73,15 +73,15 @@ $swatch-gap: 12px;
 	// Identify the first visible instance as placeholder items will not have this class.
 	&:nth-child(1 of &) {
 		margin-top: $grid-unit-30;
-		border-top-left-radius: $radius-block-ui;
-		border-top-right-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
+		border-top-right-radius: $radius-small;
 		border-top: 1px solid $gray-300;
 	}
 
 	// Identify the last visible instance as placeholder items will not have this class.
 	&:nth-last-child(1 of &) {
-		border-bottom-left-radius: $radius-block-ui;
-		border-bottom-right-radius: $radius-block-ui;
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
 	}
 
 	> div,

package/src/components/content-lock/index.js

@@ -0,0 +1 @@
+export { ModifyContentLockMenuItem } from './modify-content-lock-menu-item';

package/src/components/content-lock/modify-content-lock-menu-item.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// The implementation of content locking is mainly in this file, although the mechanism
+// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
+// at block-editor/src/components/block-list/index.js.
+// Besides the components on this file and the file referenced above the implementation
+// also includes artifacts on the store (actions, reducers, and selector).
+
+export function ModifyContentLockMenuItem( { clientId, onClose } ) {
+	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+		( select ) => {
+			const {
+				getContentLockingParent,
+				getTemplateLock,
+				getTemporarilyEditingAsBlocks,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				templateLock: getTemplateLock( clientId ),
+				isLockedByParent: !! getContentLockingParent( clientId ),
+				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
+			};
+		},
+		[ clientId ]
+	);
+	const blockEditorActions = useDispatch( blockEditorStore );
+	const isContentLocked =
+		! isLockedByParent && templateLock === 'contentOnly';
+	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+		return null;
+	}
+
+	const { modifyContentLockBlock } = unlock( blockEditorActions );
+	const showStartEditingAsBlocks = ! isEditingAsBlocks && isContentLocked;
+
+	return (
+		showStartEditingAsBlocks && (
+			<MenuItem
+				onClick={ () => {
+					modifyContentLockBlock( clientId );
+					onClose();
+				} }
+			>
+				{ _x( 'Modify', 'Unlock content locked blocks' ) }
+			</MenuItem>
+		)
+	);
+}

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

@@ -48,7 +48,6 @@
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 

package/src/components/editor-styles/index.js

@@ -67,7 +67,7 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-function EditorStyles( { styles, scope } ) {
+function EditorStyles( { styles, scope, transformOptions } ) {
 	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
@@ -88,14 +88,15 @@ function EditorStyles( { styles, scope } ) {
 		return [
 			transformStyles(
 				_styles.filter( ( style ) => style?.css ),
-				scope
+				scope,
+				transformOptions
 			),
 			_styles
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
 		];
-	}, [ styles, overrides, scope ] );
+	}, [ styles, overrides, scope, transformOptions ] );
 
 	return (
 		<>

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

@@ -432,6 +432,10 @@ function BackgroundImageControls( {
 				}
 				variant="secondary"
 				onError={ onUploadError }
+				onReset={ () => {
+					closeAndFocus();
+					onResetImage();
+				} }
 			>
 				{ canRemove && (
 					<MenuItem
@@ -444,16 +448,6 @@ function BackgroundImageControls( {
 						{ __( 'Remove' ) }
 					</MenuItem>
 				) }
-				{ hasValue && (
-					<MenuItem
-						onClick={ () => {
-							closeAndFocus();
-							onResetImage();
-						} }
-					>
-						{ __( 'Reset' ) }
-					</MenuItem>
-				) }
 			</MediaReplaceFlow>
 			<DropZone
 				onFilesDrop={ onFilesDrop }
@@ -692,16 +686,14 @@ function BackgroundToolsPanel( {
 	};
 
 	return (
-		<VStack
-			as={ ToolsPanel }
-			spacing={ 2 }
+		<ToolsPanel
 			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
-		</VStack>
+		</ToolsPanel>
 	);
 }
 

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

@@ -33,7 +33,7 @@ import { unlock } from '../../lock-unlock';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundColorPanel( settings );
 	const hasLinkPanel = useHasLinkPanel( settings );
 	const hasHeadingPanel = useHasHeadingPanel( settings );
 	const hasButtonPanel = useHasButtonPanel( settings );
@@ -97,7 +97,7 @@ export function useHasButtonPanel( settings ) {
 	);
 }
 
-export function useHasBackgroundPanel( settings ) {
+export function useHasBackgroundColorPanel( settings ) {
 	const colors = useColorsPerOrigin( settings );
 	const gradients = useGradientsPerOrigin( settings );
 	return (
@@ -239,7 +239,11 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button { ...toggleProps }>
+						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
+							{ ...toggleProps }
+						>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }
@@ -343,7 +347,7 @@ export default function ColorPanel( {
 	};
 
 	// BackgroundColor
-	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
 	const userBackgroundColor = decodeValue( value?.color?.background );
 	const gradient = decodeValue( inheritedValue?.color?.gradient );

package/src/components/global-styles/color-panel.native.js

@@ -18,7 +18,7 @@ import InspectorControls from '../inspector-controls';
 import {
 	useHasColorPanel,
 	useHasTextPanel,
-	useHasBackgroundPanel,
+	useHasBackgroundColorPanel,
 } from './color-panel.js';
 import { useGlobalStyles } from './use-global-styles-context';
 
@@ -95,7 +95,7 @@ const ColorPanel = ( {
 	);
 
 	// BackgroundColor
-	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
 	const gradient = decodeValue( inheritedValue?.color?.gradient );
 	const setBackgroundColor = useCallback(

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

@@ -11,12 +11,11 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
-	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalView as View,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { Icon, alignNone, stretchWide } from '@wordpress/icons';
 import { useCallback, useState, Platform } from '@wordpress/element';
 
 /**
@@ -252,7 +251,7 @@ export default function DimensionsPanel( {
 	const minimumMargin = -Infinity;
 	const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin );
 
-	// Content Size
+	// Content Width
 	const showContentSizeControl =
 		useHasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
@@ -268,7 +267,7 @@ export default function DimensionsPanel( {
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
 	const resetContentSizeValue = () => setContentSizeValue( undefined );
 
-	// Wide Size
+	// Wide Width
 	const showWideSizeControl =
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
@@ -464,8 +463,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showContentSizeControl && (
 				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Content size' ) }
+					label={ __( 'Content width' ) }
 					hasValue={ hasUserSetContentSizeValue }
 					onDeselect={ resetContentSizeValue }
 					isShownByDefault={
@@ -474,27 +472,26 @@ export default function DimensionsPanel( {
 					}
 					panelId={ panelId }
 				>
-					<HStack alignment="flex-end" justify="flex-start">
-						<UnitControl
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSizeValue || '' }
-							onChange={ ( nextContentSize ) => {
-								setContentSizeValue( nextContentSize );
-							} }
-							units={ units }
-						/>
-						<View>
-							<Icon icon={ positionCenter } />
-						</View>
-					</HStack>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ __( 'Content width' ) }
+						labelPosition="top"
+						value={ contentSizeValue || '' }
+						onChange={ ( nextContentSize ) => {
+							setContentSizeValue( nextContentSize );
+						} }
+						units={ units }
+						prefix={
+							<InputControlPrefixWrapper variant="icon">
+								<Icon icon={ alignNone } />
+							</InputControlPrefixWrapper>
+						}
+					/>
 				</ToolsPanelItem>
 			) }
 			{ showWideSizeControl && (
 				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Wide size' ) }
+					label={ __( 'Wide width' ) }
 					hasValue={ hasUserSetWideSizeValue }
 					onDeselect={ resetWideSizeValue }
 					isShownByDefault={
@@ -502,21 +499,21 @@ export default function DimensionsPanel( {
 					}
 					panelId={ panelId }
 				>
-					<HStack alignment="flex-end" justify="flex-start">
-						<UnitControl
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSizeValue || '' }
-							onChange={ ( nextWideSize ) => {
-								setWideSizeValue( nextWideSize );
-							} }
-							units={ units }
-						/>
-						<View>
-							<Icon icon={ stretchWide } />
-						</View>
-					</HStack>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ __( 'Wide width' ) }
+						labelPosition="top"
+						value={ wideSizeValue || '' }
+						onChange={ ( nextWideSize ) => {
+							setWideSizeValue( nextWideSize );
+						} }
+						units={ units }
+						prefix={
+							<InputControlPrefixWrapper variant="icon">
+								<Icon icon={ stretchWide } />
+							</InputControlPrefixWrapper>
+						}
+					/>
 				</ToolsPanelItem>
 			) }
 			{ showPaddingControl && (
@@ -611,6 +608,9 @@ export default function DimensionsPanel( {
 					}
 					className={ clsx( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
+						'single-column':
+							// If UnitControl is used, should be single-column.
+							! showSpacingPresetsControl && ! isAxialGap,
 					} ) }
 					panelId={ panelId }
 				>
@@ -628,8 +628,8 @@ export default function DimensionsPanel( {
 							/>
 						) : (
 							<UnitControl
+								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
-								__unstableInputWidth="80px"
 								min={ 0 }
 								onChange={ setGapValue }
 								units={ units }

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

@@ -189,7 +189,11 @@ export default function FiltersPanel( {
 
 							return (
 								<ItemGroup isBordered isSeparated>
-									<Button { ...toggleProps }>
+									<Button
+										// TODO: Switch to `true` (40px size) if possible
+										__next40pxDefaultSize={ false }
+										{ ...toggleProps }
+									>
 										<LabeledColorIndicator
 											indicator={ duotone }
 											label={ __( 'Duotone' ) }

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

@@ -32,11 +32,9 @@ import { unlock } from '../../lock-unlock';
  * @type {Array}
  */
 const EMPTY_ARRAY = [];
-const {
-	CompositeItemV2: CompositeItem,
-	CompositeV2: Composite,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
+const { CompositeItemV2: CompositeItem, CompositeV2: Composite } = unlock(
+	componentsPrivateApis
+);
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const shadows = useShadowPresets( settings );
@@ -52,6 +50,8 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 				/>
 				<div className="block-editor-global-styles__clear-shadow">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
 					>
@@ -64,10 +64,8 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 }
 
 export function ShadowPresets( { presets, activeShadow, onSelect } ) {
-	const compositeStore = useCompositeStore();
 	return ! presets ? null : (
 		<Composite
-			store={ compositeStore }
 			role="listbox"
 			className="block-editor-global-styles__shadow__list"
 			aria-label={ __( 'Drop shadows' ) }
@@ -99,6 +97,8 @@ export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 			} ) }
 			render={
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					className={ clsx(
 						'block-editor-global-styles__shadow-indicator',
 						{
@@ -151,7 +151,11 @@ function renderShadowToggle() {
 		};
 
 		return (
-			<Button { ...toggleProps }>
+			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
+				{ ...toggleProps }
+			>
 				<HStack justify="flex-start">
 					<Icon
 						className="block-editor-global-styles__toggle-icon"