Add name attribute

WordPress · Dec 12, 2023 · 7a7d506 · 7a7d506
1 parent 45d7bab
commit 7a7d506
Show file tree

Hide file tree

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

diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
@@ -8,6 +8,10 @@
 	"keywords": [ "accordion", "summary", "toggle", "disclosure" ],
 	"textdomain": "default",
 	"attributes": {
+		"name": {
+			"type": "string",
+			"default": ""
+		},
 		"showContent": {
 			"type": "boolean",
 			"default": false

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
@@ -9,7 +9,7 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const TEMPLATE = [
@@ -22,7 +22,7 @@ const TEMPLATE = [
 ];
 
 function DetailsEdit( { attributes, setAttributes, clientId } ) {
-	const { showContent, summary } = attributes;
+	const { name, showContent, summary } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -56,6 +56,16 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 							} )
 						}
 					/>
+					<TextControl
+						label="Name"
+						value={ name }
+						onChange={ ( newName ) =>
+							setAttributes( { name: newName } )
+						}
+						help={ __(
+							'When using the name attribute to assign the same name to a group of detail elements, only one element in the set is opened at a time.'
+						) }
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<details

diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
@@ -4,12 +4,12 @@
 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 } open={ showContent }>
 			<summary>
 				<RichText.Content value={ summary } />
 			</summary>