@wordpress/block-library 8.6.0 → 8.8.0

package/build-style/style.css

@@ -330,6 +330,7 @@
 
 .wp-block-categories {
   box-sizing: border-box;
+  /* Only apply the text align on dropdowns, not lists. */
 }
 .wp-block-categories.alignleft {
   /*rtl:ignore*/
@@ -339,6 +340,9 @@
   /*rtl:ignore*/
   margin-left: 2em;
 }
+.wp-block-categories.wp-block-categories-dropdown.aligncenter {
+  text-align: center;
+}
 
 .wp-block-code {
   box-sizing: border-box;
@@ -352,7 +356,6 @@
 
 .wp-block-columns {
   display: flex;
-  margin-bottom: 1.75em;
   box-sizing: border-box;
   flex-wrap: wrap !important;
   align-items: initial !important;
@@ -399,6 +402,10 @@
   flex-grow: 0;
 }
 
+:where(.wp-block-columns) {
+  margin-bottom: 1.75em;
+}
+
 :where(.wp-block-columns.has-background) {
   padding: 1.25em 2.375em;
 }
@@ -607,6 +614,7 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -823,7 +831,7 @@
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover__inner-container {
   width: 100%;
-  z-index: 1;
+  z-index: 32;
   color: inherit;
   /*rtl:raw: direction: rtl; */
 }
@@ -923,7 +931,7 @@ video.wp-block-cover__video-background.has-parallax {
   background-size: cover;
   background-repeat: no-repeat;
 }
-@supports (-webkit-overflow-scrolling: touch) {
+@supports (-webkit-touch-callout: inherit) {
   .wp-block-cover-image.has-parallax,
 .wp-block-cover.has-parallax,
 .wp-block-cover__image-background.has-parallax,
@@ -1018,6 +1026,14 @@ section.wp-block-cover-image > h2,
   color: #000;
 }
 
+.wp-block-details {
+  overflow: hidden;
+}
+
+.wp-block-details-summary {
+  cursor: pointer;
+}
+
 .wp-block[data-align=left] > [data-type="core/embed"],
 .wp-block[data-align=right] > [data-type="core/embed"],
 .wp-block-embed.alignleft,
@@ -1089,9 +1105,6 @@ section.wp-block-cover-image > h2,
   padding-top: 200%;
 }
 
-.wp-block-file {
-  margin-bottom: 1.5em;
-}
 .wp-block-file:not(.wp-element-button) {
   font-size: 0.8em;
 }
@@ -1106,6 +1119,10 @@ section.wp-block-cover-image > h2,
   margin-left: 0.75em;
 }
 
+:where(.wp-block-file) {
+  margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
   margin-bottom: 1em;
 }
@@ -2331,6 +2348,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-close {
   width: 100%;
+}
+.has-modal-open .wp-block-navigation__responsive-close {
   max-width: var(--wp--style--global--wide-size, 100%);
   margin-left: auto;
   margin-right: auto;
@@ -2519,7 +2538,7 @@ p.has-background {
   box-sizing: border-box;
 }
 
-.wp-block-post-excerpt {
+:where(.wp-block-post-excerpt) {
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }
@@ -2624,6 +2643,10 @@ p.has-background {
   white-space: pre-wrap;
 }
 
+.wp-block-post-time-to-read {
+  box-sizing: border-box;
+}
+
 .wp-block-post-title {
   word-break: break-word;
   box-sizing: border-box;
@@ -2641,7 +2664,6 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-  margin: 0 0 1em 0;
   padding: 3em 0;
   text-align: center;
   overflow-wrap: break-word;
@@ -2663,6 +2685,10 @@ p.has-background {
   color: inherit;
 }
 
+:where(.wp-block-pullquote) {
+  margin: 0 0 1em 0;
+}
+
 .wp-block-pullquote.has-text-align-left blockquote {
   text-align: left;
 }
@@ -2709,7 +2735,7 @@ p.has-background {
   flex-wrap: wrap;
   gap: 1.25em;
 }
-.wp-block-post-template.is-flex-container li {
+.wp-block-post-template.is-flex-container > li {
   margin: 0;
   width: 100%;
 }
@@ -2854,22 +2880,22 @@ ul.wp-block-rss.is-grid li {
 }
 
 .wp-block-search__button {
-  margin-left: 0.625em;
+  margin-left: 10px;
   word-break: normal;
 }
 .wp-block-search__button.has-icon {
   line-height: 0;
 }
 .wp-block-search__button svg {
-  min-width: 1.5em;
-  min-height: 1.5em;
+  min-width: 24px;
+  min-height: 24px;
   fill: currentColor;
   vertical-align: text-bottom;
 }
 
 :where(.wp-block-search__button) {
   border: 1px solid #ccc;
-  padding: 0.375em 0.625em;
+  padding: 6px 10px;
 }
 
 .wp-block-search__inside-wrapper {
@@ -2888,7 +2914,7 @@ ul.wp-block-rss.is-grid li {
   flex-grow: 1;
   margin-left: 0;
   margin-right: 0;
-  min-width: 3em;
+  min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
 }
@@ -2900,17 +2926,18 @@ ul.wp-block-rss.is-grid li {
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
   border: 1px solid #949494;
+  box-sizing: border-box;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
   border-radius: 0;
   border: none;
-  padding: 0 0 0 0.25em;
+  padding: 0 4px;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
-  padding: 0.125em 0.5em;
+  padding: 4px 8px;
 }
 
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {
@@ -3774,7 +3801,7 @@ html :where(img[class*="wp-image-"]) {
 /**
  * Reset user agent styles for figure element margins.
  */
-figure {
+:where(figure) {
   margin: 0 0 1em 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.6.0",
+	"version": "8.8.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,35 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.29.0",
-		"@wordpress/api-fetch": "^6.26.0",
-		"@wordpress/autop": "^3.29.0",
-		"@wordpress/blob": "^3.29.0",
-		"@wordpress/block-editor": "^11.6.0",
-		"@wordpress/blocks": "^12.6.0",
-		"@wordpress/components": "^23.6.0",
-		"@wordpress/compose": "^6.6.0",
-		"@wordpress/core-data": "^6.6.0",
-		"@wordpress/data": "^8.6.0",
-		"@wordpress/date": "^4.29.0",
-		"@wordpress/deprecated": "^3.29.0",
-		"@wordpress/dom": "^3.29.0",
-		"@wordpress/element": "^5.6.0",
-		"@wordpress/escape-html": "^2.29.0",
-		"@wordpress/hooks": "^3.29.0",
-		"@wordpress/html-entities": "^3.29.0",
-		"@wordpress/i18n": "^4.29.0",
-		"@wordpress/icons": "^9.20.0",
-		"@wordpress/keycodes": "^3.29.0",
-		"@wordpress/notices": "^3.29.0",
-		"@wordpress/primitives": "^3.27.0",
-		"@wordpress/private-apis": "^0.11.0",
-		"@wordpress/reusable-blocks": "^4.6.0",
-		"@wordpress/rich-text": "^6.6.0",
-		"@wordpress/server-side-render": "^4.6.0",
-		"@wordpress/url": "^3.30.0",
-		"@wordpress/viewport": "^5.6.0",
-		"@wordpress/wordcount": "^3.29.0",
+		"@wordpress/a11y": "^3.31.0",
+		"@wordpress/api-fetch": "^6.28.0",
+		"@wordpress/autop": "^3.31.0",
+		"@wordpress/blob": "^3.31.0",
+		"@wordpress/block-editor": "^11.8.0",
+		"@wordpress/blocks": "^12.8.0",
+		"@wordpress/components": "^23.8.0",
+		"@wordpress/compose": "^6.8.0",
+		"@wordpress/core-data": "^6.8.0",
+		"@wordpress/data": "^9.1.0",
+		"@wordpress/date": "^4.31.0",
+		"@wordpress/deprecated": "^3.31.0",
+		"@wordpress/dom": "^3.31.0",
+		"@wordpress/element": "^5.8.0",
+		"@wordpress/escape-html": "^2.31.0",
+		"@wordpress/hooks": "^3.31.0",
+		"@wordpress/html-entities": "^3.31.0",
+		"@wordpress/i18n": "^4.31.0",
+		"@wordpress/icons": "^9.22.0",
+		"@wordpress/keycodes": "^3.31.0",
+		"@wordpress/notices": "^3.31.0",
+		"@wordpress/primitives": "^3.29.0",
+		"@wordpress/private-apis": "^0.13.0",
+		"@wordpress/reusable-blocks": "^4.8.0",
+		"@wordpress/rich-text": "^6.8.0",
+		"@wordpress/server-side-render": "^4.8.0",
+		"@wordpress/url": "^3.32.0",
+		"@wordpress/viewport": "^5.8.0",
+		"@wordpress/wordcount": "^3.31.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9534a7b3bbf07c1d40b94fdb7a3d091f297bfb06"
+	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
 }

package/src/buttons/block.json

@@ -10,6 +10,7 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
+		"html": false,
 		"__experimentalExposeControlsToChildren": true,
 		"spacing": {
 			"blockGap": true,

package/src/categories/editor.scss

@@ -5,3 +5,8 @@
 		margin-top: 6px;
 	}
 }
+
+/* Center alignment for classic themes. */
+[data-align="center"] .wp-block-categories {
+	text-align: center;
+}

package/src/categories/style.scss

@@ -10,4 +10,8 @@
 		/*rtl:ignore*/
 		margin-left: 2em;
 	}
+	/* Only apply the text align on dropdowns, not lists. */
+	&.wp-block-categories-dropdown.aligncenter {
+		text-align: center;
+	}
 }

package/src/column/block.json

@@ -38,7 +38,8 @@
 			"blockGap": true,
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"__experimentalBorder": {

package/src/columns/block.json

@@ -13,6 +13,10 @@
 		"isStackedOnMobile": {
 			"type": "boolean",
 			"default": true
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ]
 		}
 	},
 	"supports": {
@@ -35,7 +39,8 @@
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"__experimentalLayout": {

package/src/columns/edit.js

@@ -58,15 +58,37 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
 
-	const { count, canInsertColumnBlock } = useSelect(
+	const { count, canInsertColumnBlock, minCount } = useSelect(
 		( select ) => {
+			const {
+				canInsertBlockType,
+				canRemoveBlock,
+				getBlocks,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const innerBlocks = getBlocks( clientId );
+
+			// Get the indexes of columns for which removal is prevented.
+			// The highest index will be used to determine the minimum column count.
+			const preventRemovalBlockIndexes = innerBlocks.reduce(
+				( acc, block, index ) => {
+					if ( ! canRemoveBlock( block.clientId ) ) {
+						acc.push( index );
+					}
+					return acc;
+				},
+				[]
+			);
+
 			return {
-				count: select( blockEditorStore ).getBlockCount( clientId ),
-				canInsertColumnBlock: select(
-					blockEditorStore
-				).canInsertBlockType( 'core/column', clientId ),
+				count: getBlockCount( clientId ),
+				canInsertColumnBlock: canInsertBlockType(
+					'core/column',
+					clientId
+				),
+				minCount: Math.max( ...preventRemovalBlockIndexes ) + 1,
 			};
 		},
 		[ clientId ]
@@ -84,6 +106,7 @@ function ColumnsEditContainer( {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
 		renderAppender: false,
+		templateLock,
 	} );
 
 	return (
@@ -103,9 +126,12 @@ function ColumnsEditContainer( {
 								label={ __( 'Columns' ) }
 								value={ count }
 								onChange={ ( value ) =>
-									updateColumns( count, value )
+									updateColumns(
+										count,
+										Math.max( minCount, value )
+									)
 								}
-								min={ 1 }
+								min={ Math.max( 1, minCount ) }
 								max={ Math.max( 6, count ) }
 							/>
 							{ count > 6 && (
@@ -213,13 +239,12 @@ const ColumnsEditContainerWrapper = withDispatch(
 						return createBlock( 'core/column' );
 					} ),
 				];
-			} else {
+			} else if ( newColumns < previousColumns ) {
 				// The removed column will be the last of the inner blocks.
 				innerBlocks = innerBlocks.slice(
 					0,
 					-( previousColumns - newColumns )
 				);
-
 				if ( hasExplicitWidths ) {
 					// Redistribute as if block is already removed.
 					const widths = getRedistributedColumnWidths(

package/src/columns/style.scss

@@ -1,6 +1,5 @@
 .wp-block-columns {
 	display: flex;
-	margin-bottom: 1.75em;
 	box-sizing: border-box;
 
 	// Responsiveness: Allow wrapping on mobile.
@@ -73,6 +72,11 @@
 	}
 }
 
+// Lower specificity of margin styles so they don't override the Layout block support.
+:where(.wp-block-columns) {
+	margin-bottom: 1.75em;
+}
+
 // Add low specificity default padding to columns blocks with backgrounds.
 :where(.wp-block-columns.has-background) {
 	// Matches paragraph block padding.

package/src/columns/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * Returns a column width attribute value rounded to standard precision.
  * Returns `undefined` if the value is not a valid finite number.
@@ -86,10 +81,14 @@ export function getRedistributedColumnWidths(
 ) {
 	const totalWidth = getTotalColumnsWidth( blocks, totalBlockCount );
 
-	return mapValues( getColumnWidths( blocks, totalBlockCount ), ( width ) => {
-		const newWidth = ( availableWidth * width ) / totalWidth;
-		return toWidthPrecision( newWidth );
-	} );
+	return Object.fromEntries(
+		Object.entries( getColumnWidths( blocks, totalBlockCount ) ).map(
+			( [ clientId, width ] ) => {
+				const newWidth = ( availableWidth * width ) / totalWidth;
+				return [ clientId, toWidthPrecision( newWidth ) ];
+			}
+		)
+	);
 }
 
 /**

package/src/comments/index.php

@@ -212,6 +212,7 @@ function register_legacy_post_comments_block() {
 	 * like `_wp_multiple_block_styles`, which is required in this case because
 	 * the block has multiple styles.
 	 */
+	/** This filter is documented in wp-includes/blocks.php */
 	$metadata = apply_filters( 'block_type_metadata', $metadata );
 
 	register_block_type( 'core/post-comments', $metadata );

package/src/common.scss

@@ -158,7 +158,7 @@ html :where(img[class*="wp-image-"]) {
 /**
  * Reset user agent styles for figure element margins.
  */
-figure {
+:where(figure) {
 	margin: 0 0 1em 0;
 }
 

package/src/cover/block.json

@@ -94,6 +94,18 @@
 				"blockGap": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
 			"text": true,

package/src/cover/edit/index.js

@@ -9,9 +9,9 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { Placeholder, Spinner } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
+import { compose, useResizeObserver } from '@wordpress/compose';
 import {
 	withColors,
 	ColorPalette,
@@ -42,7 +42,7 @@ import useCoverIsDark from './use-cover-is-dark';
 import CoverInspectorControls from './inspector-controls';
 import CoverBlockControls from './block-controls';
 import CoverPlaceholder from './cover-placeholder';
-import ResizableCover from './resizable-cover';
+import ResizableCoverPopover from './resizable-cover-popover';
 
 extend( [ namesPlugin ] );
 
@@ -146,6 +146,14 @@ function CoverEdit( {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
+	const [ resizeListener, { height, width } ] = useResizeObserver();
+	const resizableBoxDimensions = useMemo( () => {
+		return {
+			height: minHeightUnit === 'px' ? minHeight : 'auto',
+			width: 'auto',
+		};
+	}, [ minHeight, minHeightUnit ] );
+
 	const minHeightWithUnit =
 		minHeight && minHeightUnit
 			? `${ minHeight }${ minHeightUnit }`
@@ -246,24 +254,50 @@ function CoverEdit( {
 		/>
 	);
 
+	const resizableCoverProps = {
+		className: 'block-library-cover__resize-container',
+		clientId,
+		height,
+		minHeight: minHeightWithUnit,
+		onResizeStart: () => {
+			setAttributes( { minHeightUnit: 'px' } );
+			toggleSelection( false );
+		},
+		onResize: ( value ) => {
+			setAttributes( { minHeight: value } );
+		},
+		onResizeStop: ( newMinHeight ) => {
+			toggleSelection( true );
+			setAttributes( { minHeight: newMinHeight } );
+		},
+		showHandle: true,
+		size: resizableBoxDimensions,
+		width,
+	};
+
 	if ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
 				{ blockControls }
 				{ inspectorControls }
+				{ isSelected && (
+					<ResizableCoverPopover { ...resizableCoverProps } />
+				) }
 				<TagName
 					{ ...blockProps }
 					className={ classnames(
 						'is-placeholder',
 						blockProps.className
 					) }
+					style={ {
+						...blockProps.style,
+						minHeight: minHeightWithUnit || undefined,
+					} }
 				>
+					{ resizeListener }
 					<CoverPlaceholder
 						onSelectMedia={ onSelectMedia }
 						onError={ onUploadError }
-						style={ {
-							minHeight: minHeightWithUnit || undefined,
-						} }
 						toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
@@ -275,21 +309,6 @@ function CoverEdit( {
 							/>
 						</div>
 					</CoverPlaceholder>
-					<ResizableCover
-						className="block-library-cover__resize-container"
-						onResizeStart={ () => {
-							setAttributes( { minHeightUnit: 'px' } );
-							toggleSelection( false );
-						} }
-						onResize={ ( value ) => {
-							setAttributes( { minHeight: value } );
-						} }
-						onResizeStop={ ( newMinHeight ) => {
-							toggleSelection( true );
-							setAttributes( { minHeight: newMinHeight } );
-						} }
-						showHandle={ isSelected }
-					/>
 				</TagName>
 			</>
 		);
@@ -318,22 +337,7 @@ function CoverEdit( {
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
-				<ResizableCover
-					className="block-library-cover__resize-container"
-					onResizeStart={ () => {
-						setAttributes( { minHeightUnit: 'px' } );
-						toggleSelection( false );
-					} }
-					onResize={ ( value ) => {
-						setAttributes( { minHeight: value } );
-					} }
-					onResizeStop={ ( newMinHeight ) => {
-						toggleSelection( true );
-						setAttributes( { minHeight: newMinHeight } );
-					} }
-					showHandle={ isSelected }
-				/>
-
+				{ resizeListener }
 				{ ( ! useFeaturedImage || url ) && (
 					<span
 						aria-hidden="true"
@@ -404,6 +408,9 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</TagName>
+			{ isSelected && (
+				<ResizableCoverPopover { ...resizableCoverProps } />
+			) }
 		</>
 	);
 }