@wordpress/block-library 8.9.0 → 8.10.0

package/build-style/{details-summary → details}/editor-rtl.css

@@ -86,6 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-details-summary div {
+.wp-block-details summary div {
   display: inline;
 }

package/build-style/{details-summary → details}/editor.css

@@ -86,6 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-details-summary div {
+.wp-block-details summary div {
   display: inline;
 }

package/build-style/details/style-rtl.css

@@ -87,5 +87,19 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-details {
+  box-sizing: border-box;
   overflow: hidden;
+}
+
+.wp-block-details summary {
+  cursor: pointer;
+}
+
+.wp-block-details > *:not(summary) {
+  margin-block-start: var(--wp--style--block-gap);
+  margin-block-end: 0;
+}
+
+.wp-block-details > *:last-child {
+  margin-bottom: 0;
 }

package/build-style/details/style.css

@@ -87,5 +87,19 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-details {
+  box-sizing: border-box;
   overflow: hidden;
+}
+
+.wp-block-details summary {
+  cursor: pointer;
+}
+
+.wp-block-details > *:not(summary) {
+  margin-block-start: var(--wp--style--block-gap);
+  margin-block-end: 0;
+}
+
+.wp-block-details > *:last-child {
+  margin-bottom: 0;
 }

package/build-style/editor-rtl.css

@@ -574,7 +574,7 @@ html :where(.wp-block-column) {
   min-height: auto;
 }
 
-.wp-block-details-summary div {
+.wp-block-details summary div {
   display: inline;
 }
 
@@ -976,10 +976,6 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
 figure.wp-block-gallery {
   display: block;
 }
-figure.wp-block-gallery.has-nested-images .components-drop-zone {
-  display: none;
-  pointer-events: none;
-}
 figure.wp-block-gallery > .blocks-gallery-caption {
   flex: 0 0 100%;
 }
@@ -2279,6 +2275,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border-radius: initial;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .wp-block-search__components-button-group {
   margin-top: 10px;
@@ -2425,6 +2422,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 .block-library-site-logo__inspector-media-replace-container img {
   width: 20px;
+  min-width: 20px;
   aspect-ratio: 1;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 50% !important;

package/build-style/editor.css

@@ -578,7 +578,7 @@ html :where(.wp-block-column) {
   min-height: auto;
 }
 
-.wp-block-details-summary div {
+.wp-block-details summary div {
   display: inline;
 }
 
@@ -984,10 +984,6 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
 figure.wp-block-gallery {
   display: block;
 }
-figure.wp-block-gallery.has-nested-images .components-drop-zone {
-  display: none;
-  pointer-events: none;
-}
 figure.wp-block-gallery > .blocks-gallery-caption {
   flex: 0 0 100%;
 }
@@ -2287,6 +2283,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border-radius: initial;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .wp-block-search__components-button-group {
   margin-top: 10px;
@@ -2433,6 +2430,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 .block-library-site-logo__inspector-media-replace-container img {
   width: 20px;
+  min-width: 20px;
   aspect-ratio: 1;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 50% !important;

package/build-style/gallery/editor-rtl.css

@@ -89,10 +89,6 @@
 figure.wp-block-gallery {
   display: block;
 }
-figure.wp-block-gallery.has-nested-images .components-drop-zone {
-  display: none;
-  pointer-events: none;
-}
 figure.wp-block-gallery > .blocks-gallery-caption {
   flex: 0 0 100%;
 }

package/build-style/gallery/editor.css

@@ -89,10 +89,6 @@
 figure.wp-block-gallery {
   display: block;
 }
-figure.wp-block-gallery.has-nested-images .components-drop-zone {
-  display: none;
-  pointer-events: none;
-}
 figure.wp-block-gallery > .blocks-gallery-caption {
   flex: 0 0 100%;
 }

package/build-style/search/editor-rtl.css

@@ -95,6 +95,7 @@
   border-radius: initial;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .wp-block-search__components-button-group {
   margin-top: 10px;

package/build-style/search/editor.css

@@ -95,6 +95,7 @@
   border-radius: initial;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .wp-block-search__components-button-group {
   margin-top: 10px;

package/build-style/site-logo/editor-rtl.css

@@ -190,6 +190,7 @@
 }
 .block-library-site-logo__inspector-media-replace-container img {
   width: 20px;
+  min-width: 20px;
   aspect-ratio: 1;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 50% !important;

package/build-style/site-logo/editor.css

@@ -190,6 +190,7 @@
 }
 .block-library-site-logo__inspector-media-replace-container img {
   width: 20px;
+  min-width: 20px;
   aspect-ratio: 1;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 50% !important;

package/build-style/style-rtl.css

@@ -609,6 +609,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box; direction: ltr;
   /**
    * Set a default background color for has-background-dim _unless_ it includes another
@@ -1019,13 +1021,23 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-details {
+  box-sizing: border-box;
   overflow: hidden;
 }
 
-.wp-block-details-summary {
+.wp-block-details summary {
   cursor: pointer;
 }
 
+.wp-block-details > *:not(summary) {
+  margin-block-start: var(--wp--style--block-gap);
+  margin-block-end: 0;
+}
+
+.wp-block-details > *:last-child {
+  margin-bottom: 0;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,

package/build-style/style.css

@@ -614,6 +614,8 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
+  overflow: clip;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -1026,13 +1028,23 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-details {
+  box-sizing: border-box;
   overflow: hidden;
 }
 
-.wp-block-details-summary {
+.wp-block-details summary {
   cursor: pointer;
 }
 
+.wp-block-details > *:not(summary) {
+  margin-block-start: var(--wp--style--block-gap);
+  margin-block-end: 0;
+}
+
+.wp-block-details > *:last-child {
+  margin-bottom: 0;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.9.0",
+	"version": "8.10.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.33.0",
+		"@wordpress/api-fetch": "^6.30.0",
+		"@wordpress/autop": "^3.33.0",
+		"@wordpress/blob": "^3.33.0",
+		"@wordpress/block-editor": "^12.1.0",
+		"@wordpress/blocks": "^12.10.0",
+		"@wordpress/components": "^24.0.0",
+		"@wordpress/compose": "^6.10.0",
+		"@wordpress/core-data": "^6.10.0",
+		"@wordpress/data": "^9.3.0",
+		"@wordpress/date": "^4.33.0",
+		"@wordpress/deprecated": "^3.33.0",
+		"@wordpress/dom": "^3.33.0",
+		"@wordpress/element": "^5.10.0",
+		"@wordpress/escape-html": "^2.33.0",
+		"@wordpress/hooks": "^3.33.0",
+		"@wordpress/html-entities": "^3.33.0",
+		"@wordpress/i18n": "^4.33.0",
+		"@wordpress/icons": "^9.24.0",
+		"@wordpress/keycodes": "^3.33.0",
+		"@wordpress/notices": "^4.1.0",
+		"@wordpress/primitives": "^3.31.0",
+		"@wordpress/private-apis": "^0.15.0",
+		"@wordpress/reusable-blocks": "^4.10.0",
+		"@wordpress/rich-text": "^6.10.0",
+		"@wordpress/server-side-render": "^4.10.0",
+		"@wordpress/url": "^3.34.0",
+		"@wordpress/viewport": "^5.10.0",
+		"@wordpress/wordcount": "^3.33.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",
 		"micromodal": "^0.4.10",
+		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
@@ -78,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }

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/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/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,