{ ! isMultiToolbar &&
isLargeViewport &&
blockEditingMode === 'default' &&
}
-
- { ( shouldShowVisualToolbar || isMultiToolbar ) &&
- blockEditingMode === 'default' && (
+ { ( shouldShowVisualToolbar || isMultiToolbar ) &&
+ blockEditingMode === 'default' && (
+
{ ! isMultiToolbar && (
) }
{
hideDragHandle={ hideDragHandle }
/>
- ) }
-
+
+ ) }
{ shouldShowVisualToolbar && isMultiToolbar && (
) }
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index cf38c9ee47de21..c55b8e651c2e7e 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -121,6 +121,10 @@
}
}
+ &:has(.block-editor-block-toolbar:empty) {
+ display: none;
+ }
+
// on desktop and tablet viewports the toolbar is fixed
// on top of interface header
diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
new file mode 100644
index 00000000000000..988c6b5c286869
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ SelectControl,
+ __experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @type {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
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string} [panelId] ID of the panel this tool is associated with.
+ * @property {string} [value] Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange] Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]} [options] Aspect ratio options.
+ * @property {string} [defaultValue] Default aspect ratio value.
+ * @property {boolean} [isShownByDefault] Whether the tool is shown by default.
+ */
+
+export default function AspectRatioTool( {
+ panelId,
+ value,
+ onChange = () => {},
+ options = DEFAULT_ASPECT_RATIO_OPTIONS,
+ defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+ 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';
+
+ return (
+
displayValue !== defaultValue }
+ label={ __( 'Aspect ratio' ) }
+ onDeselect={ () => onChange( undefined ) }
+ isShownByDefault={ isShownByDefault }
+ panelId={ panelId }
+ >
+
+
+ );
+}
diff --git a/packages/block-editor/src/components/dimensions-tool/index.js b/packages/block-editor/src/components/dimensions-tool/index.js
new file mode 100644
index 00000000000000..a81a399b7b79d8
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/index.js
@@ -0,0 +1,212 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import AspectRatioTool from './aspect-ratio-tool';
+import ScaleTool from './scale-tool';
+import WidthHeightTool from './width-height-tool';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} Dimensions
+ * @property {string} [width] CSS width property.
+ * @property {string} [height] CSS height property.
+ * @property {string} [scale] CSS object-fit property.
+ * @property {string} [aspectRatio] CSS aspect-ratio property.
+ */
+
+/**
+ * @callback DimensionsControlsOnChange
+ * @param {Dimensions} nextValue
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} DimensionsControlsProps
+ * @property {string} [panelId] ID of the panel that contains the controls.
+ * @property {Dimensions} [value] Current dimensions values.
+ * @property {DimensionsControlsOnChange} [onChange] Callback to update the dimensions values.
+ * @property {SelectControlProps[]} [aspectRatioOptions] Aspect ratio options.
+ * @property {SelectControlProps[]} [scaleOptions] Scale options.
+ * @property {WPUnitControlUnit[]} [unitsOptions] Units options.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {DimensionsControlsProps} props The component props.
+ *
+ * @return {WPElement} The dimensions controls.
+ */
+function DimensionsTool( {
+ panelId,
+ value = {},
+ onChange = () => {},
+ aspectRatioOptions, // Default options handled by AspectRatioTool.
+ defaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.
+ scaleOptions, // Default options handled by ScaleTool.
+ defaultScale = 'fill', // Match CSS default value for object-fit.
+ unitsOptions, // Default options handled by UnitControl.
+} ) {
+ // Coerce undefined and CSS default values to be null.
+ const width =
+ value.width === undefined || value.width === 'auto'
+ ? null
+ : value.width;
+ const height =
+ value.height === undefined || value.height === 'auto'
+ ? null
+ : value.height;
+ const aspectRatio =
+ value.aspectRatio === undefined || value.aspectRatio === 'auto'
+ ? null
+ : value.aspectRatio;
+ const scale =
+ value.scale === undefined || value.scale === 'fill'
+ ? null
+ : value.scale;
+
+ // Keep track of state internally, so when the value is cleared by means
+ // other than directly editing that field, it's easier to restore the
+ // previous value.
+ const [ lastScale, setLastScale ] = useState( scale );
+ const [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );
+
+ // 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
+ // dropdown to indicate that setting both the width and height is the same
+ // as a custom aspect ratio.
+ const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
+
+ const showScaleControl = aspectRatio || ( width && height );
+
+ return (
+ <>
+
{
+ const nextValue = { ...value };
+
+ // 'auto' is CSS default, so it gets treated as null.
+ nextAspectRatio =
+ nextAspectRatio === 'auto' ? null : nextAspectRatio;
+
+ setLastAspectRatio( nextAspectRatio );
+
+ // Update aspectRatio.
+ if ( ! nextAspectRatio ) {
+ delete nextValue.aspectRatio;
+ } else {
+ nextValue.aspectRatio = nextAspectRatio;
+ }
+
+ // Auto-update scale.
+ if ( ! nextAspectRatio ) {
+ delete nextValue.scale;
+ } else if ( lastScale ) {
+ nextValue.scale = lastScale;
+ } else {
+ nextValue.scale = defaultScale;
+ setLastScale( defaultScale );
+ }
+
+ // Auto-update width and height.
+ if ( nextAspectRatio && width && height ) {
+ delete nextValue.height;
+ }
+
+ onChange( nextValue );
+ } }
+ />
+ { showScaleControl && (
+ {
+ const nextValue = { ...value };
+
+ // 'fill' is CSS default, so it gets treated as null.
+ nextScale = nextScale === 'fill' ? null : nextScale;
+
+ setLastScale( nextScale );
+
+ // Update scale.
+ if ( ! nextScale ) {
+ delete nextValue.scale;
+ } else {
+ nextValue.scale = nextScale;
+ }
+
+ onChange( nextValue );
+ } }
+ />
+ ) }
+ {
+ const nextValue = { ...value };
+
+ // 'auto' is CSS default, so it gets treated as null.
+ nextWidth = nextWidth === 'auto' ? null : nextWidth;
+ nextHeight = nextHeight === 'auto' ? null : nextHeight;
+
+ // Update width.
+ if ( ! nextWidth ) {
+ delete nextValue.width;
+ } else {
+ nextValue.width = nextWidth;
+ }
+
+ // Update height.
+ if ( ! nextHeight ) {
+ delete nextValue.height;
+ } else {
+ nextValue.height = nextHeight;
+ }
+
+ // Auto-update aspectRatio.
+ if ( nextWidth && nextHeight ) {
+ delete nextValue.aspectRatio;
+ } else if ( lastAspectRatio ) {
+ nextValue.aspectRatio = lastAspectRatio;
+ } else {
+ // No setting defaultAspectRatio here, because
+ // aspectRatio is optional in this scenario,
+ // unlike scale.
+ }
+
+ // Auto-update scale.
+ if ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) {
+ delete nextValue.scale;
+ } else if ( lastScale ) {
+ nextValue.scale = lastScale;
+ } else {
+ nextValue.scale = defaultScale;
+ setLastScale( defaultScale );
+ }
+
+ onChange( nextValue );
+ } }
+ />
+
+ );
+}
+
+export default DimensionsTool;
diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
new file mode 100644
index 00000000000000..e39ee1d837f5c7
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalToolsPanelItem as ToolsPanelItem,
+ __experimentalToggleGroupControl as ToggleGroupControl,
+ __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * The descriptions are purposely made generic as object-fit could be used for
+ * any replaced element. Provide your own set of options if you need different
+ * help text or labels.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
+ *
+ * @type {SelectControlProps[]}
+ */
+const DEFAULT_SCALE_OPTIONS = [
+ {
+ value: 'fill',
+ label: _x( 'Fill', 'Scale option for dimensions control' ),
+ help: __( 'Fill the space by stretching the content.' ),
+ },
+ {
+ value: 'contain',
+ label: _x( 'Contain', 'Scale option for dimensions control' ),
+ help: __( 'Fit the content to the space without clipping.' ),
+ },
+ {
+ value: 'cover',
+ label: _x( 'Cover', 'Scale option for dimensions control' ),
+ help: __( "Fill the space by clipping what doesn't fit." ),
+ },
+ {
+ value: 'none',
+ label: _x( 'None', 'Scale option for dimensions control' ),
+ help: __(
+ 'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'
+ ),
+ },
+ {
+ value: 'scale-down',
+ label: _x( 'Scale down', 'Scale option for dimensions control' ),
+ help: __(
+ 'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'
+ ),
+ },
+];
+
+/**
+ * @callback ScaleToolPropsOnChange
+ * @param {string} nextValue New scale value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} ScaleToolProps
+ * @property {string} [panelId] ID of the panel that contains the controls.
+ * @property {string} [value] Current scale value.
+ * @property {ScaleToolPropsOnChange} [onChange] Callback to update the scale value.
+ * @property {SelectControlProps[]} [options] Scale options.
+ * @property {string} [defaultValue] Default scale value.
+ * @property {boolean} [showControl=true] Whether to show the control.
+ * @property {boolean} [isShownByDefault=true] Whether the tool panel is shown by default.
+ */
+
+/**
+ * A tool to select the CSS object-fit property for the image.
+ *
+ * @param {ScaleToolProps} props
+ *
+ * @return {import('@wordpress/element').WPElement} The scale tool.
+ */
+export default function ScaleTool( {
+ panelId,
+ value,
+ onChange,
+ options = DEFAULT_SCALE_OPTIONS,
+ defaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,
+ 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 ?? 'fill';
+
+ const scaleHelp = useMemo( () => {
+ return options.reduce( ( acc, option ) => {
+ acc[ option.value ] = option.help;
+ return acc;
+ }, {} );
+ }, [ options ] );
+
+ return (
+ displayValue !== defaultValue }
+ onDeselect={ () => onChange( defaultValue ) }
+ panelId={ panelId }
+ >
+
+ { options.map( ( option ) => (
+
+ ) ) }
+
+
+ );
+}
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.js
new file mode 100644
index 00000000000000..9b82404a23c255
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+ Panel,
+ __experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AspectRatioTool from '../aspect-ratio-tool';
+
+export default {
+ title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool',
+ component: AspectRatioTool,
+ argTypes: {
+ panelId: { control: { type: null } },
+ onChange: { action: 'changed' },
+ },
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+ const [ value, setValue ] = useState( undefined );
+ const resetAll = () => {
+ setValue( undefined );
+ onChangeProp( undefined );
+ };
+ return (
+
+
+ {
+ setValue( nextValue );
+ onChangeProp( nextValue );
+ } }
+ value={ value }
+ { ...props }
+ />
+
+
+ );
+};
+Default.args = {
+ panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.js b/packages/block-editor/src/components/dimensions-tool/stories/index.js
new file mode 100644
index 00000000000000..d9e1a82771282e
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/index.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+ Panel,
+ __experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DimensionsTool from '..';
+
+export default {
+ title: 'BlockEditor (Private APIs)/DimensionsTool',
+ component: DimensionsTool,
+ argTypes: {
+ panelId: { control: { type: null } },
+ onChange: { action: 'changed' },
+ },
+};
+
+const EMPTY_OBJECT = {};
+
+export const Default = ( { panelId, onChange, ...props } ) => {
+ const [ value, setValue ] = useState( EMPTY_OBJECT );
+ const resetAll = () => {
+ setValue( EMPTY_OBJECT );
+ onChange( EMPTY_OBJECT );
+ };
+ return (
+
+
+ {
+ setValue( nextValue );
+ onChange( nextValue );
+ } }
+ value={ value }
+ { ...props }
+ />
+
+
+ );
+};
+Default.args = {
+ panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.js
new file mode 100644
index 00000000000000..a5ff9a81b5304b
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+ Panel,
+ __experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScaleTool from '../scale-tool';
+
+export default {
+ title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool',
+ component: ScaleTool,
+ argTypes: {
+ panelId: { control: { type: null } },
+ onChange: { action: 'changed' },
+ },
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+ const [ value, setValue ] = useState( undefined );
+ const resetAll = () => {
+ setValue( undefined );
+ onChangeProp( undefined );
+ };
+ return (
+
+
+ {
+ setValue( nextValue );
+ onChangeProp( nextValue );
+ } }
+ value={ value }
+ { ...props }
+ />
+
+
+ );
+};
+Default.args = {
+ panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.js
new file mode 100644
index 00000000000000..4a9d9782ad16b7
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+ Panel,
+ __experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import WidthHeightTool from '../width-height-tool';
+
+export default {
+ title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool',
+ component: WidthHeightTool,
+ argTypes: {
+ panelId: { control: { type: null } },
+ onChange: { action: 'changed' },
+ },
+};
+
+const EMPTY_OBJECT = {};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+ const [ value, setValue ] = useState( EMPTY_OBJECT );
+ const resetAll = () => {
+ setValue( EMPTY_OBJECT );
+ onChangeProp( EMPTY_OBJECT );
+ };
+ return (
+
+
+ {
+ setValue( nextValue );
+ onChangeProp( nextValue );
+ } }
+ value={ value }
+ { ...props }
+ />
+
+
+ );
+};
+Default.args = {
+ panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/test/index.js b/packages/block-editor/src/components/dimensions-tool/test/index.js
new file mode 100644
index 00000000000000..6bfa2af057f7c6
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/test/index.js
@@ -0,0 +1,641 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DimensionsTool from '../';
+
+const EMPTY_OBJECT = {};
+
+function Example( { initialValue, onChange, ...props } ) {
+ const [ value, setValue ] = useState( initialValue );
+ const resetAll = () => {
+ setValue( EMPTY_OBJECT );
+ onChange( EMPTY_OBJECT );
+ };
+ return (
+
+ {
+ setValue( nextValue );
+ onChange( nextValue );
+ } }
+ defaultScale="cover"
+ defaultAspectRatio="auto"
+ value={ value }
+ { ...props }
+ />
+
+ );
+}
+
+// (xxxx) -> (yyyy) is a shorthand for categorizing the test cases by initial
+// state (xxxx) and final state (yyyy). Each digit represents whether or not the
+// value is set, in the order: [aspectRatio, scale, width, height].
+//
+// See https://github.com/WordPress/gutenberg/pull/51545#issuecomment-1601326289
+
+// Using expect( onChange.mock.calls ).toStrictEqual(...) so undefined
+// properties are treated differently from missing properties.
+
+describe( 'DimensionsTool', () => {
+ describe( 'updating aspectRatio', () => {
+ it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ // scale,
+ // width,
+ // height,
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, '16/9' );
+
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { aspectRatio: '16/9', scale: 'cover' } ],
+ ] );
+ } );
+
+ it( 'when starting with just height, setting aspectRatio also sets scale (0001) -> (1101)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ // scale,
+ // width,
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, '16/9' );
+
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { aspectRatio: '16/9', scale: 'cover', height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when starting with just width, setting aspectRatio also sets scale (0010) -> (1110)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ // scale,
+ width: '8px',
+ // height,
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, '16/9' );
+
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { aspectRatio: '16/9', scale: 'cover', width: '8px' } ],
+ ] );
+ } );
+
+ it( 'when starting with scale, width, and height, setting aspectRatio also clears height (0111) -> (1110)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ scale: 'cover',
+ width: '8px',
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, '16/9' );
+
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { aspectRatio: '16/9', scale: 'cover', width: '8px' } ],
+ ] );
+ } );
+
+ it( 'when starting with aspectRatio and scale, setting aspectRatio to "Original" also clears scale (1100) -> (0000)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ // width,
+ // height,
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, 'auto' );
+
+ expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+ expect( onChange.mock.calls ).toStrictEqual( [ [ {} ] ] );
+ } );
+
+ it( 'when starting with aspectRatio, scale, and height, setting aspectRatio to "Original" also clears scale (1101) -> (0001)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ // width,
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, 'auto' );
+
+ expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when starting with aspectRatio, scale, and width, setting aspectRatio to "Original" also clears scale (1110) -> (0010)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ width: '8px',
+ // height,
+ };
+
+ render(
+
+ );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ await user.selectOptions( aspectRatioSelect, 'auto' );
+
+ expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { width: '8px' } ],
+ ] );
+ } );
+ } );
+
+ describe( 'updating scale', () => {
+ // No custom interactions here. Things should just update normally.
+ } );
+
+ describe( 'updating dimensions', () => {
+ it( 'when starting with just height, setting width also sets scale (0001) -> (0111)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ // scale,
+ // width,
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const widthInput = screen.getByRole( 'spinbutton', {
+ name: 'Width',
+ } );
+
+ await user.type( widthInput, '8' );
+
+ expect( widthInput ).toHaveValue( 8 );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { scale: 'cover', width: '8px', height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when starting with just width, setting height also sets scale (0010) -> (0111)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ // scale,
+ width: '8px',
+ // height,
+ };
+
+ render(
+
+ );
+
+ const heightInput = screen.getByRole( 'spinbutton', {
+ name: 'Height',
+ } );
+
+ await user.type( heightInput, '6' );
+
+ expect( heightInput ).toHaveValue( 6 );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { scale: 'cover', width: '8px', height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when starting with scale, width, and height, clearing width also clears scale (0111) -> (0001)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ scale: 'cover',
+ width: '8px',
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const widthInput = screen.getByRole( 'spinbutton', {
+ name: 'Width',
+ } );
+
+ await user.clear( widthInput );
+
+ expect( widthInput ).toHaveValue( null );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when starting with scale, width, and height, clearing height also clears scale (0111) -> (0010)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ // aspectRatio,
+ scale: 'cover',
+ width: '8px',
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const heightInput = screen.getByRole( 'spinbutton', {
+ name: 'Height',
+ } );
+
+ await user.clear( heightInput );
+
+ expect( heightInput ).toHaveValue( null );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { width: '8px' } ],
+ ] );
+ } );
+
+ it( 'when starting with aspectRatio, scale, and height, setting width also clears aspectRatio (1101) -> (0111)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ // width,
+ height: '6px',
+ };
+
+ render(
+
+ );
+
+ const widthInput = screen.getByRole( 'spinbutton', {
+ name: 'Width',
+ } );
+
+ await user.type( widthInput, '8' );
+
+ expect( widthInput ).toHaveValue( 8 );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ expect( aspectRatioSelect ).toHaveValue( 'custom' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { scale: 'cover', width: '8px', height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when starting with aspectRatio, scale, and width, setting height also clears aspectRatio (1110) -> (0111)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const initialValue = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ width: '8px',
+ // height,
+ };
+
+ render(
+
+ );
+
+ const heightInput = screen.getByRole( 'spinbutton', {
+ name: 'Height',
+ } );
+
+ await user.type( heightInput, '6' );
+
+ expect( heightInput ).toHaveValue( 6 );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ expect( aspectRatioSelect ).toHaveValue( 'custom' );
+
+ const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+ name: 'Scale',
+ } );
+
+ expect( scaleRadioGroup ).toBeInTheDocument();
+
+ const scaleCoverRadio = screen.getByRole( 'radio', {
+ name: 'Cover',
+ } );
+
+ expect( scaleCoverRadio ).toBeChecked();
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { scale: 'cover', width: '8px', height: '6px' } ],
+ ] );
+ } );
+ } );
+
+ describe( 'internal component state', () => {
+ it( 'when aspect ratio is change to custom by setting width and height then removing a width value should return the original aspect ratio (1100) -> (1110) -> (0111) -> (1101)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const value = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ };
+
+ render( );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ const widthInput = screen.getByRole( 'spinbutton', {
+ name: 'Width',
+ } );
+
+ const heightInput = screen.getByRole( 'spinbutton', {
+ name: 'Height',
+ } );
+
+ await user.type( widthInput, '8' );
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ await user.type( heightInput, '6' );
+ expect( aspectRatioSelect ).toHaveValue( 'custom' );
+
+ await user.clear( widthInput, '' );
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { aspectRatio: '16/9', scale: 'cover', width: '8px' } ],
+ [ { scale: 'cover', width: '8px', height: '6px' } ],
+ [ { aspectRatio: '16/9', scale: 'cover', height: '6px' } ],
+ ] );
+ } );
+
+ it( 'when custom scale is set then aspect ratio is set to original and then aspect ratio is changed back (1100) -> (1100) -> (0000) -> (1100)', async () => {
+ const user = userEvent.setup();
+ const onChange = jest.fn();
+
+ const value = {
+ aspectRatio: '16/9',
+ scale: 'cover',
+ };
+
+ render( );
+
+ const aspectRatioSelect = screen.getByRole( 'combobox', {
+ name: 'Aspect ratio',
+ } );
+
+ const scaleContainRadio = screen.getByRole( 'radio', {
+ name: 'Contain',
+ } );
+
+ await user.click( scaleContainRadio );
+ expect( scaleContainRadio ).toBeChecked();
+
+ await user.selectOptions( aspectRatioSelect, 'auto' );
+ expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+ await user.selectOptions( aspectRatioSelect, '16/9' );
+ expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+ expect( onChange.mock.calls ).toStrictEqual( [
+ [ { aspectRatio: '16/9', scale: 'contain' } ],
+ [ {} ],
+ [
+ {
+ aspectRatio: '16/9',
+ scale: 'contain',
+ },
+ ],
+ ] );
+ } );
+ } );
+} );
diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
new file mode 100644
index 00000000000000..2c1db64954ff93
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalToolsPanelItem as ToolsPanelItem,
+ __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
+ grid-column: span 1;
+`;
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolValue
+ * @property {string} [width] Width CSS value.
+ * @property {string} [height] Height CSS value.
+ */
+
+/**
+ * @callback WidthHeightToolOnChange
+ * @param {WidthHeightToolValue} nextValue Next dimensions value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolProps
+ * @property {string} [panelId] ID of the panel that contains the controls.
+ * @property {WidthHeightToolValue} [value] Current dimensions values.
+ * @property {WidthHeightToolOnChange} [onChange] Callback to update the dimensions values.
+ * @property {WPUnitControlUnit[]} [units] Units options.
+ * @property {boolean} [isShownByDefault] Whether the panel is shown by default.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {WidthHeightToolProps} props The component props.
+ *
+ * @return {import('@wordpress/element').WPElement} The width and height tool.
+ */
+export default function WidthHeightTool( {
+ panelId,
+ value = {},
+ onChange = () => {},
+ units,
+ isShownByDefault = true,
+} ) {
+ // null, undefined, and 'auto' all represent the default value.
+ const width = value.width === 'auto' ? '' : value.width ?? '';
+ const height = value.height === 'auto' ? '' : value.height ?? '';
+
+ const onDimensionChange = ( dimension ) => ( nextDimension ) => {
+ const nextValue = { ...value };
+ // Empty strings or undefined may be passed and both represent removing the value.
+ if ( ! nextDimension ) {
+ delete nextValue[ dimension ];
+ } else {
+ nextValue[ dimension ] = nextDimension;
+ }
+ onChange( nextValue );
+ };
+
+ return (
+ <>
+ width !== '' }
+ onDeselect={ onDimensionChange( 'width' ) }
+ panelId={ panelId }
+ >
+
+
+ height !== '' }
+ onDeselect={ onDimensionChange( 'height' ) }
+ panelId={ panelId }
+ >
+
+
+
+ );
+}
diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
index c2e8a2cefe4773..5019da9c515d05 100644
--- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
@@ -54,7 +54,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
} }
value={ aspect }
aspectRatios={ [
- // All ratios should be mirrored in PostFeaturedImage in @wordpress/block-library
+ // All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
{
title: __( 'Original' ),
aspect: defaultAspect,
diff --git a/packages/block-editor/src/components/image-editor/use-save-image.js b/packages/block-editor/src/components/image-editor/use-save-image.js
index 2d1515ff0e3f0e..dbd95323225cb7 100644
--- a/packages/block-editor/src/components/image-editor/use-save-image.js
+++ b/packages/block-editor/src/components/image-editor/use-save-image.js
@@ -66,7 +66,6 @@ export default function useSaveImage( {
onSaveImage( {
id: response.id,
url: response.source_url,
- height: height && width ? width / aspect : undefined,
} );
} )
.catch( ( error ) => {
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index 46e87de60f2fc8..d929b129313938 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -8,6 +8,7 @@ import {
__experimentalNumberControl as NumberControl,
__experimentalHStack as HStack,
} from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';
/**
@@ -30,6 +31,11 @@ export default function ImageSizeControl( {
onChange,
onChangeImage = noop,
} ) {
+ deprecated( 'wp.blockEditor.__experimentalImageSizeControl', {
+ since: '6.3',
+ alternative:
+ 'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool',
+ } );
const { currentHeight, currentWidth, updateDimension, updateDimensions } =
useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 4803b9a0efebc4..41455c4ecf9704 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -292,7 +292,8 @@ function LinkControl( {
const shownUnlinkControl =
onRemove && value && ! isEditingLink && ! isCreatingPage;
- const showSettings = !! settings?.length;
+ const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
+ const showActions = isEditingLink && hasLinkValue;
// Only show text control once a URL value has been committed
// and it isn't just empty whitespace.
@@ -322,6 +323,18 @@ function LinkControl( {
'has-text-control': showTextControl,
} ) }
>
+ { showTextControl && (
+
+ ) }
- { showTextControl && (
-
- ) }
) }
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 4e30daaa96524b..d6023b9220d630 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
suggestionsQuery = {},
withURLSuggestion = true,
createSuggestionButtonText,
- useLabel = false,
+ hideLabelFromVision = false,
},
ref
) => {
@@ -120,7 +120,7 @@ const LinkControlSearchInput = forwardRef(
};
const inputClasses = classnames( className, {
- 'has-no-label': ! useLabel,
+ // 'has-no-label': ! hideLabelFromVision,
} );
return (
@@ -128,7 +128,8 @@ const LinkControlSearchInput = forwardRef(