From 8545dce32d14db78bf6a53a6ac9a11942744e285 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jonger4@gmail.com>
Date: Tue, 6 Aug 2024 18:06:16 -0400
Subject: [PATCH] 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.
---
 docs/reference-guides/core-blocks.md                 |  2 +-
 .../block-library/src/accordion-group/block.json     | 12 ++++++++++++
 packages/block-library/src/accordion-group/edit.js   |  5 ++++-
 .../block-library/src/accordion-group/style.scss     |  1 -
 packages/block-library/src/accordion-item/block.json |  1 -
 packages/block-library/src/accordion-item/edit.js    |  3 +++
 packages/block-library/src/accordion-trigger/edit.js |  3 +--
 7 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 8ffec35f553a48..5bcdd4920b5cfe 100644
--- 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
index f381866fb563d2..572ad2a7afd30c 100644
--- 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
index 0c8d10b9fd5dee..fb6d2495d7ce4c 100644
--- a/packages/block-library/src/accordion-group/edit.js
+++ b/packages/block-library/src/accordion-group/edit.js
@@ -29,13 +29,16 @@ export default function Edit( { attributes: { autoclose }, setAttributes } ) {
 				<PanelBody title={ __( 'Settings' ) } initialOpen>
 					<ToggleControl
 						isBlock
-						label={ __( 'Autoclose' ) }
+						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
index 00139345cba8b4..61002983422f84 100644
--- 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
index 6306362a014588..9bcbb165a8a771 100644
--- 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
index 7dd0c503bbf6cb..7eea42a921524f 100644
--- a/packages/block-library/src/accordion-item/edit.js
+++ b/packages/block-library/src/accordion-item/edit.js
@@ -97,6 +97,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
index 5359f3328466c2..9fd9d1907fcf53 100644
--- 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>