Skip to content

Commit

Permalink
feat: migrate to ToolsPanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mayank-Tripathi32
Mayank-Tripathi32 committed Dec 13, 2024
1 parent 8a10c75 commit a67bc11
Showing 1 changed file with 144 additions and 61 deletions.
205 changes: 144 additions & 61 deletions packages/block-library/src/gallery/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import clsx from 'clsx';
*/
import {
BaseControl,
PanelBody,
SelectControl,
ToggleControl,
RangeControl,
Spinner,
MenuGroup,
MenuItem,
ToolbarDropdownMenu,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import {
store as blockEditorStore,
Expand Down Expand Up @@ -560,84 +561,166 @@ export default function GalleryEdit( props ) {
return (
<>
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
columns: undefined,
imageCrop: true,
randomOrder: false,
linkTarget: undefined,
linkTo: 'none',
sizeSlug: 'large',
} );
} }
>
{ images.length > 1 && (
<RangeControl
__nextHasNoMarginBottom
<ToolsPanelItem
isShownByDefault
label={ __( 'Columns' ) }
value={
columns
? columns
: defaultColumnsNumber( images.length )
hasValue={ () => !! columns }
onDeselect={ () =>
setAttributes( { columns: undefined } )
}
onChange={ setColumnsNumber }
min={ 1 }
max={ Math.min( MAX_COLUMNS, images.length ) }
{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
required
__next40pxDefaultSize
/>
>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={
columns
? columns
: defaultColumnsNumber( images.length )
}
onChange={ setColumnsNumber }
min={ 1 }
max={ Math.min( MAX_COLUMNS, images.length ) }
{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
required
__next40pxDefaultSize
/>
</ToolsPanelItem>
) }

{ imageSizeOptions?.length > 0 && (
<SelectControl
__nextHasNoMarginBottom
<ToolsPanelItem
isShownByDefault
label={ __( 'Resolution' ) }
help={ __(
'Select the size of the source images.'
) }
value={ sizeSlug }
options={ imageSizeOptions }
onChange={ updateImagesSize }
hideCancelButton
size="__unstable-large"
/>
hasValue={ () => ! ( sizeSlug === 'large' ) }
onDeselect={ () =>
// Pass the default value to the update function to reset the size.
setAttributes( { sizeSlug: 'large' } )
}
>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Resolution' ) }
help={ __(
'Select the size of the source images.'
) }
value={ sizeSlug }
options={ imageSizeOptions }
onChange={ updateImagesSize }
hideCancelButton
size="__unstable-large"
/>
</ToolsPanelItem>
) }

{ Platform.isNative ? (
<SelectControl
__nextHasNoMarginBottom
<ToolsPanelItem
isShownByDefault
label={ __( 'Link' ) }
value={ linkTo }
onChange={ setLinkTo }
options={ linkOptions }
hideCancelButton
size="__unstable-large"
/>
hasValue={ () => !! linkTo }
onDeselect={ () => {
setAttributes( { linkTo: undefined } );
} }
>
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Link' ) }
value={ linkTo }
onChange={ setLinkTo }
options={ linkOptions }
hideCancelButton
size="__unstable-large"
/>
</ToolsPanelItem>
) : null }
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Crop images to fit' ) }
checked={ !! imageCrop }
onChange={ toggleImageCrop }
/>
<ToggleControl
__nextHasNoMarginBottom

<ToolsPanelItem
isShownByDefault
label={ __( 'Crop Image' ) }
hasValue={ () => ! imageCrop }
onDeselect={ () =>
setAttributes( { imageCrop: true } )
}
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Crop images to fit' ) }
checked={ !! imageCrop }
onChange={ toggleImageCrop }
/>
</ToolsPanelItem>

<ToolsPanelItem
isShownByDefault
label={ __( 'Randomize order' ) }
checked={ !! randomOrder }
onChange={ toggleRandomOrder }
/>
{ hasLinkTo && (
hasValue={ () => !! randomOrder }
onDeselect={ () =>
setAttributes( { randomOrder: false } )
}
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open images in new tab' ) }
checked={ linkTarget === '_blank' }
onChange={ toggleOpenInNewTab }
label={ __( 'Randomize order' ) }
checked={ !! randomOrder }
onChange={ toggleRandomOrder }
/>
</ToolsPanelItem>

{ hasLinkTo && (
<ToolsPanelItem
isShownByDefault
label={ __( 'Open images in new tab' ) }
hasValue={ () => !! linkTarget }
onDeselect={ () => {
setAttributes( { linkTarget: undefined } );
} }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Open images in new tab' ) }
checked={ linkTarget === '_blank' }
onChange={ toggleOpenInNewTab }
/>
</ToolsPanelItem>
) }

{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
<BaseControl
className="gallery-image-sizes"
__nextHasNoMarginBottom
<ToolsPanelItem
label={ __( 'Resolution' ) }
isShownByDefault
hasValue={ () => ! ( sizeSlug === 'large' ) }
onDeselect={ () => {
setAttributes( { sizeSlug: 'large' } );
} }
>
<BaseControl.VisualLabel>
{ __( 'Resolution' ) }
</BaseControl.VisualLabel>
<View className="gallery-image-sizes__loading">
<Spinner />
{ __( 'Loading options…' ) }
</View>
</BaseControl>
<BaseControl
className="gallery-image-sizes"
__nextHasNoMarginBottom
>
<BaseControl.VisualLabel>
{ __( 'Resolution' ) }
</BaseControl.VisualLabel>
<View className="gallery-image-sizes__loading">
<Spinner />
{ __( 'Loading options…' ) }
</View>
</BaseControl>
</ToolsPanelItem>
) }
</PanelBody>
</ToolsPanel>
</InspectorControls>
{ Platform.isWeb ? (
<BlockControls group="block">
Expand Down

0 comments on commit a67bc11

Please sign in to comment.