Add Details/summary block #45055
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 } ); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * 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 }> | ||
| <InnerBlocks.Content /> | ||
| </View> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
There was a problem hiding this comment. This might be another case to use the There was a problem hiding this comment. The documentation for View says it is only for divs. There was a problem hiding this comment. nvm, There was a problem hiding this comment. It's not working. The There was a problem hiding this comment. For some reason, If we did still want to avoid the summary variable being the same as the tag name we could do something like the snippet below. I don't think this is a critical improvement though. diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
index 9e091382ab..bbb0490021 100644
--- a/packages/block-library/src/details-summary/edit.js
+++ b/packages/block-library/src/details-summary/edit.js
@@ -4,10 +4,11 @@
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
+const Summary = 'summary';
+
function DetailsSummaryEdit( { attributes, setAttributes } ) {
- const summary = attributes.summary ? attributes.summary : __( 'Details' );
return (
- <summary
+ <Summary
{ ...useBlockProps() }
onClick={ ( event ) => event.preventDefault() }
>
@@ -15,12 +16,12 @@ function DetailsSummaryEdit( { attributes, setAttributes } ) {
aria-label={ __( 'Add summary' ) }
allowedFormats={ [] }
withoutInteractiveFormatting
- value={ summary }
+ value={ attributes.summary || __( 'Details' ) }
onChange={ ( newSummary ) =>
setAttributes( { summary: newSummary } )
}
/>
- </summary>
+ </Summary>
);
}
There was a problem hiding this comment.
Yes I encountered that when both the edit and save used View. Personally I think using tagName would be clearer. There was a problem hiding this comment. Could the return (
<RichText
tagName="summary"
// ...
/>
);There was a problem hiding this comment. I have not been able to make this work because when the RichText is the |
||
| { ...useBlockProps() } | ||
| onClick={ ( event ) => event.preventDefault() } | ||
| > | ||
| <RichText | ||
| aria-label={ __( 'Add summary' ) } | ||
| allowedFormats={ [] } | ||
| withoutInteractiveFormatting | ||
| value={ summary } | ||
| onChange={ ( newSummary ) => | ||
| setAttributes( { summary: newSummary } ) | ||
| } | ||
| /> | ||
| </summary> | ||
| ); | ||
| } | ||
|
|
||
| export default DetailsSummaryEdit; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .wp-block-details-summary div { | ||
| display: inline; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 } ); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * 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' ); | ||
|
There was a problem hiding this comment. Internationalizing text in a block save function isn't supported. There was a similar situation in the file block, and it causes a validation error when switching languages - #43013 I think it'd be ok to remove the use of There was a problem hiding this comment. also the browsers should add a default "Details" label to the summary if none is given There was a problem hiding this comment. The Details default text is only present if there is no |
||
| return ( | ||
| <summary { ...useBlockProps.save() }> | ||
| <RichText.Content value={ summary } /> | ||
| </summary> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .wp-block-details-summary { | ||
| cursor: pointer; | ||
|
There was a problem hiding this comment. I'm not seeing this style when testing in the frontend. Not sure why 🤔 There was a problem hiding this comment. I tested on MacOS in Safari, Chrome, and Firefox, and I can see the pointer on the front 🤔 There was a problem hiding this comment. It's working for me now too! It's strange, I'd even inspected the element and could see there was no Oh well, nothing to worry about then. |
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| }, | ||
|
Comment on lines
+28
to
+33
There was a problem hiding this comment. There's a small disparity between the editor and frontend when using border radius: Editor
Frontend
It's something that can be fixed in a follow-up and shouldn't block merging. There was a problem hiding this comment. I am trying to reproduce this.
I do not see the clipping on macOS, in Firefox, Safari, or Chrome There was a problem hiding this comment. This seems to work now too: Very strange. I tried switching between a few different themes and couldn't reproduce. Maybe it was an issue with my local environment. Both this and the previous issue could have been due to styles not loading properly on the frontend. There was a problem hiding this comment. that is a relief, thank you for double checking |
||
| "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" | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure that
Viewshould be used in a block save function, as WordPress blocks always save HTML. In a React Native environment,Viewisn't an html element, so this might cause the block not to work in React Native (if it were supported).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@aaronrobertshaw ^
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Apologies for sending you down the wrong path here in
save.js@carolinan.Dan is correct here. I went back and checked where I was advised to use
Viewand it was only in the edit function to help bridge the gap between web and native there.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have removed View from the save and kept it in the edit. :) The background info helps.