@wordpress/block-library 8.6.0 → 8.8.0

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/edit.js

@@ -562,6 +562,7 @@ function GalleryEdit( props ) {
 							max={ Math.min( MAX_COLUMNS, images.length ) }
 							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 							required
+							size="__unstable-large"
 						/>
 					) }
 					<ToggleControl
@@ -578,6 +579,7 @@ function GalleryEdit( props ) {
 						onChange={ setLinkTo }
 						options={ linkOptions }
 						hideCancelButton={ true }
+						size="__unstable-large"
 					/>
 					{ hasLinkTo && (
 						<ToggleControl
@@ -590,7 +592,7 @@ function GalleryEdit( props ) {
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
 							__nextHasNoMarginBottom
-							label={ __( 'Image size' ) }
+							label={ __( 'Resolution' ) }
 							help={ __(
 								'Select the size of the source images.'
 							) }
@@ -598,12 +600,13 @@ function GalleryEdit( props ) {
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
 							hideCancelButton={ true }
+							size="__unstable-large"
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
-								{ __( 'Image size' ) }
+								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
 							<View className={ 'gallery-image-sizes__loading' }>
 								<Spinner />

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/gallery/use-image-sizes.js

@@ -5,7 +5,7 @@ import { useMemo } from '@wordpress/element';
 
 /**
  * Calculates the image sizes that are avaible for the current gallery images in order to
- * populate the 'Image size' selector.
+ * populate the 'Resolution' selector.
  *
  * @param {Array}    images      Basic image block data taken from current gallery innerBlock
  * @param {boolean}  isSelected  Is the block currently selected in the editor.

package/src/group/deprecated.js

@@ -50,7 +50,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {
@@ -135,7 +136,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {

package/src/group/edit.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -97,7 +98,8 @@ function GroupEdit( {
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
-	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
+	const layoutSupportEnabled =
+		themeSupportsLayout || type === 'flex' || type === 'grid';
 
 	// Hooks.
 	const blockProps = useBlockProps( {
@@ -108,15 +110,28 @@ function GroupEdit( {
 		usedLayoutType: usedLayout?.type,
 		hasInnerBlocks,
 	} );
+
+	// Default to the regular appender being rendered.
+	let renderAppender;
+	if ( showPlaceholder ) {
+		// In the placeholder state, ensure the appender is not rendered.
+		// This is needed because `...innerBlocksProps` is used in the placeholder
+		// state so that blocks can dragged onto the placeholder area
+		// from both the list view and in the editor canvas.
+		renderAppender = false;
+	} else if ( ! hasInnerBlocks ) {
+		// When there is no placeholder, but the block is also empty,
+		// use the larger button appender.
+		renderAppender = InnerBlocks.ButtonBlockAppender;
+	}
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
 			templateLock,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
+			renderAppender,
 			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
@@ -138,11 +153,14 @@ function GroupEdit( {
 				}
 			/>
 			{ showPlaceholder && (
-				<GroupPlaceHolder
-					clientId={ clientId }
-					name={ name }
-					onSelect={ selectVariation }
-				/>
+				<View { ...innerBlocksProps }>
+					{ innerBlocksProps.children }
+					<GroupPlaceHolder
+						clientId={ clientId }
+						name={ name }
+						onSelect={ selectVariation }
+					/>
+				</View>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...innerBlocksProps } />

package/src/group/placeholder.js

@@ -47,6 +47,17 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
+		'group-grid': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path d="m20.30137,-0.00025l-18.9728,0c-0.86524,0.07234 -1.41711,0.79149 -1.41711,1.89149l0,12.64468c0,0.6 0.73401,0.96383 1.0304,0.96383l19.67469,0.03617c0.29639,0 1.0304,-0.4 1.0304,-1l-0.03576,-12.7532c0,-1.1 -0.76644,-1.78297 -1.30983,-1.78297zm0.52975,16.60851l-19.99654,-0.03617c-0.29639,0 -0.92312,0.36383 -0.92312,0.96383l-0.03576,12.68085c0,1.1 0.8022,1.81915 1.34559,1.81915l19.00857,0c0.54339,0 1.45287,-0.71915 1.45287,-1.81915l0,-12.53617c0,-0.6 -0.5552,-1.07234 -0.8516,-1.07234z" />
+				<Path d="m42.73056,-0.03617l-18.59217,0c-0.84788,0.07234 -1.38868,0.79149 -1.38868,1.89149l0,12.64468c0,0.6 0.71928,0.96383 1.00973,0.96383l19.27997,0.03617c0.29045,0 1.00973,-0.4 1.00973,-1l-0.03504,-12.7532c0,-1.1 -0.75106,-1.78297 -1.28355,-1.78297zm0.51912,16.60851l-19.59537,-0.03617c-0.29045,0 -0.9046,0.36383 -0.9046,0.96383l-0.03504,12.68085c0,1.1 0.78611,1.81915 1.31859,1.81915l18.62721,0c0.53249,0 1.42372,-0.71915 1.42372,-1.81915l0,-12.53617c0,-0.6 -0.54407,-1.07234 -0.83451,-1.07234z" />
+			</SVG>
+		),
 	};
 	return icons?.[ name ];
 };
@@ -85,7 +96,8 @@ export function useShouldShowPlaceHolder( {
 			! fontSize &&
 			! textColor &&
 			! style &&
-			usedLayoutType !== 'flex'
+			usedLayoutType !== 'flex' &&
+			usedLayoutType !== 'grid'
 	);
 
 	useEffect( () => {

package/src/group/variations.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 
 const variations = [
 	{
@@ -44,4 +44,17 @@ const variations = [
 	},
 ];
 
+if ( window?.__experimentalEnableGroupGridVariation ) {
+	variations.push( {
+		name: 'group-grid',
+		title: __( 'Grid' ),
+		description: __( 'Arrange blocks in a grid.' ),
+		attributes: { layout: { type: 'grid' } },
+		scope: [ 'block', 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'grid',
+		icon: grid,
+	} );
+}
+
 export default variations;

package/src/home-link/index.php

@@ -98,12 +98,12 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
+	$classes[]       = 'wp-block-navigation-item';
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
-	$css_classes     = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes,
+			'class' => implode( ' ', $classes ),
 			'style' => $style_attribute,
 		)
 	);

package/src/image/block.json

@@ -85,15 +85,16 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder",
 			"text": false,
 			"background": false
 		},
+		"filter": {
+			"duotone": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .wp-block-image__crop-area",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -102,6 +103,12 @@
 			}
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area",
+		"filter": {
+			"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
+		}
+	},
 	"styles": [
 		{
 			"name": "default",

package/src/image/edit.js

@@ -211,7 +211,7 @@ export function ImageEdit( {
 					: 'full',
 			};
 		} else {
-			// Keep the same url when selecting the same file, so "Image Size"
+			// Keep the same url when selecting the same file, so "Resolution"
 			// option is not changed.
 			additionalAttributes = { url };
 		}