@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -111,7 +111,7 @@ export default function ChildLayoutControl( {
 				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ childLayoutOrientation( parentLayout ) }
 						value={ selfStretch || 'fit' }
 						help={ helpText( selfStretch, parentLayout ) }
@@ -126,24 +126,24 @@ export default function ChildLayoutControl( {
 						isBlock
 					>
 						<ToggleGroupControlOption
-							key={ 'fit' }
-							value={ 'fit' }
+							key="fit"
+							value="fit"
 							label={ __( 'Fit' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fill' }
-							value={ 'fill' }
+							key="fill"
+							value="fill"
 							label={ __( 'Fill' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fixed' }
-							value={ 'fixed' }
+							key="fixed"
+							value="fixed"
 							label={ __( 'Fixed' ) }
 						/>
 					</ToggleGroupControl>
 					{ selfStretch === 'fixed' && (
 						<UnitControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							onChange={ ( value ) => {
 								onChange( {
 									selfStretch,
@@ -166,7 +166,7 @@ export default function ChildLayoutControl( {
 						panelId={ panelId }
 					>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Column span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -181,7 +181,7 @@ export default function ChildLayoutControl( {
 							min={ 1 }
 						/>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Row span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -210,7 +210,7 @@ export default function ChildLayoutControl( {
 						>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Column' ) }
 									type="number"
 									onChange={ ( value ) => {
@@ -223,12 +223,18 @@ export default function ChildLayoutControl( {
 									} }
 									value={ columnStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.columnCount
+											? parentLayout.columnCount -
+											  ( columnSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Row' ) }
 									type="number"
 									onChange={ ( value ) => {
@@ -241,7 +247,13 @@ export default function ChildLayoutControl( {
 									} }
 									value={ rowStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.rowCount
+											? parentLayout.rowCount -
+											  ( rowSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 						</Flex>

package/src/components/colors/utils.js

@@ -17,6 +17,8 @@ import { unlock } from '../../lock-unlock';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
  * and the values of the defined color or custom color returns a color object describing the color.
@@ -75,8 +77,6 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 

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

@@ -17,6 +17,8 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Capitalizes the first letter in a string.
  *
@@ -80,7 +82,6 @@ const withEditorColorPalette = () =>
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
 		return {
 			...colorObject,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,6 +21,7 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
+const { Tabs } = unlock( componentsPrivateApis );
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -106,15 +107,10 @@ function ColorGradientControlInner( {
 		</div>
 	);
 
-	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
-	// object, due to circular dependencies.
-	// See https://github.com/WordPress/gutenberg/issues/52692
-	const { Tabs } = unlock( componentsPrivateApis );
-
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
-			className={ classnames(
+			className={ clsx(
 				'block-editor-color-gradient-control',
 				className
 			) }
@@ -141,7 +137,7 @@ function ColorGradientControlInner( {
 							>
 								<Tabs.TabList>
 									<Tabs.Tab tabId={ TAB_IDS.color }>
-										{ __( 'Solid' ) }
+										{ __( 'Color' ) }
 									</Tabs.Tab>
 									<Tabs.Tab tabId={ TAB_IDS.gradient }>
 										{ __( 'Gradient' ) }
@@ -149,18 +145,14 @@ function ColorGradientControlInner( {
 								</Tabs.TabList>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.color }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.color }
 								</Tabs.TabPanel>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.gradient }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.gradient }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ const renderToggle =
 
 		const toggleProps = {
 			onClick: onToggle,
-			className: classnames(
+			className: clsx(
 				'block-editor-panel-color-gradient-settings__dropdown',
 				{ 'is-open': isOpen }
 			),

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -61,7 +61,7 @@ export const PanelColorGradientSettingsInner = ( {
 
 	return (
 		<ToolsPanel
-			className={ classnames(
+			className={ clsx(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }

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

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

package/src/components/contrast-checker/test/index.js

@@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -396,7 +396,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				textColor={ textColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -416,7 +416,7 @@ describe( 'ContrastChecker', () => {
 	test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
 		const { container } = render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
@@ -450,7 +450,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -472,7 +472,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
@@ -494,9 +494,9 @@ describe( 'ContrastChecker', () => {
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
 		render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
-				linkColor={ 'rgba(0,0,0,0.7)' }
-				textColor={ 'rgba(0,0,0,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
+				linkColor="rgba(0,0,0,0.7)"
+				textColor="rgba(0,0,0,0.7)"
 				isLargeText={ isLargeText }
 				enableAlphaChecker
 			/>

package/src/components/convert-to-group-buttons/index.js

@@ -4,7 +4,8 @@
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { switchToBlockType } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ function ConvertToGroupButton( {
 	groupingBlockName,
 	onClose = () => {},
 } ) {
+	const { getSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
 		// Activate the `transform` on the Grouping Block which does the conversion.
@@ -52,10 +54,17 @@ function ConvertToGroupButton( {
 		return null;
 	}
 
+	const selectedBlockClientIds = getSelectedBlockClientIds();
+
 	return (
 		<>
 			{ isGroupable && (
 				<MenuItem
+					shortcut={
+						selectedBlockClientIds.length > 1
+							? displayShortcut.primary( 'g' )
+							: undefined
+					}
 					onClick={ () => {
 						onConvertToGroup();
 						onClose();

package/src/components/default-block-appender/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
-			className={ classnames( 'block-editor-default-block-appender', {
+			className={ clsx( 'block-editor-default-block-appender', {
 				'has-visible-prompt': showPrompt,
 			} ) }
 		>

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

@@ -6,75 +6,14 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-
 /**
- * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 
 /**
- * @type {SelectControlProps[]}
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
  */
-export const DEFAULT_ASPECT_RATIO_OPTIONS = [
-	{
-		label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
-		value: 'auto',
-	},
-	{
-		label: _x(
-			'Square - 1:1',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '1',
-	},
-	{
-		label: _x(
-			'Standard - 4:3',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '4/3',
-	},
-	{
-		label: _x(
-			'Portrait - 3:4',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '3/4',
-	},
-	{
-		label: _x(
-			'Classic - 3:2',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '3/2',
-	},
-	{
-		label: _x(
-			'Classic Portrait - 2:3',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '2/3',
-	},
-	{
-		label: _x(
-			'Wide - 16:9',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '16/9',
-	},
-	{
-		label: _x(
-			'Tall - 9:16',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '9/16',
-	},
-	{
-		label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
-		value: 'custom',
-		disabled: true,
-		hidden: true,
-	},
-];
 
 /**
  * @callback AspectRatioToolPropsOnChange
@@ -96,14 +35,48 @@ export default function AspectRatioTool( {
 	panelId,
 	value,
 	onChange = () => {},
-	options = DEFAULT_ASPECT_RATIO_OPTIONS,
-	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	options,
+	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
 
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+		{
+			label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+			value: 'custom',
+			disabled: true,
+			hidden: true,
+		},
+	];
+
 	return (
 		<ToolsPanelItem
 			hasValue={
@@ -117,9 +90,9 @@ export default function AspectRatioTool( {
 			<SelectControl
 				label={ __( 'Aspect ratio' ) }
 				value={ displayValue }
-				options={ options }
+				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 				__nextHasNoMarginBottom
 			/>
 		</ToolsPanelItem>

package/src/components/dimensions-tool/scale-tool.js

@@ -110,7 +110,7 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption

package/src/components/dimensions-tool/test/index.js

@@ -33,6 +33,16 @@ function Example( { initialValue, onChange, ...props } ) {
 				} }
 				defaultScale="cover"
 				defaultAspectRatio="auto"
+				aspectRatioOptions={ [
+					{ label: 'Original', value: 'auto' },
+					{ label: '16/9', value: '16/9' },
+					{
+						label: 'Custom',
+						value: 'custom',
+						disabled: true,
+						hidden: true,
+					},
+				] }
 				value={ value }
 				{ ...props }
 			/>

package/src/components/dimensions-tool/width-height-tool.js

@@ -87,7 +87,7 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ width }
 					onChange={ onDimensionChange( 'width' ) }
-					size={ '__unstable-large' }
+					size="__unstable-large"
 				/>
 			</SingleColumnToolsPanelItem>
 			<SingleColumnToolsPanelItem
@@ -105,7 +105,7 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ height }
 					onChange={ onDimensionChange( 'height' ) }
-					size={ '__unstable-large' }
+					size="__unstable-large"
 				/>
 			</SingleColumnToolsPanelItem>
 		</>

package/src/components/editable-text/README.md

@@ -25,10 +25,6 @@ _Optional._ `Text` won't insert line breaks on `Enter` if set to `true`.
 _Optional._ Placeholder text to show when the field is empty, similar to the
 [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
 
-### `onSplit( value: String ): Function`
-
-_Optional._ Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect.
-
 ### `onReplace( blocks: Array ): Function`
 
 _Optional._ Called when the `Text` instance can be replaced with the given blocks.

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

@@ -8,6 +8,8 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  */
 import { unlock } from '../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
  * 	If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
@@ -69,6 +71,5 @@ export function getFontSizeClass( fontSizeSlug ) {
 		return;
 	}
 
-	const { kebabCase } = unlock( componentsPrivateApis );
 	return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
 }