Media & Text: Replace the deprecated __experimentalImageSizeControl w…

…ith ResolutionTool (WordPress#57540)

Media & Text: Replace __experimentalImageSizeControl with ResolutionTool.
Use the ToolsPanel and ToolsPanelItems, allowing settings to be reset.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: richtabor <[email protected]>

packages/block-library/src/media-text/edit.js

@@ -16,18 +16,19 @@ import {
  InspectorControls,
  useBlockProps,
  __experimentalImageURLInputUI as ImageURLInputUI,
- __experimentalImageSizeControl as ImageSizeControl,
  store as blockEditorStore,
  useBlockEditingMode,
+ privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
- PanelBody,
  RangeControl,
  TextareaControl,
  ToggleControl,
  ToolbarButton,
  ExternalLink,
  FocalPointPicker,
+ __experimentalToolsPanel as ToolsPanel,
+ __experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
@@ -44,6 +45,10 @@ import {
  LINK_DESTINATION_ATTACHMENT,
  TEMPLATE,
 } from './constants';
+import { unlock } from '../lock-unlock';
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
 // this limits the resize to a safe zone to avoid making broken layouts
 const applyWidthConstraints = ( width ) =>
@@ -267,86 +272,137 @@ function MediaTextEdit( {
  };
 
  const mediaTextGeneralSettings = (
- <PanelBody title={ __( 'Settings' ) }>
- <RangeControl
- __nextHasNoMarginBottom
- __next40pxDefaultSize
+ <ToolsPanel
+ label={ __( 'Settings' ) }
+ resetAll={ () => {
+ setAttributes( {
+ isStackedOnMobile: true,
+ imageFill: false,
+ mediaAlt: '',
+ focalPoint: undefined,
+ mediaWidth: 50,
+ mediaSizeSlug: undefined,
+ } );
+ } }
+ dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+ >
+ <ToolsPanelItem
  label={ __( 'Media width' ) }
- value={ temporaryMediaWidth || mediaWidth }
- onChange={ commitWidthChange }
- min={ WIDTH_CONSTRAINT_PERCENTAGE }
- max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
- />
- <ToggleControl
- __nextHasNoMarginBottom
+ isShownByDefault
+ hasValue={ () => mediaWidth !== 50 }
+ onDeselect={ () => setAttributes( { mediaWidth: 50 } ) }
+ >
+ <RangeControl
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
+ label={ __( 'Media width' ) }
+ value={ temporaryMediaWidth || mediaWidth }
+ onChange={ commitWidthChange }
+ min={ WIDTH_CONSTRAINT_PERCENTAGE }
+ max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
  label={ __( 'Stack on mobile' ) }
- checked={ isStackedOnMobile }
- onChange={ () =>
- setAttributes( {
- isStackedOnMobile: ! isStackedOnMobile,
- } )
+ isShownByDefault
+ hasValue={ () => ! isStackedOnMobile }
+ onDeselect={ () =>
+ setAttributes( { isStackedOnMobile: true } )
  }
- />
- { mediaType === 'image' && (
+ >
  <ToggleControl
  __nextHasNoMarginBottom
- label={ __( 'Crop image to fill' ) }
- checked={ !! imageFill }
+ label={ __( 'Stack on mobile' ) }
+ checked={ isStackedOnMobile }
  onChange={ () =>
  setAttributes( {
- imageFill: ! imageFill,
+ isStackedOnMobile: ! isStackedOnMobile,
  } )
  }
  />
+ </ToolsPanelItem>
+ { mediaType === 'image' && (
+ <ToolsPanelItem
+ label={ __( 'Crop image to fill' ) }
+ isShownByDefault
+ hasValue={ () => !! imageFill }
+ onDeselect={ () => setAttributes( { imageFill: false } ) }
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Crop image to fill' ) }
+ checked={ !! imageFill }
+ onChange={ () =>
+ setAttributes( {
+ imageFill: ! imageFill,
+ } )
+ }
+ />
+ </ToolsPanelItem>
  ) }
  { imageFill &&
  ( mediaUrl || featuredImageURL ) &&
  mediaType === 'image' && (
- <FocalPointPicker
- __nextHasNoMarginBottom
+ <ToolsPanelItem
  label={ __( 'Focal point' ) }
- url={
-  useFeaturedImage && featuredImageURL
-  ? featuredImageURL
-  : mediaUrl
+ isShownByDefault
+ hasValue={ () => !! focalPoint }
+ onDeselect={ () =>
+ setAttributes( { focalPoint: undefined } )
  }
- value={ focalPoint }
- onChange={ ( value ) =>
- setAttributes( { focalPoint: value } )
- }
- onDragStart={ imperativeFocalPointPreview }
- onDrag={ imperativeFocalPointPreview }
- />
+ >
+ <FocalPointPicker
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
+ label={ __( 'Focal point' ) }
+ url={
+ useFeaturedImage && featuredImageURL
+ ? featuredImageURL
+ : mediaUrl
+ }
+ value={ focalPoint }
+ onChange={ ( value ) =>
+ setAttributes( { focalPoint: value } )
+ }
+ onDragStart={ imperativeFocalPointPreview }
+ onDrag={ imperativeFocalPointPreview }
+ />
+ </ToolsPanelItem>
  ) }
  { mediaType === 'image' && mediaUrl && ! useFeaturedImage && (
- <TextareaControl
- __nextHasNoMarginBottom
+ <ToolsPanelItem
  label={ __( 'Alternative text' ) }
- value={ mediaAlt }
- onChange={ onMediaAltChange }
- help={
- <>
- <ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
- { __( 'Describe the purpose of the image.' ) }
- </ExternalLink>
- <br />
- { __( 'Leave empty if decorative.' ) }
- </>
- }
- />
+ isShownByDefault
+ hasValue={ () => !! mediaAlt }
+ onDeselect={ () => setAttributes( { mediaAlt: '' } ) }
+ >
+ <TextareaControl
+ __nextHasNoMarginBottom
+ label={ __( 'Alternative text' ) }
+ value={ mediaAlt }
+ onChange={ onMediaAltChange }
+ help={
+ <>
+ <ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+ { __(
+ 'Describe the purpose of the image.'
+ ) }
+ </ExternalLink>
+ <br />
+ { __( 'Leave empty if decorative.' ) }
+ </>
+ }
+ />
+ </ToolsPanelItem>
  ) }
- { mediaType === 'image' && (
- <ImageSizeControl
- onChangeImage={ updateImage }
- slug={ mediaSizeSlug }
- imageSizeOptions={ imageSizeOptions }
- isResizable={ false }
- imageSizeHelp={ __(
- 'Select the size of the source image.'
- ) }
+ { mediaType === 'image' && ! useFeaturedImage && (
+ <ResolutionTool
+ value={ mediaSizeSlug }
+ options={ imageSizeOptions }
+ onChange={ updateImage }
  />
  ) }
- </PanelBody>
+ </ToolsPanel>
  );
 
  const blockProps = useBlockProps( {