@wordpress/block-library 8.7.0 → 8.8.0

package/build-style/style.css

@@ -356,7 +356,6 @@
 
 .wp-block-columns {
   display: flex;
-  margin-bottom: 1.75em;
   box-sizing: border-box;
   flex-wrap: wrap !important;
   align-items: initial !important;
@@ -403,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;
 }
@@ -611,6 +614,7 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
+  overflow: hidden;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -827,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; */
 }
@@ -927,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,
@@ -1022,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,
@@ -1093,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;
 }
@@ -1110,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;
 }
@@ -2525,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);
 }
@@ -2651,7 +2664,6 @@ p.has-background {
 }
 
 .wp-block-pullquote {
-  margin: 0 0 1em 0;
   padding: 3em 0;
   text-align: center;
   overflow-wrap: break-word;
@@ -2673,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;
 }
@@ -3785,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.7.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.30.0",
-		"@wordpress/api-fetch": "^6.27.0",
-		"@wordpress/autop": "^3.30.0",
-		"@wordpress/blob": "^3.30.0",
-		"@wordpress/block-editor": "^11.7.0",
-		"@wordpress/blocks": "^12.7.0",
-		"@wordpress/components": "^23.7.0",
-		"@wordpress/compose": "^6.7.0",
-		"@wordpress/core-data": "^6.7.0",
-		"@wordpress/data": "^9.0.0",
-		"@wordpress/date": "^4.30.0",
-		"@wordpress/deprecated": "^3.30.0",
-		"@wordpress/dom": "^3.30.0",
-		"@wordpress/element": "^5.7.0",
-		"@wordpress/escape-html": "^2.30.0",
-		"@wordpress/hooks": "^3.30.0",
-		"@wordpress/html-entities": "^3.30.0",
-		"@wordpress/i18n": "^4.30.0",
-		"@wordpress/icons": "^9.21.0",
-		"@wordpress/keycodes": "^3.30.0",
-		"@wordpress/notices": "^3.30.0",
-		"@wordpress/primitives": "^3.28.0",
-		"@wordpress/private-apis": "^0.12.0",
-		"@wordpress/reusable-blocks": "^4.7.0",
-		"@wordpress/rich-text": "^6.7.0",
-		"@wordpress/server-side-render": "^4.7.0",
-		"@wordpress/url": "^3.31.0",
-		"@wordpress/viewport": "^5.7.0",
-		"@wordpress/wordcount": "^3.30.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": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
+	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
 }

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

@@ -39,7 +39,8 @@
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"__experimentalLayout": {

package/src/columns/edit.js

@@ -60,13 +60,35 @@ function ColumnsEditContainer( {
 } ) {
 	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 ]
@@ -104,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 && (
@@ -214,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/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 } />
+			) }
 		</>
 	);
 }

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+export default function ResizableCoverPopover( {
+	className,
+	height,
+	minHeight,
+	onResize,
+	onResizeStart,
+	onResizeStop,
+	showHandle,
+	size,
+	width,
+	...props
+} ) {
+	const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
+	const [ isResizing, setIsResizing ] = useState( false );
+	const dimensions = useMemo(
+		() => ( { height, minHeight, width } ),
+		[ minHeight, height, width ]
+	);
+
+	const resizableBoxProps = {
+		className: classnames( className, { 'is-resizing': isResizing } ),
+		enable: RESIZABLE_BOX_ENABLE_OPTION,
+		onResizeStart: ( _event, _direction, elt ) => {
+			onResizeStart( elt.clientHeight );
+			onResize( elt.clientHeight );
+		},
+		onResize: ( _event, _direction, elt ) => {
+			onResize( elt.clientHeight );
+			if ( ! isResizing ) {
+				setIsResizing( true );
+			}
+		},
+		onResizeStop: ( _event, _direction, elt ) => {
+			onResizeStop( elt.clientHeight );
+			setIsResizing( false );
+		},
+		showHandle,
+		size,
+		__experimentalShowTooltip: true,
+		__experimentalTooltipProps: {
+			axis: 'y',
+			position: 'bottom',
+			isVisible: isResizing,
+		},
+	};
+
+	return (
+		<ResizableBoxPopover
+			className="block-library-cover__resizable-box-popover"
+			__unstableRefreshSize={ dimensions }
+			resizableBoxProps={ resizableBoxProps }
+			{ ...props }
+		/>
+	);
+}

package/src/cover/editor.scss

@@ -7,24 +7,23 @@
 	// Override default cover styles
 	// because we're not ready yet to show the cover block.
 	&.is-placeholder {
-		min-height: auto !important;
 		padding: 0 !important;
+		display: flex;
+		align-items: stretch;
+		overflow: visible;
+		min-height: 240px;
 
-		// Resizable placeholder for placeholder.
-		.block-library-cover__resize-container {
-			display: none;
-		}
 		.components-placeholder {
 			&.is-large {
-				min-height: 240px;
 				justify-content: flex-start;
 				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
-				+ .block-library-cover__resize-container {
-					min-height: 240px;
-					display: block;
-				}
 			}
 		}
+
+		// Allow focus outline/box-shadow to align with block's min height.
+		&:focus::after {
+			min-height: auto;
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -88,9 +87,17 @@
 	min-height: 50px;
 }
 
-.block-library-cover__resize-container:not(.is-resizing) {
-	// Important is used to have higher specificity than the inline style set by re-resizable library.
-	height: auto !important;
+// Prevent resizable box popover form preventing inner block selection.
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover {
+	// Additional specificity is required to overcome default block popover
+	// pointer events only for the intended wrappers. The default pointer events
+	// are still needed for the inner resize handles of the resizable box.
+	.components-popover__content > div,
+	.block-library-cover__resize-container {
+		// The inner drag handle will still have `pointer-events: all` allowing
+		// it to continue to be interacted with.
+		pointer-events: none;
+	}
 }
 
 // When uploading background images, show a transparent overlay.

package/src/cover/index.php

@@ -34,7 +34,7 @@ function render_block_core_cover( $attributes, $content ) {
 
 		/*
 		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
-		 * and removes eventual withespace characters between the two (typically introduced at template level)
+		 * and removes eventual whitespace characters between the two (typically introduced at template level)
 		 */
 		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
 		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
@@ -46,19 +46,18 @@ function render_block_core_cover( $attributes, $content ) {
 			update_post_thumbnail_cache();
 		}
 		$current_featured_image = get_the_post_thumbnail_url();
-
-		$styles = 'background-image:url(' . esc_url( $current_featured_image ) . '); ';
-
-		if ( isset( $attributes['minHeight'] ) ) {
-			$height_unit = empty( $attributes['minHeightUnit'] ) ? 'px' : $attributes['minHeightUnit'];
-			$height      = " min-height:{$attributes['minHeight']}{$height_unit}";
-
-			$styles .= $height;
+		if ( ! $current_featured_image ) {
+			return $content;
 		}
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
-		$processor->set_attribute( 'style', $styles );
+
+		$styles         = $processor->get_attribute( 'style' );
+		$merged_styles  = ! empty( $styles ) ? $styles . ';' : '';
+		$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+
+		$processor->set_attribute( 'style', $merged_styles );
 		$content = $processor->get_updated_html();
 	}