diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 34eebc7bb25bd..8cd38f72d3f39 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -235,30 +235,12 @@ Add an image or video with a text overlay — great for headers. ([Source](https ## 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)) +Hide and show 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 +- **Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** showContent, summary ## Embed diff --git a/lib/blocks.php b/lib/blocks.php index f7ad8a11c88d9..5d7cb3e4eb5e8 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -23,8 +23,6 @@ function gutenberg_reregister_core_block_types() { 'columns', 'comments', 'details', - 'details-content', - 'details-summary', 'group', 'html', 'list', diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json deleted file mode 100644 index 4a990cb37d453..0000000000000 --- a/packages/block-library/src/details-content/block.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "$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 - } - } - } -} diff --git a/packages/block-library/src/details-content/edit.js b/packages/block-library/src/details-content/edit.js deleted file mode 100644 index a4e0c71109274..0000000000000 --- a/packages/block-library/src/details-content/edit.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * 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 ; -} - -export default DetailsContentEdit; diff --git a/packages/block-library/src/details-content/index.js b/packages/block-library/src/details-content/index.js deleted file mode 100644 index 1c7dbeaf193ad..0000000000000 --- a/packages/block-library/src/details-content/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * 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 } ); diff --git a/packages/block-library/src/details-content/save.js b/packages/block-library/src/details-content/save.js deleted file mode 100644 index fe3f0641b1b22..0000000000000 --- a/packages/block-library/src/details-content/save.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * WordPress dependencies - */ -import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; -export default function save() { - const blockProps = useBlockProps.save(); - return ( -
- -
- ); -} diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json deleted file mode 100644 index 314873e453667..0000000000000 --- a/packages/block-library/src/details-summary/block.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "$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 - } - } - } -} diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js deleted file mode 100644 index 9e091382ab211..0000000000000 --- a/packages/block-library/src/details-summary/edit.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * 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 ( - event.preventDefault() } - > - - setAttributes( { summary: newSummary } ) - } - /> - - ); -} - -export default DetailsSummaryEdit; diff --git a/packages/block-library/src/details-summary/editor.scss b/packages/block-library/src/details-summary/editor.scss deleted file mode 100644 index 168e2f8a0d35c..0000000000000 --- a/packages/block-library/src/details-summary/editor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.wp-block-details-summary div { - display: inline; -} diff --git a/packages/block-library/src/details-summary/index.js b/packages/block-library/src/details-summary/index.js deleted file mode 100644 index 874d806c4bbda..0000000000000 --- a/packages/block-library/src/details-summary/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * 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 } ); diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js deleted file mode 100644 index 0f73adb10093a..0000000000000 --- a/packages/block-library/src/details-summary/save.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * WordPress dependencies - */ -import { RichText, useBlockProps } from '@wordpress/block-editor'; - -export default function save( { attributes } ) { - const summary = attributes.summary ? attributes.summary : 'Details'; - return ( - - - - ); -} diff --git a/packages/block-library/src/details-summary/style.scss b/packages/block-library/src/details-summary/style.scss deleted file mode 100644 index 9249d861cbe92..0000000000000 --- a/packages/block-library/src/details-summary/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.wp-block-details-summary { - cursor: pointer; -} diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json index 5d3ac00afbad1..40321ee6b0c9c 100644 --- a/packages/block-library/src/details/block.json +++ b/packages/block-library/src/details/block.json @@ -5,28 +5,29 @@ "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" ], + "description": "Hide and show additional content.", + "keywords": [ "disclosure", "summary", "hide", "accordion" ], "textdomain": "default", "attributes": { "showContent": { "type": "boolean", "default": false + }, + "summary": { + "type": "string" } }, "supports": { - "align": true, + "align": [ "wide", "full" ], "color": { "gradients": true, "link": true, "__experimentalDefaultControls": { "background": true, - "text": true, - "link": true + "text": true } }, "__experimentalBorder": { - "radius": true, "color": true, "width": true, "style": true @@ -50,5 +51,6 @@ } } }, + "editorStyle": "wp-block-details-editor", "style": "wp-block-details" } diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js index fb202829e5079..bc0c206aa2d26 100644 --- a/packages/block-library/src/details/edit.js +++ b/packages/block-library/src/details/edit.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { + RichText, useBlockProps, useInnerBlocksProps, store as blockEditorStore, @@ -11,15 +12,21 @@ import { useSelect } from '@wordpress/data'; import { PanelBody, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ]; +const TEMPLATE = [ + [ + 'core/paragraph', + { + placeholder: __( 'Type / to add a hidden block' ), + }, + ], +]; function DetailsEdit( { attributes, setAttributes, clientId } ) { - const { showContent } = attributes; + const { showContent, summary } = attributes; const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { - allowedBlocks: TEMPLATE, template: TEMPLATE, - templateLock: 'all', + __experimentalCaptureToolbars: true, } ); // Check if either the block or the inner blocks are selected. @@ -51,7 +58,22 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
+ > + event.preventDefault() }> + + setAttributes( { summary: newSummary } ) + } + multiline={ false } + /> + + { innerBlocksProps.children } + ); } diff --git a/packages/block-library/src/details/editor.scss b/packages/block-library/src/details/editor.scss new file mode 100644 index 0000000000000..76c676974d4d0 --- /dev/null +++ b/packages/block-library/src/details/editor.scss @@ -0,0 +1,3 @@ +.wp-block-details summary div { + display: inline; +} diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js index 24ad75282ee0f..e30d1a8e04974 100644 --- a/packages/block-library/src/details/index.js +++ b/packages/block-library/src/details/index.js @@ -18,13 +18,18 @@ export { metadata, name }; export const settings = { icon, example: { + attributes: { + summary: 'La Mancha', + showContent: true, + }, innerBlocks: [ { - name: 'core/details-summary', - attributes: { summary: __( 'Details' ) }, - }, - { - name: 'core/details-content', + name: 'core/paragraph', + attributes: { + content: __( + 'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.' + ), + }, }, ], }, diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js index da5d0c1c35f4b..0df5f63ce9410 100644 --- a/packages/block-library/src/details/save.js +++ b/packages/block-library/src/details/save.js @@ -1,14 +1,18 @@ /** * WordPress dependencies */ -import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; +import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { showContent } = attributes; + const summary = attributes.summary ? attributes.summary : 'Details'; const blockProps = useBlockProps.save(); return (
+ + +
); diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss index 59bf9c8b73005..415a3210a50ae 100644 --- a/packages/block-library/src/details/style.scss +++ b/packages/block-library/src/details/style.scss @@ -1,3 +1,19 @@ .wp-block-details { + box-sizing: border-box; overflow: hidden; } + +.wp-block-details summary { + cursor: pointer; +} + +// Use block gap for block; falls back to browser default if not supported. +.wp-block-details > *:not(summary) { + margin-block-start: var(--wp--style--block-gap); + margin-block-end: 0; +} + +// Remove excess margin from the last block. +.wp-block-details > *:last-child { + margin-bottom: 0; +} diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index eec1a25e5f6d8..07c58599c5098 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -13,7 +13,7 @@ @import "./comments-pagination-numbers/editor.scss"; @import "./comments-title/editor.scss"; @import "./cover/editor.scss"; -@import "./details-summary/editor.scss"; +@import "./details/editor.scss"; @import "./embed/editor.scss"; @import "./file/editor.scss"; @import "./freeform/editor.scss"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 581b2658fa52d..a0c7b75eac19b 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -46,8 +46,6 @@ 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'; @@ -230,8 +228,6 @@ const getAllBlocks = () => { ]; if ( window?.__experimentalEnableDetailsBlocks ) { blocks.push( details ); - blocks.push( detailsContent ); - blocks.push( detailsSummary ); } return blocks.filter( Boolean ); }; diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index d3cb9667f3d0a..8fe8b904c23f5 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -12,7 +12,6 @@ @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"; diff --git a/packages/icons/src/library/details.js b/packages/icons/src/library/details.js index 11fa97eb8cb33..11d5835620648 100644 --- a/packages/icons/src/library/details.js +++ b/packages/icons/src/library/details.js @@ -4,17 +4,13 @@ import { SVG, Path } from '@wordpress/primitives'; const details = ( - + + );