Details block: add name attribute for exclusive accordion (#56971)

* Fix conflict * Don't save empty string. * Update help text * Use selector field --------- Unlinked contributors: thomas-price, sntran, dogee, sfadschm. Co-authored-by: t-hamano <[email protected]> Co-authored-by: Soean <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: hanneslsm <[email protected]> Co-authored-by: dabowman <[email protected]>
WordPress · Jan 17, 2025 · ac316ee · ac316ee · github-actions · Jan 17, 2025
1 parent 12709bd
commit ac316ee
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -255,7 +255,7 @@ Hide and show additional content. ([Source](https://github.com/WordPress/gutenbe
 -	**Name:** core/details
 -	**Category:** text
 -	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, showContent, summary
+-	**Attributes:** allowedBlocks, name, showContent, summary
 
 ## Embed
 

diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
@@ -17,6 +17,12 @@
 			"source": "rich-text",
 			"selector": "summary"
 		},
+		"name": {
+			"type": "string",
+			"source": "attribute",
+			"attribute": "name",
+			"selector": ".wp-block-details"
+		},
 		"allowedBlocks": {
 			"type": "array"
 		}

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
@@ -8,6 +8,7 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import {
+	TextControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -30,7 +31,7 @@ const TEMPLATE = [
 ];
 
 function DetailsEdit( { attributes, setAttributes } ) {
-	const { showContent, summary, allowedBlocks } = attributes;
+	const { name, showContent, summary, allowedBlocks } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -75,6 +76,20 @@ function DetailsEdit( { attributes, setAttributes } ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name attribute' ) }
+					value={ name || '' }
+					onChange={ ( newName ) =>
+						setAttributes( { name: newName } )
+					}
+					help={ __(
+						'Enables multiple Details blocks with the same name attribute to be connected, with only one open at a time.'
+					) }
+				/>
+			</InspectorControls>
 			<details { ...innerBlocksProps } open={ isOpen }>
 				<summary
 					onClick={ ( event ) => {

diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
@@ -4,12 +4,16 @@
 import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { showContent } = attributes;
+	const { name, showContent } = attributes;
 	const summary = attributes.summary ? attributes.summary : 'Details';
 	const blockProps = useBlockProps.save();
 
 	return (
-		<details { ...blockProps } open={ showContent }>
+		<details
+			{ ...blockProps }
+			name={ name || undefined }
+			open={ showContent }
+		>
 			<summary>
 				<RichText.Content value={ summary } />
 			</summary>