@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/src/components/block-visibility/utils.js

@@ -1,12 +1,32 @@
 /**
  * WordPress dependencies
  */
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { BLOCK_VISIBILITY_VIEWPORT_ENTRIES } from './constants';
+import {
+	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
+	BLOCK_VISIBILITY_VIEWPORTS,
+} from './constants';
+import { unlock } from '../../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
+
+export function getBlockVisibilityViewportEntries( viewportSettings ) {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+
+	// Desktop has no breakpoint, so only filter mobile/tablet by configured viewport support.
+	return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.filter(
+		( [ viewport ] ) =>
+			( viewport !== BLOCK_VISIBILITY_VIEWPORTS.tablet.key ||
+				breakpoints.tablet !== undefined ) &&
+			( viewport !== BLOCK_VISIBILITY_VIEWPORTS.mobile.key ||
+				breakpoints.mobile !== undefined )
+	);
+}
 
 /**
  * Checks if a block is hidden for a specific viewport.
@@ -110,10 +130,11 @@ export function getHideEverywhereCheckboxState( blocks ) {
 /**
  * Get a human-readable label describing which viewports a block is hidden on.
  *
- * @param {boolean|Object} blockVisibility The block's visibility metadata.
+ * @param {boolean|Object} blockVisibility  The block's visibility metadata.
+ * @param {Object}         viewportSettings Viewport breakpoint settings.
  * @return {string|null} A descriptive label, or null if the block is not hidden.
  */
-export function getBlockVisibilityLabel( blockVisibility ) {
+export function getBlockVisibilityLabel( blockVisibility, viewportSettings ) {
 	// Not hidden at all
 	if ( ! blockVisibility && blockVisibility !== false ) {
 		return null;
@@ -126,9 +147,13 @@ export function getBlockVisibilityLabel( blockVisibility ) {
 
 	if ( blockVisibility?.viewport ) {
 		// Hidden on specific viewports - list them
-		const hiddenViewports = BLOCK_VISIBILITY_VIEWPORT_ENTRIES.filter(
-			( [ key ] ) => blockVisibility.viewport?.[ key ] === false
-		).map( ( [ , viewport ] ) => viewport.label );
+		const hiddenViewports = getBlockVisibilityViewportEntries(
+			viewportSettings
+		)
+			.filter(
+				( [ key ] ) => blockVisibility.viewport?.[ key ] === false
+			)
+			.map( ( [ , viewport ] ) => viewport.label );
 
 		if ( hiddenViewports.length > 0 ) {
 			return sprintf(

package/src/components/block-visibility/viewport-menu-item.js

@@ -11,8 +11,10 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useSettings } from '../use-settings';
 
 export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
+	const [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );
 	const { areBlocksHiddenAnywhere, shortcut } = useSelect(
 		( select ) => {
 			const { isBlockHiddenAnywhere } = unlock(
@@ -31,7 +33,14 @@ export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
 		},
 		[ clientIds ]
 	);
-	const { showViewportModal } = unlock( useDispatch( blockEditorStore ) );
+	const dispatch = useDispatch( blockEditorStore );
+
+	if ( blockVisibility === false ) {
+		return null;
+	}
+
+	const { showViewportModal } = unlock( dispatch );
+
 	return (
 		<MenuItem
 			onClick={ () => showViewportModal( clientIds ) }

package/src/components/block-visibility/viewport-toolbar.js

@@ -13,9 +13,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useSettings } from '../use-settings';
 
 export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 	const hasBlockVisibilityButtonShownRef = useRef( false );
+	const [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );
 	const { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getBlockName, isBlockHiddenAnywhere } =
@@ -52,6 +54,10 @@ export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 		}
 	}, [ areBlocksHiddenAnywhere ] );
 
+	if ( blockVisibility === false ) {
+		return null;
+	}
+
 	if (
 		! areBlocksHiddenAnywhere &&
 		! hasBlockVisibilityButtonShownRef.current

package/src/components/block-visibility/viewport-visibility-info.js

@@ -32,6 +32,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 	const {
 		currentBlockVisibility,
 		selectedDeviceType,
+		viewportSettings,
 		hasParentHiddenEverywhere,
 	} = useSelect(
 		( select ) => {
@@ -43,13 +44,15 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 				isBlockParentHiddenEverywhere,
 				getSettings,
 			} = unlock( select( blockEditorStore ) );
+			const settings = getSettings();
 
 			return {
 				currentBlockVisibility:
 					getBlockAttributes( clientId )?.metadata?.blockVisibility,
 				selectedDeviceType:
-					getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
 					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
 				hasParentHiddenEverywhere:
 					isBlockParentHiddenEverywhere( clientId ),
 			};
@@ -66,6 +69,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
 		blockVisibility: currentBlockVisibility,
 		deviceType: selectedDeviceType,
+		viewportSettings,
 		view: canvasView,
 	} );
 

package/src/components/border-radius-control/test/utils.js

@@ -7,7 +7,6 @@ import {
 	hasMixedValues,
 	hasDefinedValues,
 	mode,
-	getPresetValueFromCustomValue,
 	getPresetValueFromControlValue,
 } from '../utils';
 
@@ -273,46 +272,6 @@ describe( 'mode', () => {
 	} );
 } );
 
-describe( 'getPresetValueFromCustomValue', () => {
-	const presets = [
-		{ name: 'None', slug: '0', size: 0 },
-		{ name: 'Small', slug: 'sm', size: '4px' },
-		{ name: 'Medium', slug: 'md', size: 'clamp(2px, 1vw, 8px)' },
-	];
-
-	it( 'should return "0" if value is "0"', () => {
-		expect( getPresetValueFromCustomValue( '0', presets ) ).toBe( '0' );
-	} );
-
-	it( 'should return preset reference if value matches a preset', () => {
-		expect( getPresetValueFromCustomValue( '4px', presets ) ).toBe(
-			'var:preset|border-radius|sm'
-		);
-		expect(
-			getPresetValueFromCustomValue( 'clamp(2px, 1vw, 8px)', presets )
-		).toBe( 'var:preset|border-radius|md' );
-	} );
-
-	it( 'should return value as-is if no matching preset', () => {
-		expect( getPresetValueFromCustomValue( '7px', presets ) ).toBe( '7px' );
-	} );
-
-	it( 'should return value as-is if already a preset reference', () => {
-		expect(
-			getPresetValueFromCustomValue(
-				'var:preset|border-radius|md',
-				presets
-			)
-		).toBe( 'var:preset|border-radius|md' );
-	} );
-
-	it( 'should return undefined if value is undefined', () => {
-		expect(
-			getPresetValueFromCustomValue( undefined, presets )
-		).toBeUndefined();
-	} );
-} );
-
 describe( 'getPresetValueFromControlValue', () => {
 	const presets = [
 		{ name: 'None', slug: '0', size: 0 },

package/src/components/border-radius-control/utils.js

@@ -3,6 +3,16 @@
  */
 import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import {
+	getCustomValueFromPreset,
+	isValuePreset,
+} from '../preset-input-control/utils';
+
+const BORDER_RADIUS_PRESET_TYPE = 'border-radius';
+
 /**
  * Gets the (non-undefined) item with the highest occurrence within an array
  * Based in part on: https://stackoverflow.com/a/20762713
@@ -138,84 +148,6 @@ export function hasDefinedValues( values ) {
 	return !! filteredValues.length;
 }
 
-/**
- * Checks is given value is a radius preset.
- *
- * @param {string} value Value to check
- *
- * @return {boolean} Return true if value is string in format var:preset|border-radius|.
- */
-export function isValuePreset( value ) {
-	if ( ! value?.includes ) {
-		return false;
-	}
-	return value === '0' || value.includes( 'var:preset|border-radius|' );
-}
-
-/**
- * Returns the slug section of the given preset string.
- *
- * @param {string} value Value to extract slug from.
- *
- * @return {string|undefined} The value slug from given preset.
- */
-export function getPresetSlug( value ) {
-	if ( ! value ) {
-		return;
-	}
-
-	if ( value === '0' || value === 'default' ) {
-		return value;
-	}
-
-	const slug = value.match( /var:preset\|border-radius\|(.+)/ );
-
-	return slug ? slug[ 1 ] : undefined;
-}
-
-/**
- * Converts radius preset value into a Range component value .
- *
- * @param {string} presetValue Value to convert to Range value.
- * @param {Array}  presets     Array of current radius preset value objects.
- *
- * @return {number} The int value for use in Range control.
- */
-export function getSliderValueFromPreset( presetValue, presets ) {
-	if ( presetValue === undefined ) {
-		return 0;
-	}
-	const slug =
-		parseFloat( presetValue, 10 ) === 0
-			? '0'
-			: getPresetSlug( presetValue );
-	const sliderValue = presets.findIndex( ( size ) => {
-		return String( size.slug ) === slug;
-	} );
-
-	// Returning NaN rather than undefined as undefined makes range control thumb sit in center
-	return sliderValue !== -1 ? sliderValue : NaN;
-}
-
-/**
- * Converts a preset into a custom value.
- *
- * @param {string} value   Value to convert
- * @param {Array}  presets Array of the current radius preset objects
- *
- * @return {string} Mapping of the radius preset to its equivalent custom value.
- */
-export function getCustomValueFromPreset( value, presets ) {
-	if ( ! isValuePreset( value ) ) {
-		return value;
-	}
-
-	const slug = parseFloat( value, 10 ) === 0 ? '0' : getPresetSlug( value );
-	const radiusSize = presets.find( ( size ) => String( size.slug ) === slug );
-
-	return radiusSize?.size;
-}
-
 /**
  * Converts a control value into a preset value.
  *
@@ -242,33 +174,6 @@ export function getPresetValueFromControlValue(
 	return `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;
 }
 
-/**
- * Converts a custom value to preset value if one can be found.
- *
- * Returns value as-is if no match is found.
- *
- * @param {string} value   Value to convert
- * @param {Array}  presets Array of the current border radius preset objects
- *
- * @return {string} The preset value if it can be found.
- */
-export function getPresetValueFromCustomValue( value, presets ) {
-	// Return value as-is if it is undefined or is already a preset, or '0';
-	if ( ! value || isValuePreset( value ) || value === '0' ) {
-		return value;
-	}
-
-	const spacingMatch = presets.find(
-		( size ) => String( size.size ) === String( value )
-	);
-
-	if ( spacingMatch?.slug ) {
-		return `var:preset|border-radius|${ spacingMatch.slug }`;
-	}
-
-	return value;
-}
-
 /**
  * Converts all preset values in a values object to their custom equivalents.
  *
@@ -285,8 +190,12 @@ export function convertPresetsToCustomValues( values, presets ) {
 	const converted = {};
 	Object.keys( values ).forEach( ( key ) => {
 		const value = values[ key ];
-		if ( isValuePreset( value ) ) {
-			const customValue = getCustomValueFromPreset( value, presets );
+		if ( isValuePreset( value, BORDER_RADIUS_PRESET_TYPE ) ) {
+			const customValue = getCustomValueFromPreset(
+				value,
+				presets,
+				BORDER_RADIUS_PRESET_TYPE
+			);
 			converted[ key ] = customValue !== undefined ? customValue : value;
 		} else {
 			converted[ key ] = value;

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

@@ -9,20 +9,14 @@
 	width: 100%;
 	height: auto;
 	color: $gray-900;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
+	border-color: currentColor;
 
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
-		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
 	}
 
 	&:hover {
 		color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 
 	&:active {
@@ -31,8 +25,12 @@
 }
 
 
-// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
-.block-list-appender:only-child {
+// When a button appender shows up in empty container blocks, such as Group
+// and Columns, add an extra click state: the first click selects the
+// container instead of opening the inserter. Default block appenders don't
+// need this because their first click inserts a paragraph and sets the
+// selection.
+.block-list-appender:only-child:has(.block-editor-button-block-appender) {
 	// One level of nesting
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,

package/src/components/child-layout-control/index.js

@@ -306,7 +306,6 @@ function GridControls( {
 			>
 				<FlexItem style={ { width: '50%' } }>
 					<InputControl
-						size="__unstable-large"
 						label={ __( 'Column span' ) }
 						type="number"
 						onChange={ ( value ) => {
@@ -331,7 +330,6 @@ function GridControls( {
 				</FlexItem>
 				<FlexItem style={ { width: '50%' } }>
 					<InputControl
-						size="__unstable-large"
 						label={ __( 'Row span' ) }
 						type="number"
 						onChange={ ( value ) => {
@@ -369,7 +367,6 @@ function GridControls( {
 				>
 					<FlexItem style={ { width: '50%' } }>
 						<InputControl
-							size="__unstable-large"
 							label={ __( 'Column' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -404,7 +401,6 @@ function GridControls( {
 					</FlexItem>
 					<FlexItem style={ { width: '50%' } }>
 						<InputControl
-							size="__unstable-large"
 							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {

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

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -19,7 +19,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

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

@@ -45,6 +45,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	colorSlug,
 	gradientValue,
+	gradientSlug,
 	clearable,
 	showTitle = true,
 	enableAlpha,
@@ -102,13 +103,15 @@ function ColorGradientControlInner( {
 		[ TAB_IDS.gradient ]: (
 			<GradientPicker
 				value={ gradientValue }
+				selectedSlug={ gradientSlug }
 				onChange={
 					canChooseAColor
-						? ( newGradient ) => {
-								onGradientChange( newGradient );
+						? ( newGradient, _index, newSlug ) => {
+								onGradientChange( newGradient, newSlug );
 								onColorChange();
 						  }
-						: onGradientChange
+						: ( newGradient, _index, newSlug ) =>
+								onGradientChange( newGradient, newSlug )
 				}
 				{ ...{ gradients, disableCustomGradients } }
 				__experimentalIsRenderedInSidebar={

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div>

package/src/components/dimension-control/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -58,6 +63,8 @@ function useDimensionSizes( presets ) {
  * @param {?string}                    props.label          A label for the control.
  * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.
  * @param {string}                     props.value          The current dimension value.
+ * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.
+ * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.
  * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.
  *
  * @return {Component} The component to be rendered.
@@ -66,6 +73,8 @@ export default function DimensionControl( {
 	label = __( 'Dimension' ),
 	onChange,
 	value,
+	placeholder,
+	className,
 	dimensionSizes: dimensionSizesProp,
 } ) {
 	const [ dimensionSizesFromSettings, availableUnits ] = useSettings(
@@ -146,7 +155,9 @@ export default function DimensionControl( {
 	};
 
 	return (
-		<fieldset className="block-editor-dimension-control">
+		<fieldset
+			className={ clsx( 'block-editor-dimension-control', className ) }
+		>
 			<BaseControl.VisualLabel as="legend">
 				{ label }
 			</BaseControl.VisualLabel>
@@ -157,6 +168,7 @@ export default function DimensionControl( {
 				minimumCustomValue={ 0 }
 				onChange={ onChange }
 				onUnitChange={ handleUnitChange }
+				placeholder={ placeholder }
 				presets={ options }
 				presetType="dimension"
 				selectedUnit={ selectedUnit }

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -1,15 +1,13 @@
 /**
  * WordPress dependencies
  */
-import {
-	SelectControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import { useSettings } from '../use-settings';
+import { InheritanceToolsPanelItem } from '../global-styles/inheritance';
 
 /**
  * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
@@ -29,6 +27,9 @@ import { useSettings } from '../use-settings';
  * @property {SelectControlProps[]}         [options]          Aspect ratio options.
  * @property {string}                       [defaultValue]     Default aspect ratio value.
  * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ * @property {string}                       [className]        Additional CSS class on the wrapping panel item.
+ * @property {boolean}                      [isInherited]      Whether the control is displaying an inherited Global Styles value.
+ * @property {boolean}                      [hasLocalOverride] Whether a local value is overriding an inherited Global Styles value.
  */
 
 export default function AspectRatioTool( {
@@ -39,6 +40,9 @@ export default function AspectRatioTool( {
 	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
+	className,
+	isInherited,
+	hasLocalOverride,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
@@ -78,7 +82,10 @@ export default function AspectRatioTool( {
 	];
 
 	return (
-		<ToolsPanelItem
+		<InheritanceToolsPanelItem
+			className={ className }
+			isInherited={ isInherited }
+			hasLocalOverride={ hasLocalOverride }
 			hasValue={
 				hasValue ? hasValue : () => displayValue !== defaultValue
 			}
@@ -93,6 +100,6 @@ export default function AspectRatioTool( {
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
 			/>
-		</ToolsPanelItem>
+		</InheritanceToolsPanelItem>
 	);
 }

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

@@ -75,7 +75,22 @@ function EditorStyles( { styles, scope, transformOptions } ) {
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
-		for ( const [ id, override ] of overrides ) {
+		/*
+		 * Custom CSS overrides are applied after all other overrides so they
+		 * win the cascade at equal specificity, mirroring the front end where
+		 * the custom CSS stylesheet is printed last. Both partitions keep the
+		 * block order established by getStyleOverrides.
+		 */
+		const orderedOverrides = [
+			...overrides.filter(
+				( [ , override ] ) => override?.__unstableType !== 'custom-css'
+			),
+			...overrides.filter(
+				( [ , override ] ) => override?.__unstableType === 'custom-css'
+			),
+		];
+
+		for ( const [ id, override ] of orderedOverrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
 			const overrideWithId = { ...override, id };
 			if ( index === -1 ) {

package/src/components/font-family/stories/index.story.jsx

@@ -44,7 +44,7 @@ export const Default = {
 			},
 			{
 				fontFamily:
-					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+					'-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 				name: 'System Font',
 				slug: 'system-font',
 			},