Move icon controls to top level

docs/reference-guides/core-blocks.md

@@ -17,7 +17,7 @@ A group of headers and associated expandable content. ([Source](https://github.c
 -	**Category:** design
 -	**Allowed Blocks:** core/accordion-item
 -	**Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), ~~html~~
--	**Attributes:** allowedBlocks, autoclose, iconPosition
+-	**Attributes:** allowedBlocks, autoclose, icon, iconPosition
 
 ## Accordion Header
 

packages/block-library/src/accordion-group/block.json

@@ -47,6 +47,18 @@
 			"type": "string",
 			"default": "right"
 		},
+		"icon": {
+			"type": [ "string", "boolean" ],
+			"enum": [
+				"plus",
+				"chevron",
+				"chevronRight",
+				"caret",
+				"circlePlus",
+				false
+			],
+			"default": "plus"
+		},
 		"autoclose": {
 			"type": "boolean",
 			"default": false
@@ -55,6 +67,10 @@
 			"type": "array"
 		}
 	},
+	"providesContext": {
+		"core/accordion-icon": "icon",
+		"core/accordion-icon-position": "iconPosition"
+	},
 	"allowedBlocks": [ "core/accordion-item" ],
 	"textdomain": "default",
 	"style": "wp-block-accordion-group"

packages/block-library/src/accordion-group/edit.js

@@ -7,14 +7,33 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import {
+	caret,
+	chevron,
+	chevronRight,
+	circlePlus,
+	plus,
+} from '../accordion-item/icons';
 
 const ACCORDION_BLOCK_NAME = 'core/accordion-item';
 const ACCORDION_BLOCK = {
 	name: ACCORDION_BLOCK_NAME,
 };
 
-export default function Edit( { attributes: { autoclose }, setAttributes } ) {
+export default function Edit( {
+	attributes: { autoclose, icon, iconPosition },
+	setAttributes,
+} ) {
 	const blockProps = useBlockProps();
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -41,6 +60,59 @@ export default function Edit( { attributes: { autoclose }, setAttributes } ) {
 							'Automatically close accordions when a new one is opened.'
 						) }
 					/>
+					<ToggleGroupControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						isBlock
+						label={ __( 'Icon' ) }
+						value={ icon }
+						onChange={ ( value ) =>
+							setAttributes( { icon: value } )
+						}
+					>
+						<ToggleGroupControlOptionIcon
+							label="Plus"
+							icon={ plus }
+							value="plus"
+						/>
+						<ToggleGroupControlOptionIcon
+							label="Chevron"
+							icon={ chevron }
+							value="chevron"
+						/>
+						<ToggleGroupControlOptionIcon
+							label="Circle Plus"
+							icon={ circlePlus }
+							value="circlePlus"
+						/>
+						<ToggleGroupControlOptionIcon
+							label="Caret"
+							icon={ caret }
+							value="caret"
+						/>
+						<ToggleGroupControlOptionIcon
+							label="Chevron Right"
+							icon={ chevronRight }
+							value="chevronRight"
+						/>
+						<ToggleGroupControlOption
+							label="None"
+							value={ false }
+						/>
+					</ToggleGroupControl>
+					<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>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />

packages/block-library/src/accordion-group/index.php

@@ -29,12 +29,14 @@
 
 	wp_enqueue_script_module( '@wordpress/block-library/accordion-group' );
 
 	$p         = new WP_HTML_Tag_Processor( $content );
 	$autoclose = $attributes['autoclose'] ? 'true' : 'false';
+	$icon = $attributes['icon'] ?? 'plus';
+	$icon_position = $attributes['iconPosition'] ?? 'right';
 
 	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-group' ) ) ) {
 		$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
-		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [] }' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [], "icon": "' . $icon . '", "iconPosition": "' . $icon_position . '" }' );
 
 		// Only modify content if directives have been set.
 		$content = $p->get_updated_html();

packages/block-library/src/accordion-header/block.json

@@ -9,6 +9,7 @@
 	"example": {},
 	"__experimental": true,
 	"parent": [ "core/accordion-item" ],
+	"usesContext": [ "core/accordion-icon", "core/accordion-icon-position" ],
 	"supports": {
 		"anchor": true,
 		"color": {

packages/block-library/src/accordion-header/edit.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
 import {
 	useBlockProps,
 	__experimentalUseBorderProps as useBorderProps,
@@ -15,15 +16,8 @@ import {
 	BlockControls,
 	HeadingLevelDropdown,
 	RichText,
-	InspectorControls,
 } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	ToolbarGroup,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-} from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -43,11 +37,24 @@ const ICONS = {
 	caret,
 };
 
-export default function Edit( { attributes, setAttributes } ) {
-	const { level, title, textAlign, icon, iconPosition, levelOptions } =
-		attributes;
+export default function Edit( { attributes, setAttributes, context } ) {
+	const { level, title, textAlign, levelOptions } = attributes;
+	const {
+		'core/accordion-icon': icon,
+		'core/accordion-icon-position': iconPosition,
+	} = context;
 	const TagName = 'h' + level;
 
+	// Set icon attributes.
+	useEffect( () => {
+		if ( icon !== undefined && iconPosition !== undefined ) {
+			setAttributes( {
+				icon,
+				iconPosition,
+			} );
+		}
+	}, [ icon, iconPosition, setAttributes ] );
+
 	const blockProps = useBlockProps();
 	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
@@ -69,63 +76,6 @@ export default function Edit( { attributes, setAttributes } ) {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
-			<InspectorControls key="setting">
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleGroupControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						isBlock
-						label={ __( 'Icon' ) }
-						value={ icon }
-						onChange={ ( value ) =>
-							setAttributes( { icon: value } )
-						}
-					>
-						<ToggleGroupControlOptionIcon
-							label="Plus"
-							icon={ plus }
-							value="plus"
-						/>
-						<ToggleGroupControlOptionIcon
-							label="Chevron"
-							icon={ chevron }
-							value="chevron"
-						/>
-						<ToggleGroupControlOptionIcon
-							label="Circle Plus"
-							icon={ circlePlus }
-							value="circlePlus"
-						/>
-						<ToggleGroupControlOptionIcon
-							label="Caret"
-							icon={ caret }
-							value="caret"
-						/>
-						<ToggleGroupControlOptionIcon
-							label="Chevron Right"
-							icon={ chevronRight }
-							value="chevronRight"
-						/>
-						<ToggleGroupControlOption
-							label="None"
-							value={ false }
-						/>
-					</ToggleGroupControl>
-					<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>
-				</PanelBody>
-			</InspectorControls>
 			<TagName
 				{ ...blockProps }
 				className={ clsx(