From be21b7fe5f395e73aa5ff2c1dc21cefc6d888714 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 18 Oct 2022 06:48:41 +0200
Subject: [PATCH 01/41] Add  "details" block

---
 docs/reference-guides/core-blocks.md          |  9 +++
 packages/block-library/src/details/block.json | 59 ++++++++++++++
 packages/block-library/src/details/edit.js    | 76 +++++++++++++++++++
 .../src/details/heading-level-dropdown.js     | 69 +++++++++++++++++
 .../src/details/heading-level-icon.js         | 48 ++++++++++++
 packages/block-library/src/details/index.js   | 23 ++++++
 packages/block-library/src/details/save.js    | 34 +++++++++
 packages/block-library/src/details/style.scss |  5 ++
 packages/block-library/src/index.js           |  2 +
 packages/block-library/src/style.scss         |  1 +
 .../fixtures/blocks/core__details.html        | 10 +++
 .../fixtures/blocks/core__details.json        | 22 ++++++
 .../fixtures/blocks/core__details.parsed.json | 23 ++++++
 .../blocks/core__details.serialized.html      |  5 ++
 14 files changed, 386 insertions(+)
 create mode 100644 packages/block-library/src/details/block.json
 create mode 100644 packages/block-library/src/details/edit.js
 create mode 100644 packages/block-library/src/details/heading-level-dropdown.js
 create mode 100644 packages/block-library/src/details/heading-level-icon.js
 create mode 100644 packages/block-library/src/details/index.js
 create mode 100644 packages/block-library/src/details/save.js
 create mode 100644 packages/block-library/src/details/style.scss
 create mode 100644 test/integration/fixtures/blocks/core__details.html
 create mode 100644 test/integration/fixtures/blocks/core__details.json
 create mode 100644 test/integration/fixtures/blocks/core__details.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__details.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 666441f239b0f..06027f3920c4e 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -233,6 +233,15 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 -	**Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage
 
+## Details
+
+An advanced block that allows displaying a summary and hiding and displaying detailed content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
+
+-	**Name:** core/details
+-	**Category:** theme
+-	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** level, summary
+
 ## Embed
 
 Add a block that displays content pulled from other sites, like Twitter or YouTube. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/embed))
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
new file mode 100644
index 0000000000000..a8d54ca032f14
--- /dev/null
+++ b/packages/block-library/src/details/block.json
@@ -0,0 +1,59 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details",
+	"title": "Details",
+	"category": "theme",
+	"description": "An advanced block that allows displaying a summary and hiding and displaying detailed content.",
+	"textdomain": "default",
+	"attributes": {
+		"level": {
+			"type": "number",
+			"default": 2
+		},
+		"summary": {
+			"type": "string",
+			"source": "html",
+			"selector": "h1,h2,h3,h4,h5,h6"
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"editorStyle": "wp-block-details",
+	"style": "wp-block-details"
+}
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
new file mode 100644
index 0000000000000..c3cbc28f5cd39
--- /dev/null
+++ b/packages/block-library/src/details/edit.js
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from './heading-level-dropdown';
+
+const DETAILS = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add text or blocks that will display when the details block is opened.'
+			),
+		},
+	],
+];
+
+function DetailsBlock( { attributes, setAttributes } ) {
+	const { level, summary } = attributes;
+	const tagName = 'h' + level;
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-details__content',
+		},
+		{
+			template: DETAILS,
+		}
+	);
+
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					selectedLevel={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+			</BlockControls>
+			<details { ...blockProps }>
+				<summary
+					className={ classnames( 'wp-block-details__summary' ) }
+				>
+					<RichText
+						tagName={ tagName }
+						aria-label={ __( 'Add summary' ) }
+						placeholder={ __( 'Add summary' ) }
+						value={ summary }
+						onChange={ ( newSummary ) =>
+							setAttributes( { summary: newSummary } )
+						}
+					/>
+				</summary>
+				<div { ...innerBlocksProps } />
+			</details>
+		</>
+	);
+}
+
+export default DetailsBlock;
diff --git a/packages/block-library/src/details/heading-level-dropdown.js b/packages/block-library/src/details/heading-level-dropdown.js
new file mode 100644
index 0000000000000..d8a4eae0ab34d
--- /dev/null
+++ b/packages/block-library/src/details/heading-level-dropdown.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarDropdownMenu } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelIcon from './heading-level-icon';
+
+const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
+
+const POPOVER_PROPS = {
+	className: 'block-library-heading-level-dropdown',
+};
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}                 selectedLevel The chosen heading level.
+ * @property {(newValue:number)=>any} onChange      Callback to run when
+ *                                                  toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
+	return (
+		<ToolbarDropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
+			label={ __( 'Change heading level' ) }
+			controls={ HEADING_LEVELS.map( ( targetLevel ) => {
+				{
+					const isActive = targetLevel === selectedLevel;
+
+					return {
+						icon: (
+							<HeadingLevelIcon
+								level={ targetLevel }
+								isPressed={ isActive }
+							/>
+						),
+						label: sprintf(
+							// translators: %s: heading level e.g: "1", "2", "3"
+							__( 'Heading %d' ),
+							targetLevel
+						),
+						isActive,
+						onClick() {
+							onChange( targetLevel );
+						},
+						role: 'menuitemradio',
+					};
+				}
+			} ) }
+		/>
+	);
+}
diff --git a/packages/block-library/src/details/heading-level-icon.js b/packages/block-library/src/details/heading-level-icon.js
new file mode 100644
index 0000000000000..b3288d0276161
--- /dev/null
+++ b/packages/block-library/src/details/heading-level-icon.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelIcon props.
+ *
+ * @typedef WPHeadingLevelIconProps
+ *
+ * @property {number}   level     The heading level to show an icon for.
+ * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false.
+ */
+
+/**
+ * Heading level icon.
+ *
+ * @param {WPHeadingLevelIconProps} props Component props.
+ *
+ * @return {?WPComponent} The icon.
+ */
+export default function HeadingLevelIcon( { level, isPressed = false } ) {
+	const levelToPath = {
+		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
+		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
+		3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
+		4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
+		5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
+		6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
+	};
+	if ( ! levelToPath.hasOwnProperty( level ) ) {
+		return null;
+	}
+
+	return (
+		<SVG
+			width="24"
+			height="24"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			isPressed={ isPressed }
+		>
+			<Path d={ levelToPath[ level ] } />
+		</SVG>
+	);
+}
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
new file mode 100644
index 0000000000000..b491250252aa2
--- /dev/null
+++ b/packages/block-library/src/details/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { chevronDown as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
new file mode 100644
index 0000000000000..1ced6536ef748
--- /dev/null
+++ b/packages/block-library/src/details/save.js
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { level, summary } = attributes;
+	const TagName = 'h' + level;
+	const blockProps = useBlockProps.save();
+
+	return (
+		<details { ...blockProps }>
+			<summary className={ classnames( 'wp-block-details__summary' ) }>
+				<TagName>
+					<RichText.Content value={ summary } />
+				</TagName>
+			</summary>
+			<div
+				{ ...useInnerBlocksProps.save( {
+					className: 'wp-block-details__content',
+				} ) }
+			/>
+		</details>
+	);
+}
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
new file mode 100644
index 0000000000000..8a769aa366be4
--- /dev/null
+++ b/packages/block-library/src/details/style.scss
@@ -0,0 +1,5 @@
+.wp-block-details {
+	.wp-block-details__summary > * {
+		display: inline;
+	}
+}
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 88d2c26f02403..ef620e5105afd 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -45,6 +45,7 @@ import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
+import * as details from './details';
 import * as embed from './embed';
 import * as file from './file';
 import * as gallery from './gallery';
@@ -144,6 +145,7 @@ const getAllBlocks = () =>
 		columns,
 		commentAuthorAvatar,
 		cover,
+		details,
 		embed,
 		file,
 		group,
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index a7f12e74ea2f5..6802ff1ff0519 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -11,6 +11,7 @@
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
+@import "./details/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
new file mode 100644
index 0000000000000..c86f27de0138d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -0,0 +1,10 @@
+<!-- wp:details -->
+<details class="wp-block-details">
+	<summary class="wp-block-details__summary"><h2></h2></summary>
+	<div class="wp-block-details__content">
+		<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+		<p></p>
+		<!-- /wp:paragraph -->
+	</div>
+</details>
+<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
new file mode 100644
index 0000000000000..b50a637205e7f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.json
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/details",
+		"isValid": true,
+		"attributes": {
+			"level": 2,
+			"summary": ""
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Add text or blocks that will display when the details block is opened."
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
new file mode 100644
index 0000000000000..f2f93e65e02ac
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -0,0 +1,23 @@
+[
+	{
+		"blockName": "core/details",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Add text or blocks that will display when the details block is opened."
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p></p>\n\t\t",
+				"innerContent": [ "\n\t\t<p></p>\n\t\t" ]
+			}
+		],
+		"innerHTML": "\n<details class=\"wp-block-details\">\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t\n\t</div>\n</details>\n",
+		"innerContent": [
+			"\n<details class=\"wp-block-details\">\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</details>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
new file mode 100644
index 0000000000000..04261bc9502df
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:details -->
+<details class="wp-block-details"><summary class="wp-block-details__summary"><h2></h2></summary><div class="wp-block-details__content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<p></p>
+<!-- /wp:paragraph --></div></details>
+<!-- /wp:details -->

From 9686338d1ad3759449abe6b8827a8e8b1d6d9ab3 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 18 Oct 2022 08:08:17 +0200
Subject: [PATCH 02/41] Add variation, fix stylesheet loading on front, change
 font size

---
 lib/blocks.php                                |  1 +
 packages/block-library/src/details/index.js   |  2 ++
 packages/block-library/src/details/save.js    |  5 +++-
 packages/block-library/src/details/style.scss |  4 +++
 .../block-library/src/details/variations.js   | 29 +++++++++++++++++++
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/details/variations.js

diff --git a/lib/blocks.php b/lib/blocks.php
index d991eac8ddbe4..f6af63b3b431f 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -22,6 +22,7 @@ function gutenberg_reregister_core_block_types() {
 				'column',
 				'columns',
 				'comments',
+				'details',
 				'group',
 				'heading',
 				'html',
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index b491250252aa2..50be91a4b0469 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	save,
 	edit,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
index 1ced6536ef748..ea1ac62d11f32 100644
--- a/packages/block-library/src/details/save.js
+++ b/packages/block-library/src/details/save.js
@@ -11,6 +11,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { level, summary } = attributes;
@@ -21,7 +22,9 @@ export default function save( { attributes } ) {
 		<details { ...blockProps }>
 			<summary className={ classnames( 'wp-block-details__summary' ) }>
 				<TagName>
-					<RichText.Content value={ summary } />
+					<RichText.Content
+						value={ !! summary ? summary : __( 'Show details' ) }
+					/>
 				</TagName>
 			</summary>
 			<div
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 8a769aa366be4..003d63cb48d86 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -1,5 +1,9 @@
 .wp-block-details {
+	::marker {
+		font-size: var(--wp--preset--font-size--medium, $default-font-size);
+	}
 	.wp-block-details__summary > * {
 		display: inline;
+		font-size: var(--wp--preset--font-size--medium, $default-font-size);
 	}
 }
diff --git a/packages/block-library/src/details/variations.js b/packages/block-library/src/details/variations.js
new file mode 100644
index 0000000000000..03d5e2bb5ab71
--- /dev/null
+++ b/packages/block-library/src/details/variations.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { chevronDown } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'details',
+		title: __( 'Details' ),
+		description: __(
+			'An advanced block that allows displaying a summary and hiding and displaying detailed content.'
+		),
+		isDefault: true,
+		scope: [ 'inserter' ],
+		icon: chevronDown,
+	},
+	{
+		name: 'transcript',
+		title: __( 'Transcript' ),
+		description: __(
+			'A text transcript is an important type of alternative content for timed media, like audio and video.'
+		),
+		scope: [ 'inserter' ],
+		icon: chevronDown,
+	},
+];
+
+export default variations;

From ed02fa70b7059faa72ac212668972f554dc7c346 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 18 Oct 2022 08:16:38 +0200
Subject: [PATCH 03/41] Remove the link option from the summary heading, update
 aria label

---
 packages/block-library/src/details/edit.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index c3cbc28f5cd39..21522cab98361 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -59,8 +59,9 @@ function DetailsBlock( { attributes, setAttributes } ) {
 				>
 					<RichText
 						tagName={ tagName }
-						aria-label={ __( 'Add summary' ) }
+						aria-label={ __( 'Summary' ) }
 						placeholder={ __( 'Add summary' ) }
+						withoutInteractiveFormatting
 						value={ summary }
 						onChange={ ( newSummary ) =>
 							setAttributes( { summary: newSummary } )

From 340fe0ecb1cbf2699eb6de854c7363086416c9fc Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 18 Oct 2022 08:54:02 +0200
Subject: [PATCH 04/41] Update edit.js

---
 packages/block-library/src/details/edit.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 21522cab98361..9cf7a4d4da7e6 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -60,9 +60,8 @@ function DetailsBlock( { attributes, setAttributes } ) {
 					<RichText
 						tagName={ tagName }
 						aria-label={ __( 'Summary' ) }
-						placeholder={ __( 'Add summary' ) }
 						withoutInteractiveFormatting
-						value={ summary }
+						value={ !! summary ? summary : __( 'Show details' ) }
 						onChange={ ( newSummary ) =>
 							setAttributes( { summary: newSummary } )
 						}

From 7468272d39d230f8267ef5cda5cb6aa751ea7c96 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 20 Oct 2022 10:11:36 +0200
Subject: [PATCH 05/41] Keep the details open in the editor

---
 packages/block-library/src/details/block.json |  7 +++++++
 packages/block-library/src/details/edit.js    |  8 +++++---
 packages/block-library/src/details/save.js    |  5 +----
 packages/block-library/src/details/style.scss | 16 +++++++++++++---
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index a8d54ca032f14..c6e63d38657d2 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -35,6 +35,13 @@
 			"width": true,
 			"style": true
 		},
+		"__experimentalStyle": {
+			"border": {
+				"color": "#000",
+				"width": "1px",
+				"style": "solid"
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 9cf7a4d4da7e6..598ec0e729c0f 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -53,15 +53,17 @@ function DetailsBlock( { attributes, setAttributes } ) {
 					}
 				/>
 			</BlockControls>
-			<details { ...blockProps }>
+			<details { ...blockProps } open>
 				<summary
 					className={ classnames( 'wp-block-details__summary' ) }
+					onClick={ ( event ) => event.preventDefault() }
 				>
 					<RichText
 						tagName={ tagName }
-						aria-label={ __( 'Summary' ) }
+						aria-label={ __( 'Add summary' ) }
+						placeholder={ __( 'Add summary' ) }
 						withoutInteractiveFormatting
-						value={ !! summary ? summary : __( 'Show details' ) }
+						value={ summary }
 						onChange={ ( newSummary ) =>
 							setAttributes( { summary: newSummary } )
 						}
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
index ea1ac62d11f32..1ced6536ef748 100644
--- a/packages/block-library/src/details/save.js
+++ b/packages/block-library/src/details/save.js
@@ -11,7 +11,6 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { level, summary } = attributes;
@@ -22,9 +21,7 @@ export default function save( { attributes } ) {
 		<details { ...blockProps }>
 			<summary className={ classnames( 'wp-block-details__summary' ) }>
 				<TagName>
-					<RichText.Content
-						value={ !! summary ? summary : __( 'Show details' ) }
-					/>
+					<RichText.Content value={ summary } />
 				</TagName>
 			</summary>
 			<div
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 003d63cb48d86..f621b3f42e702 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -2,8 +2,18 @@
 	::marker {
 		font-size: var(--wp--preset--font-size--medium, $default-font-size);
 	}
-	.wp-block-details__summary > * {
-		display: inline;
-		font-size: var(--wp--preset--font-size--medium, $default-font-size);
+	.wp-block-details__summary {
+		padding: 0.25em;
+		> * {
+			display: inline;
+			font-size: var(--wp--preset--font-size--medium, $default-font-size);
+		}
+	}
+	.wp-block-details__content {
+		padding: 0.25em;
 	}
 }
+
+.wp-block-details[open] .wp-block-details__summary {
+	border-bottom: 1px solid;
+}

From 04b8f85ff49a13550b17ea7b61f9a916c4345708 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 21 Oct 2022 07:30:39 +0200
Subject: [PATCH 06/41] Add toolbar control for collapsing and expanding the
 details, remove border

---
 docs/reference-guides/core-blocks.md          |  2 +-
 packages/block-library/src/details/block.json | 11 ++++-------
 packages/block-library/src/details/edit.js    | 17 +++++++++++++++--
 packages/block-library/src/details/save.js    |  4 ++--
 packages/block-library/src/details/style.scss |  4 ----
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 06027f3920c4e..abaa265acbc30 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -240,7 +240,7 @@ An advanced block that allows displaying a summary and hiding and displaying det
 -	**Name:** core/details
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, summary
+-	**Attributes:** level, showContent, summary
 
 ## Embed
 
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index c6e63d38657d2..6f05097a9642d 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -16,6 +16,10 @@
 			"type": "string",
 			"source": "html",
 			"selector": "h1,h2,h3,h4,h5,h6"
+		},
+		"showContent": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {
@@ -35,13 +39,6 @@
 			"width": true,
 			"style": true
 		},
-		"__experimentalStyle": {
-			"border": {
-				"color": "#000",
-				"width": "1px",
-				"style": "solid"
-			}
-		},
 		"html": false,
 		"spacing": {
 			"margin": true,
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 598ec0e729c0f..6596eb94e91b8 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -12,6 +12,7 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 } from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,7 +32,7 @@ const DETAILS = [
 ];
 
 function DetailsBlock( { attributes, setAttributes } ) {
-	const { level, summary } = attributes;
+	const { level, summary, showContent } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps(
@@ -46,6 +47,18 @@ function DetailsBlock( { attributes, setAttributes } ) {
 	return (
 		<>
 			<BlockControls group="block">
+				<ToolbarButton
+					title={ __( 'Show content' ) }
+					// Add icon once an icon has been created icon={ }
+					onClick={ () => {
+						setAttributes( {
+							showContent: ! showContent,
+						} );
+					} }
+					className={ showContent ? 'is-pressed' : undefined }
+				>
+					{ __( 'Show content' ) }
+				</ToolbarButton>
 				<HeadingLevelDropdown
 					selectedLevel={ level }
 					onChange={ ( newLevel ) =>
@@ -53,7 +66,7 @@ function DetailsBlock( { attributes, setAttributes } ) {
 					}
 				/>
 			</BlockControls>
-			<details { ...blockProps } open>
+			<details { ...blockProps } open={ showContent }>
 				<summary
 					className={ classnames( 'wp-block-details__summary' ) }
 					onClick={ ( event ) => event.preventDefault() }
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
index 1ced6536ef748..a06616986100d 100644
--- a/packages/block-library/src/details/save.js
+++ b/packages/block-library/src/details/save.js
@@ -13,12 +13,12 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { level, summary } = attributes;
+	const { level, summary, showContent } = attributes;
 	const TagName = 'h' + level;
 	const blockProps = useBlockProps.save();
 
 	return (
-		<details { ...blockProps }>
+		<details { ...blockProps } open={ showContent }>
 			<summary className={ classnames( 'wp-block-details__summary' ) }>
 				<TagName>
 					<RichText.Content value={ summary } />
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index f621b3f42e702..3352c85e3df1d 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -13,7 +13,3 @@
 		padding: 0.25em;
 	}
 }
-
-.wp-block-details[open] .wp-block-details__summary {
-	border-bottom: 1px solid;
-}

From 80375c020fca5595d449e095f23433ee8f5e45b2 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 21 Oct 2022 07:39:07 +0200
Subject: [PATCH 07/41] Update fixtures

---
 test/integration/fixtures/blocks/core__details.html       | 6 +++---
 test/integration/fixtures/blocks/core__details.json       | 3 ++-
 .../integration/fixtures/blocks/core__details.parsed.json | 8 ++++----
 .../fixtures/blocks/core__details.serialized.html         | 2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
index c86f27de0138d..026ff7d83efca 100644
--- a/test/integration/fixtures/blocks/core__details.html
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -1,10 +1,10 @@
 <!-- wp:details -->
-<details class="wp-block-details">
+<details class="wp-block-details" open>
 	<summary class="wp-block-details__summary"><h2></h2></summary>
 	<div class="wp-block-details__content">
 		<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
-		<p></p>
-		<!-- /wp:paragraph -->
+	<p></p>
+	<!-- /wp:paragraph -->
 	</div>
 </details>
 <!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
index b50a637205e7f..c4f0df0dcfdea 100644
--- a/test/integration/fixtures/blocks/core__details.json
+++ b/test/integration/fixtures/blocks/core__details.json
@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"level": 2,
-			"summary": ""
+			"summary": "",
+			"showContent": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
index f2f93e65e02ac..9d19e26cd6a1e 100644
--- a/test/integration/fixtures/blocks/core__details.parsed.json
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -9,13 +9,13 @@
 					"placeholder": "Add text or blocks that will display when the details block is opened."
 				},
 				"innerBlocks": [],
-				"innerHTML": "\n\t\t<p></p>\n\t\t",
-				"innerContent": [ "\n\t\t<p></p>\n\t\t" ]
+				"innerHTML": "\n\t<p></p>\n\t",
+				"innerContent": [ "\n\t<p></p>\n\t" ]
 			}
 		],
-		"innerHTML": "\n<details class=\"wp-block-details\">\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t\n\t</div>\n</details>\n",
+		"innerHTML": "\n<details class=\"wp-block-details\" open>\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t\n\t</div>\n</details>\n",
 		"innerContent": [
-			"\n<details class=\"wp-block-details\">\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t",
+			"\n<details class=\"wp-block-details\" open>\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</details>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
index 04261bc9502df..59de32dd22b62 100644
--- a/test/integration/fixtures/blocks/core__details.serialized.html
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:details -->
-<details class="wp-block-details"><summary class="wp-block-details__summary"><h2></h2></summary><div class="wp-block-details__content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<details class="wp-block-details" open><summary class="wp-block-details__summary"><h2></h2></summary><div class="wp-block-details__content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
 <p></p>
 <!-- /wp:paragraph --></div></details>
 <!-- /wp:details -->

From 84ede00bb83f68b8d02c73dfbab6f0bfc2b3fff9 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 21 Oct 2022 08:00:05 +0200
Subject: [PATCH 08/41] Update style.scss

---
 packages/block-library/src/details/style.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 3352c85e3df1d..cf29d24a5c4ee 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -3,13 +3,10 @@
 		font-size: var(--wp--preset--font-size--medium, $default-font-size);
 	}
 	.wp-block-details__summary {
-		padding: 0.25em;
+		font-size: var(--wp--preset--font-size--medium, $default-font-size);
 		> * {
 			display: inline;
-			font-size: var(--wp--preset--font-size--medium, $default-font-size);
+			margin-left: 8px;
 		}
 	}
-	.wp-block-details__content {
-		padding: 0.25em;
-	}
 }

From 843ab63ebf196d91671b6cd6f5f4d2847149d4a4 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 21 Oct 2022 08:11:08 +0200
Subject: [PATCH 09/41] re-add the font size for the heading

---
 packages/block-library/src/details/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index cf29d24a5c4ee..2bd704487889f 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -7,6 +7,7 @@
 		> * {
 			display: inline;
 			margin-left: 8px;
+			font-size: var(--wp--preset--font-size--medium, $default-font-size);
 		}
 	}
 }

From 3c2397fb93fd5e747d2ca02d9011639cab02f071 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 27 Oct 2022 14:11:03 +0200
Subject: [PATCH 10/41] Remove font size limitations

---
 packages/block-library/src/details/style.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 2bd704487889f..7c585c85b0d70 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -1,13 +1,8 @@
 .wp-block-details {
-	::marker {
-		font-size: var(--wp--preset--font-size--medium, $default-font-size);
-	}
 	.wp-block-details__summary {
-		font-size: var(--wp--preset--font-size--medium, $default-font-size);
 		> * {
 			display: inline;
-			margin-left: 8px;
-			font-size: var(--wp--preset--font-size--medium, $default-font-size);
+			margin-left: 0.5rem;
 		}
 	}
 }

From 8810fb0ed87b32d424d9b399184c65302a7c1dff Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 27 Oct 2022 14:26:34 +0200
Subject: [PATCH 11/41] Update cursor to pointer.

---
 packages/block-library/src/details/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 7c585c85b0d70..0e80d6e9a2d7c 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -3,6 +3,7 @@
 		> * {
 			display: inline;
 			margin-left: 0.5rem;
+			cursor: pointer;
 		}
 	}
 }

From 82ce6b012901b5ee3ba559fd666a83b0d05a97dc Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 27 Oct 2022 14:50:00 +0200
Subject: [PATCH 12/41] Add aria label that announces the expanded or collapsed
 state

---
 packages/block-library/src/details/edit.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 6596eb94e91b8..5f6cd58540200 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -43,7 +43,6 @@ function DetailsBlock( { attributes, setAttributes } ) {
 			template: DETAILS,
 		}
 	);
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -66,7 +65,15 @@ function DetailsBlock( { attributes, setAttributes } ) {
 					}
 				/>
 			</BlockControls>
-			<details { ...blockProps } open={ showContent }>
+			<details
+				{ ...blockProps }
+				open={ showContent }
+				aria-label={
+					showContent
+						? __( 'Block: Details. Expanded.' )
+						: __( 'Block: Details. Collapsed.' )
+				}
+			>
 				<summary
 					className={ classnames( 'wp-block-details__summary' ) }
 					onClick={ ( event ) => event.preventDefault() }

From b56a2a7969d3480601b91cb4760f20635cb37a50 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 31 Oct 2022 10:56:44 +0100
Subject: [PATCH 13/41] Remove transcript variation, add keywords

---
 docs/reference-guides/core-blocks.md          |  2 +-
 packages/block-library/src/details/block.json |  3 +-
 packages/block-library/src/details/index.js   |  2 --
 .../block-library/src/details/variations.js   | 29 -------------------
 4 files changed, 3 insertions(+), 33 deletions(-)
 delete mode 100644 packages/block-library/src/details/variations.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index abaa265acbc30..9e23a6c3c6024 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -235,7 +235,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 
 ## Details
 
-An advanced block that allows displaying a summary and hiding and displaying detailed content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
+A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
 
 -	**Name:** core/details
 -	**Category:** theme
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index 6f05097a9642d..2154e18dd3f94 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -5,7 +5,8 @@
 	"name": "core/details",
 	"title": "Details",
 	"category": "theme",
-	"description": "An advanced block that allows displaying a summary and hiding and displaying detailed content.",
+	"description": "A block that displays a summary and shows or hides additional content.",
+	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
 	"textdomain": "default",
 	"attributes": {
 		"level": {
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index 50be91a4b0469..b491250252aa2 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -10,7 +10,6 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
-import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -19,7 +18,6 @@ export const settings = {
 	icon,
 	save,
 	edit,
-	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details/variations.js b/packages/block-library/src/details/variations.js
deleted file mode 100644
index 03d5e2bb5ab71..0000000000000
--- a/packages/block-library/src/details/variations.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { chevronDown } from '@wordpress/icons';
-
-const variations = [
-	{
-		name: 'details',
-		title: __( 'Details' ),
-		description: __(
-			'An advanced block that allows displaying a summary and hiding and displaying detailed content.'
-		),
-		isDefault: true,
-		scope: [ 'inserter' ],
-		icon: chevronDown,
-	},
-	{
-		name: 'transcript',
-		title: __( 'Transcript' ),
-		description: __(
-			'A text transcript is an important type of alternative content for timed media, like audio and video.'
-		),
-		scope: [ 'inserter' ],
-		icon: chevronDown,
-	},
-];
-
-export default variations;

From 26b07c4087295f7682819a7885e8d5df6833904e Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 4 Nov 2022 09:43:52 +0100
Subject: [PATCH 14/41] Open the details when the block is selected

---
 packages/block-library/src/details/block.json |  2 +-
 packages/block-library/src/details/edit.js    | 50 ++++++++++---------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index 2154e18dd3f94..c7f963bc25a3d 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -20,7 +20,7 @@
 		},
 		"showContent": {
 			"type": "boolean",
-			"default": true
+			"default": false
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 5f6cd58540200..b2c088662097d 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -11,8 +11,11 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	BlockControls,
+	store as blockEditorStore,
+	InspectorControls,
 } from '@wordpress/block-editor';
-import { ToolbarButton } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,7 +34,7 @@ const DETAILS = [
 	],
 ];
 
-function DetailsBlock( { attributes, setAttributes } ) {
+function DetailsBlock( { attributes, setAttributes, clientId } ) {
 	const { level, summary, showContent } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps();
@@ -43,21 +46,17 @@ function DetailsBlock( { attributes, setAttributes } ) {
 			template: DETAILS,
 		}
 	);
+
+	// Check if either the block or the inner blocks are selected.
+	const hasSelection = useSelect( ( select ) => {
+		const { isBlockSelected, hasSelectedInnerBlock } =
+			select( blockEditorStore );
+		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
+	}, [] );
+
 	return (
 		<>
 			<BlockControls group="block">
-				<ToolbarButton
-					title={ __( 'Show content' ) }
-					// Add icon once an icon has been created icon={ }
-					onClick={ () => {
-						setAttributes( {
-							showContent: ! showContent,
-						} );
-					} }
-					className={ showContent ? 'is-pressed' : undefined }
-				>
-					{ __( 'Show content' ) }
-				</ToolbarButton>
 				<HeadingLevelDropdown
 					selectedLevel={ level }
 					onChange={ ( newLevel ) =>
@@ -65,15 +64,20 @@ function DetailsBlock( { attributes, setAttributes } ) {
 					}
 				/>
 			</BlockControls>
-			<details
-				{ ...blockProps }
-				open={ showContent }
-				aria-label={
-					showContent
-						? __( 'Block: Details. Expanded.' )
-						: __( 'Block: Details. Collapsed.' )
-				}
-			>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						label={ __( 'Open by default' ) }
+						checked={ showContent }
+						onChange={ () =>
+							setAttributes( {
+								showContent: ! showContent,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<details { ...blockProps } open={ hasSelection || showContent }>
 				<summary
 					className={ classnames( 'wp-block-details__summary' ) }
 					onClick={ ( event ) => event.preventDefault() }

From 14d69748c95d854962f8b6e222e11534943c796f Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 4 Nov 2022 10:49:27 +0100
Subject: [PATCH 15/41] Update edit.js

---
 packages/block-library/src/details/edit.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index b2c088662097d..63214b3fcdae8 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -54,6 +54,8 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
 	}, [] );
 
+	const isOpen = !! showContent ? showContent : hasSelection;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -77,7 +79,7 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<details { ...blockProps } open={ hasSelection || showContent }>
+			<details { ...blockProps } open={ isOpen }>
 				<summary
 					className={ classnames( 'wp-block-details__summary' ) }
 					onClick={ ( event ) => event.preventDefault() }

From 125b24692034268b1a74269709d764366baebcb6 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 4 Nov 2022 11:45:41 +0100
Subject: [PATCH 16/41] Add a basic unwrap

---
 packages/block-library/src/details/index.js      |  2 ++
 packages/block-library/src/details/transforms.js | 11 +++++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 packages/block-library/src/details/transforms.js

diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index b491250252aa2..d4e82a981f2f3 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -10,12 +10,14 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	save,
 	edit,
 };
diff --git a/packages/block-library/src/details/transforms.js b/packages/block-library/src/details/transforms.js
new file mode 100644
index 0000000000000..0296a913bb6dc
--- /dev/null
+++ b/packages/block-library/src/details/transforms.js
@@ -0,0 +1,11 @@
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) => innerBlocks,
+		},
+	],
+};
+
+export default transforms;

From 82643c4fda0359a30fae01394d2290d410c0f8d1 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Sat, 5 Nov 2022 03:02:20 +0100
Subject: [PATCH 17/41] Update edit.js

---
 packages/block-library/src/details/edit.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 63214b3fcdae8..b2c088662097d 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -54,8 +54,6 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
 	}, [] );
 
-	const isOpen = !! showContent ? showContent : hasSelection;
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -79,7 +77,7 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<details { ...blockProps } open={ isOpen }>
+			<details { ...blockProps } open={ hasSelection || showContent }>
 				<summary
 					className={ classnames( 'wp-block-details__summary' ) }
 					onClick={ ( event ) => event.preventDefault() }

From c75a4aadec97bb619252768c879bdc880c2a8a34 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 8 Nov 2022 11:57:17 +0100
Subject: [PATCH 18/41] Try using separate blocks

---
 docs/reference-guides/core-blocks.md          | 20 +++++-
 lib/blocks.php                                |  2 +
 .../src/details-content/block.json            | 49 ++++++++++++++
 .../block-library/src/details-content/edit.js | 27 ++++++++
 .../src/details-content/index.js              | 23 +++++++
 .../block-library/src/details-content/save.js | 13 ++++
 .../src/details-summary/block.json            | 58 ++++++++++++++++
 .../block-library/src/details-summary/edit.js | 49 ++++++++++++++
 .../heading-level-dropdown.js                 |  0
 .../heading-level-icon.js                     |  0
 .../src/details-summary/index.js              | 23 +++++++
 .../block-library/src/details-summary/save.js | 17 +++++
 packages/block-library/src/details/block.json |  9 ---
 packages/block-library/src/details/edit.js    | 67 +++----------------
 packages/block-library/src/details/save.js    | 25 +------
 packages/block-library/src/details/style.scss |  2 +-
 packages/block-library/src/index.js           |  4 ++
 .../blocks/core__details-content.html         |  9 +++
 .../blocks/core__details-summary.html         |  3 +
 .../blocks/core__details-summary.json         | 11 +++
 .../blocks/core__details-summary.parsed.json  | 11 +++
 .../core__details-summary.serialized.html     |  3 +
 .../fixtures/blocks/core__details.html        | 15 ++---
 .../fixtures/blocks/core__details.json        | 11 ++-
 .../fixtures/blocks/core__details.parsed.json | 17 ++++-
 .../blocks/core__details.serialized.html      |  8 ++-
 26 files changed, 371 insertions(+), 105 deletions(-)
 create mode 100644 packages/block-library/src/details-content/block.json
 create mode 100644 packages/block-library/src/details-content/edit.js
 create mode 100644 packages/block-library/src/details-content/index.js
 create mode 100644 packages/block-library/src/details-content/save.js
 create mode 100644 packages/block-library/src/details-summary/block.json
 create mode 100644 packages/block-library/src/details-summary/edit.js
 rename packages/block-library/src/{details => details-summary}/heading-level-dropdown.js (100%)
 rename packages/block-library/src/{details => details-summary}/heading-level-icon.js (100%)
 create mode 100644 packages/block-library/src/details-summary/index.js
 create mode 100644 packages/block-library/src/details-summary/save.js
 create mode 100644 test/integration/fixtures/blocks/core__details-content.html
 create mode 100644 test/integration/fixtures/blocks/core__details-summary.html
 create mode 100644 test/integration/fixtures/blocks/core__details-summary.json
 create mode 100644 test/integration/fixtures/blocks/core__details-summary.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__details-summary.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 259a627a9e510..f609e5e41eec6 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -240,7 +240,25 @@ A block that displays a summary and shows or hides additional content. ([Source]
 -	**Name:** core/details
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, showContent, summary
+-	**Attributes:** showContent
+
+## Details content
+
+A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
+
+-	**Name:** core/details-content
+-	**Category:** theme
+-	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** 
+
+## Summary
+
+A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
+
+-	**Name:** core/details-summary
+-	**Category:** theme
+-	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** level, summary
 
 ## Embed
 
diff --git a/lib/blocks.php b/lib/blocks.php
index f6af63b3b431f..bc0df9962c2db 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -23,6 +23,8 @@ function gutenberg_reregister_core_block_types() {
 				'columns',
 				'comments',
 				'details',
+				'details-content',
+				'details-summary',
 				'group',
 				'heading',
 				'html',
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
new file mode 100644
index 0000000000000..af16835d55fb0
--- /dev/null
+++ b/packages/block-library/src/details-content/block.json
@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details-content",
+	"title": "Details content",
+	"category": "theme",
+	"parent": [ "core/details" ],
+	"description": "A block that displays a summary and shows or hides additional content.",
+	"textdomain": "default",
+	"supports": {
+		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"editorStyle": "wp-block-details",
+	"style": "wp-block-details"
+}
diff --git a/packages/block-library/src/details-content/edit.js b/packages/block-library/src/details-content/edit.js
new file mode 100644
index 0000000000000..f79f60fc741e0
--- /dev/null
+++ b/packages/block-library/src/details-content/edit.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add text or blocks that will display when the details block is opened.'
+			),
+		},
+	],
+];
+
+function DetailsContentBlock() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+
+	return <div { ...innerBlocksProps }></div>;
+}
+
+export default DetailsContentBlock;
diff --git a/packages/block-library/src/details-content/index.js b/packages/block-library/src/details-content/index.js
new file mode 100644
index 0000000000000..b491250252aa2
--- /dev/null
+++ b/packages/block-library/src/details-content/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { chevronDown as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details-content/save.js b/packages/block-library/src/details-content/save.js
new file mode 100644
index 0000000000000..6a0acda309dac
--- /dev/null
+++ b/packages/block-library/src/details-content/save.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	const blockProps = useBlockProps.save();
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
new file mode 100644
index 0000000000000..e49ba9635828a
--- /dev/null
+++ b/packages/block-library/src/details-summary/block.json
@@ -0,0 +1,58 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details-summary",
+	"title": "Summary",
+	"category": "theme",
+	"parent": [ "core/details" ],
+	"description": "A block that displays a summary and shows or hides additional content.",
+	"textdomain": "default",
+	"attributes": {
+		"level": {
+			"type": "number",
+			"default": 2
+		},
+		"summary": {
+			"type": "string",
+			"source": "html",
+			"selector": "h1,h2,h3,h4,h5,h6"
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"editorStyle": "wp-block-details",
+	"style": "wp-block-details"
+}
diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
new file mode 100644
index 0000000000000..b82b6407ad457
--- /dev/null
+++ b/packages/block-library/src/details-summary/edit.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from './heading-level-dropdown';
+
+function DetailsSummaryBlock( { attributes, setAttributes } ) {
+	const { level, summary } = attributes;
+	const tagName = 'h' + level;
+
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					selectedLevel={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+			</BlockControls>
+			<summary
+				{ ...useBlockProps() }
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				<RichText
+					tagName={ tagName }
+					aria-label={ __( 'Add summary' ) }
+					placeholder={ __( 'Add summary' ) }
+					withoutInteractiveFormatting
+					value={ summary }
+					onChange={ ( newSummary ) =>
+						setAttributes( { summary: newSummary } )
+					}
+				/>
+			</summary>
+		</>
+	);
+}
+
+export default DetailsSummaryBlock;
diff --git a/packages/block-library/src/details/heading-level-dropdown.js b/packages/block-library/src/details-summary/heading-level-dropdown.js
similarity index 100%
rename from packages/block-library/src/details/heading-level-dropdown.js
rename to packages/block-library/src/details-summary/heading-level-dropdown.js
diff --git a/packages/block-library/src/details/heading-level-icon.js b/packages/block-library/src/details-summary/heading-level-icon.js
similarity index 100%
rename from packages/block-library/src/details/heading-level-icon.js
rename to packages/block-library/src/details-summary/heading-level-icon.js
diff --git a/packages/block-library/src/details-summary/index.js b/packages/block-library/src/details-summary/index.js
new file mode 100644
index 0000000000000..b491250252aa2
--- /dev/null
+++ b/packages/block-library/src/details-summary/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { chevronDown as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
new file mode 100644
index 0000000000000..3fc7d2feaee01
--- /dev/null
+++ b/packages/block-library/src/details-summary/save.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { level, summary } = attributes;
+	const TagName = 'h' + level;
+
+	return (
+		<summary { ...useBlockProps.save() }>
+			<TagName>
+				<RichText.Content value={ summary } />
+			</TagName>
+		</summary>
+	);
+}
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index c7f963bc25a3d..7ac340d971025 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -9,15 +9,6 @@
 	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
 	"textdomain": "default",
 	"attributes": {
-		"level": {
-			"type": "number",
-			"default": 2
-		},
-		"summary": {
-			"type": "string",
-			"source": "html",
-			"selector": "h1,h2,h3,h4,h5,h6"
-		},
 		"showContent": {
 			"type": "boolean",
 			"default": false
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index b2c088662097d..21e134eace279 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -1,16 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
-	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
-	BlockControls,
 	store as blockEditorStore,
 	InspectorControls,
 } from '@wordpress/block-editor';
@@ -18,34 +11,14 @@ import { useSelect } from '@wordpress/data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import HeadingLevelDropdown from './heading-level-dropdown';
-
-const DETAILS = [
-	[
-		'core/paragraph',
-		{
-			placeholder: __(
-				'Add text or blocks that will display when the details block is opened.'
-			),
-		},
-	],
-];
+const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ];
 
 function DetailsBlock( { attributes, setAttributes, clientId } ) {
-	const { level, summary, showContent } = attributes;
-	const tagName = 'h' + level;
+	const { showContent } = attributes;
 	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: 'wp-block-details__content',
-		},
-		{
-			template: DETAILS,
-		}
-	);
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
 
 	// Check if either the block or the inner blocks are selected.
 	const hasSelection = useSelect( ( select ) => {
@@ -56,14 +29,6 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
@@ -77,24 +42,10 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<details { ...blockProps } open={ hasSelection || showContent }>
-				<summary
-					className={ classnames( 'wp-block-details__summary' ) }
-					onClick={ ( event ) => event.preventDefault() }
-				>
-					<RichText
-						tagName={ tagName }
-						aria-label={ __( 'Add summary' ) }
-						placeholder={ __( 'Add summary' ) }
-						withoutInteractiveFormatting
-						value={ summary }
-						onChange={ ( newSummary ) =>
-							setAttributes( { summary: newSummary } )
-						}
-					/>
-				</summary>
-				<div { ...innerBlocksProps } />
-			</details>
+			<details
+				{ ...innerBlocksProps }
+				open={ hasSelection || showContent }
+			></details>
 		</>
 	);
 }
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
index a06616986100d..da5d0c1c35f4b 100644
--- a/packages/block-library/src/details/save.js
+++ b/packages/block-library/src/details/save.js
@@ -1,34 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	useInnerBlocksProps,
-} from '@wordpress/block-editor';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { level, summary, showContent } = attributes;
-	const TagName = 'h' + level;
+	const { showContent } = attributes;
 	const blockProps = useBlockProps.save();
 
 	return (
 		<details { ...blockProps } open={ showContent }>
-			<summary className={ classnames( 'wp-block-details__summary' ) }>
-				<TagName>
-					<RichText.Content value={ summary } />
-				</TagName>
-			</summary>
-			<div
-				{ ...useInnerBlocksProps.save( {
-					className: 'wp-block-details__content',
-				} ) }
-			/>
+			<InnerBlocks.Content />
 		</details>
 	);
 }
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 0e80d6e9a2d7c..e8956872fdc13 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -1,5 +1,5 @@
 .wp-block-details {
-	.wp-block-details__summary {
+	.wp-block-details-summary {
 		> * {
 			display: inline;
 			margin-left: 0.5rem;
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index ef620e5105afd..f02c0341f4acc 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -46,6 +46,8 @@ import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as details from './details';
+import * as detailsContent from './details-content';
+import * as detailsSummary from './details-summary';
 import * as embed from './embed';
 import * as file from './file';
 import * as gallery from './gallery';
@@ -146,6 +148,8 @@ const getAllBlocks = () =>
 		commentAuthorAvatar,
 		cover,
 		details,
+		detailsContent,
+		detailsSummary,
 		embed,
 		file,
 		group,
diff --git a/test/integration/fixtures/blocks/core__details-content.html b/test/integration/fixtures/blocks/core__details-content.html
new file mode 100644
index 0000000000000..679acaa6e4b67
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-content.html
@@ -0,0 +1,9 @@
+<!-- wp:details -->
+<details class="wp-block-details"><!-- wp:details-summary -->
+	<summary class="wp-block-details-summary"><h2></h2></summary>
+	<!-- /wp:details-summary -->
+	
+	<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+	<p></p>
+	<!-- /wp:paragraph --></details>
+	<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details-summary.html b/test/integration/fixtures/blocks/core__details-summary.html
new file mode 100644
index 0000000000000..62da9a884560e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-summary.html
@@ -0,0 +1,3 @@
+<!-- wp:details-summary -->
+<summary class="wp-block-details-summary"><h2></h2></summary>
+<!-- /wp:details-summary -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-summary.json b/test/integration/fixtures/blocks/core__details-summary.json
new file mode 100644
index 0000000000000..c0d345d39de09
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-summary.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/details-summary",
+		"isValid": true,
+		"attributes": {
+			"level": 2,
+			"summary": ""
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details-summary.parsed.json b/test/integration/fixtures/blocks/core__details-summary.parsed.json
new file mode 100644
index 0000000000000..a80ec88f4c2f3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-summary.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/details-summary",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n",
+		"innerContent": [
+			"\n<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details-summary.serialized.html b/test/integration/fixtures/blocks/core__details-summary.serialized.html
new file mode 100644
index 0000000000000..ced51e61c38da
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-summary.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:details-summary -->
+<summary class="wp-block-details-summary"><h2></h2></summary>
+<!-- /wp:details-summary -->
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
index 026ff7d83efca..679acaa6e4b67 100644
--- a/test/integration/fixtures/blocks/core__details.html
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -1,10 +1,9 @@
 <!-- wp:details -->
-<details class="wp-block-details" open>
-	<summary class="wp-block-details__summary"><h2></h2></summary>
-	<div class="wp-block-details__content">
-		<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<details class="wp-block-details"><!-- wp:details-summary -->
+	<summary class="wp-block-details-summary"><h2></h2></summary>
+	<!-- /wp:details-summary -->
+	
+	<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
 	<p></p>
-	<!-- /wp:paragraph -->
-	</div>
-</details>
-<!-- /wp:details -->
+	<!-- /wp:paragraph --></details>
+	<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
index c4f0df0dcfdea..cd4a49deabbe6 100644
--- a/test/integration/fixtures/blocks/core__details.json
+++ b/test/integration/fixtures/blocks/core__details.json
@@ -5,9 +5,18 @@
 		"attributes": {
 			"level": 2,
 			"summary": "",
-			"showContent": true
+			"showContent": false
 		},
 		"innerBlocks": [
+			{
+				"name": "core/details-summary",
+				"isValid": true,
+				"attributes": {
+					"level": 2,
+					"summary": ""
+				},
+				"innerBlocks": []
+			},
 			{
 				"name": "core/paragraph",
 				"isValid": true,
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
index 9d19e26cd6a1e..cb9773bcbe82d 100644
--- a/test/integration/fixtures/blocks/core__details.parsed.json
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -3,6 +3,15 @@
 		"blockName": "core/details",
 		"attrs": {},
 		"innerBlocks": [
+			{
+				"blockName": "core/details-summary",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n\t",
+				"innerContent": [
+					"\n\t<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n\t"
+				]
+			},
 			{
 				"blockName": "core/paragraph",
 				"attrs": {
@@ -13,11 +22,13 @@
 				"innerContent": [ "\n\t<p></p>\n\t" ]
 			}
 		],
-		"innerHTML": "\n<details class=\"wp-block-details\" open>\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t\n\t</div>\n</details>\n",
+		"innerHTML": "\n<details class=\"wp-block-details\">\n\t\n\t</details>\n\t",
 		"innerContent": [
-			"\n<details class=\"wp-block-details\" open>\n\t<summary class=\"wp-block-details__summary\"><h2></h2></summary>\n\t<div class=\"wp-block-details__content\">\n\t\t",
+			"\n<details class=\"wp-block-details\">",
+			null,
+			"\n\t\n\t",
 			null,
-			"\n\t</div>\n</details>\n"
+			"</details>\n\t"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
index 59de32dd22b62..63871a5ed3d50 100644
--- a/test/integration/fixtures/blocks/core__details.serialized.html
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -1,5 +1,9 @@
 <!-- wp:details -->
-<details class="wp-block-details" open><summary class="wp-block-details__summary"><h2></h2></summary><div class="wp-block-details__content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<details class="wp-block-details"><!-- wp:details-summary -->
+<summary class="wp-block-details-summary"><h2></h2></summary>
+<!-- /wp:details-summary -->
+
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
 <p></p>
-<!-- /wp:paragraph --></div></details>
+<!-- /wp:paragraph --></details>
 <!-- /wp:details -->

From bc421cc88448b2b6fbcfc86b6df533bfdc47d526 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 8 Nov 2022 15:02:37 +0100
Subject: [PATCH 19/41] Update summary text, descriptions and fixtures

---
 docs/reference-guides/core-blocks.md          |  6 ++--
 .../src/details-content/block.json            |  4 +--
 .../src/details-summary/block.json            |  2 +-
 .../block-library/src/details-summary/edit.js |  3 +-
 .../block-library/src/details-summary/save.js |  5 +++-
 packages/block-library/src/details/edit.js    |  6 +++-
 .../blocks/core__details-content.html         | 12 +++-----
 .../blocks/core__details-content.json         | 19 ++++++++++++
 .../blocks/core__details-content.parsed.json  | 23 ++++++++++++++
 .../core__details-content.serialized.html     |  5 ++++
 .../blocks/core__details-summary.html         |  2 +-
 .../blocks/core__details-summary.json         |  2 +-
 .../blocks/core__details-summary.parsed.json  |  4 +--
 .../core__details-summary.serialized.html     |  2 +-
 .../fixtures/blocks/core__details.html        |  8 +++--
 .../fixtures/blocks/core__details.json        | 25 +++++++++-------
 .../fixtures/blocks/core__details.parsed.json | 30 +++++++++++++------
 .../blocks/core__details.serialized.html      |  8 +++--
 18 files changed, 118 insertions(+), 48 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__details-content.json
 create mode 100644 test/integration/fixtures/blocks/core__details-content.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__details-content.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index f609e5e41eec6..3463c83f48c16 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -242,9 +242,9 @@ A block that displays a summary and shows or hides additional content. ([Source]
 -	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** showContent
 
-## Details content
+## Details Content
 
-A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
+The content inside the details is hidden until the details are expanded. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
 
 -	**Name:** core/details-content
 -	**Category:** theme
@@ -253,7 +253,7 @@ A block that displays a summary and shows or hides additional content. ([Source]
 
 ## Summary
 
-A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
+Clicking on the summary will show or hide the content inside the details. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
 
 -	**Name:** core/details-summary
 -	**Category:** theme
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index af16835d55fb0..8e5aebc66bfb7 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -3,10 +3,10 @@
 	"apiVersion": 2,
 	"__experimental": true,
 	"name": "core/details-content",
-	"title": "Details content",
+	"title": "Details Content",
 	"category": "theme",
 	"parent": [ "core/details" ],
-	"description": "A block that displays a summary and shows or hides additional content.",
+	"description": "The content inside the details is hidden until the details are expanded.",
 	"textdomain": "default",
 	"supports": {
 		"align": true,
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index e49ba9635828a..df2c87eba7201 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -6,7 +6,7 @@
 	"title": "Summary",
 	"category": "theme",
 	"parent": [ "core/details" ],
-	"description": "A block that displays a summary and shows or hides additional content.",
+	"description": "Clicking on the summary will show or hide the content inside the details.",
 	"textdomain": "default",
 	"attributes": {
 		"level": {
diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index b82b6407ad457..412dda5b401ab 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -34,9 +34,8 @@ function DetailsSummaryBlock( { attributes, setAttributes } ) {
 				<RichText
 					tagName={ tagName }
 					aria-label={ __( 'Add summary' ) }
-					placeholder={ __( 'Add summary' ) }
 					withoutInteractiveFormatting
-					value={ summary }
+					value={ !! summary ? summary : __( 'Details' ) }
 					onChange={ ( newSummary ) =>
 						setAttributes( { summary: newSummary } )
 					}
diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
index 3fc7d2feaee01..ce60fa1cfe6e9 100644
--- a/packages/block-library/src/details-summary/save.js
+++ b/packages/block-library/src/details-summary/save.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { level, summary } = attributes;
@@ -10,7 +11,9 @@ export default function save( { attributes } ) {
 	return (
 		<summary { ...useBlockProps.save() }>
 			<TagName>
-				<RichText.Content value={ summary } />
+				<RichText.Content
+					value={ !! summary ? summary : __( 'Details' ) }
+				/>
 			</TagName>
 		</summary>
 	);
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 21e134eace279..e2d350f856a5c 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -24,7 +24,11 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 	const hasSelection = useSelect( ( select ) => {
 		const { isBlockSelected, hasSelectedInnerBlock } =
 			select( blockEditorStore );
-		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
+		/* Sets deep to true to also find blocks inside the details content block. */
+		return (
+			hasSelectedInnerBlock( clientId, true ) ||
+			isBlockSelected( clientId )
+		);
 	}, [] );
 
 	return (
diff --git a/test/integration/fixtures/blocks/core__details-content.html b/test/integration/fixtures/blocks/core__details-content.html
index 679acaa6e4b67..fa391712916db 100644
--- a/test/integration/fixtures/blocks/core__details-content.html
+++ b/test/integration/fixtures/blocks/core__details-content.html
@@ -1,9 +1,5 @@
-<!-- wp:details -->
-<details class="wp-block-details"><!-- wp:details-summary -->
-	<summary class="wp-block-details-summary"><h2></h2></summary>
-	<!-- /wp:details-summary -->
-	
-	<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<!-- wp:details-content -->
+<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
 	<p></p>
-	<!-- /wp:paragraph --></details>
-	<!-- /wp:details -->
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:details-content -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-content.json b/test/integration/fixtures/blocks/core__details-content.json
new file mode 100644
index 0000000000000..6f76bc2a95c41
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-content.json
@@ -0,0 +1,19 @@
+[
+	{
+		"name": "core/details-content",
+		"isValid": true,
+		"attributes": {},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Add text or blocks that will display when the details block is opened."
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details-content.parsed.json b/test/integration/fixtures/blocks/core__details-content.parsed.json
new file mode 100644
index 0000000000000..e422d5195bb0b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-content.parsed.json
@@ -0,0 +1,23 @@
+[
+	{
+		"blockName": "core/details-content",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Add text or blocks that will display when the details block is opened."
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<p></p>\n\t",
+				"innerContent": [ "\n\t<p></p>\n\t" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-details-content\"></div>\n\t",
+		"innerContent": [
+			"\n<div class=\"wp-block-details-content\">",
+			null,
+			"</div>\n\t"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details-content.serialized.html b/test/integration/fixtures/blocks/core__details-content.serialized.html
new file mode 100644
index 0000000000000..0e002ffe8ffad
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details-content.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:details-content -->
+<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<p></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:details-content -->
diff --git a/test/integration/fixtures/blocks/core__details-summary.html b/test/integration/fixtures/blocks/core__details-summary.html
index 62da9a884560e..d82d8a1002aba 100644
--- a/test/integration/fixtures/blocks/core__details-summary.html
+++ b/test/integration/fixtures/blocks/core__details-summary.html
@@ -1,3 +1,3 @@
 <!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2></h2></summary>
+<summary class="wp-block-details-summary"><h2>Details</h2></summary>
 <!-- /wp:details-summary -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-summary.json b/test/integration/fixtures/blocks/core__details-summary.json
index c0d345d39de09..4f186231129c1 100644
--- a/test/integration/fixtures/blocks/core__details-summary.json
+++ b/test/integration/fixtures/blocks/core__details-summary.json
@@ -4,7 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"level": 2,
-			"summary": ""
+			"summary": "Details"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__details-summary.parsed.json b/test/integration/fixtures/blocks/core__details-summary.parsed.json
index a80ec88f4c2f3..f2f41e2d44aaf 100644
--- a/test/integration/fixtures/blocks/core__details-summary.parsed.json
+++ b/test/integration/fixtures/blocks/core__details-summary.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/details-summary",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n",
+		"innerHTML": "\n<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n",
 		"innerContent": [
-			"\n<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n"
+			"\n<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__details-summary.serialized.html b/test/integration/fixtures/blocks/core__details-summary.serialized.html
index ced51e61c38da..b2b6a5408f479 100644
--- a/test/integration/fixtures/blocks/core__details-summary.serialized.html
+++ b/test/integration/fixtures/blocks/core__details-summary.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2></h2></summary>
+<summary class="wp-block-details-summary"><h2>Details</h2></summary>
 <!-- /wp:details-summary -->
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
index 679acaa6e4b67..5e606f14a78c5 100644
--- a/test/integration/fixtures/blocks/core__details.html
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -1,9 +1,11 @@
 <!-- wp:details -->
 <details class="wp-block-details"><!-- wp:details-summary -->
-	<summary class="wp-block-details-summary"><h2></h2></summary>
+	<summary class="wp-block-details-summary"><h2>Details</h2></summary>
 	<!-- /wp:details-summary -->
 	
-	<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+	<!-- wp:details-content -->
+	<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
 	<p></p>
-	<!-- /wp:paragraph --></details>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:details-content --></details>
 	<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
index cd4a49deabbe6..7a661b751187c 100644
--- a/test/integration/fixtures/blocks/core__details.json
+++ b/test/integration/fixtures/blocks/core__details.json
@@ -3,8 +3,6 @@
 		"name": "core/details",
 		"isValid": true,
 		"attributes": {
-			"level": 2,
-			"summary": "",
 			"showContent": false
 		},
 		"innerBlocks": [
@@ -13,19 +11,26 @@
 				"isValid": true,
 				"attributes": {
 					"level": 2,
-					"summary": ""
+					"summary": "Details"
 				},
 				"innerBlocks": []
 			},
 			{
-				"name": "core/paragraph",
+				"name": "core/details-content",
 				"isValid": true,
-				"attributes": {
-					"content": "",
-					"dropCap": false,
-					"placeholder": "Add text or blocks that will display when the details block is opened."
-				},
-				"innerBlocks": []
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "",
+							"dropCap": false,
+							"placeholder": "Add text or blocks that will display when the details block is opened."
+						},
+						"innerBlocks": []
+					}
+				]
 			}
 		]
 	}
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
index cb9773bcbe82d..b1592cdd549bb 100644
--- a/test/integration/fixtures/blocks/core__details.parsed.json
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -7,19 +7,31 @@
 				"blockName": "core/details-summary",
 				"attrs": {},
 				"innerBlocks": [],
-				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n\t",
+				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n\t",
 				"innerContent": [
-					"\n\t<summary class=\"wp-block-details-summary\"><h2></h2></summary>\n\t"
+					"\n\t<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n\t"
 				]
 			},
 			{
-				"blockName": "core/paragraph",
-				"attrs": {
-					"placeholder": "Add text or blocks that will display when the details block is opened."
-				},
-				"innerBlocks": [],
-				"innerHTML": "\n\t<p></p>\n\t",
-				"innerContent": [ "\n\t<p></p>\n\t" ]
+				"blockName": "core/details-content",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {
+							"placeholder": "Add text or blocks that will display when the details block is opened."
+						},
+						"innerBlocks": [],
+						"innerHTML": "\n\t<p></p>\n\t",
+						"innerContent": [ "\n\t<p></p>\n\t" ]
+					}
+				],
+				"innerHTML": "\n\t<div class=\"wp-block-details-content\"></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-details-content\">",
+					null,
+					"</div>\n\t"
+				]
 			}
 		],
 		"innerHTML": "\n<details class=\"wp-block-details\">\n\t\n\t</details>\n\t",
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
index 63871a5ed3d50..a06a64abe8584 100644
--- a/test/integration/fixtures/blocks/core__details.serialized.html
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -1,9 +1,11 @@
 <!-- wp:details -->
 <details class="wp-block-details"><!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2></h2></summary>
+<summary class="wp-block-details-summary"><h2>Details</h2></summary>
 <!-- /wp:details-summary -->
 
-<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
+<!-- wp:details-content -->
+<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
 <p></p>
-<!-- /wp:paragraph --></details>
+<!-- /wp:paragraph --></div>
+<!-- /wp:details-content --></details>
 <!-- /wp:details -->

From bd3474aa6b5cd759c0a28046bc3b326e9eda85be Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 9 Nov 2022 09:07:10 +0100
Subject: [PATCH 20/41] Update edit.js

---
 packages/block-library/src/details/edit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index e2d350f856a5c..6100b3621d28a 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -17,6 +17,7 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 	const { showContent } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: TEMPLATE,
 		template: TEMPLATE,
 	} );
 

From 19cf6894e4046f07b3b8b39d173fcdd903e4af7f Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 9 Nov 2022 09:34:51 +0100
Subject: [PATCH 21/41] remove transform and editor style.

---
 docs/reference-guides/core-blocks.md                  |  2 +-
 packages/block-library/src/details-content/block.json |  1 -
 packages/block-library/src/details-summary/block.json |  3 +--
 packages/block-library/src/details/block.json         |  1 -
 packages/block-library/src/details/index.js           |  2 --
 packages/block-library/src/details/transforms.js      | 11 -----------
 6 files changed, 2 insertions(+), 18 deletions(-)
 delete mode 100644 packages/block-library/src/details/transforms.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 3463c83f48c16..15f90617a730b 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -251,7 +251,7 @@ The content inside the details is hidden until the details are expanded. ([Sourc
 -	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** 
 
-## Summary
+## Details Summary
 
 Clicking on the summary will show or hide the content inside the details. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
 
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index 8e5aebc66bfb7..99358a12ef90f 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -44,6 +44,5 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-details",
 	"style": "wp-block-details"
 }
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index df2c87eba7201..4d154f06a0ee9 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -3,7 +3,7 @@
 	"apiVersion": 2,
 	"__experimental": true,
 	"name": "core/details-summary",
-	"title": "Summary",
+	"title": "Details Summary",
 	"category": "theme",
 	"parent": [ "core/details" ],
 	"description": "Clicking on the summary will show or hide the content inside the details.",
@@ -53,6 +53,5 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-details",
 	"style": "wp-block-details"
 }
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index 7ac340d971025..02f5ca14d36ff 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -50,6 +50,5 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-details",
 	"style": "wp-block-details"
 }
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index d4e82a981f2f3..b491250252aa2 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -10,14 +10,12 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
-import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
-	transforms,
 	save,
 	edit,
 };
diff --git a/packages/block-library/src/details/transforms.js b/packages/block-library/src/details/transforms.js
deleted file mode 100644
index 0296a913bb6dc..0000000000000
--- a/packages/block-library/src/details/transforms.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const transforms = {
-	to: [
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( attributes, innerBlocks ) => innerBlocks,
-		},
-	],
-};
-
-export default transforms;

From a7c05f23b4df11b169ef3b27685d854e51fcd493 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 9 Nov 2022 11:31:28 +0100
Subject: [PATCH 22/41] update icons.

---
 packages/block-library/src/details-content/index.js | 2 +-
 packages/block-library/src/details-summary/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/details-content/index.js b/packages/block-library/src/details-content/index.js
index b491250252aa2..1c7dbeaf193ad 100644
--- a/packages/block-library/src/details-content/index.js
+++ b/packages/block-library/src/details-content/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { chevronDown as icon } from '@wordpress/icons';
+import { postContent as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
diff --git a/packages/block-library/src/details-summary/index.js b/packages/block-library/src/details-summary/index.js
index b491250252aa2..874d806c4bbda 100644
--- a/packages/block-library/src/details-summary/index.js
+++ b/packages/block-library/src/details-summary/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { chevronDown as icon } from '@wordpress/icons';
+import { heading as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

From c31508c417a3dd8e33611ae4c23a4651f4398985 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 10 Nov 2022 09:46:41 +0100
Subject: [PATCH 23/41] Limit the inner blocks to one inside the Details block

---
 docs/reference-guides/core-blocks.md                  | 4 ++--
 packages/block-library/src/details-content/block.json | 1 +
 packages/block-library/src/details-summary/block.json | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 15f90617a730b..e7751bfc9c62f 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -248,7 +248,7 @@ The content inside the details is hidden until the details are expanded. ([Sourc
 
 -	**Name:** core/details-content
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~multiple~~
 -	**Attributes:** 
 
 ## Details Summary
@@ -257,7 +257,7 @@ Clicking on the summary will show or hide the content inside the details. ([Sour
 
 -	**Name:** core/details-summary
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~multiple~~
 -	**Attributes:** level, summary
 
 ## Embed
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index 99358a12ef90f..ecb594f5fb4db 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -26,6 +26,7 @@
 			"style": true
 		},
 		"html": false,
+		"multiple": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index 4d154f06a0ee9..9b63acdb06fe9 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -35,6 +35,7 @@
 			"style": true
 		},
 		"html": false,
+		"multiple": false,
 		"spacing": {
 			"margin": true,
 			"padding": true

From 4aef03ed767e5971647128f3c6046f06f8cf3ed4 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 10 Nov 2022 13:28:26 +0100
Subject: [PATCH 24/41] Remove the alignments from the inner blocks, and
 prevent them from being used as reusable blocks.

---
 docs/reference-guides/core-blocks.md                  | 4 ++--
 packages/block-library/src/details-content/block.json | 4 +++-
 packages/block-library/src/details-content/edit.js    | 1 +
 packages/block-library/src/details-summary/block.json | 4 +++-
 packages/block-library/src/details/edit.js            | 1 +
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index e7751bfc9c62f..e617b145a6077 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -248,7 +248,7 @@ The content inside the details is hidden until the details are expanded. ([Sourc
 
 -	**Name:** core/details-content
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~multiple~~
+-	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
 -	**Attributes:** 
 
 ## Details Summary
@@ -257,7 +257,7 @@ Clicking on the summary will show or hide the content inside the details. ([Sour
 
 -	**Name:** core/details-summary
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~multiple~~
+-	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
 -	**Attributes:** level, summary
 
 ## Embed
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index ecb594f5fb4db..b9309730b0c30 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -9,7 +9,7 @@
 	"description": "The content inside the details is hidden until the details are expanded.",
 	"textdomain": "default",
 	"supports": {
-		"align": true,
+		"align": false,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -26,7 +26,9 @@
 			"style": true
 		},
 		"html": false,
+		"lock": false,
 		"multiple": false,
+		"reusable": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
diff --git a/packages/block-library/src/details-content/edit.js b/packages/block-library/src/details-content/edit.js
index f79f60fc741e0..7463cb17d8437 100644
--- a/packages/block-library/src/details-content/edit.js
+++ b/packages/block-library/src/details-content/edit.js
@@ -19,6 +19,7 @@ function DetailsContentBlock() {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
+		templateLock: false,
 	} );
 
 	return <div { ...innerBlocksProps }></div>;
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index 9b63acdb06fe9..a1ae2b447ad07 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -20,7 +20,7 @@
 		}
 	},
 	"supports": {
-		"align": true,
+		"align": false,
 		"color": {
 			"gradients": true,
 			"__experimentalDefaultControls": {
@@ -35,7 +35,9 @@
 			"style": true
 		},
 		"html": false,
+		"lock": false,
 		"multiple": false,
+		"reusable": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 6100b3621d28a..19fb1f521164f 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -19,6 +19,7 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: TEMPLATE,
 		template: TEMPLATE,
+		templateLock: 'all',
 	} );
 
 	// Check if either the block or the inner blocks are selected.

From 0297f7d9b4a95a3f8760ed2a06bb34d2089b4f6d Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 11 Nov 2022 12:25:29 +0100
Subject: [PATCH 25/41] Update index.js

---
 packages/block-library/src/details/index.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index b491250252aa2..254700f7f8c28 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { chevronDown as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -16,6 +17,17 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/details-summary',
+				attributes: { summary: __( 'Details' ) },
+			},
+			{
+				name: 'core/details-content',
+			},
+		],
+	},
 	save,
 	edit,
 };

From d72a333592fa9d10c38eca4216ba118343dd12d3 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 13 Feb 2023 09:29:47 +0100
Subject: [PATCH 26/41] Add the icon

---
 packages/block-library/src/details/index.js |  2 +-
 packages/icons/CHANGELOG.md                 |  4 ++++
 packages/icons/src/index.js                 |  1 +
 packages/icons/src/library/details.js       | 21 +++++++++++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/icons/src/library/details.js

diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index 254700f7f8c28..24ad75282ee0f 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { chevronDown as icon } from '@wordpress/icons';
+import { details as icon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index cba47d89297f5..adfb90f892eda 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New features
+
+-   Add new `details` icon. ([#45055](https://github.com/WordPress/gutenberg/pull/45055))
+
 ## 9.17.0 (2023-02-01)
 
 ## 9.16.0 (2023-01-11)
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index df8328d60f699..0fac58c9e4249 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -66,6 +66,7 @@ export { default as currencyEuro } from './library/currency-euro';
 export { default as currencyPound } from './library/currency-pound';
 export { default as customPostType } from './library/custom-post-type';
 export { default as desktop } from './library/desktop';
+export { default as details } from './library/details';
 export { default as dragHandle } from './library/drag-handle';
 export { default as drawerLeft } from './library/drawer-left';
 export { default as drawerRight } from './library/drawer-right';
diff --git a/packages/icons/src/library/details.js b/packages/icons/src/library/details.js
new file mode 100644
index 0000000000000..11fa97eb8cb33
--- /dev/null
+++ b/packages/icons/src/library/details.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const details = (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			d="M4 10L8 8L4 6V10ZM12 17V15.5H4V17H12ZM4 11.5H20V13H4V11.5ZM20 7.25L10 7.25V8.75L20 8.75V7.25Z"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+	</SVG>
+);
+
+export default details;

From 95482f0a2df7387b80f0593cdeec5f0d11ea8851 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 13 Feb 2023 14:05:05 +0100
Subject: [PATCH 27/41] Try to apply font size to the heading inside summary

---
 .../block-library/src/details-summary/edit.js | 24 ++++++++++++++++++-
 .../block-library/src/details-summary/save.js | 23 ++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index 412dda5b401ab..7e6b6ebecf3b4 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -5,6 +10,8 @@ import {
 	RichText,
 	BlockControls,
 	useBlockProps,
+	getTypographyClassesAndStyles as useTypographyProps,
+	useSetting,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -14,8 +21,21 @@ import { __ } from '@wordpress/i18n';
 import HeadingLevelDropdown from './heading-level-dropdown';
 
 function DetailsSummaryBlock( { attributes, setAttributes } ) {
-	const { level, summary } = attributes;
+	const { level, summary, style } = attributes;
 	const tagName = 'h' + level;
+	const fluidTypographySettings = useSetting( 'typography.fluid' );
+	const typographyProps = useTypographyProps(
+		attributes,
+		fluidTypographySettings
+	);
+
+	const additionalClassNames = classnames(
+		'wp-block-details-summary__summary',
+		typographyProps.className,
+		{
+			'has-custom-font-size': style?.typography?.fontSize ? true : false,
+		}
+	);
 
 	return (
 		<>
@@ -33,12 +53,14 @@ function DetailsSummaryBlock( { attributes, setAttributes } ) {
 			>
 				<RichText
 					tagName={ tagName }
+					className={ additionalClassNames }
 					aria-label={ __( 'Add summary' ) }
 					withoutInteractiveFormatting
 					value={ !! summary ? summary : __( 'Details' ) }
 					onChange={ ( newSummary ) =>
 						setAttributes( { summary: newSummary } )
 					}
+					style={ typographyProps.style }
 				/>
 			</summary>
 		</>
diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
index ce60fa1cfe6e9..d00f929fb6afe 100644
--- a/packages/block-library/src/details-summary/save.js
+++ b/packages/block-library/src/details-summary/save.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -5,12 +10,26 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
-	const { level, summary } = attributes;
+	const { level, summary, fontSize, style } = attributes;
 	const TagName = 'h' + level;
 
+	const customFontSize = style?.typography?.fontSize
+		? 'font-size:' + style?.typography?.fontSize
+		: false;
+	const additionalClassNames = classnames(
+		'wp-block-details-summary__summary',
+		{
+			[ `has-${ fontSize }-font-size` ]: fontSize,
+			'has-custom-font-size': customFontSize ? true : false,
+		}
+	);
+
 	return (
 		<summary { ...useBlockProps.save() }>
-			<TagName>
+			<TagName
+				className={ additionalClassNames }
+				style={ customFontSize ? customFontSize : undefined }
+			>
 				<RichText.Content
 					value={ !! summary ? summary : __( 'Details' ) }
 				/>

From 3e2cd785b6182461b53d91e32b236d4b26e7d723 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 13 Feb 2023 14:23:47 +0100
Subject: [PATCH 28/41] Update fixtures

---
 test/integration/fixtures/blocks/core__details-summary.html   | 2 +-
 .../fixtures/blocks/core__details-summary.parsed.json         | 4 ++--
 .../fixtures/blocks/core__details-summary.serialized.html     | 2 +-
 test/integration/fixtures/blocks/core__details.html           | 2 +-
 test/integration/fixtures/blocks/core__details.parsed.json    | 4 ++--
 .../integration/fixtures/blocks/core__details.serialized.html | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/integration/fixtures/blocks/core__details-summary.html b/test/integration/fixtures/blocks/core__details-summary.html
index d82d8a1002aba..76b0fedad2e06 100644
--- a/test/integration/fixtures/blocks/core__details-summary.html
+++ b/test/integration/fixtures/blocks/core__details-summary.html
@@ -1,3 +1,3 @@
 <!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2>Details</h2></summary>
+<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
 <!-- /wp:details-summary -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-summary.parsed.json b/test/integration/fixtures/blocks/core__details-summary.parsed.json
index f2f41e2d44aaf..92cafdd5b4eef 100644
--- a/test/integration/fixtures/blocks/core__details-summary.parsed.json
+++ b/test/integration/fixtures/blocks/core__details-summary.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/details-summary",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n",
+		"innerHTML": "\n<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n",
 		"innerContent": [
-			"\n<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n"
+			"\n<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__details-summary.serialized.html b/test/integration/fixtures/blocks/core__details-summary.serialized.html
index b2b6a5408f479..da9fe0d474d11 100644
--- a/test/integration/fixtures/blocks/core__details-summary.serialized.html
+++ b/test/integration/fixtures/blocks/core__details-summary.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2>Details</h2></summary>
+<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
 <!-- /wp:details-summary -->
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
index 5e606f14a78c5..403cd190b6524 100644
--- a/test/integration/fixtures/blocks/core__details.html
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -1,6 +1,6 @@
 <!-- wp:details -->
 <details class="wp-block-details"><!-- wp:details-summary -->
-	<summary class="wp-block-details-summary"><h2>Details</h2></summary>
+	<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
 	<!-- /wp:details-summary -->
 	
 	<!-- wp:details-content -->
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
index b1592cdd549bb..614e05e5b0cdb 100644
--- a/test/integration/fixtures/blocks/core__details.parsed.json
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -7,9 +7,9 @@
 				"blockName": "core/details-summary",
 				"attrs": {},
 				"innerBlocks": [],
-				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n\t",
+				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n\t",
 				"innerContent": [
-					"\n\t<summary class=\"wp-block-details-summary\"><h2>Details</h2></summary>\n\t"
+					"\n\t<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n\t"
 				]
 			},
 			{
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
index a06a64abe8584..6fcf1efa47b1e 100644
--- a/test/integration/fixtures/blocks/core__details.serialized.html
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -1,6 +1,6 @@
 <!-- wp:details -->
 <details class="wp-block-details"><!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2>Details</h2></summary>
+<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
 <!-- /wp:details-summary -->
 
 <!-- wp:details-content -->

From d4b392338977789801adc536a82d994ac607a235 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 17 Feb 2023 06:18:08 +0100
Subject: [PATCH 29/41] Remove the allowed formatting from the RichText

---
 packages/block-library/src/details-summary/edit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index 7e6b6ebecf3b4..5df022f985c4c 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -55,6 +55,7 @@ function DetailsSummaryBlock( { attributes, setAttributes } ) {
 					tagName={ tagName }
 					className={ additionalClassNames }
 					aria-label={ __( 'Add summary' ) }
+					allowedFormats={ [] }
 					withoutInteractiveFormatting
 					value={ !! summary ? summary : __( 'Details' ) }
 					onChange={ ( newSummary ) =>

From cb2a3d807e5c7c80f67ca2cc877c43544fd1e106 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 28 Feb 2023 16:30:35 +0100
Subject: [PATCH 30/41] Try the experimentalSelector and skipSerialization
 again

---
 .../src/details-summary/block.json            |  4 +-
 .../block-library/src/details-summary/edit.js | 41 +++++++-----------
 .../block-library/src/details-summary/save.js | 42 +++++++------------
 packages/block-library/src/details/style.scss |  2 +-
 4 files changed, 34 insertions(+), 55 deletions(-)

diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index a1ae2b447ad07..e383ab3e1ae78 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -53,7 +53,9 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
-			}
+			},
+			"__experimentalSelector": ".wp-block-details-summary__summary h1,.wp-block-details-summary__summary h2,.wp-block-details-summary__summary h3,.wp-block-details-summary__summary h4,.wp-block-details-summary__summary h5,.wp-block-details-summary__summary h6",
+			"__experimentalSkipSerialization": true
 		}
 	},
 	"style": "wp-block-details"
diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index 5df022f985c4c..57c0337cb0c9b 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -21,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import HeadingLevelDropdown from './heading-level-dropdown';
 
 function DetailsSummaryBlock( { attributes, setAttributes } ) {
-	const { level, summary, style } = attributes;
+	const { level, summary } = attributes;
 	const tagName = 'h' + level;
 	const fluidTypographySettings = useSetting( 'typography.fluid' );
 	const typographyProps = useTypographyProps(
@@ -29,14 +24,6 @@ function DetailsSummaryBlock( { attributes, setAttributes } ) {
 		fluidTypographySettings
 	);
 
-	const additionalClassNames = classnames(
-		'wp-block-details-summary__summary',
-		typographyProps.className,
-		{
-			'has-custom-font-size': style?.typography?.fontSize ? true : false,
-		}
-	);
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -50,19 +37,21 @@ function DetailsSummaryBlock( { attributes, setAttributes } ) {
 			<summary
 				{ ...useBlockProps() }
 				onClick={ ( event ) => event.preventDefault() }
+				style={ typographyProps.style }
 			>
-				<RichText
-					tagName={ tagName }
-					className={ additionalClassNames }
-					aria-label={ __( 'Add summary' ) }
-					allowedFormats={ [] }
-					withoutInteractiveFormatting
-					value={ !! summary ? summary : __( 'Details' ) }
-					onChange={ ( newSummary ) =>
-						setAttributes( { summary: newSummary } )
-					}
-					style={ typographyProps.style }
-				/>
+				<div className="wp-block-details-summary__summary">
+					<RichText
+						tagName={ tagName }
+						aria-label={ __( 'Add summary' ) }
+						allowedFormats={ [] }
+						withoutInteractiveFormatting
+						value={ !! summary ? summary : __( 'Details' ) }
+						onChange={ ( newSummary ) =>
+							setAttributes( { summary: newSummary } )
+						}
+						style={ typographyProps.style }
+					/>
+				</div>
 			</summary>
 		</>
 	);
diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
index d00f929fb6afe..aefab85276046 100644
--- a/packages/block-library/src/details-summary/save.js
+++ b/packages/block-library/src/details-summary/save.js
@@ -1,39 +1,27 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	getTypographyClassesAndStyles,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
-	const { level, summary, fontSize, style } = attributes;
+	const { level, summary } = attributes;
 	const TagName = 'h' + level;
-
-	const customFontSize = style?.typography?.fontSize
-		? 'font-size:' + style?.typography?.fontSize
-		: false;
-	const additionalClassNames = classnames(
-		'wp-block-details-summary__summary',
-		{
-			[ `has-${ fontSize }-font-size` ]: fontSize,
-			'has-custom-font-size': customFontSize ? true : false,
-		}
-	);
+	const typographyProps = getTypographyClassesAndStyles( attributes );
 
 	return (
-		<summary { ...useBlockProps.save() }>
-			<TagName
-				className={ additionalClassNames }
-				style={ customFontSize ? customFontSize : undefined }
-			>
-				<RichText.Content
-					value={ !! summary ? summary : __( 'Details' ) }
-				/>
-			</TagName>
+		<summary { ...useBlockProps.save() } style={ typographyProps.style }>
+			<div className="wp-block-details-summary__summary">
+				<TagName style={ typographyProps.style }>
+					<RichText.Content
+						value={ !! summary ? summary : __( 'Details' ) }
+					/>
+				</TagName>
+			</div>
 		</summary>
 	);
 }
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index e8956872fdc13..034e66fa16a4a 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -1,6 +1,6 @@
 .wp-block-details {
 	.wp-block-details-summary {
-		> * {
+		* {
 			display: inline;
 			margin-left: 0.5rem;
 			cursor: pointer;

From 460041a81e1de58ae6f98bc1d90f39ef9a85a38b Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 1 Mar 2023 07:33:00 +0100
Subject: [PATCH 31/41] Remove heading from Summary

---
 docs/reference-guides/core-blocks.md          |  2 +-
 .../src/details-content/block.json            |  3 +-
 .../src/details-summary/block.json            | 15 +---
 .../block-library/src/details-summary/edit.js | 65 +++++------------
 .../details-summary/heading-level-dropdown.js | 69 -------------------
 .../src/details-summary/heading-level-icon.js | 48 -------------
 .../block-library/src/details-summary/save.js | 21 ++----
 .../blocks/core__details-summary.html         |  2 +-
 .../blocks/core__details-summary.json         |  5 +-
 .../blocks/core__details-summary.parsed.json  |  4 +-
 .../core__details-summary.serialized.html     |  2 +-
 .../fixtures/blocks/core__details.html        |  2 +-
 .../fixtures/blocks/core__details.json        |  5 +-
 .../fixtures/blocks/core__details.parsed.json |  4 +-
 .../blocks/core__details.serialized.html      |  2 +-
 15 files changed, 35 insertions(+), 214 deletions(-)
 delete mode 100644 packages/block-library/src/details-summary/heading-level-dropdown.js
 delete mode 100644 packages/block-library/src/details-summary/heading-level-icon.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 36202fe2172c7..965f92807b33c 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -258,7 +258,7 @@ Clicking on the summary will show or hide the content inside the details. ([Sour
 -	**Name:** core/details-summary
 -	**Category:** theme
 -	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
--	**Attributes:** level, summary
+-	**Attributes:** summary
 
 ## Embed
 
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index b9309730b0c30..603a064872b87 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -46,6 +46,5 @@
 				"fontSize": true
 			}
 		}
-	},
-	"style": "wp-block-details"
+	}
 }
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index e383ab3e1ae78..fc002e64ad3ce 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -9,14 +9,8 @@
 	"description": "Clicking on the summary will show or hide the content inside the details.",
 	"textdomain": "default",
 	"attributes": {
-		"level": {
-			"type": "number",
-			"default": 2
-		},
 		"summary": {
-			"type": "string",
-			"source": "html",
-			"selector": "h1,h2,h3,h4,h5,h6"
+			"type": "string"
 		}
 	},
 	"supports": {
@@ -53,10 +47,7 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
-			},
-			"__experimentalSelector": ".wp-block-details-summary__summary h1,.wp-block-details-summary__summary h2,.wp-block-details-summary__summary h3,.wp-block-details-summary__summary h4,.wp-block-details-summary__summary h5,.wp-block-details-summary__summary h6",
-			"__experimentalSkipSerialization": true
+			}
 		}
-	},
-	"style": "wp-block-details"
+	}
 }
diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index 57c0337cb0c9b..7986bfe2dc84f 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -1,59 +1,26 @@
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	BlockControls,
-	useBlockProps,
-	getTypographyClassesAndStyles as useTypographyProps,
-	useSetting,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import HeadingLevelDropdown from './heading-level-dropdown';
-
 function DetailsSummaryBlock( { attributes, setAttributes } ) {
-	const { level, summary } = attributes;
-	const tagName = 'h' + level;
-	const fluidTypographySettings = useSetting( 'typography.fluid' );
-	const typographyProps = useTypographyProps(
-		attributes,
-		fluidTypographySettings
-	);
-
+	const summary = attributes.summary ? attributes.summary : __( 'Details' );
 	return (
-		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-			</BlockControls>
-			<summary
-				{ ...useBlockProps() }
-				onClick={ ( event ) => event.preventDefault() }
-				style={ typographyProps.style }
-			>
-				<div className="wp-block-details-summary__summary">
-					<RichText
-						tagName={ tagName }
-						aria-label={ __( 'Add summary' ) }
-						allowedFormats={ [] }
-						withoutInteractiveFormatting
-						value={ !! summary ? summary : __( 'Details' ) }
-						onChange={ ( newSummary ) =>
-							setAttributes( { summary: newSummary } )
-						}
-						style={ typographyProps.style }
-					/>
-				</div>
-			</summary>
-		</>
+		<summary
+			{ ...useBlockProps() }
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			<RichText
+				aria-label={ __( 'Add summary' ) }
+				allowedFormats={ [] }
+				withoutInteractiveFormatting
+				value={ summary }
+				onChange={ ( newSummary ) =>
+					setAttributes( { summary: newSummary } )
+				}
+			/>
+		</summary>
 	);
 }
 
diff --git a/packages/block-library/src/details-summary/heading-level-dropdown.js b/packages/block-library/src/details-summary/heading-level-dropdown.js
deleted file mode 100644
index d8a4eae0ab34d..0000000000000
--- a/packages/block-library/src/details-summary/heading-level-dropdown.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarDropdownMenu } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import HeadingLevelIcon from './heading-level-icon';
-
-const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
-
-const POPOVER_PROPS = {
-	className: 'block-library-heading-level-dropdown',
-};
-
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
-
-/**
- * HeadingLevelDropdown props.
- *
- * @typedef WPHeadingLevelDropdownProps
- *
- * @property {number}                 selectedLevel The chosen heading level.
- * @property {(newValue:number)=>any} onChange      Callback to run when
- *                                                  toolbar value is changed.
- */
-
-/**
- * Dropdown for selecting a heading level (1 through 6).
- *
- * @param {WPHeadingLevelDropdownProps} props Component props.
- *
- * @return {WPComponent} The toolbar.
- */
-export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
-	return (
-		<ToolbarDropdownMenu
-			popoverProps={ POPOVER_PROPS }
-			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-			label={ __( 'Change heading level' ) }
-			controls={ HEADING_LEVELS.map( ( targetLevel ) => {
-				{
-					const isActive = targetLevel === selectedLevel;
-
-					return {
-						icon: (
-							<HeadingLevelIcon
-								level={ targetLevel }
-								isPressed={ isActive }
-							/>
-						),
-						label: sprintf(
-							// translators: %s: heading level e.g: "1", "2", "3"
-							__( 'Heading %d' ),
-							targetLevel
-						),
-						isActive,
-						onClick() {
-							onChange( targetLevel );
-						},
-						role: 'menuitemradio',
-					};
-				}
-			} ) }
-		/>
-	);
-}
diff --git a/packages/block-library/src/details-summary/heading-level-icon.js b/packages/block-library/src/details-summary/heading-level-icon.js
deleted file mode 100644
index b3288d0276161..0000000000000
--- a/packages/block-library/src/details-summary/heading-level-icon.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
-
-/**
- * HeadingLevelIcon props.
- *
- * @typedef WPHeadingLevelIconProps
- *
- * @property {number}   level     The heading level to show an icon for.
- * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false.
- */
-
-/**
- * Heading level icon.
- *
- * @param {WPHeadingLevelIconProps} props Component props.
- *
- * @return {?WPComponent} The icon.
- */
-export default function HeadingLevelIcon( { level, isPressed = false } ) {
-	const levelToPath = {
-		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
-		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
-		3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
-		4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
-		5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
-		6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
-	};
-	if ( ! levelToPath.hasOwnProperty( level ) ) {
-		return null;
-	}
-
-	return (
-		<SVG
-			width="24"
-			height="24"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			isPressed={ isPressed }
-		>
-			<Path d={ levelToPath[ level ] } />
-		</SVG>
-	);
-}
diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
index aefab85276046..c8b52262bbeab 100644
--- a/packages/block-library/src/details-summary/save.js
+++ b/packages/block-library/src/details-summary/save.js
@@ -1,27 +1,14 @@
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	getTypographyClassesAndStyles,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
-	const { level, summary } = attributes;
-	const TagName = 'h' + level;
-	const typographyProps = getTypographyClassesAndStyles( attributes );
-
+	const summary = attributes.summary ? attributes.summary : __( 'Details' );
 	return (
-		<summary { ...useBlockProps.save() } style={ typographyProps.style }>
-			<div className="wp-block-details-summary__summary">
-				<TagName style={ typographyProps.style }>
-					<RichText.Content
-						value={ !! summary ? summary : __( 'Details' ) }
-					/>
-				</TagName>
-			</div>
+		<summary { ...useBlockProps.save() }>
+			<RichText.Content value={ summary } />
 		</summary>
 	);
 }
diff --git a/test/integration/fixtures/blocks/core__details-summary.html b/test/integration/fixtures/blocks/core__details-summary.html
index 76b0fedad2e06..0e0f01cc86d1d 100644
--- a/test/integration/fixtures/blocks/core__details-summary.html
+++ b/test/integration/fixtures/blocks/core__details-summary.html
@@ -1,3 +1,3 @@
 <!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
+<summary class="wp-block-details-summary">Details</summary>
 <!-- /wp:details-summary -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-summary.json b/test/integration/fixtures/blocks/core__details-summary.json
index 4f186231129c1..d8ba9f80aafb0 100644
--- a/test/integration/fixtures/blocks/core__details-summary.json
+++ b/test/integration/fixtures/blocks/core__details-summary.json
@@ -2,10 +2,7 @@
 	{
 		"name": "core/details-summary",
 		"isValid": true,
-		"attributes": {
-			"level": 2,
-			"summary": "Details"
-		},
+		"attributes": {},
 		"innerBlocks": []
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__details-summary.parsed.json b/test/integration/fixtures/blocks/core__details-summary.parsed.json
index 92cafdd5b4eef..de617caceba16 100644
--- a/test/integration/fixtures/blocks/core__details-summary.parsed.json
+++ b/test/integration/fixtures/blocks/core__details-summary.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/details-summary",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n",
+		"innerHTML": "\n<summary class=\"wp-block-details-summary\">Details</summary>\n",
 		"innerContent": [
-			"\n<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n"
+			"\n<summary class=\"wp-block-details-summary\">Details</summary>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__details-summary.serialized.html b/test/integration/fixtures/blocks/core__details-summary.serialized.html
index da9fe0d474d11..465e3c403de54 100644
--- a/test/integration/fixtures/blocks/core__details-summary.serialized.html
+++ b/test/integration/fixtures/blocks/core__details-summary.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
+<summary class="wp-block-details-summary">Details</summary>
 <!-- /wp:details-summary -->
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
index 403cd190b6524..116e80f3fe899 100644
--- a/test/integration/fixtures/blocks/core__details.html
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -1,6 +1,6 @@
 <!-- wp:details -->
 <details class="wp-block-details"><!-- wp:details-summary -->
-	<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
+	<summary class="wp-block-details-summary">Details</summary>
 	<!-- /wp:details-summary -->
 	
 	<!-- wp:details-content -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
index 7a661b751187c..ffca898f98e66 100644
--- a/test/integration/fixtures/blocks/core__details.json
+++ b/test/integration/fixtures/blocks/core__details.json
@@ -9,10 +9,7 @@
 			{
 				"name": "core/details-summary",
 				"isValid": true,
-				"attributes": {
-					"level": 2,
-					"summary": "Details"
-				},
+				"attributes": {},
 				"innerBlocks": []
 			},
 			{
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
index 614e05e5b0cdb..91e0830b26b0d 100644
--- a/test/integration/fixtures/blocks/core__details.parsed.json
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -7,9 +7,9 @@
 				"blockName": "core/details-summary",
 				"attrs": {},
 				"innerBlocks": [],
-				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n\t",
+				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\">Details</summary>\n\t",
 				"innerContent": [
-					"\n\t<summary class=\"wp-block-details-summary\"><h2 class=\"wp-block-details-summary__summary\">Details</h2></summary>\n\t"
+					"\n\t<summary class=\"wp-block-details-summary\">Details</summary>\n\t"
 				]
 			},
 			{
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
index 6fcf1efa47b1e..30f5e2bc3fce1 100644
--- a/test/integration/fixtures/blocks/core__details.serialized.html
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -1,6 +1,6 @@
 <!-- wp:details -->
 <details class="wp-block-details"><!-- wp:details-summary -->
-<summary class="wp-block-details-summary"><h2 class="wp-block-details-summary__summary">Details</h2></summary>
+<summary class="wp-block-details-summary">Details</summary>
 <!-- /wp:details-summary -->
 
 <!-- wp:details-content -->

From ff578c222882029e75a7b50b01366cbdb3f435e3 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 3 Mar 2023 09:50:08 +0100
Subject: [PATCH 32/41] Rename the block, update CSS.

---
 packages/block-library/src/details-content/edit.js     | 4 ++--
 packages/block-library/src/details-summary/edit.js     | 4 ++--
 packages/block-library/src/details-summary/editor.scss | 3 +++
 packages/block-library/src/details-summary/style.scss  | 3 +++
 packages/block-library/src/details/edit.js             | 4 ++--
 packages/block-library/src/details/style.scss          | 9 ---------
 packages/block-library/src/editor.scss                 | 1 +
 packages/block-library/src/style.scss                  | 2 +-
 8 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 packages/block-library/src/details-summary/editor.scss
 create mode 100644 packages/block-library/src/details-summary/style.scss
 delete mode 100644 packages/block-library/src/details/style.scss

diff --git a/packages/block-library/src/details-content/edit.js b/packages/block-library/src/details-content/edit.js
index 7463cb17d8437..dfc5c59ab814c 100644
--- a/packages/block-library/src/details-content/edit.js
+++ b/packages/block-library/src/details-content/edit.js
@@ -15,7 +15,7 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsContentBlock() {
+function DetailsContentEdit() {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -25,4 +25,4 @@ function DetailsContentBlock() {
 	return <div { ...innerBlocksProps }></div>;
 }
 
-export default DetailsContentBlock;
+export default DetailsContentEdit;
diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index 7986bfe2dc84f..9e091382ab211 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -4,7 +4,7 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-function DetailsSummaryBlock( { attributes, setAttributes } ) {
+function DetailsSummaryEdit( { attributes, setAttributes } ) {
 	const summary = attributes.summary ? attributes.summary : __( 'Details' );
 	return (
 		<summary
@@ -24,4 +24,4 @@ function DetailsSummaryBlock( { attributes, setAttributes } ) {
 	);
 }
 
-export default DetailsSummaryBlock;
+export default DetailsSummaryEdit;
diff --git a/packages/block-library/src/details-summary/editor.scss b/packages/block-library/src/details-summary/editor.scss
new file mode 100644
index 0000000000000..168e2f8a0d35c
--- /dev/null
+++ b/packages/block-library/src/details-summary/editor.scss
@@ -0,0 +1,3 @@
+.wp-block-details-summary div {
+	display: inline;
+}
diff --git a/packages/block-library/src/details-summary/style.scss b/packages/block-library/src/details-summary/style.scss
new file mode 100644
index 0000000000000..9249d861cbe92
--- /dev/null
+++ b/packages/block-library/src/details-summary/style.scss
@@ -0,0 +1,3 @@
+.wp-block-details-summary {
+	cursor: pointer;
+}
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 19fb1f521164f..fb202829e5079 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 
 const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ];
 
-function DetailsBlock( { attributes, setAttributes, clientId } ) {
+function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	const { showContent } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -56,4 +56,4 @@ function DetailsBlock( { attributes, setAttributes, clientId } ) {
 	);
 }
 
-export default DetailsBlock;
+export default DetailsEdit;
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
deleted file mode 100644
index 034e66fa16a4a..0000000000000
--- a/packages/block-library/src/details/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.wp-block-details {
-	.wp-block-details-summary {
-		* {
-			display: inline;
-			margin-left: 0.5rem;
-			cursor: pointer;
-		}
-	}
-}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 0b9e3e451337e..eec1a25e5f6d8 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -13,6 +13,7 @@
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
+@import "./details-summary/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./freeform/editor.scss";
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 6802ff1ff0519..5c5c10c2673f8 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -11,7 +11,7 @@
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
-@import "./details/style.scss";
+@import "./details-summary/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";

From 52a404c78c60f821d3d1d25b7dd2cdb3050c61e3 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 3 Mar 2023 12:50:18 +0100
Subject: [PATCH 33/41] Update style.scss

---
 packages/block-library/src/details-summary/style.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-library/src/details-summary/style.scss b/packages/block-library/src/details-summary/style.scss
index 9249d861cbe92..598b551f03164 100644
--- a/packages/block-library/src/details-summary/style.scss
+++ b/packages/block-library/src/details-summary/style.scss
@@ -1,3 +1,6 @@
 .wp-block-details-summary {
 	cursor: pointer;
+	&::marker {
+		margin-right: 0.5rem;
+	}
 }

From c9382af63b77e5d4d30c718ac81516788c8b1906 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 3 Mar 2023 13:08:00 +0100
Subject: [PATCH 34/41] Change the category to text

---
 docs/reference-guides/core-blocks.md                  | 6 +++---
 packages/block-library/src/details-content/block.json | 2 +-
 packages/block-library/src/details-summary/block.json | 2 +-
 packages/block-library/src/details/block.json         | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 965f92807b33c..8b50ea90d5b16 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -238,7 +238,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
 
 -	**Name:** core/details
--	**Category:** theme
+-	**Category:** text
 -	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** showContent
 
@@ -247,7 +247,7 @@ A block that displays a summary and shows or hides additional content. ([Source]
 The content inside the details is hidden until the details are expanded. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
 
 -	**Name:** core/details-content
--	**Category:** theme
+-	**Category:** text
 -	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
 -	**Attributes:** 
 
@@ -256,7 +256,7 @@ The content inside the details is hidden until the details are expanded. ([Sourc
 Clicking on the summary will show or hide the content inside the details. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
 
 -	**Name:** core/details-summary
--	**Category:** theme
+-	**Category:** text
 -	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
 -	**Attributes:** summary
 
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index 603a064872b87..c630a3de503b1 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/details-content",
 	"title": "Details Content",
-	"category": "theme",
+	"category": "text",
 	"parent": [ "core/details" ],
 	"description": "The content inside the details is hidden until the details are expanded.",
 	"textdomain": "default",
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index fc002e64ad3ce..afffcb06929a6 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/details-summary",
 	"title": "Details Summary",
-	"category": "theme",
+	"category": "text",
 	"parent": [ "core/details" ],
 	"description": "Clicking on the summary will show or hide the content inside the details.",
 	"textdomain": "default",
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index 02f5ca14d36ff..5d3ac00afbad1 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/details",
 	"title": "Details",
-	"category": "theme",
+	"category": "text",
 	"description": "A block that displays a summary and shows or hides additional content.",
 	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
 	"textdomain": "default",

From 492ad926a9f5cf433ad27ad5e89ad28c12eb9442 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 13 Mar 2023 07:05:37 +0100
Subject: [PATCH 35/41] Remove unsupported marker CSS

---
 packages/block-library/src/details-summary/style.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-library/src/details-summary/style.scss b/packages/block-library/src/details-summary/style.scss
index 598b551f03164..9249d861cbe92 100644
--- a/packages/block-library/src/details-summary/style.scss
+++ b/packages/block-library/src/details-summary/style.scss
@@ -1,6 +1,3 @@
 .wp-block-details-summary {
 	cursor: pointer;
-	&::marker {
-		margin-right: 0.5rem;
-	}
 }

From 90f5249dedf4f0891eb90111729e25361c8b65c2 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 13 Mar 2023 08:29:28 +0100
Subject: [PATCH 36/41] fix background clipping and update description

---
 docs/reference-guides/core-blocks.md                  | 4 ++--
 packages/block-library/src/details-content/block.json | 2 +-
 packages/block-library/src/details-summary/block.json | 2 +-
 packages/block-library/src/details/style.scss         | 3 +++
 packages/block-library/src/style.scss                 | 1 +
 5 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 packages/block-library/src/details/style.scss

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 6f36d9931fad2..d799c59bee5b0 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -244,7 +244,7 @@ A block that displays a summary and shows or hides additional content. ([Source]
 
 ## Details Content
 
-The content inside the details is hidden until the details are expanded. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
+Add content that may be shown or hidden via a Details block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
 
 -	**Name:** core/details-content
 -	**Category:** text
@@ -253,7 +253,7 @@ The content inside the details is hidden until the details are expanded. ([Sourc
 
 ## Details Summary
 
-Clicking on the summary will show or hide the content inside the details. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
+Provide summary text used to toggle the display of content inside a Details block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
 
 -	**Name:** core/details-summary
 -	**Category:** text
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
index c630a3de503b1..4a990cb37d453 100644
--- a/packages/block-library/src/details-content/block.json
+++ b/packages/block-library/src/details-content/block.json
@@ -6,7 +6,7 @@
 	"title": "Details Content",
 	"category": "text",
 	"parent": [ "core/details" ],
-	"description": "The content inside the details is hidden until the details are expanded.",
+	"description": "Add content that may be shown or hidden via a Details block.",
 	"textdomain": "default",
 	"supports": {
 		"align": false,
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
index afffcb06929a6..314873e453667 100644
--- a/packages/block-library/src/details-summary/block.json
+++ b/packages/block-library/src/details-summary/block.json
@@ -6,7 +6,7 @@
 	"title": "Details Summary",
 	"category": "text",
 	"parent": [ "core/details" ],
-	"description": "Clicking on the summary will show or hide the content inside the details.",
+	"description": "Provide summary text used to toggle the display of content inside a Details block.",
 	"textdomain": "default",
 	"attributes": {
 		"summary": {
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
new file mode 100644
index 0000000000000..59bf9c8b73005
--- /dev/null
+++ b/packages/block-library/src/details/style.scss
@@ -0,0 +1,3 @@
+.wp-block-details {
+	overflow: hidden;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 5c5c10c2673f8..b4b2a4942a307 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -11,6 +11,7 @@
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
+@import "./details/style.scss";
 @import "./details-summary/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";

From 731a8e802bc2b0c7ba64c8fc1ef0bdaf91a0eee9 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 13 Mar 2023 09:09:59 +0100
Subject: [PATCH 37/41] Replace inner div with View primitive

---
 packages/block-library/src/details-content/edit.js | 3 ++-
 packages/block-library/src/details-content/save.js | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/details-content/edit.js b/packages/block-library/src/details-content/edit.js
index dfc5c59ab814c..a4e0c71109274 100644
--- a/packages/block-library/src/details-content/edit.js
+++ b/packages/block-library/src/details-content/edit.js
@@ -3,6 +3,7 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { View } from '@wordpress/primitives';
 
 const TEMPLATE = [
 	[
@@ -22,7 +23,7 @@ function DetailsContentEdit() {
 		templateLock: false,
 	} );
 
-	return <div { ...innerBlocksProps }></div>;
+	return <View { ...innerBlocksProps }></View>;
 }
 
 export default DetailsContentEdit;
diff --git a/packages/block-library/src/details-content/save.js b/packages/block-library/src/details-content/save.js
index 6a0acda309dac..85c5c0e39b665 100644
--- a/packages/block-library/src/details-content/save.js
+++ b/packages/block-library/src/details-content/save.js
@@ -2,12 +2,13 @@
  * WordPress dependencies
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { View } from '@wordpress/primitives';
 
 export default function save() {
 	const blockProps = useBlockProps.save();
 	return (
-		<div { ...blockProps }>
+		<View { ...blockProps }>
 			<InnerBlocks.Content />
-		</div>
+		</View>
 	);
 }

From 597f6b61b4acb7006b4985bd73732ca24b69242c Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 31 Mar 2023 06:34:32 +0200
Subject: [PATCH 38/41] Remove View from save.js

---
 packages/block-library/src/details-content/save.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/details-content/save.js b/packages/block-library/src/details-content/save.js
index 85c5c0e39b665..fe3f0641b1b22 100644
--- a/packages/block-library/src/details-content/save.js
+++ b/packages/block-library/src/details-content/save.js
@@ -2,13 +2,11 @@
  * WordPress dependencies
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
-import { View } from '@wordpress/primitives';
-
 export default function save() {
 	const blockProps = useBlockProps.save();
 	return (
-		<View { ...blockProps }>
+		<div { ...blockProps }>
 			<InnerBlocks.Content />
-		</View>
+		</div>
 	);
 }

From 772a334311b04661a1e09f8fd7a4294fad92a578 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 31 Mar 2023 08:00:23 +0200
Subject: [PATCH 39/41] Remove translation from save.js

---
 packages/block-library/src/details-summary/save.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
index c8b52262bbeab..0f73adb10093a 100644
--- a/packages/block-library/src/details-summary/save.js
+++ b/packages/block-library/src/details-summary/save.js
@@ -2,10 +2,9 @@
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
-	const summary = attributes.summary ? attributes.summary : __( 'Details' );
+	const summary = attributes.summary ? attributes.summary : 'Details';
 	return (
 		<summary { ...useBlockProps.save() }>
 			<RichText.Content value={ summary } />

From 2a3b19b97a266277bd69860718cfc1982e121fd7 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 31 Mar 2023 08:40:03 +0200
Subject: [PATCH 40/41] Make the block opt-in, available from the Experiments
 page.

---
 lib/experimental/editor-settings.php |  3 +++
 lib/experiments-page.php             | 12 ++++++++++++
 packages/block-library/src/index.js  | 16 ++++++++++------
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index c3afb1d3414e7..eb01be26372ee 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -86,6 +86,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-group-grid-variation', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGroupGridVariation = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 0e9fc89aca155..131c864527d4b 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -77,6 +77,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-details-blocks',
+		__( 'Details block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the Details block', 'gutenberg' ),
+			'id'    => 'gutenberg-details-blocks',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index e16e0b5bb8ccd..581b2658fa52d 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -124,8 +124,8 @@ import isBlockMetadataExperimental from './utils/is-block-metadata-experimental'
 /**
  * Function to get all the block-library blocks in an array
  */
-const getAllBlocks = () =>
-	[
+const getAllBlocks = () => {
+	const blocks = [
 		// Common blocks are grouped at the top to prioritize their display
 		// in various contexts — like the inserter and auto-complete components.
 		paragraph,
@@ -149,9 +149,6 @@ const getAllBlocks = () =>
 		columns,
 		commentAuthorAvatar,
 		cover,
-		details,
-		detailsContent,
-		detailsSummary,
 		embed,
 		file,
 		group,
@@ -230,7 +227,14 @@ const getAllBlocks = () =>
 		termDescription,
 		queryTitle,
 		postAuthorBiography,
-	].filter( Boolean );
+	];
+	if ( window?.__experimentalEnableDetailsBlocks ) {
+		blocks.push( details );
+		blocks.push( detailsContent );
+		blocks.push( detailsSummary );
+	}
+	return blocks.filter( Boolean );
+};
 
 /**
  * Function to get all the core blocks in an array.

From 9edd68ea297b9a05b0603a57e4aec4a589a8512a Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 4 Apr 2023 07:49:50 +0200
Subject: [PATCH 41/41] remove fixtures

---
 .../blocks/core__details-content.html         |  5 --
 .../blocks/core__details-content.json         | 19 --------
 .../blocks/core__details-content.parsed.json  | 23 ----------
 .../core__details-content.serialized.html     |  5 --
 .../blocks/core__details-summary.html         |  3 --
 .../blocks/core__details-summary.json         |  8 ----
 .../blocks/core__details-summary.parsed.json  | 11 -----
 .../core__details-summary.serialized.html     |  3 --
 .../fixtures/blocks/core__details.html        | 11 -----
 .../fixtures/blocks/core__details.json        | 34 --------------
 .../fixtures/blocks/core__details.parsed.json | 46 -------------------
 .../blocks/core__details.serialized.html      | 11 -----
 12 files changed, 179 deletions(-)
 delete mode 100644 test/integration/fixtures/blocks/core__details-content.html
 delete mode 100644 test/integration/fixtures/blocks/core__details-content.json
 delete mode 100644 test/integration/fixtures/blocks/core__details-content.parsed.json
 delete mode 100644 test/integration/fixtures/blocks/core__details-content.serialized.html
 delete mode 100644 test/integration/fixtures/blocks/core__details-summary.html
 delete mode 100644 test/integration/fixtures/blocks/core__details-summary.json
 delete mode 100644 test/integration/fixtures/blocks/core__details-summary.parsed.json
 delete mode 100644 test/integration/fixtures/blocks/core__details-summary.serialized.html
 delete mode 100644 test/integration/fixtures/blocks/core__details.html
 delete mode 100644 test/integration/fixtures/blocks/core__details.json
 delete mode 100644 test/integration/fixtures/blocks/core__details.parsed.json
 delete mode 100644 test/integration/fixtures/blocks/core__details.serialized.html

diff --git a/test/integration/fixtures/blocks/core__details-content.html b/test/integration/fixtures/blocks/core__details-content.html
deleted file mode 100644
index fa391712916db..0000000000000
--- a/test/integration/fixtures/blocks/core__details-content.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- wp:details-content -->
-<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
-	<p></p>
-	<!-- /wp:paragraph --></div>
-	<!-- /wp:details-content -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-content.json b/test/integration/fixtures/blocks/core__details-content.json
deleted file mode 100644
index 6f76bc2a95c41..0000000000000
--- a/test/integration/fixtures/blocks/core__details-content.json
+++ /dev/null
@@ -1,19 +0,0 @@
-[
-	{
-		"name": "core/details-content",
-		"isValid": true,
-		"attributes": {},
-		"innerBlocks": [
-			{
-				"name": "core/paragraph",
-				"isValid": true,
-				"attributes": {
-					"content": "",
-					"dropCap": false,
-					"placeholder": "Add text or blocks that will display when the details block is opened."
-				},
-				"innerBlocks": []
-			}
-		]
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__details-content.parsed.json b/test/integration/fixtures/blocks/core__details-content.parsed.json
deleted file mode 100644
index e422d5195bb0b..0000000000000
--- a/test/integration/fixtures/blocks/core__details-content.parsed.json
+++ /dev/null
@@ -1,23 +0,0 @@
-[
-	{
-		"blockName": "core/details-content",
-		"attrs": {},
-		"innerBlocks": [
-			{
-				"blockName": "core/paragraph",
-				"attrs": {
-					"placeholder": "Add text or blocks that will display when the details block is opened."
-				},
-				"innerBlocks": [],
-				"innerHTML": "\n\t<p></p>\n\t",
-				"innerContent": [ "\n\t<p></p>\n\t" ]
-			}
-		],
-		"innerHTML": "\n<div class=\"wp-block-details-content\"></div>\n\t",
-		"innerContent": [
-			"\n<div class=\"wp-block-details-content\">",
-			null,
-			"</div>\n\t"
-		]
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__details-content.serialized.html b/test/integration/fixtures/blocks/core__details-content.serialized.html
deleted file mode 100644
index 0e002ffe8ffad..0000000000000
--- a/test/integration/fixtures/blocks/core__details-content.serialized.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- wp:details-content -->
-<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
-<p></p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:details-content -->
diff --git a/test/integration/fixtures/blocks/core__details-summary.html b/test/integration/fixtures/blocks/core__details-summary.html
deleted file mode 100644
index 0e0f01cc86d1d..0000000000000
--- a/test/integration/fixtures/blocks/core__details-summary.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:details-summary -->
-<summary class="wp-block-details-summary">Details</summary>
-<!-- /wp:details-summary -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__details-summary.json b/test/integration/fixtures/blocks/core__details-summary.json
deleted file mode 100644
index d8ba9f80aafb0..0000000000000
--- a/test/integration/fixtures/blocks/core__details-summary.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
-	{
-		"name": "core/details-summary",
-		"isValid": true,
-		"attributes": {},
-		"innerBlocks": []
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__details-summary.parsed.json b/test/integration/fixtures/blocks/core__details-summary.parsed.json
deleted file mode 100644
index de617caceba16..0000000000000
--- a/test/integration/fixtures/blocks/core__details-summary.parsed.json
+++ /dev/null
@@ -1,11 +0,0 @@
-[
-	{
-		"blockName": "core/details-summary",
-		"attrs": {},
-		"innerBlocks": [],
-		"innerHTML": "\n<summary class=\"wp-block-details-summary\">Details</summary>\n",
-		"innerContent": [
-			"\n<summary class=\"wp-block-details-summary\">Details</summary>\n"
-		]
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__details-summary.serialized.html b/test/integration/fixtures/blocks/core__details-summary.serialized.html
deleted file mode 100644
index 465e3c403de54..0000000000000
--- a/test/integration/fixtures/blocks/core__details-summary.serialized.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:details-summary -->
-<summary class="wp-block-details-summary">Details</summary>
-<!-- /wp:details-summary -->
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
deleted file mode 100644
index 116e80f3fe899..0000000000000
--- a/test/integration/fixtures/blocks/core__details.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- wp:details -->
-<details class="wp-block-details"><!-- wp:details-summary -->
-	<summary class="wp-block-details-summary">Details</summary>
-	<!-- /wp:details-summary -->
-	
-	<!-- wp:details-content -->
-	<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
-	<p></p>
-	<!-- /wp:paragraph --></div>
-	<!-- /wp:details-content --></details>
-	<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
deleted file mode 100644
index ffca898f98e66..0000000000000
--- a/test/integration/fixtures/blocks/core__details.json
+++ /dev/null
@@ -1,34 +0,0 @@
-[
-	{
-		"name": "core/details",
-		"isValid": true,
-		"attributes": {
-			"showContent": false
-		},
-		"innerBlocks": [
-			{
-				"name": "core/details-summary",
-				"isValid": true,
-				"attributes": {},
-				"innerBlocks": []
-			},
-			{
-				"name": "core/details-content",
-				"isValid": true,
-				"attributes": {},
-				"innerBlocks": [
-					{
-						"name": "core/paragraph",
-						"isValid": true,
-						"attributes": {
-							"content": "",
-							"dropCap": false,
-							"placeholder": "Add text or blocks that will display when the details block is opened."
-						},
-						"innerBlocks": []
-					}
-				]
-			}
-		]
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
deleted file mode 100644
index 91e0830b26b0d..0000000000000
--- a/test/integration/fixtures/blocks/core__details.parsed.json
+++ /dev/null
@@ -1,46 +0,0 @@
-[
-	{
-		"blockName": "core/details",
-		"attrs": {},
-		"innerBlocks": [
-			{
-				"blockName": "core/details-summary",
-				"attrs": {},
-				"innerBlocks": [],
-				"innerHTML": "\n\t<summary class=\"wp-block-details-summary\">Details</summary>\n\t",
-				"innerContent": [
-					"\n\t<summary class=\"wp-block-details-summary\">Details</summary>\n\t"
-				]
-			},
-			{
-				"blockName": "core/details-content",
-				"attrs": {},
-				"innerBlocks": [
-					{
-						"blockName": "core/paragraph",
-						"attrs": {
-							"placeholder": "Add text or blocks that will display when the details block is opened."
-						},
-						"innerBlocks": [],
-						"innerHTML": "\n\t<p></p>\n\t",
-						"innerContent": [ "\n\t<p></p>\n\t" ]
-					}
-				],
-				"innerHTML": "\n\t<div class=\"wp-block-details-content\"></div>\n\t",
-				"innerContent": [
-					"\n\t<div class=\"wp-block-details-content\">",
-					null,
-					"</div>\n\t"
-				]
-			}
-		],
-		"innerHTML": "\n<details class=\"wp-block-details\">\n\t\n\t</details>\n\t",
-		"innerContent": [
-			"\n<details class=\"wp-block-details\">",
-			null,
-			"\n\t\n\t",
-			null,
-			"</details>\n\t"
-		]
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
deleted file mode 100644
index 30f5e2bc3fce1..0000000000000
--- a/test/integration/fixtures/blocks/core__details.serialized.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- wp:details -->
-<details class="wp-block-details"><!-- wp:details-summary -->
-<summary class="wp-block-details-summary">Details</summary>
-<!-- /wp:details-summary -->
-
-<!-- wp:details-content -->
-<div class="wp-block-details-content"><!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the details block is opened."} -->
-<p></p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:details-content --></details>
-<!-- /wp:details -->