@wordpress/block-editor 9.6.0 → 9.8.0

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

@@ -61,7 +61,12 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 			className="block-editor-panel-color-gradient-settings__color-indicator"
 			colorValue={ colorValue }
 		/>
-		<FlexItem>{ label }</FlexItem>
+		<FlexItem
+			className="block-editor-panel-color-gradient-settings__color-name"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
 	</HStack>
 );
 
@@ -158,7 +163,7 @@ export default function ColorGradientSettingsDropdown( {
 								className="block-editor-tools-panel-color-gradient-settings__dropdown"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
-									<DropdownContentWrapper paddingSize="medium">
+									<DropdownContentWrapper paddingSize="none">
 										<div className="block-editor-panel-color-gradient-settings__dropdown-content">
 											<ColorGradientControl
 												{ ...controlProps }

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

@@ -15,6 +15,12 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs {
+	.block-editor-color-gradient-control__panel {
+		padding: $grid-unit-20;
+	}
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {
@@ -41,7 +47,13 @@ $swatch-gap: 12px;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content {
-	width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ); // Ensure the popover perfectly wraps the swatches.
+	.block-editor-color-gradient-control__panel {
+		$panelPadding: $grid-unit-20;
+
+		// Ensure the popover perfectly wraps the swatches.
+		width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $panelPadding * 2 );
+		padding: $panelPadding;
+	}
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -58,6 +70,7 @@ $swatch-gap: 12px;
 */
 .block-editor-tools-panel-color-gradient-settings__item {
 	padding: 0;
+	max-width: 100%;
 
 	// Border styles.
 	border-left: 1px solid rgba(0, 0, 0, 0.1);
@@ -87,19 +100,28 @@ $swatch-gap: 12px;
 	padding: 0;
 
 	> button {
-		height: 46px;
+		height: auto;
+		padding-top: $grid-unit * 1.25;
+		padding-bottom: $grid-unit * 1.25;
+		text-align: left;
 
 		&.is-open {
 			background: $gray-100;
 			color: var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-panel-color-gradient-settings__color-name {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 }
 
 .block-editor-panel-color-gradient-settings__dropdown {
 	width: 100%;
-}
 
-.block-editor-color-gradient-control__tab-panel {
-	padding-top: $grid-unit-10;
+	.component-color-indicator {
+		flex-shrink: 0;
+	}
 }

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

@@ -53,7 +53,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two tab buttons.
 		expect(
-			screen.getByRole( 'tab', { name: 'Solid color' } )
+			screen.getByRole( 'tab', { name: 'Solid' } )
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'tab', { name: 'Gradient' } )
@@ -86,7 +86,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid color' } )
+			screen.queryByRole( 'tab', { name: 'Solid' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
@@ -133,7 +133,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid color' } )
+			screen.queryByRole( 'tab', { name: 'Solid' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )

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/index.js

@@ -88,6 +88,7 @@ export default function FontAppearanceControl( props ) {
 		hasFontStyles = true,
 		hasFontWeights = true,
 		value: { fontStyle, fontWeight },
+		...otherProps
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
 	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
@@ -205,6 +206,7 @@ export default function FontAppearanceControl( props ) {
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
+				{ ...otherProps }
 				className="components-font-appearance-control"
 				label={ label }
 				describedBy={ getDescribedBy() }
@@ -213,6 +215,7 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
+				__nextUnconstrainedWidth
 			/>
 		)
 	);

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/image-size-control/README.md

@@ -32,6 +32,13 @@ const MyImageSizeControl = () => {
 
 The component accepts the following props:
 
+### imageSizeHelp
+
+If this property is added, a help text will be generated for the image size control, using imageSizeHelp property as the content.
+
+-   Type: `String|WPElement`
+-   Required: No
+
 ### slug
 
 The currently-selected image size slug (`thumbnail`, `large`, etc). This is used by the parent component to get the specific image, which is used to populate `imageHeight` & `imageWidth`. This is not required, but necessary when `imageSizeOptions` is used.

package/src/components/image-size-control/index.js

@@ -23,6 +23,7 @@ const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
 const noop = () => {};
 
 export default function ImageSizeControl( {
+	imageSizeHelp,
 	imageWidth,
 	imageHeight,
 	imageSizeOptions = [],
@@ -44,6 +45,7 @@ export default function ImageSizeControl( {
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
+					help={ imageSizeHelp }
 				/>
 			) }
 			{ isResizable && (

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
@@ -147,7 +148,10 @@ export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
-export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export {
+	RecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion as __experimentalUseHasRecursion,
+} from './recursion-provider';
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';

package/src/components/index.native.js

@@ -59,7 +59,10 @@ export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as useSetting } from './use-setting';
-export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export {
+	RecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion as __experimentalUseHasRecursion,
+} from './recursion-provider';
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';

package/src/components/inserter/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { AccessibilityInfo, Platform, Text } from 'react-native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,6 +79,8 @@ const defaultRenderToggle = ( {
 };
 
 export class Inserter extends Component {
+	announcementTimeout;
+
 	constructor() {
 		super( ...arguments );
 
@@ -88,6 +89,10 @@ export class Inserter extends Component {
 		this.renderContent = this.renderContent.bind( this );
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.announcementTimeout );
+	}
+
 	getInsertionOptions() {
 		const addBeforeOption = {
 			value: 'before',
@@ -217,7 +222,7 @@ export class Inserter extends Component {
 				const announcement = isOpen
 					? __( 'Scrollable block menu opened. Select a block.' )
 					: __( 'Scrollable block menu closed.' );
-				delay(
+				this.announcementTimeout = setTimeout(
 					() =>
 						AccessibilityInfo.announceForAccessibility(
 							announcement

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

package/src/components/inserter-list-item/index.js

@@ -12,7 +12,7 @@ import {
 	createBlocksFromInnerBlocksTemplate,
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
-import { ENTER } from '@wordpress/keycodes';
+import { ENTER, isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -21,22 +21,6 @@ import BlockIcon from '../block-icon';
 import { InserterListboxItem } from '../inserter-listbox';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 
-/**
- * Return true if platform is MacOS.
- *
- * @param {Object} _window window object by default; used for DI testing.
- *
- * @return {boolean} True if MacOS; false otherwise.
- */
-function isAppleOS( _window = window ) {
-	const { platform } = _window.navigator;
-
-	return (
-		platform.indexOf( 'Mac' ) !== -1 ||
-		[ 'iPad', 'iPhone' ].includes( platform )
-	);
-}
-
 function InserterListItem( {
 	className,
 	isFirst,

package/src/components/letter-spacing-control/index.js

@@ -26,6 +26,7 @@ export default function LetterSpacingControl( {
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
@@ -33,6 +34,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
+			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }

package/src/components/line-height-control/index.js

@@ -21,6 +21,7 @@ const LineHeightControl = ( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
 
@@ -89,6 +90,7 @@ const LineHeightControl = ( {
 			style={ deprecatedStyles }
 		>
 			<NumberControl
+				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ onChange }

package/src/components/link-control/is-url-like.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,6 @@ import { isURL } from '@wordpress/url';
  * @return {boolean} whether or not the value is potentially a URL.
  */
 export default function isURLLike( val ) {
-	const isInternal = startsWith( val, '#' );
+	const isInternal = val?.startsWith( '#' );
 	return isURL( val ) || ( val && val.includes( 'www.' ) ) || isInternal;
 }

package/src/components/link-control/link-preview.js

@@ -60,7 +60,6 @@ export default function LinkPreview( {
 	return (
 		<div
 			aria-label={ __( 'Currently selected' ) }
-			aria-selected="true"
 			className={ classnames( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,