Details block: remove auto-close behaviour (#67766)

Co-authored-by: ellatrix <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · Jan 13, 2025 · aa38b22 · aa38b22
1 parent cd8e655
commit aa38b22
Showing 1 changed file with 10 additions and 22 deletions.
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
@@ -5,16 +5,15 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
-	store as blockEditorStore,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
 import {
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,30 +29,17 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsEdit( { attributes, setAttributes, clientId } ) {
+function DetailsEdit( { attributes, setAttributes } ) {
 	const { showContent, summary, allowedBlocks } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		__experimentalCaptureToolbars: true,
 		allowedBlocks,
 	} );
+	const [ isOpen, setIsOpen ] = useState( showContent );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// Check if either the block or the inner blocks are selected.
-	const hasSelection = useSelect(
-		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			/* Sets deep to true to also find blocks inside the details content block. */
-			return (
-				hasSelectedInnerBlock( clientId, true ) ||
-				isBlockSelected( clientId )
-			);
-		},
-		[ clientId ]
-	);
-
 	return (
 		<>
 			<InspectorControls>
@@ -89,11 +75,13 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
-			<details
-				{ ...innerBlocksProps }
-				open={ hasSelection || showContent }
-			>
-				<summary onClick={ ( event ) => event.preventDefault() }>
+			<details { ...innerBlocksProps } open={ isOpen }>
+				<summary
+					onClick={ ( event ) => {
+						event.preventDefault();
+						setIsOpen( ! isOpen );
+					} }
+				>
 					<RichText
 						identifier="summary"
 						aria-label={ __( 'Write summary' ) }