Add Details/summary block (#45055)

* Add  "details" block

* Add variation, fix stylesheet loading on front, change font size

* Remove the link option from the summary heading, update aria label

* Update edit.js

* Keep the details open in the editor

* Add toolbar control for collapsing and expanding the details, remove border

* Update fixtures

* Update style.scss

* re-add the font size for the heading

* Remove font size limitations

* Update cursor to pointer.

* Add aria label that announces the expanded or collapsed state

* Remove transcript variation, add keywords

* Open the details when the block is selected

* Update edit.js

* Add a basic unwrap

* Update edit.js

* Try using separate blocks

* Update summary text, descriptions and fixtures

* Update edit.js

* remove transform and editor style.

* update icons.

* Limit the inner blocks to one inside the Details block

* Remove the alignments from the inner blocks, and prevent them from being used as reusable blocks.

* Update index.js

* Add the icon

* Try to apply font size to the heading inside summary

* Update fixtures

* Remove the allowed formatting from the RichText

* Try the experimentalSelector and skipSerialization again

* Remove heading from Summary

* Rename the block, update CSS.

* Update style.scss

* Change the category to text

* Remove unsupported marker CSS

* fix background clipping and update description

* Replace inner div with View primitive

* Remove View from save.js

* Remove translation from save.js

* Make the block opt-in, available from the Experiments page.

* remove fixtures

docs/reference-guides/core-blocks.md

@@ -233,6 +233,33 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 -	**Supports:** align, anchor, color (text, ~~background~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
 
+## 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:** text
+-	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** showContent
+
+## 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
+-	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
+-	**Attributes:** 
+
+## 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
+-	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
+-	**Attributes:** 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))

lib/blocks.php

@@ -22,6 +22,9 @@ function gutenberg_reregister_core_block_types() {
 				'column',
 				'columns',
 				'comments',
+				'details',
+				'details-content',
+				'details-summary',
 				'group',
 				'html',
 				'list',

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' );

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'

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

@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details-content",
+	"title": "Details Content",
+	"category": "text",
+	"parent": [ "core/details" ],
+	"description": "Add content that may be shown or hidden via a Details block.",
+	"textdomain": "default",
+	"supports": {
+		"align": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"lock": false,
+		"multiple": false,
+		"reusable": 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
+			}
+		}
+	}
+}

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { View } from '@wordpress/primitives';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add text or blocks that will display when the details block is opened.'
+			),
+		},
+	],
+];
+
+function DetailsContentEdit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateLock: false,
+	} );
+
+	return <View { ...innerBlocksProps }></View>;
+}
+
+export default DetailsContentEdit;

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { postContent 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 } );

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

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+export default function save() {
+	const blockProps = useBlockProps.save();
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

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

@@ -0,0 +1,53 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details-summary",
+	"title": "Details Summary",
+	"category": "text",
+	"parent": [ "core/details" ],
+	"description": "Provide summary text used to toggle the display of content inside a Details block.",
+	"textdomain": "default",
+	"attributes": {
+		"summary": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"align": false,
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"lock": false,
+		"multiple": false,
+		"reusable": 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
+			}
+		}
+	}
+}

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+function DetailsSummaryEdit( { attributes, setAttributes } ) {
+	const summary = attributes.summary ? attributes.summary : __( 'Details' );
+	return (
+		<summary
+			{ ...useBlockProps() }
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			<RichText
+				aria-label={ __( 'Add summary' ) }
+				allowedFormats={ [] }
+				withoutInteractiveFormatting
+				value={ summary }
+				onChange={ ( newSummary ) =>
+					setAttributes( { summary: newSummary } )
+				}
+			/>
+		</summary>
+	);
+}
+
+export default DetailsSummaryEdit;

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

@@ -0,0 +1,3 @@
+.wp-block-details-summary div {
+	display: inline;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { heading 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 } );

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

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const summary = attributes.summary ? attributes.summary : 'Details';
+	return (
+		<summary { ...useBlockProps.save() }>
+			<RichText.Content value={ summary } />
+		</summary>
+	);
+}

packages/block-library/src/details-summary/style.scss

@@ -0,0 +1,3 @@
+.wp-block-details-summary {
+	cursor: pointer;
+}

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

@@ -0,0 +1,54 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details",
+	"title": "Details",
+	"category": "text",
+	"description": "A block that displays a summary and shows or hides additional content.",
+	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
+	"textdomain": "default",
+	"attributes": {
+		"showContent": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"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
+			}
+		}
+	},
+	"style": "wp-block-details"
+}