WordPress · t-hamano · Oct 1, 2025 · Sep 25, 2025 · Sep 26, 2025 · Sep 27, 2025
@@ -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, levelOptions, showIcon
 
 ## Accordion Content
 
@@ -40,7 +40,7 @@ Displays an accordion header. ([Source](https://github.com/WordPress/gutenberg/t
 -	**Category:** design
 -	**Parent:** core/accordion-content
 -	**Supports:** anchor, color (background, gradients, text), interactivity, shadow, spacing (padding), typography (fontSize), ~~align~~, ~~blockVisibility~~
--	**Attributes:** iconPosition, level, levelOptions, openByDefault, showIcon, title
+-	**Attributes:** iconPosition, level, openByDefault, showIcon, title
 
 ## Accordion Panel
 

@@ -25,7 +25,12 @@ import clsx from 'clsx';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-export default function Edit( { attributes, clientId, setAttributes } ) {
+export default function Edit( {
+	attributes,
+	clientId,
+	setAttributes,
+	context,
+} ) {
 	const { openByDefault } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -70,9 +75,14 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		} ),
 	} );
 
+	// Get heading level from context.
+	const headingLevel = context && context[ 'core/accordion-heading-level' ];
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: [
-			[ 'core/accordion-header', {} ],
+			[
+				'core/accordion-header',
+				headingLevel ? { level: headingLevel } : {},
+			],
 			[
 				'core/accordion-panel',
 				{

@@ -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,
@@ -66,11 +67,7 @@
 			"role": "content"
 		},
 		"level": {
-			"type": "number",
-			"default": 3
-		},
-		"levelOptions": {
-			"type": "array"
+			"type": "number"
 		},
 		"iconPosition": {
 			"type": "string",

@@ -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( () => {
@@ -34,54 +32,41 @@ export default function Edit( { attributes, setAttributes, context } ) {
 	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,8 +18,9 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -27,19 +29,29 @@ import { createBlock } from '@wordpress/blocks';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ACCORDION_BLOCK_NAME = 'core/accordion-content';
+const ACCORDION_HEADER_BLOCK_NAME = 'core/accordion-header';
 const ACCORDION_BLOCK = {
 	name: ACCORDION_BLOCK_NAME,
 };
 
 export default function Edit( {
-	attributes: { autoclose, iconPosition, showIcon },
+	attributes: {
+		autoclose,
+		iconPosition,
+		showIcon,
+		headingLevel,
+		levelOptions,
+	},
 	clientId,
 	setAttributes,
 	isSelected: isSingleSelected,
 } ) {
+	const registry = useRegistry();
+	const { getBlockOrder } = useSelect( blockEditorStore );
 	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const { insertBlock } = useDispatch( blockEditorStore );
+	const { updateBlockAttributes, insertBlock } =
+		useDispatch( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
@@ -51,18 +63,57 @@ export default function Edit( {
 	} );
 
 	const addAccordionContentBlock = () => {
-		const newAccordionContent = createBlock( ACCORDION_BLOCK_NAME );
+		// When adding, set the header's level to current headingLevel
+		const newAccordionContent = createBlock( ACCORDION_BLOCK_NAME, {}, [
+			createBlock( ACCORDION_HEADER_BLOCK_NAME, { level: headingLevel } ),
+			createBlock( 'core/accordion-panel', {} ),
+		] );
 		insertBlock( newAccordionContent, undefined, clientId );
 	};
 
+	/**
+	 * Update all child Accordion Header blocks with a new heading level
+	 * based on the accordion group setting.
+	 * @param {number} newHeadingLevel The new heading level to set
+	 */
+	const updateHeadingLevel = ( newHeadingLevel ) => {
+		const innerBlockClientIds = getBlockOrder( clientId );
+
+		// Get all accordion-header blocks from all accordion-content blocks.
+		const accordionHeaderClientIds = [];
+		innerBlockClientIds.forEach( ( contentClientId ) => {
+			const headerClientIds = getBlockOrder( contentClientId );
+			accordionHeaderClientIds.push( ...headerClientIds );
+		} );
+
+		// Update own and child block heading levels.
+		registry.batch( () => {
+			setAttributes( { headingLevel: newHeadingLevel } );
+			updateBlockAttributes( accordionHeaderClientIds, {
+				level: newHeadingLevel,
+			} );
+		} );
+	};
+
 	return (
 		<>
 			{ isSingleSelected && ! isContentOnlyMode && (
-				<BlockControls group="other">
-					<ToolbarButton onClick={ addAccordionContentBlock }>
-						{ __( 'Add' ) }
-					</ToolbarButton>
-				</BlockControls>
+				<>
+					<BlockControls>
+						<ToolbarGroup>
+							<HeadingLevelDropdown
+								value={ headingLevel }
+								options={ levelOptions }
+								onChange={ updateHeadingLevel }
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+					<BlockControls group="other">
+						<ToolbarButton onClick={ addAccordionContentBlock }>
+							{ __( 'Add' ) }
+						</ToolbarButton>
+					</BlockControls>
+				</>
 			) }
 			<InspectorControls key="setting">
 				<ToolsPanel
@@ -72,6 +123,7 @@ export default function Edit( {
 							autoclose: false,
 							showIcon: true,
 							iconPosition: 'right',
+							headingLevel: 3,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }