@wordpress/block-editor 14.1.0 → 14.2.0

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',

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

@@ -40,6 +40,8 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
  * Returns a font-size value based on a given font-size preset.
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
+ * The Core PHP equivalent is wp_get_typography_font_size_value().
+ *
  * @param {Preset}                     preset
  * @param {Object}                     settings
  * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.
@@ -50,15 +52,25 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
 export function getTypographyFontSizeValue( preset, settings ) {
 	const { size: defaultSize } = preset;
 
-	if ( ! isFluidTypographyEnabled( settings?.typography ) ) {
+	/*
+	 * Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
+	 * Also return early when a preset font size explicitly disables fluid typography with `false`.
+	 */
+	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
 		return defaultSize;
 	}
+
 	/*
-	 * Checks whether a font size has explicitly bypassed fluid calculations.
-	 * Also catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on `0`.
+	 * Return early when fluid typography is disabled in the settings, and there
+	 * are no local settings to enable it for the individual preset.
+	 *
+	 * If this condition isn't met, either the settings or individual preset settings
+	 * have enabled fluid typography.
 	 */
-	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
+	if (
+		! isFluidTypographyEnabled( settings?.typography ) &&
+		! isFluidTypographyEnabled( preset )
+	) {
 		return defaultSize;
 	}
 
@@ -162,6 +174,10 @@ export function findNearestFontWeight(
 	availableFontWeights,
 	newFontWeightValue
 ) {
+	newFontWeightValue =
+		'number' === typeof newFontWeightValue
+			? newFontWeightValue.toString()
+			: newFontWeightValue;
 	if ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) {
 		return '';
 	}
@@ -248,7 +264,7 @@ export function findNearestStyleAndWeight(
 		( { value: fs } ) => fs === fontStyle
 	);
 	const hasFontWeight = fontWeights?.some(
-		( { value: fw } ) => fw === fontWeight
+		( { value: fw } ) => fw?.toString() === fontWeight?.toString()
 	);
 
 	if ( ! hasFontStyle ) {

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

@@ -306,9 +306,8 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
  */
 export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || typeof variable !== 'string' ) {
-		if ( variable?.ref && typeof variable?.ref === 'string' ) {
-			const refPath = variable.ref.split( '.' );
-			variable = getValueFromObjectPath( features, refPath );
+		if ( typeof variable?.ref === 'string' ) {
+			variable = getValueFromObjectPath( features, variable.ref );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! variable || !! variable?.ref ) {
@@ -568,9 +567,8 @@ export function getResolvedRefValue( ruleValue, tree ) {
 	 * For example: { "ref": "style.color.background" } => "#fff".
 	 */
 	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
-		const refPath = ruleValue.ref.split( '.' );
 		const resolvedRuleValue = getCSSValueFromRawStyle(
-			getValueFromObjectPath( tree, refPath )
+			getValueFromObjectPath( tree, ruleValue.ref )
 		);
 
 		/*
@@ -581,7 +579,7 @@ export function getResolvedRefValue( ruleValue, tree ) {
 			return undefined;
 		}
 
-		if ( ! resolvedRuleValue ) {
+		if ( resolvedRuleValue === undefined ) {
 			return ruleValue;
 		}
 

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
 	ToolbarButton,
@@ -57,7 +57,7 @@ export function GridItemMovers( {
 			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
 				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
 					<GridItemMover
-						icon={ chevronLeft }
+						icon={ isRTL() ? chevronRight : chevronLeft }
 						label={ __( 'Move left' ) }
 						description={ __( 'Move left' ) }
 						isDisabled={ columnStart <= 1 }
@@ -126,7 +126,7 @@ export function GridItemMovers( {
 				</div>
 				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
 					<GridItemMover
-						icon={ chevronRight }
+						icon={ isRTL() ? chevronLeft : chevronRight }
 						label={ __( 'Move right' ) }
 						description={ __( 'Move right' ) }
 						isDisabled={ columnCount && columnEnd >= columnCount }

package/src/components/grid/style.scss

@@ -117,7 +117,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.

package/src/components/iframe/index.js

@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidth = useRef();
+	const prevContainerWidthRef = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,7 +243,7 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidth.current = containerWidth;
+			prevContainerWidthRef.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -310,7 +310,7 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
 				? Math.min( containerWidth, maxWidth ) /
-						prevContainerWidth.current
+						prevContainerWidthRef.current
 				: scale
 		);
 		iframeDocument.documentElement.style.setProperty(
@@ -331,7 +331,7 @@ function Iframe( {
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidth.current }px`
+			`${ prevContainerWidthRef.current }px`
 		);
 
 		return () => {
@@ -456,7 +456,7 @@ function Iframe( {
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,
 					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidth.current }px`,
+						isZoomedOut && `${ prevContainerWidthRef.current }px`,
 				} }
 			>
 				{ iframe }

package/src/components/inner-blocks/index.js

@@ -203,7 +203,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockEditingMode,
 				getBlockSettings,
 				isDragging,
-				getSettings,
+				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
 
@@ -225,7 +225,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				// In zoom out mode, we want to disable the drop zone for the sections.
 				// The inner blocks belonging to the section drop zone is
 				// already disabled by the blocks themselves being disabled.
-				const { sectionRootClientId } = unlock( getSettings() );
+				const sectionRootClientId = getSectionRootClientId();
 
 				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -52,7 +52,7 @@ export default function useInnerBlockTemplateSync(
 		useDispatch( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
-	const existingTemplate = useRef( null );
+	const existingTemplateRef = useRef( null );
 
 	useLayoutEffect( () => {
 		let isCancelled = false;
@@ -76,14 +76,14 @@ export default function useInnerBlockTemplateSync(
 
 			const hasTemplateChanged = ! fastDeepEqual(
 				template,
-				existingTemplate.current
+				existingTemplateRef.current
 			);
 
 			if ( ! shouldApplyTemplate || ! hasTemplateChanged ) {
 				return;
 			}
 
-			existingTemplate.current = template;
+			existingTemplateRef.current = template;
 			const nextBlocks = synchronizeBlocksWithTemplate(
 				currentInnerBlocks,
 				template

package/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js

@@ -15,6 +15,8 @@ function PatternCategoriesList( {
 			{ patternCategories.map( ( { name, label } ) => {
 				return (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						key={ name }
 						label={ label }
 						className={ `${ baseClassName }__categories-list__item` }

package/src/components/inserter/block-patterns-tab/index.js

@@ -61,6 +61,8 @@ function BlockPatternsTab( {
 						{ children }
 					</CategoryTabs>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
 						variant="secondary"

package/src/components/inserter/library.js

@@ -27,7 +27,6 @@ function InserterLibrary(
 		onSelect = noop,
 		shouldFocusBlock = false,
 		onClose,
-		__experimentalSearchInputRef,
 	},
 	ref
 ) {
@@ -59,7 +58,6 @@ function InserterLibrary(
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 			onClose={ onClose }
-			__experimentalSearchInputRef={ __experimentalSearchInputRef }
 		/>
 	);
 }

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

@@ -31,18 +31,18 @@ export function useMediaResults( category, query = {} ) {
 	// In the future we could use AbortController to cancel previous
 	// requests, but we don't for now as it involves adding support
 	// for this to `core-data` package.
-	const lastRequest = useRef();
+	const lastRequestRef = useRef();
 	useEffect( () => {
 		( async () => {
 			const key = JSON.stringify( {
 				category: category.name,
 				...query,
 			} );
-			lastRequest.current = key;
+			lastRequestRef.current = key;
 			setIsLoading( true );
 			setMediaList( [] ); // Empty the previous results.
 			const _media = await category.fetch?.( query );
-			if ( key === lastRequest.current ) {
+			if ( key === lastRequestRef.current ) {
 				setMediaList( _media );
 				setIsLoading( false );
 			}

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

@@ -10,8 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { MediaPreview } from './media-preview';
 import { unlock } from '../../../lock-unlock';
 
-const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-	unlock( componentsPrivateApis );
+const { CompositeV2: Composite } = unlock( componentsPrivateApis );
 
 function MediaList( {
 	mediaList,
@@ -19,10 +18,8 @@ function MediaList( {
 	onClick,
 	label = __( 'Media List' ),
 } ) {
-	const compositeStore = useCompositeStore();
 	return (
 		<Composite
-			store={ compositeStore }
 			role="listbox"
 			className="block-editor-inserter__media-list"
 			aria-label={ label }

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

@@ -102,12 +102,22 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 				expanded={ false }
 			>
 				<FlexItem>
-					<Button variant="tertiary" onClick={ onClose }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="tertiary"
+						onClick={ onClose }
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 				</FlexItem>
 				<FlexItem>
-					<Button variant="primary" onClick={ onSubmit }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="primary"
+						onClick={ onSubmit }
+					>
 						{ __( 'Insert' ) }
 					</Button>
 				</FlexItem>

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

@@ -71,6 +71,8 @@ function MediaTab( {
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							render={ ( { open } ) => (
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									onClick={ ( event ) => {
 										// Safari doesn't emit a focus event on button elements when
 										// clicked and we need to manually focus the button here.

package/src/components/inserter/menu.js

@@ -32,8 +32,6 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
-import { useZoomOut } from '../../hooks/use-zoom-out';
-import { unlock } from '../../lock-unlock';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -54,16 +52,11 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const { isZoomOutMode, inserterSearchInputRef } = useSelect( ( select ) => {
-		const { __unstableGetEditorMode, getInserterSearchInputRef } = unlock(
-			select( blockEditorStore )
-		);
-		return {
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			inserterSearchInputRef: getInserterSearchInputRef(),
-		};
-	}, [] );
-
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -108,16 +101,16 @@ function InserterMenu(
 			window.requestAnimationFrame( () => {
 				if (
 					! shouldFocusBlock &&
-					! blockTypesTabRef?.current.contains(
+					! blockTypesTabRef.current?.contains(
 						ref.current.ownerDocument.activeElement
 					)
 				) {
 					// There has been a focus loss, so focus the first button in the block types tab
-					blockTypesTabRef?.current.querySelector( 'button' ).focus();
+					blockTypesTabRef.current?.querySelector( 'button' ).focus();
 				}
 			} );
 		},
-		[ onInsertBlocks, onSelect, ref, shouldFocusBlock ]
+		[ onInsertBlocks, onSelect, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
@@ -126,7 +119,7 @@ function InserterMenu(
 			onInsertBlocks( blocks, { patternName } );
 			onSelect();
 		},
-		[ onInsertBlocks, onSelect, onToggleInsertionPoint ]
+		[ onInsertBlocks, onSelect ]
 	);
 
 	const onHover = useCallback(
@@ -153,11 +146,6 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
-	const showZoomOut =
-		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
-
-	useZoomOut( showZoomOut );
-
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -177,9 +165,7 @@ function InserterMenu(
 					value={ filterValue }
 					label={ __( 'Search for blocks and patterns' ) }
 					placeholder={ __( 'Search' ) }
-					ref={ inserterSearchInputRef }
 				/>
-
 				{ !! delayedFilterValue && (
 					<InserterSearchResults
 						filterValue={ delayedFilterValue }
@@ -200,18 +186,18 @@ function InserterMenu(
 		);
 	}, [
 		selectedTab,
+		hoveredItem,
+		setHoveredItem,
+		setFilterValue,
 		filterValue,
-		inserterSearchInputRef,
 		delayedFilterValue,
 		onSelect,
 		onHover,
-		rootClientId,
+		shouldFocusBlock,
 		clientId,
-		isAppender,
+		rootClientId,
 		__experimentalInsertionIndex,
-		shouldFocusBlock,
-		hoveredItem,
-		setFilterValue,
+		isAppender,
 	] );
 
 	const blocksTab = useMemo( () => {

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

@@ -141,6 +141,8 @@ export default function QuickInserter( {
 
 			{ setInserterIsOpened && (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					className="block-editor-inserter__quick-inserter-expand"
 					onClick={ onBrowseAll }
 					aria-label={ __(