Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Details/summary block #45055

Merged
merged 53 commits into from
Apr 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
be21b7f
Add "details" block
carolinan Oct 18, 2022
9686338
Add variation, fix stylesheet loading on front, change font size
carolinan Oct 18, 2022
ed02fa7
Remove the link option from the summary heading, update aria label
carolinan Oct 18, 2022
340fe0e
Update edit.js
carolinan Oct 18, 2022
7468272
Keep the details open in the editor
carolinan Oct 20, 2022
04b8f85
Add toolbar control for collapsing and expanding the details, remove …
carolinan Oct 21, 2022
80375c0
Update fixtures
carolinan Oct 21, 2022
84ede00
Update style.scss
carolinan Oct 21, 2022
843ab63
re-add the font size for the heading
carolinan Oct 21, 2022
3c2397f
Remove font size limitations
carolinan Oct 27, 2022
8810fb0
Update cursor to pointer.
carolinan Oct 27, 2022
82ce6b0
Add aria label that announces the expanded or collapsed state
carolinan Oct 27, 2022
b56a2a7
Remove transcript variation, add keywords
carolinan Oct 31, 2022
26b07c4
Open the details when the block is selected
carolinan Nov 4, 2022
14d6974
Update edit.js
carolinan Nov 4, 2022
125b246
Add a basic unwrap
carolinan Nov 4, 2022
82643c4
Update edit.js
carolinan Nov 5, 2022
10ffe31
Merge branch 'trunk' into add/details-summary-block
carolinan Nov 7, 2022
c75a4aa
Try using separate blocks
carolinan Nov 8, 2022
bc421cc
Update summary text, descriptions and fixtures
carolinan Nov 8, 2022
bd3474a
Update edit.js
carolinan Nov 9, 2022
19cf689
remove transform and editor style.
carolinan Nov 9, 2022
a7c05f2
update icons.
carolinan Nov 9, 2022
c31508c
Limit the inner blocks to one inside the Details block
carolinan Nov 10, 2022
4aef03e
Remove the alignments from the inner blocks, and prevent them from be…
carolinan Nov 10, 2022
0297f7d
Update index.js
carolinan Nov 11, 2022
a1698ee
Merge branch 'trunk' into add/details-summary-block
carolinan Dec 16, 2022
98ee1ee
Merge branch 'trunk' into add/details-summary-block
carolinan Dec 30, 2022
b740036
Merge branch 'trunk' into add/details-summary-block
carolinan Feb 8, 2023
d72a333
Add the icon
carolinan Feb 13, 2023
95482f0
Try to apply font size to the heading inside summary
carolinan Feb 13, 2023
3e2cd78
Update fixtures
carolinan Feb 13, 2023
d4b3923
Remove the allowed formatting from the RichText
carolinan Feb 17, 2023
767c4a2
Merge branch 'trunk' into add/details-summary-block
carolinan Feb 17, 2023
8146396
Merge branch 'trunk' into add/details-summary-block
carolinan Feb 21, 2023
89a07cf
Merge branch 'trunk' into add/details-summary-block
carolinan Feb 28, 2023
cb2a3d8
Try the experimentalSelector and skipSerialization again
carolinan Feb 28, 2023
7dc6665
Merge branch 'trunk' into add/details-summary-block
carolinan Mar 1, 2023
460041a
Remove heading from Summary
carolinan Mar 1, 2023
c923448
Merge branch 'trunk' into add/details-summary-block
carolinan Mar 2, 2023
ff578c2
Rename the block, update CSS.
carolinan Mar 3, 2023
52a404c
Update style.scss
carolinan Mar 3, 2023
c9382af
Change the category to text
carolinan Mar 3, 2023
64be240
Merge branch 'trunk' into add/details-summary-block
carolinan Mar 13, 2023
492ad92
Remove unsupported marker CSS
carolinan Mar 13, 2023
90f5249
fix background clipping and update description
carolinan Mar 13, 2023
731a8e8
Replace inner div with View primitive
carolinan Mar 13, 2023
eb47efc
Merge branch 'trunk' into add/details-summary-block
carolinan Mar 30, 2023
597f6b6
Remove View from save.js
carolinan Mar 31, 2023
772a334
Remove translation from save.js
carolinan Mar 31, 2023
2a3b19b
Make the block opt-in, available from the Experiments page.
carolinan Mar 31, 2023
995102f
Merge branch 'trunk' into add/details-summary-block
carolinan Apr 4, 2023
9edd68e
remove fixtures
carolinan Apr 4, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
3 changes: 3 additions & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ function gutenberg_reregister_core_block_types() {
'column',
'columns',
'comments',
'details',
'details-content',
'details-summary',
'group',
'html',
'list',
Expand Down
3 changes: 3 additions & 0 deletions lib/experimental/editor-settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
12 changes: 12 additions & 0 deletions lib/experiments-page.php
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
50 changes: 50 additions & 0 deletions packages/block-library/src/details-content/block.json
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
}
}
}
}
29 changes: 29 additions & 0 deletions packages/block-library/src/details-content/edit.js
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;
23 changes: 23 additions & 0 deletions packages/block-library/src/details-content/index.js
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 } );
12 changes: 12 additions & 0 deletions packages/block-library/src/details-content/save.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
export default function save() {
const blockProps = useBlockProps.save();
return (
<div { ...blockProps }>
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<InnerBlocks.Content />
</div>
);
}
53 changes: 53 additions & 0 deletions packages/block-library/src/details-summary/block.json
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
}
}
}
}
27 changes: 27 additions & 0 deletions packages/block-library/src/details-summary/edit.js
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be another case to use the View component and the as prop, rather than the raw HTML element. In addition to the prior reasoning, it could also help distinguish the block's root element from the summary value defined above it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation for View says it is only for divs.
I could use tagName, if that is easier to read.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nvm, View as, found an example!

Copy link
Contributor Author

@carolinan carolinan Mar 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not working. The <details> is not recognizing the <summary> so it outputs the default text.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, "summary" is being rendered as an HTML attribute e.g. as="summary" on a div. My guess is there is a filter somewhere on what a valid as prop can be.

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

Copy link
Contributor Author

@carolinan carolinan Mar 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"summary" is being rendered as an HTML attribute e.g. as="summary" on a div.

Yes I encountered that when both the edit and save used View.


Personally I think using tagName would be clearer.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could the <summary> element be rendered by the RichText?

return (
    <RichText
        tagName="summary"
        // ... 
    />
);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have not been able to make this work because when the RichText is the <summary>, you can't add space to the text. Space is used to open and close the details. In the editor, this behavior is prevented with preventDefault()

{ ...useBlockProps() }
onClick={ ( event ) => event.preventDefault() }
>
<RichText
aria-label={ __( 'Add summary' ) }
allowedFormats={ [] }
withoutInteractiveFormatting
value={ summary }
onChange={ ( newSummary ) =>
setAttributes( { summary: newSummary } )
}
/>
</summary>
);
}

export default DetailsSummaryEdit;
3 changes: 3 additions & 0 deletions packages/block-library/src/details-summary/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wp-block-details-summary div {
display: inline;
}
23 changes: 23 additions & 0 deletions packages/block-library/src/details-summary/index.js
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 } );
13 changes: 13 additions & 0 deletions packages/block-library/src/details-summary/save.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
3 changes: 3 additions & 0 deletions packages/block-library/src/details-summary/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wp-block-details-summary {
cursor: pointer;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing this style when testing in the frontend. Not sure why 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested on MacOS in Safari, Chrome, and Firefox, and I can see the pointer on the front 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's working for me now too!

It's strange, I'd even inspected the element and could see there was no cursor style.

Oh well, nothing to worry about then.

}
54 changes: 54 additions & 0 deletions packages/block-library/src/details/block.json
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a small disparity between the editor and frontend when using border radius:

Editor

Screen Shot 2023-04-05 at 4 47 49 pm

Frontend

Screen Shot 2023-04-05 at 4 47 41 pm

It's something that can be fixed in a follow-up and shouldn't block merging.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am trying to reproduce this.
I am using Twenty Twenty-Three.

  • I added a border with border-radius on the Details.
  • Padding, preset 1 , on the summary and content.
  • A background color on the summary.

I do not see the clipping on macOS, in Firefox, Safari, or Chrome

Copy link
Contributor

@talldan talldan Apr 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to work now too:
Screen Shot 2023-04-11 at 11 14 21 am

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
}
Loading