@wordpress/block-library 8.7.0 → 8.8.0

package/src/cover/style.scss

@@ -7,6 +7,7 @@
 	justify-content: center;
 	align-items: center;
 	padding: 1em;
+	overflow: hidden;
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
@@ -203,7 +204,7 @@ video.wp-block-cover__video-background {
 		// Mobile Safari does not support fixed background attachment properly.
 		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
 		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-		@supports (-webkit-overflow-scrolling: touch) {
+		@supports (-webkit-touch-callout: inherit) {
 			background-attachment: scroll;
 		}
 

package/src/cover/test/edit.js

@@ -208,7 +208,7 @@ describe( 'Cover block', () => {
 
 			await selectBlock( 'Block: Cover' );
 			await userEvent.type(
-				screen.getByLabelText( 'Alt text (alternative text)' ),
+				screen.getByLabelText( 'Alternative text' ),
 				'Me'
 			);
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();

package/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"
+}

package/src/details/edit.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ];
+
+function DetailsEdit( { attributes, setAttributes, clientId } ) {
+	const { showContent } = attributes;
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: TEMPLATE,
+		template: TEMPLATE,
+		templateLock: 'all',
+	} );
+
+	// Check if either the block or the inner blocks are selected.
+	const hasSelection = useSelect( ( select ) => {
+		const { isBlockSelected, hasSelectedInnerBlock } =
+			select( blockEditorStore );
+		/* Sets deep to true to also find blocks inside the details content block. */
+		return (
+			hasSelectedInnerBlock( clientId, true ) ||
+			isBlockSelected( clientId )
+		);
+	}, [] );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						label={ __( 'Open by default' ) }
+						checked={ showContent }
+						onChange={ () =>
+							setAttributes( {
+								showContent: ! showContent,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<details
+				{ ...innerBlocksProps }
+				open={ hasSelection || showContent }
+			></details>
+		</>
+	);
+}
+
+export default DetailsEdit;

package/src/details/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { details as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * 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,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/details-summary',
+				attributes: { summary: __( 'Details' ) },
+			},
+			{
+				name: 'core/details-content',
+			},
+		],
+	},
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/details/save.js

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

package/src/details/style.scss

@@ -0,0 +1,3 @@
+.wp-block-details {
+	overflow: hidden;
+}

package/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
+			}
+		}
+	}
+}

package/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;

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

package/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>
+	);
+}

package/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
+			}
+		}
+	}
+}

package/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;

package/src/details-summary/editor.scss

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

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

package/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>
+	);
+}

package/src/details-summary/style.scss

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

package/src/editor.scss

@@ -13,6 +13,7 @@
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
+@import "./details-summary/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./freeform/editor.scss";

package/src/embed/block.json

@@ -41,7 +41,10 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true
+		}
 	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"

package/src/embed/embed-link-settings.native.js

@@ -39,7 +39,7 @@ const EmbedLinkSettings = ( {
 			label: (
 				<FooterMessageLink
 					href={ __(
-						'https://wordpress.org/support/article/embeds/'
+						'https://wordpress.org/documentation/article/embeds/'
 					) }
 					value={ __( 'Learn more about embeds' ) }
 				/>

package/src/embed/embed-placeholder.js

@@ -40,7 +40,7 @@ const EmbedPlaceholder = ( {
 			<div className="components-placeholder__learn-more">
 				<ExternalLink
 					href={ __(
-						'https://wordpress.org/support/article/embeds/'
+						'https://wordpress.org/documentation/article/embeds/'
 					) }
 				>
 					{ __( 'Learn more about embeds' ) }

package/src/file/edit.native.js

@@ -466,7 +466,6 @@ export class FileEdit extends Component {
 										__unstableMobileNoFocusOnMount
 										onChange={ this.onChangeFileName }
 										placeholder={ __( 'File name' ) }
-										rootTagsToEliminate={ [ 'p' ] }
 										tagName="p"
 										underlineColorAndroid="transparent"
 										value={ fileName }
@@ -502,7 +501,6 @@ export class FileEdit extends Component {
 											<RichText
 												withoutInteractiveFormatting
 												__unstableMobileNoFocusOnMount
-												rootTagsToEliminate={ [ 'p' ] }
 												tagName="p"
 												textAlign="center"
 												minWidth={ minWidth }

package/src/file/style.scss

@@ -1,6 +1,4 @@
 .wp-block-file {
-	margin-bottom: 1.5em;
-
 	&:not(.wp-element-button) {
 		font-size: 0.8em;
 	}
@@ -19,6 +17,11 @@
 	}
 }
 
+// Lowest specificity to avoid overriding layout styles.
+:where(.wp-block-file) {
+	margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
 	margin-bottom: 1em;
 }

package/src/gallery/test/use-get-media.native.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { render } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import useGetMedia from '../use-get-media';
+
+describe( 'useGetMedia', () => {
+	// TODO: Explore why a Gallery block would ever be without inner blocks.
+	// This test and the associated default function parameter might be unnecessary.
+	it( 'should not error when receiving zero images', () => {
+		// Arrange
+		const TestSubject = () => {
+			useGetMedia( undefined );
+			return null;
+		};
+
+		// Assert
+		expect( () => render( <TestSubject /> ) ).not.toThrow();
+	} );
+} );

package/src/gallery/use-get-media.native.js

@@ -14,7 +14,7 @@ const EMPTY_IMAGE_MEDIA = [];
  *
  * @return {Array} An array of media info options for each gallery image.
  */
-export default function useGetMedia( innerBlockImages ) {
+export default function useGetMedia( innerBlockImages = [] ) {
 	return useSelect(
 		( select ) => {
 			const imagesUploading = innerBlockImages.some(

package/src/image/block.json

@@ -85,10 +85,12 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": true,
 			"text": false,
 			"background": false
 		},
+		"filter": {
+			"duotone": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -104,7 +106,7 @@
 	"selectors": {
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area",
 		"filter": {
-			"duotone": "img, .components-placeholder"
+			"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
 		}
 	},
 	"styles": [

package/src/index.js

@@ -45,6 +45,9 @@ import * as commentsPaginationNext from './comments-pagination-next';
 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';
@@ -121,8 +124,8 @@ import isBlockMetadataExperimental from './utils/is-block-metadata-experimental'
 /**
  * Function to get all the block-library blocks in an array
  */
-const getAllBlocks = () =>
-	[
+const getAllBlocks = () => {
+	const blocks = [
 		// Common blocks are grouped at the top to prioritize their display
 		// in various contexts — like the inserter and auto-complete components.
 		paragraph,
@@ -224,7 +227,14 @@ const getAllBlocks = () =>
 		termDescription,
 		queryTitle,
 		postAuthorBiography,
-	].filter( Boolean );
+	];
+	if ( window?.__experimentalEnableDetailsBlocks ) {
+		blocks.push( details );
+		blocks.push( detailsContent );
+		blocks.push( detailsSummary );
+	}
+	return blocks.filter( Boolean );
+};
 
 /**
  * Function to get all the core blocks in an array.

package/src/media-text/media-container.js

@@ -20,11 +20,7 @@ import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import icon from './media-container-icon';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Constants

package/src/media-text/media-container.native.js

@@ -26,12 +26,12 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import icon from './media-container-icon';
 import SvgIconRetry from './icon-retry';
 
 /**