Skip to content

Commit

Permalink
Media & Text: Replace the deprecated __experimentalImageSizeControl w…
Browse files Browse the repository at this point in the history 
…ith ResolutionTool (#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]>
  • Loading branch information
@carolinan @t-hamano @richtabor
4 people authored May 21, 2024
1 parent 6cc4da0 commit 68b2d30
Showing 1 changed file with 116 additions and 60 deletions.
176 changes: 116 additions & 60 deletions packages/block-library/src/media-text/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 ) =>
Expand Down Expand Up @@ -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( {
Expand Down

1 comment on commit 68b2d30

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 68b2d30.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9168592680
📝 Reported issues:

Please sign in to comment.