From 636374ab1891fbf3464cf06ce8f89b317dcc5c06 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 10 Dec 2024 10:44:24 +0900
Subject: [PATCH] Details block: remove auto-close behaviour

---
 packages/block-library/src/details/edit.js | 32 +++++++---------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 9cf6a7a845612..89aac092df22c 100644
--- 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,7 +29,7 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsEdit( { attributes, setAttributes, clientId } ) {
+function DetailsEdit( { attributes, setAttributes } ) {
 	const { showContent, summary, allowedBlocks } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -38,22 +37,9 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 		__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' ) }