@wordpress/block-library 8.9.0 → 8.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.9.0",
+	"version": "8.11.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,48 +27,52 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/*/init.js"
+		"{src,build,build-module}/*/init.js",
+		"{src,build,build-module}/utils/interactivity/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.32.0",
-		"@wordpress/api-fetch": "^6.29.0",
-		"@wordpress/autop": "^3.32.0",
-		"@wordpress/blob": "^3.32.0",
-		"@wordpress/block-editor": "^12.0.0",
-		"@wordpress/blocks": "^12.9.0",
-		"@wordpress/components": "^23.9.0",
-		"@wordpress/compose": "^6.9.0",
-		"@wordpress/core-data": "^6.9.0",
-		"@wordpress/data": "^9.2.0",
-		"@wordpress/date": "^4.32.0",
-		"@wordpress/deprecated": "^3.32.0",
-		"@wordpress/dom": "^3.32.0",
-		"@wordpress/element": "^5.9.0",
-		"@wordpress/escape-html": "^2.32.0",
-		"@wordpress/hooks": "^3.32.0",
-		"@wordpress/html-entities": "^3.32.0",
-		"@wordpress/i18n": "^4.32.0",
-		"@wordpress/icons": "^9.23.0",
-		"@wordpress/keycodes": "^3.32.0",
-		"@wordpress/notices": "^4.0.0",
-		"@wordpress/primitives": "^3.30.0",
-		"@wordpress/private-apis": "^0.14.0",
-		"@wordpress/reusable-blocks": "^4.9.0",
-		"@wordpress/rich-text": "^6.9.0",
-		"@wordpress/server-side-render": "^4.9.0",
-		"@wordpress/url": "^3.33.0",
-		"@wordpress/viewport": "^5.9.0",
-		"@wordpress/wordcount": "^3.32.0",
+		"@preact/signals": "^1.1.3",
+		"@wordpress/a11y": "^3.34.0",
+		"@wordpress/api-fetch": "^6.31.0",
+		"@wordpress/autop": "^3.34.0",
+		"@wordpress/blob": "^3.34.0",
+		"@wordpress/block-editor": "^12.2.0",
+		"@wordpress/blocks": "^12.11.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/compose": "^6.11.0",
+		"@wordpress/core-data": "^6.11.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/date": "^4.34.0",
+		"@wordpress/deprecated": "^3.34.0",
+		"@wordpress/dom": "^3.34.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/escape-html": "^2.34.0",
+		"@wordpress/hooks": "^3.34.0",
+		"@wordpress/html-entities": "^3.34.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/keycodes": "^3.34.0",
+		"@wordpress/notices": "^4.2.0",
+		"@wordpress/primitives": "^3.32.0",
+		"@wordpress/private-apis": "^0.16.0",
+		"@wordpress/reusable-blocks": "^4.11.0",
+		"@wordpress/rich-text": "^6.11.0",
+		"@wordpress/server-side-render": "^4.11.0",
+		"@wordpress/url": "^3.35.0",
+		"@wordpress/viewport": "^5.11.0",
+		"@wordpress/wordcount": "^3.34.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepsignal": "^1.3.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"micromodal": "^0.4.10",
+		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
@@ -78,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/block/edit.native.js

@@ -36,6 +36,7 @@ import {
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { help } from '@wordpress/icons';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -103,6 +104,11 @@ export default function ReusableBlockEdit( {
 		},
 		[ ref, clientId ]
 	);
+	const hostAppNamespace = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().hostAppNamespace,
+		[]
+	);
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
@@ -143,11 +149,19 @@ export default function ReusableBlockEdit( {
 	function renderSheet() {
 		const infoTitle =
 			Platform.OS === 'android'
-				? __(
-						'Editing reusable blocks is not yet supported on WordPress for Android'
+				? sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing reusable blocks is not yet supported on %s for Android'
+						),
+						hostAppNamespace
 				  )
-				: __(
-						'Editing reusable blocks is not yet supported on WordPress for iOS'
+				: sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing reusable blocks is not yet supported on %s for iOS'
+						),
+						hostAppNamespace
 				  );
 
 		return (

package/src/buttons/test/edit.native.js

@@ -19,15 +19,6 @@ import {
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
-// Mock debounce to prevent potentially belated state updates.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
-	debounce: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 const BUTTONS_HTML = `<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->`;

package/src/code/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"align": [ "wide" ],
 		"anchor": true,
 		"typography": {
 			"fontSize": true,

package/src/column/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 2,
 	"name": "core/column",
 	"title": "Column",
-	"category": "text",
+	"category": "design",
 	"parent": [ "core/columns" ],
 	"description": "A single column within a columns block.",
 	"textdomain": "default",

package/src/columns/test/__snapshots__/transforms.native.js.snap

@@ -34,7 +34,7 @@ exports[`Columns block transforms to Group block 1`] = `
 <!-- /wp:group -->"
 `;
 
-exports[`Columns block transforms unwraps content 1`] = `
+exports[`Columns block transforms ungroups block 1`] = `
 "<!-- wp:paragraph {"align":"left"} -->
 <p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
 <!-- /wp:paragraph -->

package/src/columns/test/transforms.native.js

@@ -60,14 +60,13 @@ describe( `${ block } block transforms`, () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'unwraps content', async () => {
+	it( 'ungroups block', async () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const { getByText } = screen;
 		fireEvent.press( getBlock( screen, block ) );
 
 		await openBlockActionsMenu( screen );
-		fireEvent.press( getByText( 'Transform block…' ) );
-		fireEvent.press( getByText( 'Unwrap' ) );
+		fireEvent.press( getByText( 'Ungroup' ) );
 
 		// The first block created is the content of the Paragraph block.
 		const paragraph = getBlock( screen, 'Paragraph', 0 );
@@ -83,8 +82,7 @@ describe( `${ block } block transforms`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const transformOptions = await getBlockTransformOptions(
 			screen,
-			block,
-			{ canUnwrap: true }
+			block
 		);
 		expect( transformOptions ).toHaveLength( blockTransforms.length );
 	} );

package/src/columns/transforms.js

@@ -105,14 +105,8 @@ const transforms = {
 			},
 		},
 	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( attributes, innerBlocks ) =>
-				innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
-		},
-	],
+	ungroup: ( attributes, innerBlocks ) =>
+		innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
 };
 
 export default transforms;

package/src/comment-author-name/edit.js

@@ -70,7 +70,7 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Link settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ __( 'Link to authors URL' ) }

package/src/comment-edit-link/edit.js

@@ -37,7 +37,7 @@ export default function Edit( {
 	);
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Link settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }

package/src/comment-template/index.php

@@ -25,13 +25,14 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 
 	$content = '';
 	foreach ( $comments as $comment ) {
-
-		$block_content = ( new WP_Block(
-			$block->parsed_block,
-			array(
-				'commentId' => $comment->comment_ID,
-			)
-		) )->render( array( 'dynamic' => false ) );
+		$comment_id           = $comment->comment_ID;
+		$filter_block_context = static function( $context ) use ( $comment_id ) {
+			$context['commentId'] = $comment_id;
+			return $context;
+		};
+		add_filter( 'render_block_context', $filter_block_context );
+		$block_content = $block->render( array( 'dynamic' => false ) );
+		remove_filter( 'render_block_context', $filter_block_context );
 
 		$children = $comment->get_children();
 

package/src/comments/index.php

@@ -29,13 +29,8 @@ function render_block_core_comments( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$comment_args = array(
-		'post_id' => $post_id,
-		'count'   => true,
-		'status'  => 'approve',
-	);
 	// Return early if there are no comments and comments are closed.
-	if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) {
+	if ( ! comments_open( $post_id ) && (int) get_comments_number( $post_id ) === 0 ) {
 		return '';
 	}
 

package/src/cover/block.json

@@ -4,7 +4,7 @@
 	"name": "core/cover",
 	"title": "Cover",
 	"category": "media",
-	"description": "Add an image or video with a text overlay — great for headers.",
+	"description": "Add an image or video with a text overlay.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {

package/src/cover/edit/inspector-controls.js

@@ -249,62 +249,64 @@ export default function CoverInspectorControls( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor.color,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: setOverlayColor,
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => {
-						// If there's a media background the dimRatio will be
-						// defaulted to 50 whereas it will be 100 for colors.
-						return dimRatio === undefined
-							? false
-							: dimRatio !== ( url ? 50 : 100 );
-					} }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () =>
-						setAttributes( { dimRatio: url ? 50 : 100 } )
-					}
-					resetAllFilter={ () => ( {
-						dimRatio: url ? 50 : 100,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						__nextHasNoMarginBottom
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					<ColorGradientSettingsDropdown
+						__experimentalIsRenderedInSidebar
+						settings={ [
+							{
+								colorValue: overlayColor.color,
+								gradientValue,
+								label: __( 'Overlay' ),
+								onColorChange: setOverlayColor,
+								onGradientChange: setGradient,
+								isShownByDefault: true,
+								resetAllFilter: () => ( {
+									overlayColor: undefined,
+									customOverlayColor: undefined,
+									gradient: undefined,
+									customGradient: undefined,
+								} ),
+							},
+						] }
+						panelId={ clientId }
+						{ ...colorGradientSettings }
+					/>
+					<ToolsPanelItem
+						hasValue={ () => {
+							// If there's a media background the dimRatio will be
+							// defaulted to 50 whereas it will be 100 for colors.
+							return dimRatio === undefined
+								? false
+								: dimRatio !== ( url ? 50 : 100 );
+						} }
 						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRation ) =>
-							setAttributes( {
-								dimRatio: newDimRation,
-							} )
+						onDeselect={ () =>
+							setAttributes( { dimRatio: url ? 50 : 100 } )
 						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
+						resetAllFilter={ () => ( {
+							dimRatio: url ? 50 : 100,
+						} ) }
+						isShownByDefault
+						panelId={ clientId }
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							label={ __( 'Overlay opacity' ) }
+							value={ dimRatio }
+							onChange={ ( newDimRation ) =>
+								setAttributes( {
+									dimRatio: newDimRation,
+								} )
+							}
+							min={ 0 }
+							max={ 100 }
+							step={ 10 }
+							required
+						/>
+					</ToolsPanelItem>
+				</InspectorControls>
+			) }
 			<InspectorControls group="dimensions">
 				<ToolsPanelItem
 					hasValue={ () => !! minHeight }

package/src/cover/edit/resizable-cover-popover.js

@@ -25,6 +25,8 @@ const RESIZABLE_BOX_ENABLE_OPTION = {
 	topLeft: false,
 };
 
+const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
+
 export default function ResizableCoverPopover( {
 	className,
 	height,
@@ -37,7 +39,6 @@ export default function ResizableCoverPopover( {
 	width,
 	...props
 } ) {
-	const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
 	const [ isResizing, setIsResizing ] = useState( false );
 	const dimensions = useMemo(
 		() => ( { height, minHeight, width } ),

package/src/cover/style.scss

@@ -7,6 +7,11 @@
 	justify-content: center;
 	align-items: center;
 	padding: 1em;
+	// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
+	// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
+	overflow: hidden;
+	// Use clip instead of overflow: hidden so that sticky position works on child elements.
+	overflow: clip;
 	// 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.

package/src/cover/test/edit.js

@@ -12,9 +12,34 @@ import {
 	selectBlock,
 } from 'test/integration/helpers/integration-test-editor';
 
-async function setup( attributes ) {
+const defaultSettings = {
+	__experimentalFeatures: {
+		color: {
+			defaultPalette: true,
+			defaultGradients: true,
+			palette: {
+				default: [ { name: 'Black', slug: 'black', color: '#000000' } ],
+			},
+		},
+	},
+	colors: [ { name: 'Black', slug: 'black', color: '#000000' } ],
+	disableCustomColors: false,
+	disableCustomGradients: false,
+};
+
+const disabledColorSettings = {
+	color: {
+		defaultPalette: false,
+		defaultGradients: false,
+	},
+	disableCustomColors: true,
+	disableCustomGradients: true,
+};
+
+async function setup( attributes, useCoreBlocks, customSettings ) {
 	const testBlock = { name: 'core/cover', attributes };
-	return initializeEditor( testBlock );
+	const settings = customSettings || defaultSettings;
+	return initializeEditor( testBlock, useCoreBlocks, settings );
 }
 
 async function createAndSelectBlock() {
@@ -296,6 +321,35 @@ describe( 'Cover block', () => {
 
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
 			} );
+
+			describe( 'when colors are disabled', () => {
+				test( 'does not render overlay control', async () => {
+					await setup( undefined, true, disabledColorSettings );
+					await createAndSelectBlock();
+					await userEvent.click(
+						screen.getByRole( 'tab', { name: 'Styles' } )
+					);
+
+					const overlayControl = screen.queryByRole( 'button', {
+						name: 'Overlay',
+					} );
+
+					expect( overlayControl ).not.toBeInTheDocument();
+				} );
+				test( 'does not render opacity control', async () => {
+					await setup( undefined, true, disabledColorSettings );
+					await createAndSelectBlock();
+					await userEvent.click(
+						screen.getByRole( 'tab', { name: 'Styles' } )
+					);
+
+					const opacityControl = screen.queryByRole( 'slider', {
+						name: 'Overlay opacity',
+					} );
+
+					expect( opacityControl ).not.toBeInTheDocument();
+				} );
+			} );
 		} );
 
 		describe( 'Dimensions panel', () => {

package/src/cover/variations.js

@@ -8,9 +8,7 @@ const variations = [
 	{
 		name: 'cover',
 		title: __( 'Cover' ),
-		description: __(
-			'Add an image or video with a text overlay — great for headers.'
-		),
+		description: __( 'Add an image or video with a text overlay.' ),
 		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
 		icon: cover,

package/src/details/block.json

@@ -5,28 +5,29 @@
 	"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
@@ -50,5 +51,6 @@
 			}
 		}
 	},
+	"editorStyle": "wp-block-details-editor",
 	"style": "wp-block-details"
 }

package/src/details/edit.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -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.
@@ -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>
 		</>
 	);
 }

package/src/details/editor.scss

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