Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gallery block: Refactor "Settings" panel to use Toolspanel #67957

Closed
wants to merge 1 commit into from
+144 −61
Closed

Gallery block: Refactor "Settings" panel to use Toolspanel #67957

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 144 additions & 61 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
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
Loading