Skip to content

Commit

Permalink
Refactor "Settings" panel of Archives block to use ToolsPanel instead…
Browse files Browse the repository at this point in the history 
… of PanelBody (#67841)

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: fabiankaegy < [email protected]>
  • Loading branch information
@im3dabasia @fabiankaegy
3 people authored Dec 12, 2024
1 parent 9437f7e commit b74283b
Showing 1 changed file with 86 additions and 36 deletions.
122 changes: 86 additions & 36 deletions packages/block-library/src/archives/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
* WordPress dependencies
*/
import {
PanelBody,
ToggleControl,
SelectControl,
Disabled,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
Expand All @@ -17,55 +18,104 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
return (
<>
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
__nextHasNoMarginBottom
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
displayAsDropdown: false,
showLabel: false,
showPostCounts: false,
type: 'monthly',
} );
} }
>
<ToolsPanelItem
label={ __( 'Display as dropdown' ) }
checked={ displayAsDropdown }
onChange={ () =>
setAttributes( {
displayAsDropdown: ! displayAsDropdown,
} )
isShownByDefault
hasValue={ () => displayAsDropdown }
onDeselect={ () =>
setAttributes( { displayAsDropdown: false } )
}
/>
{ displayAsDropdown && (
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show label' ) }
checked={ showLabel }
label={ __( 'Display as dropdown' ) }
checked={ displayAsDropdown }
onChange={ () =>
setAttributes( {
showLabel: ! showLabel,
displayAsDropdown: ! displayAsDropdown,
} )
}
/>
</ToolsPanelItem>

{ displayAsDropdown && (
<ToolsPanelItem
label={ __( 'Show label' ) }
isShownByDefault
hasValue={ () => showLabel }
onDeselect={ () =>
setAttributes( { showLabel: false } )
}
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show label' ) }
checked={ showLabel }
onChange={ () =>
setAttributes( {
showLabel: ! showLabel,
} )
}
/>
</ToolsPanelItem>
) }
<ToggleControl
__nextHasNoMarginBottom

<ToolsPanelItem
label={ __( 'Show post counts' ) }
checked={ showPostCounts }
onChange={ () =>
setAttributes( {
showPostCounts: ! showPostCounts,
} )
isShownByDefault
hasValue={ () => showPostCounts }
onDeselect={ () =>
setAttributes( { showPostCounts: false } )
}
/>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show post counts' ) }
checked={ showPostCounts }
onChange={ () =>
setAttributes( {
showPostCounts: ! showPostCounts,
} )
}
/>
</ToolsPanelItem>

<ToolsPanelItem
label={ __( 'Group by' ) }
options={ [
{ label: __( 'Year' ), value: 'yearly' },
{ label: __( 'Month' ), value: 'monthly' },
{ label: __( 'Week' ), value: 'weekly' },
{ label: __( 'Day' ), value: 'daily' },
] }
value={ type }
onChange={ ( value ) =>
setAttributes( { type: value } )
isShownByDefault
hasValue={ () => !! type }
onDeselect={ () =>
setAttributes( { type: 'monthly' } )
}
/>
</PanelBody>
>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Group by' ) }
options={ [
{ label: __( 'Year' ), value: 'yearly' },
{ label: __( 'Month' ), value: 'monthly' },
{ label: __( 'Week' ), value: 'weekly' },
{ label: __( 'Day' ), value: 'daily' },
] }
value={ type }
onChange={ ( value ) =>
setAttributes( { type: value } )
}
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
<div { ...useBlockProps() }>
<Disabled>
Expand Down

1 comment on commit b74283b

@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 b74283b.
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/12302759755
📝 Reported issues:

Please sign in to comment.