Skip to content

Commit

Permalink
Try innerblocks based details block
Browse files Browse the repository at this point in the history
  • Loading branch information
richtabor committed Apr 13, 2023
1 parent 1a17267 commit 80df07c
Show file tree
Hide file tree
Showing 22 changed files with 77 additions and 289 deletions.
24 changes: 3 additions & 21 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 0 additions & 2 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ function gutenberg_reregister_core_block_types() {
'columns',
'comments',
'details',
'details-content',
'details-summary',
'group',
'html',
'list',
Expand Down
50 changes: 0 additions & 50 deletions packages/block-library/src/details-content/block.json

This file was deleted.

29 changes: 0 additions & 29 deletions packages/block-library/src/details-content/edit.js

This file was deleted.

23 changes: 0 additions & 23 deletions packages/block-library/src/details-content/index.js

This file was deleted.

12 changes: 0 additions & 12 deletions packages/block-library/src/details-content/save.js

This file was deleted.

53 changes: 0 additions & 53 deletions packages/block-library/src/details-summary/block.json

This file was deleted.

27 changes: 0 additions & 27 deletions packages/block-library/src/details-summary/edit.js

This file was deleted.

3 changes: 0 additions & 3 deletions packages/block-library/src/details-summary/editor.scss

This file was deleted.

23 changes: 0 additions & 23 deletions packages/block-library/src/details-summary/index.js

This file was deleted.

13 changes: 0 additions & 13 deletions packages/block-library/src/details-summary/save.js

This file was deleted.

3 changes: 0 additions & 3 deletions packages/block-library/src/details-summary/style.scss

This file was deleted.

18 changes: 12 additions & 6 deletions packages/block-library/src/details/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,36 @@
"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
"style": true,
"__experimentalDefaultControls": {
"radius": false
}
},
"html": false,
"spacing": {
Expand All @@ -50,5 +55,6 @@
}
}
},
"editorStyle": "wp-block-details-editor",
"style": "wp-block-details"
}
32 changes: 27 additions & 5 deletions packages/block-library/src/details/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* WordPress dependencies
*/
import {
RichText,
useBlockProps,
useInnerBlocksProps,
store as blockEditorStore,
Expand All @@ -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.
Expand Down Expand Up @@ -51,7 +58,22 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
<details
{ ...innerBlocksProps }
open={ hasSelection || showContent }
></details>
>
<summary onClick={ ( event ) => event.preventDefault() }>
<RichText
aria-label={ __( 'Write summary' ) }
placeholder={ __( 'Write summary…' ) }
allowedFormats={ [] }
withoutInteractiveFormatting
value={ summary }
onChange={ ( newSummary ) =>
setAttributes( { summary: newSummary } )
}
multiline={ false }
/>
</summary>
{ innerBlocksProps.children }
</details>
</>
);
}
Expand Down
Loading

0 comments on commit 80df07c

Please sign in to comment.