@wordpress/block-library 11.0.2-next.v.202609171837.0 → 11.2.0

package/src/button/edit.jsx

@@ -16,6 +16,7 @@ import {
 	LinkControl,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
+	useBackgroundProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalGetShadowClassesAndStyles as useShadowProps,
 	__experimentalGetDimensionsClassesAndStyles as useDimensionsProps,
@@ -27,7 +28,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
-import { link, linkOff } from '@wordpress/icons';
+import { link } from '@wordpress/icons';
 import {
 	createBlock,
 	cloneBlock,
@@ -166,6 +167,7 @@ function ButtonEdit( props ) {
 	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
 	const shadowProps = useShadowProps( attributes );
+	const backgroundProps = useBackgroundProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 	const ref = useRef();
 	const richTextRef = useRef();
@@ -348,6 +350,7 @@ function ButtonEdit( props ) {
 						className,
 						'wp-block-button__link',
 						colorProps.className,
+						backgroundProps.className,
 						borderProps.className,
 						typographyProps.className,
 						{
@@ -362,6 +365,7 @@ function ButtonEdit( props ) {
 					style={ {
 						...borderProps.style,
 						...colorProps.style,
+						...backgroundProps.style,
 						...spacingProps.style,
 						...shadowProps.style,
 						...typographyProps.style,
@@ -377,64 +381,55 @@ function ButtonEdit( props ) {
 					{ isLinkTag && ! lockUrlControls && (
 						<ToolbarButton
 							name="link"
-							icon={ ! isURLSet ? link : linkOff }
-							title={ ! isURLSet ? __( 'Link' ) : __( 'Unlink' ) }
-							shortcut={
-								! isURLSet
-									? displayShortcut.primary( 'k' )
-									: displayShortcut.primaryShift( 'k' )
-							}
-							onClick={ ! isURLSet ? startEditing : unlink }
+							icon={ link }
+							title={ __( 'Link' ) }
+							shortcut={ displayShortcut.primary( 'k' ) }
+							onClick={ () => setIsEditingURL( ! isEditingURL ) }
 							isActive={ isURLSet }
 						/>
 					) }
 				</BlockControls>
 			) }
-			{ isLinkTag &&
-				isSelected &&
-				( isEditingURL || isURLSet ) &&
-				! lockUrlControls && (
-					<Popover
-						placement="bottom"
-						onClose={ () => {
-							setIsEditingURL( false );
+			{ isLinkTag && isSelected && isEditingURL && ! lockUrlControls && (
+				<Popover
+					placement="bottom"
+					onClose={ () => {
+						setIsEditingURL( false );
+						richTextRef.current?.focus();
+					} }
+					anchor={ popoverAnchor }
+					focusOnMount={ isEditingURL ? 'firstElement' : false }
+					__unstableSlotName="__unstable-block-tools-after"
+					shift
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( {
+							url: newURL,
+							opensInNewTab: newOpensInNewTab,
+							nofollow: newNofollow,
+						} ) =>
+							setAttributes(
+								getUpdatedLinkAttributes( {
+									rel,
+									url: newURL,
+									opensInNewTab: newOpensInNewTab,
+									nofollow: newNofollow,
+								} )
+							)
+						}
+						onRemove={ () => {
+							unlink();
 							richTextRef.current?.focus();
 						} }
-						anchor={ popoverAnchor }
-						focusOnMount={ isEditingURL ? 'firstElement' : false }
-						__unstableSlotName="__unstable-block-tools-after"
-						shift
-					>
-						<LinkControl
-							value={ linkValue }
-							onChange={ ( {
-								url: newURL,
-								opensInNewTab: newOpensInNewTab,
-								nofollow: newNofollow,
-							} ) =>
-								setAttributes(
-									getUpdatedLinkAttributes( {
-										rel,
-										url: newURL,
-										opensInNewTab: newOpensInNewTab,
-										nofollow: newNofollow,
-									} )
-								)
-							}
-							onRemove={ () => {
-								unlink();
-								richTextRef.current?.focus();
-							} }
-							forceIsEditingLink={ isEditingURL }
-							settings={ LINK_SETTINGS }
-							createSuggestion={
-								createPageEntity && handleCreate
-							}
-							withCreateSuggestion={ userCanCreatePages }
-							createSuggestionButtonText={ createButtonText }
-						/>
-					</Popover>
-				) }
+						forceIsEditingLink={ ! isURLSet }
+						settings={ LINK_SETTINGS }
+						createSuggestion={ createPageEntity && handleCreate }
+						withCreateSuggestion={ userCanCreatePages }
+						createSuggestionButtonText={ createButtonText }
+					/>
+				</Popover>
+			) }
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ tagName }

package/src/button/index.php

@@ -60,6 +60,53 @@ function render_block_core_button( $attributes, $content ) {
 		return '';
 	}
 
+	// Background skips serialization, so apply it to the link like color.
+	$background = $attributes['style']['background'] ?? null;
+
+	if ( is_array( $background ) ) {
+		$background_styles = array(
+			'backgroundImage'      => $background['backgroundImage'] ?? null,
+			'backgroundSize'       => $background['backgroundSize'] ?? null,
+			'backgroundPosition'   => $background['backgroundPosition'] ?? null,
+			'backgroundRepeat'     => $background['backgroundRepeat'] ?? null,
+			'backgroundAttachment' => $background['backgroundAttachment'] ?? null,
+			'gradient'             => $background['gradient'] ?? null,
+		);
+
+		// Mirror the background block support defaults.
+		if ( ! empty( $background_styles['backgroundImage'] ) ) {
+			$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
+			if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
+				$background_styles['backgroundPosition'] = '50% 50%';
+			}
+		}
+
+		$styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) );
+
+		if ( ! empty( $styles['css'] ) ) {
+			$processor = new WP_HTML_Tag_Processor( $content );
+			while ( $processor->next_tag() ) {
+				if ( $tag !== $processor->get_tag() ) {
+					continue;
+				}
+
+				$existing_style = $processor->get_attribute( 'style' );
+				if ( is_string( $existing_style ) && '' !== $existing_style ) {
+					$separator = str_ends_with( $existing_style, ';' ) ? '' : ';';
+					$processor->set_attribute( 'style', $existing_style . $separator . $styles['css'] );
+				} else {
+					$processor->set_attribute( 'style', $styles['css'] );
+				}
+
+				if ( ! empty( $background_styles['backgroundImage'] ) || ! empty( $background_styles['gradient'] ) ) {
+					$processor->add_class( 'has-background' );
+				}
+				break;
+			}
+			$content = $processor->get_updated_html();
+		}
+	}
+
 	$width = $attributes['style']['dimensions']['width'] ?? null;
 
 	if ( is_string( $width ) && '' !== $width ) {

package/src/buttons/README.md

@@ -27,6 +27,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
@@ -37,6 +41,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
   - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
   - [`allowInheriting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowinheriting): `false`
@@ -45,6 +52,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `clientNavigation`: `true`
 - [`listView`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#listview): `true`
 - [`contentRole`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#contentrole): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 
 ## Block Markup
 

package/src/buttons/block.json

@@ -13,6 +13,15 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalExposeControlsToChildren": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"text": false,
@@ -41,6 +50,10 @@
 				"fontSize": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -64,7 +77,8 @@
 			"clientNavigation": true
 		},
 		"listView": true,
-		"contentRole": true
+		"contentRole": true,
+		"shadow": true
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

package/src/categories/README.md

@@ -30,6 +30,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
@@ -37,11 +41,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - `textColumns`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 
 ## Context
 

package/src/categories/block.json

@@ -45,6 +45,15 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
@@ -57,6 +66,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textColumns": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
@@ -90,7 +100,8 @@
 				"width": true,
 				"style": true
 			}
-		}
+		},
+		"shadow": true
 	},
 	"editorStyle": "wp-block-categories-editor",
 	"style": "wp-block-categories"

package/src/code/README.md

@@ -22,6 +22,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/code/block.json

@@ -18,6 +18,19 @@
 	"supports": {
 		"align": [ "wide" ],
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/column/README.md

@@ -30,6 +30,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`

package/src/column/block.json

@@ -24,6 +24,15 @@
 		"anchor": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"heading": true,

package/src/column/edit.jsx

@@ -16,6 +16,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
@@ -105,7 +106,10 @@ function ColumnEdit( {
 	};
 
 	const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
+	// State, not a ref, so that the element is there on the next render.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
 	const blockProps = useBlockProps( {
+		ref: setDropZoneElement,
 		className: classes,
 		style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
 	} );
@@ -124,6 +128,8 @@ function ColumnEdit( {
 	const innerBlocksProps = useInnerBlocksProps(
 		{ ...blockProps, 'aria-label': label },
 		{
+			// Allows dropping before or after the column, not only inside it.
+			dropZoneElement,
 			templateLock,
 			allowedBlocks,
 			renderAppender: hasChildBlocks

package/src/columns/README.md

@@ -35,6 +35,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
   - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `blockGap`: `{"__experimentalDefault":"2em","sides":["horizontal","vertical"]}`
   - `margin`: `["top","bottom"]`

package/src/columns/block.json

@@ -34,6 +34,19 @@
 				"text": true
 			}
 		},
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"blockGap": {
 				"__experimentalDefault": "2em",

package/src/columns/edit.jsx

@@ -1,12 +1,9 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import {
-	Notice,
-	RangeControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -19,122 +16,16 @@ import {
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
-	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import {
-	hasExplicitPercentColumnWidths,
-	getMappedColumnWidths,
-	getRedistributedColumnWidths,
-	toWidthPrecision,
-} from './utils';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const DEFAULT_BLOCK = {
 	name: 'core/column',
 };
 
-function ColumnInspectorControls( {
-	clientId,
-	setAttributes,
-	isStackedOnMobile,
-} ) {
-	const { count, canInsertColumnBlock, minCount } = useSelect(
-		( select ) => {
-			const { canInsertBlockType, canRemoveBlock, getBlockOrder } =
-				select( blockEditorStore );
-			const blockOrder = getBlockOrder( 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 = blockOrder.reduce(
-				( acc, blockId, index ) => {
-					if ( ! canRemoveBlock( blockId ) ) {
-						acc.push( index );
-					}
-					return acc;
-				},
-				[]
-			);
-
-			return {
-				count: blockOrder.length,
-				canInsertColumnBlock: canInsertBlockType(
-					'core/column',
-					clientId
-				),
-				minCount: Math.max( ...preventRemovalBlockIndexes ) + 1,
-			};
-		},
-		[ clientId ]
-	);
-	const { getBlocks } = useSelect( blockEditorStore );
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-
-	/**
-	 * Updates the column count, including necessary revisions to child Column
-	 * blocks to grant required or redistribute available space.
-	 *
-	 * @param {number} previousColumns Previous column count.
-	 * @param {number} newColumns      New column count.
-	 */
-	function updateColumns( previousColumns, newColumns ) {
-		let innerBlocks = getBlocks( clientId );
-		const hasExplicitWidths = hasExplicitPercentColumnWidths( innerBlocks );
-
-		// Redistribute available width for existing inner blocks.
-		const isAddingColumn = newColumns > previousColumns;
-
-		if ( isAddingColumn && hasExplicitWidths ) {
-			// If adding a new column, assign width to the new column equal to
-			// as if it were `1 / columns` of the total available space.
-			const newColumnWidth = toWidthPrecision( 100 / newColumns );
-			const newlyAddedColumns = newColumns - previousColumns;
-
-			// Redistribute in consideration of pending block insertion as
-			// constraining the available working width.
-			const widths = getRedistributedColumnWidths(
-				innerBlocks,
-				100 - newColumnWidth * newlyAddedColumns
-			);
-
-			innerBlocks = [
-				...getMappedColumnWidths( innerBlocks, widths ),
-				...Array.from( {
-					length: newlyAddedColumns,
-				} ).map( () => {
-					return createBlock( 'core/column', {
-						width: `${ newColumnWidth }%`,
-					} );
-				} ),
-			];
-		} else if ( isAddingColumn ) {
-			innerBlocks = [
-				...innerBlocks,
-				...Array.from( {
-					length: newColumns - previousColumns,
-				} ).map( () => {
-					return createBlock( 'core/column' );
-				} ),
-			];
-		} 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( innerBlocks, 100 );
-
-				innerBlocks = getMappedColumnWidths( innerBlocks, widths );
-			}
-		}
-
-		replaceInnerBlocks( clientId, innerBlocks );
-	}
-
+function ColumnInspectorControls( { setAttributes, isStackedOnMobile } ) {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -147,26 +38,6 @@ function ColumnInspectorControls( {
 			} }
 			dropdownMenuProps={ dropdownMenuProps }
 		>
-			{ canInsertColumnBlock && (
-				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
-					<RangeControl
-						label={ __( 'Columns' ) }
-						value={ count }
-						onChange={ ( value ) =>
-							updateColumns( count, Math.max( minCount, value ) )
-						}
-						min={ Math.max( 1, minCount ) }
-						max={ Math.max( 6, count ) }
-					/>
-					{ count > 6 && (
-						<Notice status="warning" isDismissible={ false }>
-							{ __(
-								'This column count exceeds the recommended amount and may cause visual breakage.'
-							) }
-						</Notice>
-					) }
-				</VStack>
-			) }
 			<ToolsPanelItem
 				label={ __( 'Stack on mobile' ) }
 				isShownByDefault
@@ -243,7 +114,6 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 			</BlockControls>
 			<InspectorControls>
 				<ColumnInspectorControls
-					clientId={ clientId }
 					setAttributes={ setAttributes }
 					isStackedOnMobile={ isStackedOnMobile }
 				/>

package/src/comment-author-name/README.md

@@ -28,6 +28,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/comment-author-name/block.json

@@ -21,6 +21,9 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/comment-content/README.md

@@ -24,8 +24,12 @@ _This block has no custom attributes._
 _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`