Skip to content

Accordion: Refactor settings panel to use ToolsPanel #71225

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

Merged
t-hamano merged 3 commits into from
Aug 16, 2025
Merged

Accordion: Refactor settings panel to use ToolsPanel #71225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56299ac
refactor: replace PanelBody with ToolsPanel in Accordions block
R1shabh-Gupta Aug 15, 2025
76c825c
refactor: replace PanelBody with ToolsPanel in Accordion Item block
R1shabh-Gupta Aug 15, 2025
989331a
i18n: wrap ToggleGroupControlOption labels with __() for translation
R1shabh-Gupta Aug 16, 2025
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
69 changes: 54 additions & 15 deletions packages/block-library/src/accordion-item/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,28 @@ import {
} from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { PanelBody, ToggleControl } from '@wordpress/components';
import {
ToggleControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* Internal dependencies
*/
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

export default function Edit( {
attributes: { openByDefault },
clientId,
setAttributes,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const { isSelected, getBlockOrder } = useSelect(
( select ) => {
const {
Expand Down Expand Up @@ -83,26 +94,54 @@ export default function Edit( {
return (
<>
<InspectorControls key="setting">
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
label={ __( 'Open by default' ) }
__nextHasNoMarginBottom
onChange={ ( value ) => {
setAttributes( {
openByDefault: value,
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( { openByDefault: false } );
if ( contentBlockClientId ) {
updateBlockAttributes( contentBlockClientId, {
openByDefault: false,
} );
}
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Open by default' ) }
isShownByDefault
hasValue={ () => !! openByDefault }
onDeselect={ () => {
setAttributes( { openByDefault: false } );
if ( contentBlockClientId ) {
updateBlockAttributes( contentBlockClientId, {
openByDefault: value,
openByDefault: false,
} );
}
} }
checked={ openByDefault }
help={ __(
'Accordion content will be displayed by default.'
) }
/>
</PanelBody>
>
<ToggleControl
label={ __( 'Open by default' ) }
__nextHasNoMarginBottom
onChange={ ( value ) => {
setAttributes( {
openByDefault: value,
} );
if ( contentBlockClientId ) {
updateBlockAttributes(
contentBlockClientId,
{
openByDefault: value,
}
);
}
} }
checked={ openByDefault }
help={ __(
'Accordion content will be displayed by default.'
) }
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
<div { ...innerBlocksProps } />
</>
Expand Down
128 changes: 88 additions & 40 deletions packages/block-library/src/accordions/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,18 @@ import {
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import {
PanelBody,
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

const ACCORDION_BLOCK_NAME = 'core/accordion-item';
const ACCORDION_BLOCK = {
name: ACCORDION_BLOCK_NAME,
Expand All @@ -24,6 +30,7 @@ export default function Edit( {
setAttributes,
} ) {
const blockProps = useBlockProps();
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
Expand All @@ -35,49 +42,90 @@ export default function Edit( {
return (
<>
<InspectorControls key="setting">
<PanelBody title={ __( 'Settings' ) } initialOpen>
<ToggleControl
isBlock
__nextHasNoMarginBottom
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
autoclose: false,
showIcon: true,
iconPosition: 'right',
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Auto-close' ) }
onChange={ ( value ) => {
setAttributes( {
autoclose: value,
} );
} }
checked={ autoclose }
help={ __(
'Automatically close accordions when a new one is opened.'
) }
/>
<ToggleControl
isBlock
__nextHasNoMarginBottom
isShownByDefault
hasValue={ () => !! autoclose }
onDeselect={ () =>
setAttributes( { autoclose: false } )
}
>
<ToggleControl
isBlock
__nextHasNoMarginBottom
label={ __( 'Auto-close' ) }
onChange={ ( value ) => {
setAttributes( {
autoclose: value,
} );
} }
checked={ autoclose }
help={ __(
'Automatically close accordions when a new one is opened.'
) }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Show icon' ) }
onChange={ ( value ) => {
setAttributes( {
showIcon: value,
} );
} }
checked={ showIcon }
help={ __(
'Display a plus icon next to the accordion header.'
) }
/>
<ToggleGroupControl
__nextHasNoMarginBottom
__next40pxDefaultSize
isBlock
isShownByDefault
hasValue={ () => ! showIcon }
onDeselect={ () => setAttributes( { showIcon: true } ) }
>
<ToggleControl
isBlock
__nextHasNoMarginBottom
label={ __( 'Show icon' ) }
onChange={ ( value ) => {
setAttributes( {
showIcon: value,
} );
} }
checked={ showIcon }
help={ __(
'Display a plus icon next to the accordion header.'
) }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Icon Position' ) }
value={ iconPosition }
onChange={ ( value ) => {
setAttributes( { iconPosition: value } );
} }
isShownByDefault
hasValue={ () => iconPosition !== 'right' }
onDeselect={ () =>
setAttributes( { iconPosition: 'right' } )
}
>
<ToggleGroupControlOption label="Left" value="left" />
<ToggleGroupControlOption label="Right" value="right" />
</ToggleGroupControl>
</PanelBody>
<ToggleGroupControl
__nextHasNoMarginBottom
__next40pxDefaultSize
isBlock
label={ __( 'Icon Position' ) }
value={ iconPosition }
onChange={ ( value ) => {
setAttributes( { iconPosition: value } );
} }
>
<ToggleGroupControlOption
label={ __( 'Left' ) }
value="left"
/>
<ToggleGroupControlOption
label={ __( 'Right' ) }
value="right"
/>
</ToggleGroupControl>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
<div { ...innerBlocksProps } />
</>
Expand Down
Loading