Initial implementation of <details> block

packages/block-library/src/details/block.json

@@ -0,0 +1,13 @@
+{
+	"name": "core/details",
+	"category": "layout",
+	"attributes": {
+		"initialOpen": {
+			"type": "boolean",
+			"default": false
+		},
+		"summaryContent": {
+			"type": "string"
+		}
+	}
+}

packages/block-library/src/details/edit.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	RichText,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	ToggleControl,
+	Panel,
+	PanelBody,
+	PanelRow,
+} from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import { SPACE } from '@wordpress/keycodes';
+
+export default function DetalsEdit( {
+	attributes,
+	className,
+	clientId,
+	isSelected,
+	setAttributes,
+} ) {
+	const summaryRef = useRef( null );
+
+	const keyUpListener = ( e ) => {
+		if ( e.keyCode === SPACE ) {
+			e.preventDefault();
+		}
+	};
+
+	const clickListener = ( e ) => e.preventDefault();
+
+	useEffect( () => {
+		if ( ! summaryRef.current ) {
+			return;
+		}
+
+		summaryRef.current.addEventListener( 'keyup', keyUpListener );
+		summaryRef.current.addEventListener( 'click', clickListener );
+		return () => {
+			summaryRef.current.removeEventListener( 'keyup', keyUpListener );
+			summaryRef.current.removeEventListener( 'click', clickListener );
+		};
+	}, [ summaryRef.current ] );
+
+	const isInnerBlockSelected = useSelect(
+		( select ) =>
+			select( 'core/block-editor' ).hasSelectedInnerBlock( clientId ),
+		[ clientId ]
+	);
+
+	const showInnerBlocks =
+		attributes.initialOpen || isSelected || isInnerBlockSelected;
+
+	return (
+		<>
+			<InspectorControls>
+				<Panel>
+					<PanelBody>
+						<PanelRow>
+							<ToggleControl
+								label={ __( 'Open by default' ) }
+								onChange={ ( initialOpen ) =>
+									setAttributes( { initialOpen } )
+								}
+								checked={ attributes.initialOpen }
+							/>
+						</PanelRow>
+					</PanelBody>
+				</Panel>
+			</InspectorControls>
+			<details className={ className } open={ showInnerBlocks }>
+				<RichText
+					tagName="summary"
+					value={ attributes.summaryContent }
+					onChange={ ( summaryContent ) =>
+						setAttributes( { summaryContent } )
+					}
+					ref={ summaryRef }
+					placeholder={ __( 'Write a summary…' ) }
+					aria-label={ __( 'Summary text' ) }
+				/>
+				<InnerBlocks />
+			</details>
+		</>
+	);
+}

packages/block-library/src/details/editor.scss

@@ -0,0 +1,5 @@
+.wp-block-details {
+	summary .rich-text {
+		display: inline;
+	}
+}

packages/block-library/src/details/index.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { details as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name, category, attributes } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Details' ),
+	description: __( 'Create a toggle to show and hide content.' ),
+	icon,
+	category,
+	edit,
+	save,
+	// details and summary are not translated because they are the HTML tags
+	keywords: [ 'details', 'summary', __( 'faq' ) ],
+	attributes,
+};

packages/block-library/src/details/save.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, RichText } from '@wordpress/block-editor';
+
+export default ( { attributes } ) => {
+	return (
+		<details open={ attributes.initialOpen }>
+			<RichText.Content
+				tagName="summary"
+				value={ attributes.summaryContent }
+			/>
+			<InnerBlocks.Content />
+		</details>
+	);
+};

packages/block-library/src/editor.scss

@@ -12,6 +12,7 @@
 @import "./code/editor.scss";
 @import "./columns/editor.scss";
 @import "./cover/editor.scss";
+@import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./classic/editor.scss";

packages/block-library/src/index.js

@@ -31,6 +31,7 @@ import * as code from './code';
 import * as columns from './columns';
 import * as column from './column';
 import * as cover from './cover';
+import * as details from './details';
 import * as embed from './embed';
 import * as file from './file';
 import * as html from './html';
@@ -133,6 +134,7 @@ export const registerCoreBlocks = () => {
 		columns,
 		column,
 		cover,
+		details,
 		embed,
 		file,
 		group,

packages/e2e-tests/fixtures/blocks/core__details.html

@@ -0,0 +1,12 @@
+<!-- wp:core/details {"summaryContent": "This is the summary ", "initialOpen": false} -->
+<details class="wp-block-details">
+	<summary>This is the summary </summary>
+	<!-- wp:heading -->
+	<h2>More here</h2>
+	<!-- /wp:heading -->
+
+	<!-- wp:paragraph -->
+	<p></p>
+	<!-- /wp:paragraph -->
+</details>
+<!-- /wp:core/details -->

packages/e2e-tests/fixtures/blocks/core__details.json

@@ -0,0 +1,36 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/details",
+        "isValid": true,
+        "attributes": {
+            "initialOpen": false,
+            "summaryContent": "This is the summary "
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/heading",
+                "isValid": true,
+                "attributes": {
+                    "content": "More here",
+                    "level": 2
+                },
+                "innerBlocks": [],
+                "originalContent": "<h2>More here</h2>"
+            },
+            {
+                "clientId": "_clientId_1",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "",
+                    "dropCap": false
+                },
+                "innerBlocks": [],
+                "originalContent": "<p></p>"
+            }
+        ],
+        "originalContent": "<details class=\"wp-block-details\">\n\t<summary>This is the summary </summary>\n\t\n\n\t\n</details>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__details.parsed.json

@@ -0,0 +1,46 @@
+[
+    {
+        "blockName": "core/details",
+        "attrs": {
+            "summaryContent": "This is the summary ",
+            "initialOpen": false
+        },
+        "innerBlocks": [
+            {
+                "blockName": "core/heading",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<h2>More here</h2>\n\t",
+                "innerContent": [
+                    "\n\t<h2>More here</h2>\n\t"
+                ]
+            },
+            {
+                "blockName": "core/paragraph",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<p></p>\n\t",
+                "innerContent": [
+                    "\n\t<p></p>\n\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<details class=\"wp-block-details\">\n\t<summary>This is the summary </summary>\n\t\n\n\t\n</details>\n",
+        "innerContent": [
+            "\n<details class=\"wp-block-details\">\n\t<summary>This is the summary </summary>\n\t",
+            null,
+            "\n\n\t",
+            null,
+            "\n</details>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__details.serialized.html

@@ -0,0 +1,9 @@
+<!-- wp:details {"summaryContent":"This is the summary "} -->
+<details class="wp-block-details"><summary>This is the summary </summary><!-- wp:heading -->
+<h2>More here</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->

packages/icons/src/index.js

@@ -49,6 +49,7 @@ export { default as currencyDollar } from './library/currency-dollar';
 export { default as currencyEuro } from './library/currency-euro';
 export { default as currencyPound } from './library/currency-pound';
 export { default as desktop } from './library/desktop';
+export { default as details } from './library/details';
 export { default as edit } from './library/edit';
 export { default as external } from './library/external';
 export { default as file } from './library/file';

packages/icons/src/library/details.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const details = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zM4 4v8l7-4-7-4z" />
+	</SVG>
+);
+
+export default details;

packages/rich-text/src/component/index.js

@@ -527,6 +527,11 @@ function RichText( {
 	function handleSpace( event ) {
 		const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
 
+		if ( keyCode === SPACE && TagName === 'summary' ) {
+			handleChange( insert( createRecord(), ' ' ) );
+			return;
+		}
+
 		if (
 			// Only override when no modifiers are pressed.
 			shiftKey ||