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

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

@@ -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,11 +27,6 @@ import { unlock } from '../../lock-unlock';
  * @type {Array}
  */
 const EMPTY_ARRAY = [];
-const {
-	CompositeItemV2: CompositeItem,
-	CompositeV2: Composite,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const shadows = useShadowPresets( settings );
@@ -52,6 +42,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 +56,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' ) }
@@ -90,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 }
@@ -99,6 +89,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 +143,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"

package/src/components/global-styles/style.scss

@@ -39,7 +39,7 @@
 .block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	cursor: pointer;
 	padding: 0;
 
@@ -74,7 +74,7 @@
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
 	border: $border-width solid $gray-300;
-	border-radius: 2px;
+	border-radius: $radius-small;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 
@@ -102,7 +102,6 @@
 
 .block-editor-global-styles-background-panel__image-tools-panel-item {
 	border: $border-width solid $gray-300;
-	border-radius: 2px;
 
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
@@ -208,7 +207,7 @@
 	.components-focal-point-picker-wrapper {
 		background-color: $gray-100;
 		width: 100%;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		border: $border-width solid $gray-300;
 	}
 

package/src/components/global-styles/test/typography-utils.js

@@ -28,7 +28,9 @@ describe( 'typography utils', () => {
 				preset: {
 					size: 0,
 				},
-				typographySettings: undefined,
+				typographySettings: {
+					fluid: true,
+				},
 				expected: 0,
 			},
 
@@ -37,7 +39,9 @@ describe( 'typography utils', () => {
 				preset: {
 					size: '0',
 				},
-				typographySettings: undefined,
+				typographySettings: {
+					fluid: true,
+				},
 				expected: '0',
 			},
 
@@ -46,7 +50,9 @@ describe( 'typography utils', () => {
 				preset: {
 					size: null,
 				},
-				typographySettings: null,
+				typographySettings: {
+					fluid: true,
+				},
 				expected: null,
 			},
 
@@ -153,7 +159,6 @@ describe( 'typography utils', () => {
 				message: 'should return already clamped value',
 				preset: {
 					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					fluid: false,
 				},
 				settings: {
 					typography: {
@@ -168,7 +173,6 @@ describe( 'typography utils', () => {
 				message: 'should return value with unsupported unit',
 				preset: {
 					size: '1000%',
-					fluid: false,
 				},
 				settings: {
 					typography: {
@@ -677,6 +681,38 @@ describe( 'typography utils', () => {
 				},
 				expected: 'clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px)',
 			},
+
+			// Individual preset settings override global settings.
+			{
+				message:
+					'should convert individual preset size to fluid if fluid is disabled in global settings',
+				preset: {
+					size: '17px',
+					fluid: true,
+				},
+				settings: {
+					typography: {},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
+			},
+			{
+				message:
+					'should use individual preset settings if fluid is disabled in global settings',
+				preset: {
+					size: '17px',
+					fluid: {
+						min: '16px',
+						max: '26px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: false,
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
+			},
 		].forEach( ( { message, preset, settings, expected } ) => {
 			it( `${ message }`, () => {
 				expect( getTypographyFontSizeValue( preset, settings ) ).toBe(
@@ -1255,6 +1291,61 @@ describe( 'typography utils', () => {
 					nearestFontWeight: '400',
 				},
 			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/400 when fontFamilyFaces contain numerical fontWeight value',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: 400,
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '400',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/400 when fontFamilyFaces contain undefined fontWeight value',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '400',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '700',
+				},
+			},
 		].forEach(
 			( {
 				message,

package/src/components/global-styles/test/utils.js

@@ -73,6 +73,11 @@ describe( 'editor utils', () => {
 					dimensions: {
 						minHeight: '100px',
 					},
+					spacing: {
+						padding: {
+							top: 0,
+						},
+					},
 				},
 			},
 		},
@@ -444,6 +449,11 @@ describe( 'editor utils', () => {
 				{ url: 'file:./assets/image.jpg' },
 				themeJson,
 			],
+			[
+				{ ref: 'styles.blocks.core/group.spacing.padding.top' },
+				0,
+				themeJson,
+			],
 			[
 				{
 					ref: 'styles.blocks.core/group.background.backgroundImage',