Improve the block editing UX

- Label the None icon setting - Add help text to block settings - Remove button focus styles - Add border support to the group.
WordPress · Aug 7, 2024 · 15f408c · 15f408c
1 parent b34d875
commit 15f408c
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 6 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -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

diff --git a/packages/block-library/src/accordion-group/block.json b/packages/block-library/src/accordion-group/block.json
@@ -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" ],

diff --git a/packages/block-library/src/accordion-group/edit.js b/packages/block-library/src/accordion-group/edit.js
@@ -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>

diff --git a/packages/block-library/src/accordion-group/style.scss b/packages/block-library/src/accordion-group/style.scss
@@ -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;

diff --git a/packages/block-library/src/accordion-item/block.json b/packages/block-library/src/accordion-item/block.json
@@ -16,7 +16,6 @@
 			"background": true,
 			"gradient": true
 		},
-		"border": true,
 		"interactivity": true,
 		"spacing": {
 			"margin": [ "top", "bottom" ],

diff --git a/packages/block-library/src/accordion-item/edit.js b/packages/block-library/src/accordion-item/edit.js
@@ -86,6 +86,7 @@ export default function Edit( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Open by default' ) }
+						__nextHasNoMarginBottom
 						onChange={ ( value ) => {
 							setAttributes( {
 								openByDefault: value,
@@ -97,6 +98,9 @@ export default function Edit( {
 							}
 						} }
 						checked={ openByDefault }
+						help={ __(
+							'Accordion content will be displayed by default.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>

diff --git a/packages/block-library/src/accordion-trigger/edit.js b/packages/block-library/src/accordion-trigger/edit.js
@@ -103,9 +103,8 @@ export default function Edit( { attributes, setAttributes } ) {
 							icon={ chevronRight }
 							value="chevronRight"
 						/>
-						<ToggleGroupControlOptionIcon
+						<ToggleGroupControlOption
 							label="None"
-							icon={ false }
 							value={ false }
 						/>
 					</ToggleGroupControl>