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

package/src/group/edit.jsx

@@ -7,7 +7,7 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
 import { unlock } from '../lock-unlock';
@@ -70,9 +70,9 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const layoutSupportEnabled =
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
-	// Hooks.
-	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+	// State, not a ref, so that the element is there on the next render.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	const blockProps = useBlockProps( { ref: setDropZoneElement } );
 
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
@@ -99,7 +99,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
-			dropZoneElement: ref.current,
+			dropZoneElement,
 			templateLock,
 			allowedBlocks,
 			renderAppender,

package/src/heading/README.md

@@ -28,9 +28,16 @@ _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`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `true`
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
+- [`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`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
@@ -39,6 +46,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`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`
   - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+  - `textIndent`: `true`
   - [`textShadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textshadow): `true`
   - `fitText`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):

package/src/heading/block.json

@@ -30,6 +30,15 @@
 		"anchor": true,
 		"className": true,
 		"splitting": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -44,6 +53,10 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"shadow": true,
 		"spacing": {
 			"margin": true,
@@ -57,6 +70,7 @@
 			"fontSize": true,
 			"lineHeight": true,
 			"textAlign": true,
+			"textIndent": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,

package/src/home-link/README.md

@@ -30,9 +30,20 @@ _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`
 - [`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`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `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):
+  - `margin`: `true`
+  - `padding`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/home-link/block.json

@@ -33,6 +33,11 @@
 		"anchor": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -46,6 +51,31 @@
 				"fontSize": true
 			}
 		},
+		"shadow": true,
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": false,
+				"radius": false,
+				"style": false,
+				"width": false
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/home-link/edit.jsx

@@ -7,7 +7,7 @@ import {
 } from '@wordpress/block-editor';
 import {
 	Button,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	TextControl,
 	TextareaControl as WCTextareaControl,
 	__experimentalToolsPanel as ToolsPanel,
@@ -113,7 +113,7 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 						}
 						isShownByDefault
 					>
-						<CheckboxControl
+						<WCCheckboxControl
 							label={ __( 'Open in new tab' ) }
 							checked={ opensInNewTab }
 							onChange={ ( value ) =>

package/src/icon/components/custom-inserter/index.jsx

@@ -65,7 +65,11 @@ export default function CustomInserterModal( { onClose, value, onChange } ) {
 				const iconLabel = normalizeSearchInput( icon.label );
 
 				return (
-					iconName.includes( input ) || iconLabel.includes( input )
+					iconName.includes( input ) ||
+					iconLabel.includes( input ) ||
+					( icon.keywords ?? [] ).some( ( keyword ) =>
+						normalizeSearchInput( keyword ).includes( input )
+					)
 				);
 			} );
 		}

package/src/icon/edit.jsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	TextControl,
@@ -22,6 +22,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	getDimensionsClassesAndStyles as useDimensionsProps,
 } from '@wordpress/block-editor';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import { SVG, Rect, Path } from '@wordpress/primitives';
 import { useSelect } from '@wordpress/data';
@@ -30,6 +31,10 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import HtmlRenderer from '../utils/html-renderer';
 import { CustomInserterModal } from './components';
 
+// Matches the icon name pattern accepted by /wp/v2/icons/<name> REST route.
+const ICON_NAME_REGEX =
+	/^[a-z0-9](?:[a-z0-9_-]*[a-z0-9])?\/[a-z0-9](?:[a-z0-9_-]*[a-z0-9])?$/;
+
 const IconPlaceholder = ( { className, style } ) => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
@@ -50,13 +55,50 @@ const IconPlaceholder = ( { className, style } ) => (
 	</SVG>
 );
 
-export function Edit( { attributes, setAttributes } ) {
-	const { icon, ariaLabel, flipHorizontal, flipVertical, rotation } =
-		attributes;
+export function Edit( { attributes, setAttributes, isSelected, context } ) {
+	const {
+		icon,
+		ariaLabel,
+		flipHorizontal,
+		flipVertical,
+		rotation,
+		metadata,
+	} = attributes;
 
 	const [ isInserterOpen, setInserterOpen ] = useState( false );
 
 	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
+	const { isIconBindingReadOnly = false, iconBindingReadOnlyMessage } =
+		useSelect(
+			( select ) => {
+				if ( ! isSelected ) {
+					return {};
+				}
+
+				const iconBinding = metadata?.bindings?.icon;
+				const blockBindingsSource = getBlockBindingsSource(
+					iconBinding?.source
+				);
+
+				return {
+					isIconBindingReadOnly:
+						!! iconBinding &&
+						! blockBindingsSource?.canUserEditValue?.( {
+							select,
+							context,
+							args: iconBinding.args,
+						} ),
+					iconBindingReadOnlyMessage: blockBindingsSource?.label
+						? sprintf(
+								/* translators: %s: Label of the bindings source. */
+								__( 'Connected to %s' ),
+								blockBindingsSource.label
+							)
+						: __( 'Connected to dynamic data' ),
+				};
+			},
+			[ context, isSelected, metadata?.bindings?.icon ]
+		);
 
 	const colorProps = useColorProps( attributes );
 	// Only padding is applied to the inner SVG element, matching the front
@@ -73,8 +115,14 @@ export function Edit( { attributes, setAttributes } ) {
 
 	const selectedIcon = useSelect(
 		( select ) => {
-			const { getEntityRecord } = select( coreDataStore );
-			return icon ? getEntityRecord( 'root', 'icon', icon ) : null;
+			if ( typeof icon !== 'string' || ! ICON_NAME_REGEX.test( icon ) ) {
+				return null;
+			}
+			return select( coreDataStore ).getEntityRecord(
+				'root',
+				'icon',
+				icon
+			);
 		},
 		[ icon ]
 	);
@@ -87,6 +135,7 @@ export function Edit( { attributes, setAttributes } ) {
 	};
 
 	const rotationStyle = rotation ? { rotate: `${ rotation }deg` } : {};
+	const iconToolbarButtonLabel = icon ? __( 'Replace' ) : __( 'Choose icon' );
 
 	const blockControls = (
 		<>
@@ -125,11 +174,23 @@ export function Edit( { attributes, setAttributes } ) {
 			) }
 			<BlockControls group="other">
 				<ToolbarButton
+					disabled={ isIconBindingReadOnly }
+					label={
+						isIconBindingReadOnly
+							? iconBindingReadOnlyMessage
+							: undefined
+					}
+					showTooltip={ isIconBindingReadOnly }
+					aria-label={
+						isIconBindingReadOnly
+							? iconToolbarButtonLabel
+							: undefined
+					}
 					onClick={ () => {
 						setInserterOpen( true );
 					} }
 				>
-					{ icon ? __( 'Replace' ) : __( 'Choose icon' ) }
+					{ iconToolbarButtonLabel }
 				</ToolbarButton>
 				{ isContentOnlyMode && icon && (
 					// Add some extra controls for content attributes when content only mode is active.

package/src/icon/index.php

@@ -15,10 +15,19 @@
  * @return string Returns the Icon.
  */
 function render_block_core_icon( $attributes ) {
-	if ( empty( $attributes['icon'] ) ) {
+	if ( empty( $attributes['icon'] ) || ! is_string( $attributes['icon'] ) ) {
 		return;
 	}
 
+	// Icons in non-public collections are not available in the editor, so do not render them either.
+	$registered_icon = WP_Icons_Registry::get_instance()->get_registered_icon( $attributes['icon'] );
+	if ( null !== $registered_icon ) {
+		$icon_collection = WP_Icon_Collections_Registry::get_instance()->get_registered( $registered_icon['collection'] );
+		if ( null !== $icon_collection && ! $icon_collection['public'] ) {
+			return;
+		}
+	}
+
 	// Text color and background color.
 	$color_styles = array();
 

package/src/image/editor.scss

@@ -47,6 +47,14 @@ figure.wp-block-image:not(.wp-block) {
 		transform: translate(-50%, -50%);
 		margin: 0;
 	}
+
+	.components-resizable-box__container {
+		pointer-events: none;
+	}
+
+	.components-resizable-box__handle {
+		pointer-events: auto;
+	}
 }
 
 // Shown while image is being uploaded but cannot be previewed.

package/src/image/image.jsx

@@ -6,7 +6,7 @@ import {
 	Spinner,
 	TextareaControl as WCTextareaControl,
 	TextControl,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	ToolbarButton,
 	ToolbarGroup,
 	__experimentalToolsPanel as ToolsPanel,
@@ -73,7 +73,6 @@ import { evalAspectRatio, mediaPosition } from './utils';
 
 const {
 	DimensionsTool,
-	isDefaultBlockStyleState,
 	ResolutionTool,
 	mediaEditKey,
 	mediaSideloadFromUrlKey,
@@ -666,20 +665,23 @@ export default function Image( {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	const selectedStyleState = useSelect(
+	const { selectedStyleState, hasSelectedStyleState } = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
-				return undefined;
+				return {
+					selectedStyleState: undefined,
+					hasSelectedStyleState: false,
+				};
 			}
-			const { getSelectedBlockStyleState } = unlock(
-				select( blockEditorStore )
-			);
-			return getSelectedBlockStyleState( clientId );
+			const { getSelectedBlockStyleState, hasSelectedBlockStyleState } =
+				select( blockEditorStore );
+			return {
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+			};
 		},
 		[ clientId, isSingleSelected ]
 	);
-	const hasSelectedStyleState =
-		! isDefaultBlockStyleState( selectedStyleState );
 	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
 	const activeWidth = getActiveDimensionValue( {
 		attributes,
@@ -1043,7 +1045,7 @@ export default function Image( {
 									setAttributes( { isDecorative: false } )
 								}
 							>
-								<CheckboxControl
+								<WCCheckboxControl
 									label={ __( 'Mark as decorative' ) }
 									checked={ !! isDecorative }
 									onChange={ updateIsDecorative }

package/src/image/index.php

@@ -369,13 +369,12 @@ function block_core_image_print_lightbox_overlay() {
 			data-wp-on--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
 			data-wp-on--touchend="actions.handleTouchEnd"
-			data-wp-on--click="actions.hideLightbox"
 			data-wp-on-window--resize="callbacks.setOverlayStyles"
 			data-wp-on-window--scroll="actions.handleScroll"
 			data-wp-bind--style="state.overlayStyles"
 			tabindex="-1"
 			>
-				<button type="button" style="fill:{$close_button_color}" class="wp-lightbox-close-button" data-wp-bind--aria-label="state.closeButtonAriaLabel">
+				<button type="button" style="fill:{$close_button_color}" class="wp-lightbox-close-button" data-wp-on--click="actions.hideLightbox" data-wp-bind--aria-label="state.closeButtonAriaLabel">
 					<span class="wp-lightbox-close-icon" data-wp-bind--hidden="!state.hasNavigationIcon">{$close_button_icon}</span>
 					<span class="wp-lightbox-close-text" data-wp-bind--hidden="!state.hasNavigationText">{$close_button_text}</span>
 				</button>
@@ -383,7 +382,7 @@ function block_core_image_print_lightbox_overlay() {
 					<span class="wp-lightbox-navigation-icon" data-wp-bind--hidden="!state.hasNavigationIcon">{$prev_button_icon}</span>
 					<span class="wp-lightbox-navigation-text" data-wp-bind--hidden="!state.hasNavigationText">{$prev_button_text}</span>
 				</button>
-				<div class="lightbox-image-container">
+				<div class="lightbox-image-container lightbox-thumbnail-container">
 					<figure data-wp-bind--class="state.selectedImage.figureClassNames" data-wp-bind--style="state.figureStyles">
 						<img data-wp-bind--alt="state.selectedImage.alt" data-wp-bind--class="state.selectedImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.selectedImage.currentSrc">
 					</figure>
@@ -405,7 +404,7 @@ function block_core_image_print_lightbox_overlay() {
 					<span class="wp-lightbox-navigation-icon" data-wp-bind--hidden="!state.hasNavigationIcon">{$next_button_icon}</span>
 				</button>
 				<div data-wp-text="state.ariaLabel" aria-live="polite" aria-atomic="true" class="screen-reader-text"></div>
-				<div class="scrim" style="background-color: {$background_color}" aria-hidden="true"></div>
+				<div class="scrim" style="background-color: {$background_color}" aria-hidden="true" data-wp-on--click="actions.hideLightbox"></div>
 		</div>
 HTML;
 }

package/src/image/style.scss

@@ -118,7 +118,7 @@
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
+			mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E");
 			mask-mode: alpha;
 			mask-repeat: no-repeat;
 			mask-size: contain;
@@ -148,7 +148,7 @@
 		cursor: zoom-in;
 	}
 
-	img:hover + button {
+	&:has(img:hover) button {
 		opacity: 1;
 	}
 
@@ -305,6 +305,9 @@
 		width: var(--wp--lightbox-container-width);
 		height: var(--wp--lightbox-container-height);
 		z-index: 2000001;
+		// Clicking the image does not close the lightbox, so it should not
+		// appear clickable.
+		cursor: default;
 	}
 
 	.wp-block-image {
@@ -331,6 +334,11 @@
 		}
 	}
 
+	.lightbox-thumbnail-container {
+		--wp--lightbox-image-width: var(--wp--lightbox-thumbnail-width);
+		--wp--lightbox-image-height: var(--wp--lightbox-thumbnail-height);
+	}
+
 	button {
 		border: none;
 		background: none;
@@ -445,9 +453,11 @@
 
 @keyframes lightbox-zoom-in {
 	0% {
+		clip-path: var(--wp--lightbox-initial-clip);
 		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 	100% {
+		clip-path: inset(0);
 		transform: translate(-50%, -50%) scale(1, 1);
 	}
 }
@@ -455,6 +465,7 @@
 @keyframes lightbox-zoom-out {
 	0% {
 		visibility: visible;
+		clip-path: inset(0);
 		transform: translate(-50%, -50%) scale(1, 1);
 	}
 	99% {
@@ -462,6 +473,7 @@
 	}
 	100% {
 		visibility: hidden;
+		clip-path: var(--wp--lightbox-initial-clip);
 		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 }