@wordpress/block-library 8.7.0 → 8.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.7.0",
+	"version": "8.9.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.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",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
+	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
 }

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

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Buttons block color customization sets a background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a gradient background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a text color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} /--></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons block justify content sets Justify items center option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>

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

@@ -2,12 +2,15 @@
  * External dependencies
  */
 import {
+	addBlock,
 	fireEvent,
 	getEditorHtml,
 	within,
 	getBlock,
 	initializeEditor,
-	changeTextOfRichText,
+	triggerBlockListLayout,
+	typeInRichText,
+	waitFor,
 } from 'test/helpers';
 
 /**
@@ -196,7 +199,7 @@ describe( 'Buttons block', () => {
 				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
-			changeTextOfRichText( secondButtonInput, 'Hello!' );
+			typeInRichText( secondButtonInput, 'Hello!' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
@@ -271,4 +274,122 @@ describe( 'Buttons block', () => {
 			} )
 		);
 	} );
+
+	describe( 'color customization', () => {
+		it( 'sets a text color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+			// Wait for Block Settings to be visible.
+			const blockSettingsModal = screen.getByTestId(
+				'block-settings-modal'
+			);
+			await waitFor( () => blockSettingsModal.props.isVisible );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+			// Tap one color
+			fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets a background color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+			// Wait for Block Settings to be visible.
+			const blockSettingsModal = screen.getByTestId(
+				'block-settings-modal'
+			);
+			await waitFor( () => blockSettingsModal.props.isVisible );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap one color
+			fireEvent.press( screen.getByLabelText( 'Luminous vivid amber' ) );
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets a gradient background color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+			// Wait for Block Settings to be visible.
+			const blockSettingsModal = screen.getByTestId(
+				'block-settings-modal'
+			);
+			await waitFor( () => blockSettingsModal.props.isVisible );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap on the gradient segment
+			fireEvent.press( screen.getByLabelText( 'Gradient' ) );
+
+			// Tap one gradient color
+			fireEvent.press(
+				screen.getByLabelText( 'Light green cyan to vivid green cyan' )
+			);
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );

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 }
+		/>
+	);
+}