@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

package/src/components/border-radius-control/all-input-control.js

@@ -7,14 +7,50 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getAllValue, hasMixedValues, hasDefinedValues } from './utils';
+import {
+	getAllValue,
+	getAllUnit,
+	hasMixedValues,
+	hasDefinedValues,
+} from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	selectedUnits,
+	setSelectedUnits,
+	values,
+	...props
+} ) {
+	let allValue = getAllValue( values );
+
+	if ( allValue === undefined ) {
+		// If we don't have any value set the unit to any current selection
+		// or the most common unit from the individual radii values.
+		allValue = getAllUnit( selectedUnits );
+	}
 
-export default function AllInputControl( { onChange, values, ...props } ) {
-	const allValue = getAllValue( values );
 	const hasValues = hasDefinedValues( values );
 	const isMixed = hasValues && hasMixedValues( values );
 	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
 
+	// Filter out CSS-unit-only values to prevent invalid styles.
+	const handleOnChange = ( next ) => {
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		onChange( nextValue );
+	};
+
+	// Store current unit selection for use as fallback for individual
+	// radii controls.
+	const handleOnUnitChange = ( unit ) => {
+		setSelectedUnits( {
+			topLeft: unit,
+			topRight: unit,
+			bottomLeft: unit,
+			bottomRight: unit,
+		} );
+	};
+
 	return (
 		<UnitControl
 			{ ...props }
@@ -22,7 +58,8 @@ export default function AllInputControl( { onChange, values, ...props } ) {
 			disableUnits={ isMixed }
 			isOnly
 			value={ allValue }
-			onChange={ onChange }
+			onChange={ handleOnChange }
+			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
 		/>
 	);

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

@@ -25,10 +25,10 @@ import {
 } from './utils';
 
 const DEFAULT_VALUES = {
-	topLeft: null,
-	topRight: null,
-	bottomLeft: null,
-	bottomRight: null,
+	topLeft: undefined,
+	topRight: undefined,
+	bottomLeft: undefined,
+	bottomRight: undefined,
 };
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUES = {
@@ -51,11 +51,27 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		! hasDefinedValues( values ) || ! hasMixedValues( values )
 	);
 
+	// Tracking selected units via internal state allows filtering of CSS unit
+	// only values from being saved while maintaining preexisting unit selection
+	// behaviour. Filtering CSS unit only values prevents invalid style values.
+	const [ selectedUnits, setSelectedUnits ] = useState( {
+		flat:
+			typeof values === 'string'
+				? parseQuantityAndUnitFromRawValue( values )[ 1 ]
+				: undefined,
+		topLeft: parseQuantityAndUnitFromRawValue( values?.topLeft )[ 1 ],
+		topRight: parseQuantityAndUnitFromRawValue( values?.topRight )[ 1 ],
+		bottomLeft: parseQuantityAndUnitFromRawValue( values?.bottomLeft )[ 1 ],
+		bottomRight: parseQuantityAndUnitFromRawValue(
+			values?.bottomRight
+		)[ 1 ],
+	} );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
 
-	const unit = getAllUnit( values );
+	const unit = getAllUnit( selectedUnits );
 	const unitConfig = units && units.find( ( item ) => item.value === unit );
 	const step = unitConfig?.step || 1;
 
@@ -82,6 +98,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							values={ values }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							onChange={ onChange }
+							selectedUnits={ selectedUnits }
+							setSelectedUnits={ setSelectedUnits }
 							units={ units }
 						/>
 						<RangeControl
@@ -101,6 +119,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 					<InputControls
 						min={ MIN_BORDER_RADIUS_VALUE }
 						onChange={ onChange }
+						selectedUnits={ selectedUnits }
+						setSelectedUnits={ setSelectedUnits }
 						values={ values || DEFAULT_VALUES }
 						units={ units }
 					/>

package/src/components/border-radius-control/input-controls.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUnitControl as UnitControl,
 	Tooltip,
 } from '@wordpress/components';
@@ -16,6 +17,8 @@ const CORNERS = {
 
 export default function BoxInputControls( {
 	onChange,
+	selectedUnits,
+	setSelectedUnits,
 	values: valuesProp,
 	...props
 } ) {
@@ -24,12 +27,22 @@ export default function BoxInputControls( {
 			return;
 		}
 
+		// Filter out CSS-unit-only values to prevent invalid styles.
+		const isNumeric = ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+
 		onChange( {
 			...values,
-			[ corner ]: next ? next : undefined,
+			[ corner ]: nextValue,
 		} );
 	};
 
+	const createHandleOnUnitChange = ( side ) => ( next ) => {
+		const newUnits = { ...selectedUnits };
+		newUnits[ side ] = next;
+		setSelectedUnits( newUnits );
+	};
+
 	// For shorthand style & backwards compatibility, handle flat string value.
 	const values =
 		typeof valuesProp !== 'string'
@@ -46,18 +59,32 @@ export default function BoxInputControls( {
 	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
-			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<Tooltip text={ label } position="top" key={ key }>
-					<div className="components-border-radius-control__tooltip-wrapper">
-						<UnitControl
-							{ ...props }
-							aria-label={ label }
-							value={ values[ key ] }
-							onChange={ createHandleOnChange( key ) }
-						/>
-					</div>
-				</Tooltip>
-			) ) }
+			{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue( values[ corner ] );
+
+				const computedUnit = values[ corner ]
+					? parsedUnit
+					: selectedUnits[ corner ] || selectedUnits.flat;
+
+				return (
+					<Tooltip text={ label } position="top" key={ corner }>
+						<div className="components-border-radius-control__tooltip-wrapper">
+							<UnitControl
+								{ ...props }
+								aria-label={ label }
+								value={ [ parsedQuantity, computedUnit ].join(
+									''
+								) }
+								onChange={ createHandleOnChange( corner ) }
+								onUnitChange={ createHandleOnUnitChange(
+									corner
+								) }
+							/>
+						</div>
+					</Tooltip>
+				);
+			} ) }
 		</div>
 	);
 }

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

@@ -9,73 +9,35 @@ import {
 	mode,
 } from '../utils';
 
-describe( 'getAllUnit', () => {
-	describe( 'when provided string based values', () => {
-		it( 'should return valid unit when passed a valid unit', () => {
-			expect( getAllUnit( '32em' ) ).toBe( 'em' );
-		} );
-
-		it( 'should fall back to px when passed an invalid unit', () => {
-			expect( getAllUnit( '32apples' ) ).toBe( 'px' );
-		} );
+const defaultUnitSelections = {
+	flat: undefined,
+	topLeft: '%',
+	topRight: 'rem',
+	bottomLeft: 'rem',
+	bottomRight: 'vw',
+};
 
-		it( 'should fall back to px when passed a value without a unit', () => {
-			expect( getAllUnit( '32' ) ).toBe( 'px' );
-		} );
+describe( 'getAllUnit', () => {
+	it( 'should return flat radius unit when selected', () => {
+		const selectedUnits = { ...defaultUnitSelections, flat: 'em' };
+		expect( getAllUnit( selectedUnits ) ).toBe( 'em' );
 	} );
 
-	describe( 'when provided object based values', () => {
-		it( 'should return the most common value', () => {
-			const values = {
-				bottomLeft: '2em',
-				bottomRight: '2em',
-				topLeft: '0',
-				topRight: '2px',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
-
-		it( 'should return the real value when the most common value is undefined', () => {
-			const values = {
-				bottomLeft: '0',
-				bottomRight: '0',
-				topLeft: '0',
-				topRight: '2em',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
+	it( 'should return most common corner unit', () => {
+		expect( getAllUnit( defaultUnitSelections ) ).toBe( 'rem' );
+	} );
 
-		it( 'should return the most common value there are no undefined values', () => {
-			const values = {
-				bottomLeft: '1em',
-				bottomRight: '1em',
-				topLeft: '2px',
-				topRight: '2em',
-			};
-			expect( getAllUnit( values ) ).toBe( 'em' );
-		} );
+	it( 'should return a real unit when the most common is undefined', () => {
+		expect( getAllUnit( { bottomRight: '%' } ) ).toBe( '%' );
+	} );
 
-		it( 'should fall back to px when all values are undefined or equivalent', () => {
-			const values = {
-				bottomLeft: '0',
-				bottomRight: undefined,
-				topLeft: undefined,
-				topRight: '0',
-			};
-			expect( getAllUnit( values ) ).toBe( 'px' );
-		} );
+	it( 'should return most common corner unit when some are unselected', () => {
+		const selectedUnits = { ...defaultUnitSelections, topLeft: undefined };
+		expect( getAllUnit( selectedUnits ) ).toBe( 'rem' );
 	} );
 
-	describe( 'when provided invalid values', () => {
-		it( 'should return px when passed an array', () => {
-			expect( getAllUnit( [] ) ).toBe( 'px' );
-		} );
-		it( 'should return px when passed a boolean', () => {
-			expect( getAllUnit( false ) ).toBe( 'px' );
-		} );
-		it( 'should return px when passed undefined', () => {
-			expect( getAllUnit( false ) ).toBe( 'px' );
-		} );
+	it( 'should fallback to px when all values are undefined', () => {
+		expect( getAllUnit( {} ) ).toBe( 'px' );
 	} );
 } );
 

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

@@ -28,24 +28,20 @@ export function mode( inputArray ) {
 }
 
 /**
- * Returns the most common CSS unit in the radius values.
- * Falls back to `px` as a default unit.
+ * Returns the most common CSS unit from the current CSS unit selections.
  *
- * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values. Default: `px`.
+ * - If a single flat border radius is set, its unit will be used
+ * - If individual corner selections, the most common of those will be used
+ * - Failing any unit selections a default of 'px' is returned.
+ *
+ * @param {Object} selectedUnits Unit selections for flat radius & each corner.
+ * @return {string} Most common CSS unit from current selections. Default: `px`.
  */
-export function getAllUnit( values = {} ) {
-	if ( typeof values === 'string' ) {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( values );
-		return unit || 'px';
-	}
-
-	const allUnits = Object.values( values ).map( ( value ) => {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( value );
-		return unit;
-	} );
-
-	return mode( allUnits ) || 'px';
+export function getAllUnit( selectedUnits = {} ) {
+	const { flat, ...cornerUnits } = selectedUnits;
+	return (
+		flat || mode( Object.values( cornerUnits ).filter( Boolean ) ) || 'px'
+	);
 }
 
 /**

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

@@ -31,3 +31,26 @@
 		color: $black;
 	}
 }
+
+// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
+.block-list-appender:only-child {
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
+		pointer-events: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			pointer-events: none;
+			@include placeholder-style();
+		}
+
+		.block-editor-inserter {
+			visibility: hidden;
+		}
+	}
+}

package/src/components/colors/with-colors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,16 @@ import {
 } from './utils';
 import useSetting from '../use-setting';
 
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
+ */
+const upperFirst = ( [ firstLetter, ...rest ] ) =>
+	firstLetter.toUpperCase() + rest.join( '' );
+
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.

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

@@ -92,6 +92,7 @@ function ColorGradientControlInner( {
 		),
 		[ TAB_GRADIENT.value ]: (
 			<GradientPicker
+				__nextHasNoMargin
 				value={ gradientValue }
 				onChange={
 					canChooseAColor

package/src/components/copy-handler/index.js

@@ -6,6 +6,7 @@ import {
 	serialize,
 	pasteHandler,
 	store as blocksStore,
+	createBlock,
 } from '@wordpress/blocks';
 import {
 	documentHasSelection,
@@ -155,6 +156,23 @@ export function useClipboardHandler() {
 						);
 						blocks = [ head, ...inBetweenBlocks, tail ];
 					}
+
+					const wrapperBlockName = event.clipboardData.getData(
+						'__unstableWrapperBlockName'
+					);
+
+					if ( wrapperBlockName ) {
+						blocks = createBlock(
+							wrapperBlockName,
+							JSON.parse(
+								event.clipboardData.getData(
+									'__unstableWrapperBlockAttributes'
+								)
+							),
+							blocks
+						);
+					}
+
 					const serialized = serialize( blocks );
 
 					event.clipboardData.setData(

package/src/components/date-format-picker/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { uniq } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -83,15 +78,17 @@ function NonDefaultControls( { format, onChange } ) {
 	// 2022) in German (de). The resultant array is de-duplicated as some
 	// languages will use the same format string for short, medium, and long
 	// formats.
-	const suggestedFormats = uniq( [
-		'Y-m-d',
-		_x( 'n/j/Y', 'short date format' ),
-		_x( 'n/j/Y g:i A', 'short date format with time' ),
-		_x( 'M j, Y', 'medium date format' ),
-		_x( 'M j, Y g:i A', 'medium date format with time' ),
-		_x( 'F j, Y', 'long date format' ),
-		_x( 'M j', 'short date format without the year' ),
-	] );
+	const suggestedFormats = [
+		...new Set( [
+			'Y-m-d',
+			_x( 'n/j/Y', 'short date format' ),
+			_x( 'n/j/Y g:i A', 'short date format with time' ),
+			_x( 'M j, Y', 'medium date format' ),
+			_x( 'M j, Y g:i A', 'medium date format with time' ),
+			_x( 'F j, Y', 'long date format' ),
+			_x( 'M j', 'short date format without the year' ),
+		] ),
+	];
 
 	const suggestedOptions = suggestedFormats.map(
 		( suggestedFormat, index ) => ( {
@@ -116,6 +113,7 @@ function NonDefaultControls( { format, onChange } ) {
 		<>
 			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
 				<CustomSelectControl
+					__nextUnconstrainedWidth
 					label={ __( 'Choose a format' ) }
 					options={ [ ...suggestedOptions, customOption ] }
 					value={

package/src/components/date-format-picker/style.scss

@@ -11,10 +11,6 @@
 	&.components-base-control {
 		margin-bottom: 0;
 	}
-
-	.components-custom-select-control__button {
-		width: 100%;
-	}
 }
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {

package/src/components/duotone/components.js

@@ -11,9 +11,9 @@ import { __unstableGetValuesFromColors as getValuesFromColors } from './index';
 /**
  * SVG and stylesheet needed for rendering the duotone filter.
  *
- * @param {Object}   props          Duotone props.
- * @param {string}   props.selector Selector to apply the filter to.
- * @param {string}   props.id       Unique id for this duotone filter.
+ * @param {Object} props          Duotone props.
+ * @param {string} props.selector Selector to apply the filter to.
+ * @param {string} props.id       Unique id for this duotone filter.
  *
  * @return {WPElement} Duotone element.
  */
@@ -29,8 +29,8 @@ ${ selector } {
 /**
  * Stylesheet for disabling a global styles duotone filter.
  *
- * @param {Object}   props          Duotone props.
- * @param {string}   props.selector Selector to disable the filter for.
+ * @param {Object} props          Duotone props.
+ * @param {string} props.selector Selector to disable the filter for.
  *
  * @return {WPElement} Filter none style element.
  */

package/src/components/duotone-control/style.scss

@@ -18,10 +18,6 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 		padding: 0;
 	}
 
-	.components-custom-gradient-picker__gradient-bar {
-		margin: $grid-unit-20 0 $grid-unit-15;
-	}
-
 	.components-circular-option-picker__swatches {
 		display: grid;
 		grid-template-columns: repeat($swatch-columns, $swatch-size);

package/src/components/font-appearance-control/style.scss

@@ -1,6 +1,4 @@
 .components-font-appearance-control {
-	margin-bottom: 24px;
-
 	ul {
 		li {
 			color: $gray-900;

package/src/components/font-family/index.js

@@ -40,7 +40,7 @@ export default function FontFamilyControl( {
 	];
 	return (
 		<SelectControl
-			label={ __( 'Font family' ) }
+			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }
 			onChange={ onChange }

package/src/components/font-sizes/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce, some, upperFirst } from 'lodash';
+import { find, pickBy, reduce, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,16 @@ import useSetting from '../use-setting';
 
 const DEFAULT_FONT_SIZES = [];
 
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
+ */
+const upperFirst = ( [ firstLetter, ...rest ] ) =>
+	firstLetter.toUpperCase() + rest.join( '' );
+
 /**
  * Higher-order component, which handles font size logic for class generation,
  * font size value retrieval, and font size change handling.

package/src/components/index.js

@@ -93,6 +93,7 @@ export { default as URLInputButton } from './url-input/button';
 export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
+export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
 
 /*
  * Content Related Components

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

@@ -21,6 +21,7 @@ import getBlockContext from './get-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -96,6 +97,7 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
+		useCompactList,
 	} = props;
 
 	const block = useSelect(
@@ -112,8 +114,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
+	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
+
 	let blockList = (
-		<BlockList
+		<BlockListComponent
 			marginVertical={ marginVertical }
 			marginHorizontal={ marginHorizontal }
 			rootClientId={ clientId }

package/src/components/inserter/search-items.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
-import { deburr, find, words } from 'lodash';
+import { noCase } from 'change-case';
+import removeAccents from 'remove-accents';
+import { find } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -21,7 +23,7 @@ const defaultGetCollection = () => null;
 function normalizeSearchInput( input = '' ) {
 	// Disregard diacritics.
 	//  Input: "média"
-	input = deburr( input );
+	input = removeAccents( input );
 
 	// Accommodate leading slash, matching autocomplete expectations.
 	//  Input: "/media"
@@ -34,6 +36,17 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input ).split( ' ' ).filter( Boolean );
+}
+
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -42,8 +55,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	// Extract words.
-	return words( normalizeSearchInput( input ) );
+	return extractWords( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -150,7 +162,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = words( normalizedSearchInput );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms