Skip to content

Commit c307ce3

Browse files
R1shabh-GuptaR1shabh-Guptat-hamano
authored
Accordion: Refactor settings panel to use ToolsPanel (#71225)
* refactor: replace PanelBody with ToolsPanel in Accordions block * refactor: replace PanelBody with ToolsPanel in Accordion Item block * i18n: wrap ToggleGroupControlOption labels with __() for translation Co-authored-by: R1shabh-Gupta <[email protected]> Co-authored-by: t-hamano <[email protected]>
1 parent ccc2357 commit c307ce3

File tree

2 files changed

+142
-55
lines changed

2 files changed

+142
-55
lines changed

‎packages/block-library/src/accordion-item/edit.js

Lines changed: 54 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,28 @@ import {
1010
} from '@wordpress/block-editor';
1111
import { useDispatch, useSelect } from '@wordpress/data';
1212
import { useEffect } from '@wordpress/element';
13-
import { PanelBody, ToggleControl } from '@wordpress/components';
13+
import {
14+
ToggleControl,
15+
__experimentalToolsPanel as ToolsPanel,
16+
__experimentalToolsPanelItem as ToolsPanelItem,
17+
} from '@wordpress/components';
1418
/**
1519
* External dependencies
1620
*/
1721
import clsx from 'clsx';
1822

23+
/**
24+
* Internal dependencies
25+
*/
26+
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
27+
1928
export default function Edit( {
2029
attributes: { openByDefault },
2130
clientId,
2231
setAttributes,
2332
} ) {
33+
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
34+
2435
const { isSelected, getBlockOrder } = useSelect(
2536
( select ) => {
2637
const {
@@ -83,26 +94,54 @@ export default function Edit( {
8394
return (
8495
<>
8596
<InspectorControls key="setting">
86-
<PanelBody title={ __( 'Settings' ) }>
87-
<ToggleControl
88-
label={ __( 'Open by default' ) }
89-
__nextHasNoMarginBottom
90-
onChange={ ( value ) => {
91-
setAttributes( {
92-
openByDefault: value,
97+
<ToolsPanel
98+
label={ __( 'Settings' ) }
99+
resetAll={ () => {
100+
setAttributes( { openByDefault: false } );
101+
if ( contentBlockClientId ) {
102+
updateBlockAttributes( contentBlockClientId, {
103+
openByDefault: false,
93104
} );
105+
}
106+
} }
107+
dropdownMenuProps={ dropdownMenuProps }
108+
>
109+
<ToolsPanelItem
110+
label={ __( 'Open by default' ) }
111+
isShownByDefault
112+
hasValue={ () => !! openByDefault }
113+
onDeselect={ () => {
114+
setAttributes( { openByDefault: false } );
94115
if ( contentBlockClientId ) {
95116
updateBlockAttributes( contentBlockClientId, {
96-
openByDefault: value,
117+
openByDefault: false,
97118
} );
98119
}
99120
} }
100-
checked={ openByDefault }
101-
help={ __(
102-
'Accordion content will be displayed by default.'
103-
) }
104-
/>
105-
</PanelBody>
121+
>
122+
<ToggleControl
123+
label={ __( 'Open by default' ) }
124+
__nextHasNoMarginBottom
125+
onChange={ ( value ) => {
126+
setAttributes( {
127+
openByDefault: value,
128+
} );
129+
if ( contentBlockClientId ) {
130+
updateBlockAttributes(
131+
contentBlockClientId,
132+
{
133+
openByDefault: value,
134+
}
135+
);
136+
}
137+
} }
138+
checked={ openByDefault }
139+
help={ __(
140+
'Accordion content will be displayed by default.'
141+
) }
142+
/>
143+
</ToolsPanelItem>
144+
</ToolsPanel>
106145
</InspectorControls>
107146
<div { ...innerBlocksProps } />
108147
</>

‎packages/block-library/src/accordions/edit.js

Lines changed: 88 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,18 @@ import {
88
} from '@wordpress/block-editor';
99
import { __ } from '@wordpress/i18n';
1010
import {
11-
PanelBody,
1211
ToggleControl,
1312
__experimentalToggleGroupControl as ToggleGroupControl,
1413
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
14+
__experimentalToolsPanel as ToolsPanel,
15+
__experimentalToolsPanelItem as ToolsPanelItem,
1516
} from '@wordpress/components';
1617

18+
/**
19+
* Internal dependencies
20+
*/
21+
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
22+
1723
const ACCORDION_BLOCK_NAME = 'core/accordion-item';
1824
const ACCORDION_BLOCK = {
1925
name: ACCORDION_BLOCK_NAME,
@@ -24,6 +30,7 @@ export default function Edit( {
2430
setAttributes,
2531
} ) {
2632
const blockProps = useBlockProps();
33+
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
2734

2835
const innerBlocksProps = useInnerBlocksProps( blockProps, {
2936
template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
@@ -35,49 +42,90 @@ export default function Edit( {
3542
return (
3643
<>
3744
<InspectorControls key="setting">
38-
<PanelBody title={ __( 'Settings' ) } initialOpen>
39-
<ToggleControl
40-
isBlock
41-
__nextHasNoMarginBottom
45+
<ToolsPanel
46+
label={ __( 'Settings' ) }
47+
resetAll={ () => {
48+
setAttributes( {
49+
autoclose: false,
50+
showIcon: true,
51+
iconPosition: 'right',
52+
} );
53+
} }
54+
dropdownMenuProps={ dropdownMenuProps }
55+
>
56+
<ToolsPanelItem
4257
label={ __( 'Auto-close' ) }
43-
onChange={ ( value ) => {
44-
setAttributes( {
45-
autoclose: value,
46-
} );
47-
} }
48-
checked={ autoclose }
49-
help={ __(
50-
'Automatically close accordions when a new one is opened.'
51-
) }
52-
/>
53-
<ToggleControl
54-
isBlock
55-
__nextHasNoMarginBottom
58+
isShownByDefault
59+
hasValue={ () => !! autoclose }
60+
onDeselect={ () =>
61+
setAttributes( { autoclose: false } )
62+
}
63+
>
64+
<ToggleControl
65+
isBlock
66+
__nextHasNoMarginBottom
67+
label={ __( 'Auto-close' ) }
68+
onChange={ ( value ) => {
69+
setAttributes( {
70+
autoclose: value,
71+
} );
72+
} }
73+
checked={ autoclose }
74+
help={ __(
75+
'Automatically close accordions when a new one is opened.'
76+
) }
77+
/>
78+
</ToolsPanelItem>
79+
<ToolsPanelItem
5680
label={ __( 'Show icon' ) }
57-
onChange={ ( value ) => {
58-
setAttributes( {
59-
showIcon: value,
60-
} );
61-
} }
62-
checked={ showIcon }
63-
help={ __(
64-
'Display a plus icon next to the accordion header.'
65-
) }
66-
/>
67-
<ToggleGroupControl
68-
__nextHasNoMarginBottom
69-
__next40pxDefaultSize
70-
isBlock
81+
isShownByDefault
82+
hasValue={ () => ! showIcon }
83+
onDeselect={ () => setAttributes( { showIcon: true } ) }
84+
>
85+
<ToggleControl
86+
isBlock
87+
__nextHasNoMarginBottom
88+
label={ __( 'Show icon' ) }
89+
onChange={ ( value ) => {
90+
setAttributes( {
91+
showIcon: value,
92+
} );
93+
} }
94+
checked={ showIcon }
95+
help={ __(
96+
'Display a plus icon next to the accordion header.'
97+
) }
98+
/>
99+
</ToolsPanelItem>
100+
<ToolsPanelItem
71101
label={ __( 'Icon Position' ) }
72-
value={ iconPosition }
73-
onChange={ ( value ) => {
74-
setAttributes( { iconPosition: value } );
75-
} }
102+
isShownByDefault
103+
hasValue={ () => iconPosition !== 'right' }
104+
onDeselect={ () =>
105+
setAttributes( { iconPosition: 'right' } )
106+
}
76107
>
77-
<ToggleGroupControlOption label="Left" value="left" />
78-
<ToggleGroupControlOption label="Right" value="right" />
79-
</ToggleGroupControl>
80-
</PanelBody>
108+
<ToggleGroupControl
109+
__nextHasNoMarginBottom
110+
__next40pxDefaultSize
111+
isBlock
112+
label={ __( 'Icon Position' ) }
113+
value={ iconPosition }
114+
onChange={ ( value ) => {
115+
setAttributes( { iconPosition: value } );
116+
} }
117+
>
118+
<ToggleGroupControlOption
119+
label={ __( 'Left' ) }
120+
value="left"
121+
/>
122+
<ToggleGroupControlOption
123+
label={ __( 'Right' ) }
124+
value="right"
125+
/>
126+
</ToggleGroupControl>
127+
</ToolsPanelItem>
128+
</ToolsPanel>
81129
</InspectorControls>
82130
<div { ...innerBlocksProps } />
83131
</>

0 commit comments

Comments
 (0)