Update: Accordion heading level synchronization.

WordPress · t-hamano · Oct 1, 2025 · Sep 25, 2025 · Sep 26, 2025 · Sep 27, 2025
commit cd0fd710f39b584962c2c01e5e87d267219913d8
@@ -17,7 +17,7 @@ Displays a group of accordion headers and associated expandable content. ([Sourc
 -	**Category:** design
 -	**Allowed Blocks:** core/accordion-content
 -	**Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** autoclose, iconPosition, showIcon
+-	**Attributes:** autoclose, headingLevel, iconPosition, showIcon
 
 ## Accordion Content
 

@@ -9,7 +9,8 @@
 	"parent": [ "core/accordion-content" ],
 	"usesContext": [
 		"core/accordion-icon-position",
-		"core/accordion-show-icon"
+		"core/accordion-show-icon",
+		"core/accordion-heading-level"
 	],
 	"supports": {
 		"anchor": true,
@@ -68,9 +69,6 @@
 			"type": "number",
 			"default": 3
 		},
-		"levelOptions": {
-			"type": "array"
-		},
 		"iconPosition": {
 			"type": "string",
 			"enum": [ "left", "right" ],

@@ -6,19 +6,17 @@ import { useEffect } from '@wordpress/element';
 import {
 	useBlockProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
-	BlockControls,
-	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
-import { ToolbarGroup } from '@wordpress/components';
 
 export default function Edit( { attributes, setAttributes, context } ) {
-	const { level, title, levelOptions } = attributes;
+	const { title } = attributes;
 	const {
 		'core/accordion-icon-position': iconPosition,
 		'core/accordion-show-icon': showIcon,
+		'core/accordion-heading-level': headingLevel,
 	} = context;
-	const TagName = 'h' + level;
+	const TagName = 'h' + headingLevel;
 
 	// Set icon attributes.
 	useEffect( () => {
@@ -30,58 +28,53 @@ export default function Edit( { attributes, setAttributes, context } ) {
 		}
 	}, [ iconPosition, showIcon, setAttributes ] );
 
+	// Sync heading level from context.
+	useEffect( () => {
+		if ( headingLevel !== undefined && headingLevel !== attributes.level ) {
+			setAttributes( { level: headingLevel } );
+		}
+	}, [ headingLevel, attributes.level, setAttributes ] )
+
 	const blockProps = useBlockProps();
 	const spacingProps = useSpacingProps( attributes );
 
 	return (
-		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<HeadingLevelDropdown
-						value={ level }
-						options={ levelOptions }
-						onChange={ ( newLevel ) =>
-							setAttributes( { level: newLevel } )
-						}
-					/>
-				</ToolbarGroup>
-			</BlockControls>
-			<TagName { ...blockProps }>
-				<button
-					className="wp-block-accordion-header__toggle"
-					style={ {
-						...spacingProps.style,
-					} }
-				>
-					{ showIcon && iconPosition === 'left' && (
-						<span
-							className="wp-block-accordion-header__toggle-icon"
-							aria-hidden="true"
-						>
-							+
-						</span>
-					) }
-					<RichText
-						withoutInteractiveFormatting
-						disableLineBreaks
-						tagName="span"
-						value={ title }
-						onChange={ ( newTitle ) =>
-							setAttributes( { title: newTitle } )
-						}
-						placeholder={ __( 'Accordion title' ) }
-						className="wp-block-accordion-header__toggle-title"
-					/>
-					{ showIcon && iconPosition === 'right' && (
-						<span
-							className="wp-block-accordion-header__toggle-icon"
-							aria-hidden="true"
-						>
-							+
-						</span>
-					) }
-				</button>
-			</TagName>
-		</>
+
+		<TagName { ...blockProps }>
+			<button
+				className="wp-block-accordion-header__toggle"
+				style={ {
+					...spacingProps.style,
+				} }
+			>
+				{ showIcon && iconPosition === 'left' && (
+					<span
+						className="wp-block-accordion-header__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+				<RichText
+					withoutInteractiveFormatting
+					disableLineBreaks
+					tagName="span"
+					value={ title }
+					onChange={ ( newTitle ) =>
+						setAttributes( { title: newTitle } )
+					}
+					placeholder={ __( 'Accordion title' ) }
+					className="wp-block-accordion-header__toggle-title"
+				/>
+				{ showIcon && iconPosition === 'right' && (
+					<span
+						className="wp-block-accordion-header__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+			</button>
+		</TagName>
 	);
 }
@@ -9,7 +9,7 @@ import {
 
 export default function save( { attributes } ) {
 	const { level, title, iconPosition, showIcon } = attributes;
-	const TagName = 'h' + level;
+	const TagName = 'h' + ( level || 3 );
 
 	const blockProps = useBlockProps.save();
 	const spacingProps = getSpacingClassesAndStyles( attributes );

@@ -67,11 +67,19 @@
 		"autoclose": {
 			"type": "boolean",
 			"default": false
+		},
+		"headingLevel": {
+			"type": "number",
+			"default": 3
+		},
+		"levelOptions": {
+			"type": "array"
 		}
 	},
 	"providesContext": {
 		"core/accordion-icon-position": "iconPosition",
-		"core/accordion-show-icon": "showIcon"
+		"core/accordion-show-icon": "showIcon",
+		"core/accordion-heading-level": "headingLevel"
 	},
 	"allowedBlocks": [ "core/accordion-content" ],
 	"textdomain": "default",

@@ -8,6 +8,7 @@ import {
 	BlockControls,
 	useBlockEditingMode,
 	store as blockEditorStore,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -17,6 +18,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -32,7 +34,7 @@ const ACCORDION_BLOCK = {
 };
 
 export default function Edit( {
-	attributes: { autoclose, iconPosition, showIcon },
+	attributes: { autoclose, iconPosition, showIcon, headingLevel, levelOptions },
 	clientId,
 	setAttributes,
 	isSelected: isSingleSelected,
@@ -58,11 +60,24 @@ export default function Edit( {
 	return (
 		<>
 			{ isSingleSelected && ! isContentOnlyMode && (
-				<BlockControls group="other">
-					<ToolbarButton onClick={ addAccordionContentBlock }>
-						{ __( 'Add' ) }
-					</ToolbarButton>
-				</BlockControls>
+				<>
+					<BlockControls>
+						<ToolbarGroup>
+							<HeadingLevelDropdown
+								value={ headingLevel }
+								options={ levelOptions }
+								onChange={ ( newLevel ) => 
+									setAttributes( {headingLevel: newLevel } )
+								}
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+					<BlockControls group="other">
+						<ToolbarButton onClick={ addAccordionContentBlock }>
+							{ __( 'Add' ) }
+						</ToolbarButton>
+					</BlockControls>
+				</>
 			) }
 			<InspectorControls key="setting">
 				<ToolsPanel
@@ -72,6 +87,7 @@ export default function Edit( {
 							autoclose: false,
 							showIcon: true,
 							iconPosition: 'right',
+							headingLevel: 3,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }