diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 9cf6a7a8456121..89aac092df22c1 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 (
<>
@@ -89,11 +75,13 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
-
- event.preventDefault() }>
+
+ {
+ event.preventDefault();
+ setIsOpen( ! isOpen );
+ } }
+ >