Skip to content

Commit

Permalink
Improve the block editing UX
Browse files Browse the repository at this point in the history
- Label the None icon setting
- Add help text to block settings
- Remove button focus styles
- Add border support to the group.
  • Loading branch information
jffng committed Aug 7, 2024
1 parent b34d875 commit 15f408c
Show file tree
Hide file tree
Showing 7 changed files with 23 additions and 6 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ A single accordion that displays a header and expandable content. ([Source](http
- **Category:** design
- **Parent:** core/accordion-group
- **Allowed Blocks:** core/accordion-trigger, core/accordion-content
- **Supports:** align (full, wide), border, color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
- **Supports:** align (full, wide), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
- **Attributes:** openByDefault

## Trigger
Expand Down
12 changes: 12 additions & 0 deletions packages/block-library/src/accordion-group/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,18 @@
"background": true,
"gradient": true
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
"spacing": {
"padding": true,
"margin": [ "top", "bottom" ],
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/accordion-group/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,17 @@ export default function Edit( { attributes: { autoclose }, setAttributes } ) {
<PanelBody title={ __( 'Settings' ) } initialOpen>
<ToggleControl
isBlock
label={ __( 'Autoclose' ) }
__nextHasNoMarginBottom
label={ __( 'Close automatically' ) }
onChange={ ( value ) => {
setAttributes( {
autoclose: value,
} );
} }
checked={ autoclose }
help={ __(
'Clicking one accordion section automatically closes all other open sections.'
) }
/>
</PanelBody>
</InspectorControls>
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/accordion-group/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
flex-direction: row-reverse;
}

.accordion-item__toggle:focus,
.accordion-item__toggle:focus-visible {
outline: 2px solid -webkit-focus-ring-color;
outline-offset: 2px;
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/accordion-item/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"background": true,
"gradient": true
},
"border": true,
"interactivity": true,
"spacing": {
"margin": [ "top", "bottom" ],
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/accordion-item/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export default function Edit( {
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
label={ __( 'Open by default' ) }
__nextHasNoMarginBottom
onChange={ ( value ) => {
setAttributes( {
openByDefault: value,
Expand All @@ -97,6 +98,9 @@ export default function Edit( {
}
} }
checked={ openByDefault }
help={ __(
'Accordion content will be displayed by default.'
) }
/>
</PanelBody>
</InspectorControls>
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/accordion-trigger/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,8 @@ export default function Edit( { attributes, setAttributes } ) {
icon={ chevronRight }
value="chevronRight"
/>
<ToggleGroupControlOptionIcon
<ToggleGroupControlOption
label="None"
icon={ false }
value={ false }
/>
</ToggleGroupControl>
Expand Down

0 comments on commit 15f408c

Please sign in to comment.