@wordpress/block-library 9.19.1 → 9.20.0

package/build-style/image/editor.css

@@ -134,15 +134,6 @@ figure.wp-block-image:not(.wp-block) {
   opacity: 0.1;
 }
 
-.wp-block-image .components-resizable-box__container {
-  display: table;
-}
-.wp-block-image .components-resizable-box__container img {
-  display: block;
-  width: inherit;
-  height: inherit;
-}
-
 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
   position: absolute;
   left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.19.1",
+	"version": "9.20.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.19.1",
-		"@wordpress/api-fetch": "^7.19.1",
-		"@wordpress/autop": "^4.19.1",
-		"@wordpress/blob": "^4.19.1",
-		"@wordpress/block-editor": "^14.14.1",
-		"@wordpress/blocks": "^14.8.1",
-		"@wordpress/components": "^29.5.1",
-		"@wordpress/compose": "^7.19.1",
-		"@wordpress/core-data": "^7.19.1",
-		"@wordpress/data": "^10.19.1",
-		"@wordpress/date": "^5.19.1",
-		"@wordpress/deprecated": "^4.19.1",
-		"@wordpress/dom": "^4.19.1",
-		"@wordpress/element": "^6.19.1",
-		"@wordpress/escape-html": "^3.19.1",
-		"@wordpress/hooks": "^4.19.1",
-		"@wordpress/html-entities": "^4.19.1",
-		"@wordpress/i18n": "^5.19.1",
-		"@wordpress/icons": "^10.19.1",
-		"@wordpress/interactivity": "^6.19.1",
-		"@wordpress/interactivity-router": "^2.19.1",
-		"@wordpress/keyboard-shortcuts": "^5.19.1",
-		"@wordpress/keycodes": "^4.19.1",
-		"@wordpress/notices": "^5.19.1",
-		"@wordpress/patterns": "^2.19.1",
-		"@wordpress/primitives": "^4.19.1",
-		"@wordpress/private-apis": "^1.19.1",
-		"@wordpress/reusable-blocks": "^5.19.1",
-		"@wordpress/rich-text": "^7.19.1",
-		"@wordpress/server-side-render": "^5.19.1",
-		"@wordpress/url": "^4.19.1",
-		"@wordpress/viewport": "^6.19.1",
-		"@wordpress/wordcount": "^4.19.1",
+		"@wordpress/a11y": "^4.20.0",
+		"@wordpress/api-fetch": "^7.20.0",
+		"@wordpress/autop": "^4.20.0",
+		"@wordpress/blob": "^4.20.0",
+		"@wordpress/block-editor": "^14.15.0",
+		"@wordpress/blocks": "^14.9.0",
+		"@wordpress/components": "^29.6.0",
+		"@wordpress/compose": "^7.20.0",
+		"@wordpress/core-data": "^7.20.0",
+		"@wordpress/data": "^10.20.0",
+		"@wordpress/date": "^5.20.0",
+		"@wordpress/deprecated": "^4.20.0",
+		"@wordpress/dom": "^4.20.0",
+		"@wordpress/element": "^6.20.0",
+		"@wordpress/escape-html": "^3.20.0",
+		"@wordpress/hooks": "^4.20.0",
+		"@wordpress/html-entities": "^4.20.0",
+		"@wordpress/i18n": "^5.20.0",
+		"@wordpress/icons": "^10.20.0",
+		"@wordpress/interactivity": "^6.20.0",
+		"@wordpress/interactivity-router": "^2.20.0",
+		"@wordpress/keyboard-shortcuts": "^5.20.0",
+		"@wordpress/keycodes": "^4.20.0",
+		"@wordpress/notices": "^5.20.0",
+		"@wordpress/patterns": "^2.20.0",
+		"@wordpress/primitives": "^4.20.0",
+		"@wordpress/private-apis": "^1.20.0",
+		"@wordpress/reusable-blocks": "^5.20.0",
+		"@wordpress/rich-text": "^7.20.0",
+		"@wordpress/server-side-render": "^5.20.0",
+		"@wordpress/url": "^4.20.0",
+		"@wordpress/viewport": "^6.20.0",
+		"@wordpress/wordcount": "^4.20.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f49fee89f840761f7fedf662713cbd4a71723e9"
+	"gitHead": "72476970386146d450c375e5c71a96dda7c9aaa8"
 }

package/src/archives/edit.js

@@ -30,7 +30,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					resetAll={ () => {
 						setAttributes( {
 							displayAsDropdown: false,
-							showLabel: false,
+							showLabel: true,
 							showPostCounts: false,
 							type: 'monthly',
 						} );
@@ -63,7 +63,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							isShownByDefault
 							hasValue={ () => ! showLabel }
 							onDeselect={ () =>
-								setAttributes( { showLabel: false } )
+								setAttributes( { showLabel: true } )
 							}
 						>
 							<ToggleControl

package/src/audio/edit.js

@@ -9,10 +9,11 @@ import clsx from 'clsx';
 import { isBlobURL } from '@wordpress/blob';
 import {
 	Disabled,
-	PanelBody,
 	SelectControl,
 	Spinner,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -32,7 +33,10 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
-import { useUploadMediaFromBlobURL } from '../utils/hooks';
+import {
+	useUploadMediaFromBlobURL,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
@@ -126,6 +130,7 @@ function AudioEdit( {
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	if ( ! src && ! temporaryURL ) {
 		return (
@@ -160,42 +165,88 @@ function AudioEdit( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoplay: false,
+							loop: false,
+							preload: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Autoplay' ) }
-						onChange={ toggleAttribute( 'autoplay' ) }
-						checked={ autoplay }
-						help={ getAutoplayHelp }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => !! autoplay }
+						onDeselect={ () =>
+							setAttributes( {
+								autoplay: false,
+							} )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Autoplay' ) }
+							onChange={ toggleAttribute( 'autoplay' ) }
+							checked={ !! autoplay }
+							help={ getAutoplayHelp }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Loop' ) }
-						onChange={ toggleAttribute( 'loop' ) }
-						checked={ loop }
-					/>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
-						value={ preload || '' }
-						// `undefined` is required for the preload attribute to be unset.
-						onChange={ ( value ) =>
+						isShownByDefault
+						hasValue={ () => !! loop }
+						onDeselect={ () =>
 							setAttributes( {
-								preload: value || undefined,
+								loop: false,
 							} )
 						}
-						options={ [
-							{ value: '', label: __( 'Browser default' ) },
-							{ value: 'auto', label: __( 'Auto' ) },
-							{ value: 'metadata', label: __( 'Metadata' ) },
-							{
-								value: 'none',
-								label: _x( 'None', 'Preload value' ),
-							},
-						] }
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Loop' ) }
+							onChange={ toggleAttribute( 'loop' ) }
+							checked={ !! loop }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Preload' ) }
+						isShownByDefault
+						hasValue={ () => !! preload }
+						onDeselect={ () =>
+							setAttributes( {
+								preload: undefined,
+							} )
+						}
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ _x(
+								'Preload',
+								'noun; Audio block parameter'
+							) }
+							value={ preload || '' }
+							// `undefined` is required for the preload attribute to be unset.
+							onChange={ ( value ) =>
+								setAttributes( {
+									preload: value || undefined,
+								} )
+							}
+							options={ [
+								{ value: '', label: __( 'Browser default' ) },
+								{ value: 'auto', label: __( 'Auto' ) },
+								{ value: 'metadata', label: __( 'Metadata' ) },
+								{
+									value: 'none',
+									label: _x( 'None', 'Preload value' ),
+								},
+							] }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*

package/src/avatar/block.json

@@ -48,15 +48,20 @@
 		},
 		"color": {
 			"text": false,
-			"background": false,
-			"__experimentalDuotone": "img"
+			"background": false
+		},
+		"filter": {
+			"duotone": true
 		},
 		"interactivity": {
 			"clientNavigation": true
 		}
 	},
 	"selectors": {
-		"border": ".wp-block-avatar img"
+		"border": ".wp-block-avatar img",
+		"filter": {
+			"duotone": ".wp-block-avatar img"
+		}
 	},
 	"editorStyle": "wp-block-avatar-editor",
 	"style": "wp-block-avatar"

package/src/button/edit.js

@@ -15,7 +15,13 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	useRef,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import {
 	TextControl,
 	ToolbarButton,
@@ -219,6 +225,63 @@ function ButtonEdit( props ) {
 	const nofollow = !! rel?.includes( NOFOLLOW_REL );
 	const isLinkTag = 'a' === TagName;
 
+	const {
+		createPageEntity,
+		userCanCreatePages,
+		lockUrlControls = false,
+	} = useSelect(
+		( select ) => {
+			if ( ! isSelected ) {
+				return {};
+			}
+
+			const _settings = select( blockEditorStore ).getSettings();
+
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
+
+			return {
+				createPageEntity: _settings.__experimentalCreatePageEntity,
+				userCanCreatePages: _settings.__experimentalUserCanCreatePages,
+				lockUrlControls:
+					!! metadata?.bindings?.url &&
+					! blockBindingsSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
+			};
+		},
+		[ context, isSelected, metadata?.bindings?.url ]
+	);
+
+	async function handleCreate( pageTitle ) {
+		const page = await createPageEntity( {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: page.type,
+			title: page.title.rendered,
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
+	function createButtonText( searchTerm ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: search term. */
+				__( 'Create page: <mark>%s</mark>' ),
+				searchTerm
+			),
+			{ mark: <mark /> }
+		);
+	}
+
 	function startEditing( event ) {
 		event.preventDefault();
 		setIsEditingURL( true );
@@ -249,29 +312,6 @@ function ButtonEdit( props ) {
 	const useEnterRef = useEnter( { content: text, clientId } );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
-	const { lockUrlControls = false } = useSelect(
-		( select ) => {
-			if ( ! isSelected ) {
-				return {};
-			}
-
-			const blockBindingsSource = getBlockBindingsSource(
-				metadata?.bindings?.url?.source
-			);
-
-			return {
-				lockUrlControls:
-					!! metadata?.bindings?.url &&
-					! blockBindingsSource?.canUserEditValue?.( {
-						select,
-						context,
-						args: metadata?.bindings?.url?.args,
-					} ),
-			};
-		},
-		[ context, isSelected, metadata?.bindings?.url ]
-	);
-
 	const [ fluidTypographySettings, layout ] = useSettings(
 		'typography.fluid',
 		'layout'
@@ -400,6 +440,11 @@ function ButtonEdit( props ) {
 							} }
 							forceIsEditingLink={ isEditingURL }
 							settings={ LINK_SETTINGS }
+							createSuggestion={
+								createPageEntity && handleCreate
+							}
+							withCreateSuggestion={ userCanCreatePages }
+							createSuggestionButtonText={ createButtonText }
 						/>
 					</Popover>
 				) }

package/src/comment-template/hooks.js

@@ -107,13 +107,21 @@ const useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {
 			} ),
 			method: 'HEAD',
 			parse: false,
-		} ).then( ( res ) => {
-			const pages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
-			setDefaultPages( {
-				...defaultPages,
-				[ key ]: pages <= 1 ? 1 : pages, // If there are 0 pages, it means that there are no comments, but there is no 0th page.
+		} )
+			.then( ( res ) => {
+				const pages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
+				setDefaultPages( {
+					...defaultPages,
+					[ key ]: pages <= 1 ? 1 : pages, // If there are 0 pages, it means that there are no comments, but there is no 0th page.
+				} );
+			} )
+			.catch( () => {
+				// There's no 0th page, but we can't know the number of pages, fallback to 1.
+				setDefaultPages( {
+					...defaultPages,
+					[ key ]: 1,
+				} );
 			} );
-		} );
 	}, [ defaultPage, postId, perPage, setDefaultPages ] );
 
 	// The oldest one is always the first one.

package/src/cover/block.json

@@ -111,7 +111,6 @@
 			}
 		},
 		"color": {
-			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
 			"heading": true,
 			"text": true,
 			"background": false,
@@ -139,6 +138,14 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"filter": {
+			"duotone": true
+		}
+	},
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-cover > .wp-block-cover__image-background, .wp-block-cover > .wp-block-cover__video-background"
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

package/src/image/constants.js

@@ -6,3 +6,4 @@ export const LINK_DESTINATION_CUSTOM = 'custom';
 export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
+export const SIZED_LAYOUTS = [ 'flex', 'grid' ];

package/src/image/editor.scss

@@ -48,19 +48,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-// This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
-.wp-block-image .components-resizable-box__container {
-	// Using "display: table" because:
-	// - it visually hides empty white space in between elements
-	// - it allows the element to be as wide as its contents (instead of 100% width, as it would be with `display: block`)
-	display: table;
-	img {
-		display: block;
-		width: inherit;
-		height: inherit;
-	}
-}
-
 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
 	position: absolute;
 	left: 0;