@wordpress/block-library 9.25.0 → 9.26.0

package/build-style/editor.css

@@ -417,26 +417,12 @@ html :where(.wp-block-column) {
 :where(.editor-styles-wrapper) .wp-block-comments-pagination {
   max-width: 100%;
 }
-:where(.editor-styles-wrapper) .wp-block-comments-pagination.block-editor-block-list__layout {
-  margin: 0;
-}
 
 .wp-block-comments-pagination > .wp-block-comments-pagination-next,
 .wp-block-comments-pagination > .wp-block-comments-pagination-previous,
 .wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
-  margin-left: 0;
-  margin-top: 0.5em;
-  /*rtl:ignore*/
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
   font-size: inherit;
 }
-.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
-.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
-.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
-  /*rtl:ignore*/
-  margin-right: 0;
-}
 
 .wp-block-comments-pagination-numbers a {
   text-decoration: underline;
@@ -2171,11 +2157,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   opacity: 0;
 }
 
-.wp-block-post-author__inspector-settings .components-base-control,
-.wp-block-post-author__inspector-settings .components-base-control:last-child {
-  margin-bottom: 0;
-}
-
 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
   display: inline;
 }

package/build-style/navigation/style-rtl.css

@@ -344,6 +344,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation-submenu__toggle {
   cursor: pointer;
 }
+.wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
+.wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
+  transform: rotate(-180deg);
+}
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
   padding-right: 0;

package/build-style/navigation/style.css

@@ -344,6 +344,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation-submenu__toggle {
   cursor: pointer;
 }
+.wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
+.wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
+  transform: rotate(180deg);
+}
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
   padding-left: 0;

package/build-style/style-rtl.css

@@ -331,19 +331,19 @@
   width: 100%;
   border-collapse: collapse;
 }
-.wp-block-calendar table:where(:not(.has-text-color)) {
-  color: #40464d;
-}
-.wp-block-calendar table:where(:not(.has-text-color)) th,
-.wp-block-calendar table:where(:not(.has-text-color)) td {
-  border-color: #ddd;
-}
 .wp-block-calendar table.has-background th {
   background-color: inherit;
 }
 .wp-block-calendar table.has-text-color th {
   color: inherit;
 }
+.wp-block-calendar :where(table:not(.has-text-color)) {
+  color: #40464d;
+}
+.wp-block-calendar :where(table:not(.has-text-color)) th,
+.wp-block-calendar :where(table:not(.has-text-color)) td {
+  border-color: #ddd;
+}
 
 :where(.wp-block-calendar table:not(.has-background) th) {
   background: #ddd;
@@ -580,15 +580,8 @@
 .wp-block-comments-pagination > .wp-block-comments-pagination-next,
 .wp-block-comments-pagination > .wp-block-comments-pagination-previous,
 .wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
   font-size: inherit;
 }
-.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
-.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
-.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
-  margin-right: 0;
-}
 .wp-block-comments-pagination .wp-block-comments-pagination-previous-arrow {
   margin-left: 1ch;
   display: inline-block;
@@ -2469,6 +2462,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation-submenu__toggle {
   cursor: pointer;
 }
+.wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
+.wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
+  transform: rotate(-180deg);
+}
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
   padding-right: 0;

package/build-style/style.css

@@ -332,19 +332,19 @@
   width: 100%;
   border-collapse: collapse;
 }
-.wp-block-calendar table:where(:not(.has-text-color)) {
-  color: #40464d;
-}
-.wp-block-calendar table:where(:not(.has-text-color)) th,
-.wp-block-calendar table:where(:not(.has-text-color)) td {
-  border-color: #ddd;
-}
 .wp-block-calendar table.has-background th {
   background-color: inherit;
 }
 .wp-block-calendar table.has-text-color th {
   color: inherit;
 }
+.wp-block-calendar :where(table:not(.has-text-color)) {
+  color: #40464d;
+}
+.wp-block-calendar :where(table:not(.has-text-color)) th,
+.wp-block-calendar :where(table:not(.has-text-color)) td {
+  border-color: #ddd;
+}
 
 :where(.wp-block-calendar table:not(.has-background) th) {
   background: #ddd;
@@ -585,17 +585,8 @@
 .wp-block-comments-pagination > .wp-block-comments-pagination-next,
 .wp-block-comments-pagination > .wp-block-comments-pagination-previous,
 .wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
-  /*rtl:ignore*/
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
   font-size: inherit;
 }
-.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
-.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
-.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
-  /*rtl:ignore*/
-  margin-right: 0;
-}
 .wp-block-comments-pagination .wp-block-comments-pagination-previous-arrow {
   margin-right: 1ch;
   display: inline-block;
@@ -2501,6 +2492,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation-submenu__toggle {
   cursor: pointer;
 }
+.wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
+.wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
+  transform: rotate(180deg);
+}
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
   padding-left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.25.0",
+	"version": "9.26.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.25.0",
-		"@wordpress/api-fetch": "^7.25.0",
-		"@wordpress/autop": "^4.25.0",
-		"@wordpress/blob": "^4.25.0",
-		"@wordpress/block-editor": "^14.20.0",
-		"@wordpress/blocks": "^14.14.0",
-		"@wordpress/components": "^29.11.0",
-		"@wordpress/compose": "^7.25.0",
-		"@wordpress/core-data": "^7.25.0",
-		"@wordpress/data": "^10.25.0",
-		"@wordpress/date": "^5.25.0",
-		"@wordpress/deprecated": "^4.25.0",
-		"@wordpress/dom": "^4.25.0",
-		"@wordpress/element": "^6.25.0",
-		"@wordpress/escape-html": "^3.25.0",
-		"@wordpress/hooks": "^4.25.0",
-		"@wordpress/html-entities": "^4.25.0",
-		"@wordpress/i18n": "^5.25.0",
-		"@wordpress/icons": "^10.25.0",
-		"@wordpress/interactivity": "^6.25.0",
-		"@wordpress/interactivity-router": "^2.25.0",
-		"@wordpress/keyboard-shortcuts": "^5.25.0",
-		"@wordpress/keycodes": "^4.25.0",
-		"@wordpress/notices": "^5.25.0",
-		"@wordpress/patterns": "^2.25.0",
-		"@wordpress/primitives": "^4.25.0",
-		"@wordpress/private-apis": "^1.25.0",
-		"@wordpress/reusable-blocks": "^5.25.0",
-		"@wordpress/rich-text": "^7.25.0",
-		"@wordpress/server-side-render": "^6.1.0",
-		"@wordpress/url": "^4.25.0",
-		"@wordpress/viewport": "^6.25.0",
-		"@wordpress/wordcount": "^4.25.0",
+		"@wordpress/a11y": "^4.26.0",
+		"@wordpress/api-fetch": "^7.26.0",
+		"@wordpress/autop": "^4.26.0",
+		"@wordpress/blob": "^4.26.0",
+		"@wordpress/block-editor": "^14.21.0",
+		"@wordpress/blocks": "^14.15.0",
+		"@wordpress/components": "^29.12.0",
+		"@wordpress/compose": "^7.26.0",
+		"@wordpress/core-data": "^7.26.0",
+		"@wordpress/data": "^10.26.0",
+		"@wordpress/date": "^5.26.0",
+		"@wordpress/deprecated": "^4.26.0",
+		"@wordpress/dom": "^4.26.0",
+		"@wordpress/element": "^6.26.0",
+		"@wordpress/escape-html": "^3.26.0",
+		"@wordpress/hooks": "^4.26.0",
+		"@wordpress/html-entities": "^4.26.0",
+		"@wordpress/i18n": "^5.26.0",
+		"@wordpress/icons": "^10.26.0",
+		"@wordpress/interactivity": "^6.26.0",
+		"@wordpress/interactivity-router": "^2.26.0",
+		"@wordpress/keyboard-shortcuts": "^5.26.0",
+		"@wordpress/keycodes": "^4.26.0",
+		"@wordpress/notices": "^5.26.0",
+		"@wordpress/patterns": "^2.26.0",
+		"@wordpress/primitives": "^4.26.0",
+		"@wordpress/private-apis": "^1.26.0",
+		"@wordpress/reusable-blocks": "^5.26.0",
+		"@wordpress/rich-text": "^7.26.0",
+		"@wordpress/server-side-render": "^6.2.0",
+		"@wordpress/url": "^4.26.0",
+		"@wordpress/viewport": "^6.26.0",
+		"@wordpress/wordcount": "^4.26.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d1acd76ffff33ab01f0a948d2f51e5e45c95158d"
+	"gitHead": "35e26942820d8237771af0c58e45b4303f0497f1"
 }

package/src/avatar/edit.js

@@ -12,10 +12,11 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	RangeControl,
 	ResizableBox,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
@@ -23,7 +24,8 @@ import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useUserAvatar, useCommentAvatar } from './hooks';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { useCommentAvatar, useUserAvatar } from './hooks';
 import UserControl from './user-control';
 
 const AvatarInspectorControls = ( {
@@ -31,56 +33,102 @@ const AvatarInspectorControls = ( {
 	avatar,
 	attributes,
 	selectUser,
-} ) => (
-	<InspectorControls>
-		<PanelBody title={ __( 'Settings' ) }>
-			<RangeControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'Image size' ) }
-				onChange={ ( newSize ) =>
+} ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	return (
+		<InspectorControls>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
 					setAttributes( {
-						size: newSize,
-					} )
-				}
-				min={ avatar.minSize }
-				max={ avatar.maxSize }
-				initialPosition={ attributes?.size }
-				value={ attributes?.size }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={ __( 'Link to user profile' ) }
-				onChange={ () =>
-					setAttributes( { isLink: ! attributes.isLink } )
-				}
-				checked={ attributes.isLink }
-			/>
-			{ attributes.isLink && (
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Open in new tab' ) }
-					onChange={ ( value ) =>
-						setAttributes( {
-							linkTarget: value ? '_blank' : '_self',
-						} )
-					}
-					checked={ attributes.linkTarget === '_blank' }
-				/>
-			) }
-			{ selectUser && (
-				<UserControl
-					value={ attributes?.userId }
-					onChange={ ( value ) => {
-						setAttributes( {
-							userId: value,
-						} );
-					} }
-				/>
-			) }
-		</PanelBody>
-	</InspectorControls>
-);
+						size: 96,
+						isLink: false,
+						linkTarget: '_self',
+						userId: undefined,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Image size' ) }
+					isShownByDefault
+					hasValue={ () => attributes?.size !== 96 }
+					onDeselect={ () => setAttributes( { size: 96 } ) }
+				>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Image size' ) }
+						onChange={ ( newSize ) =>
+							setAttributes( {
+								size: newSize,
+							} )
+						}
+						min={ avatar.minSize }
+						max={ avatar.maxSize }
+						initialPosition={ attributes?.size }
+						value={ attributes?.size }
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					label={ __( 'Link to user profile' ) }
+					isShownByDefault
+					hasValue={ () => attributes?.isLink }
+					onDeselect={ () => setAttributes( { isLink: false } ) }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to user profile' ) }
+						onChange={ () =>
+							setAttributes( { isLink: ! attributes.isLink } )
+						}
+						checked={ attributes.isLink }
+					/>
+				</ToolsPanelItem>
+				{ attributes.isLink && (
+					<ToolsPanelItem
+						label={ __( 'Open in new tab' ) }
+						isShownByDefault
+						hasValue={ () => attributes?.linkTarget !== '_self' }
+						onDeselect={ () =>
+							setAttributes( { linkTarget: '_self' } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ attributes.linkTarget === '_blank' }
+						/>
+					</ToolsPanelItem>
+				) }
+				{ selectUser && (
+					<ToolsPanelItem
+						label={ __( 'User' ) }
+						isShownByDefault
+						hasValue={ () => !! attributes?.userId }
+						onDeselect={ () =>
+							setAttributes( { userId: undefined } )
+						}
+					>
+						<UserControl
+							value={ attributes?.userId }
+							onChange={ ( value ) => {
+								setAttributes( {
+									userId: value,
+								} );
+							} }
+						/>
+					</ToolsPanelItem>
+				) }
+			</ToolsPanel>
+		</InspectorControls>
+	);
+};
 
 const ResizableAvatar = ( {
 	setAttributes,

package/src/avatar/user-control.js

@@ -5,31 +5,45 @@ import { __ } from '@wordpress/i18n';
 import { ComboboxControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
 
 const AUTHORS_QUERY = {
 	who: 'authors',
-	per_page: -1,
+	per_page: 100,
 	_fields: 'id,name',
 	context: 'view',
 };
 
-function UserControl( { value, onChange } ) {
-	const [ filteredAuthorsList, setFilteredAuthorsList ] = useState();
-	const authorsList = useSelect( ( select ) => {
-		const { getUsers } = select( coreStore );
-		return getUsers( AUTHORS_QUERY );
-	}, [] );
-	if ( ! authorsList ) {
-		return null;
-	}
+export default function UserControl( { value, onChange } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const { authors, isLoading } = useSelect(
+		( select ) => {
+			const { getUsers, isResolving } = select( coreStore );
 
-	const options = authorsList.map( ( author ) => {
-		return {
-			label: author.name,
-			value: author.id,
-		};
-	} );
+			const query = { ...AUTHORS_QUERY };
+			if ( filterValue ) {
+				query.search = filterValue;
+				query.search_columns = [ 'name' ];
+			}
+
+			return {
+				authors: getUsers( query ),
+				isLoading: isResolving( 'getUsers', [ query ] ),
+			};
+		},
+		[ filterValue ]
+	);
+
+	const options = useMemo( () => {
+		return ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+	}, [ authors ] );
 
 	return (
 		<ComboboxControl
@@ -41,18 +55,9 @@ function UserControl( { value, onChange } ) {
 			) }
 			value={ value }
 			onChange={ onChange }
-			options={ filteredAuthorsList || options }
-			onFilterValueChange={ ( inputValue ) =>
-				setFilteredAuthorsList(
-					options.filter( ( option ) =>
-						option.label
-							.toLowerCase()
-							.startsWith( inputValue.toLowerCase() )
-					)
-				)
-			}
+			options={ options }
+			onFilterValueChange={ debounce( setFilterValue, 300 ) }
+			isLoading={ isLoading }
 		/>
 	);
 }
-
-export default UserControl;

package/src/calendar/style.scss

@@ -19,16 +19,6 @@
 		width: 100%;
 		border-collapse: collapse;
 
-		&:where(:not(.has-text-color)) {
-			color: #40464d;
-
-			// Keep the hard-coded border color for backward compatibility.
-			th,
-			td {
-				border-color: $gray-300;
-			}
-		}
-
 		&.has-background th {
 			background-color: inherit;
 		}
@@ -37,6 +27,16 @@
 			color: inherit;
 		}
 	}
+
+	:where(table:not(.has-text-color)) {
+		color: #40464d;
+
+		// Keep the hard-coded border color for backward compatibility.
+		th,
+		td {
+			border-color: $gray-300;
+		}
+	}
 }
 
 // Keep the hard-coded header background color for backward compatibility.

package/src/comments-pagination/editor.scss

@@ -8,9 +8,6 @@ $pagination-margin: 0.5em;
 :where(.editor-styles-wrapper) {
 	.wp-block-comments-pagination {
 		max-width: 100%;
-		&.block-editor-block-list__layout {
-			margin: 0;
-		}
 	}
 }
 
@@ -18,18 +15,6 @@ $pagination-margin: 0.5em;
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,
 	> .wp-block-comments-pagination-numbers {
-		// Override editor auto block margins.
-		margin-left: 0;
-		margin-top: $pagination-margin;
-
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
 		font-size: inherit;
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
 	}
 }

package/src/comments-pagination/style.scss

@@ -4,15 +4,7 @@ $pagination-margin: 0.5em;
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,
 	> .wp-block-comments-pagination-numbers {
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
 		font-size: inherit;
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
 	}
 	.wp-block-comments-pagination-previous-arrow {
 		margin-right: 1ch;

package/src/editor.scss

@@ -31,7 +31,6 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
-@import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";

package/src/embed/variations.js

@@ -251,14 +251,6 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
 		attributes: { providerNameSlug: 'reverbnation', responsive: true },
 	},
-	{
-		name: 'screencast',
-		title: getTitle( 'Screencast' ),
-		icon: embedVideoIcon,
-		description: __( 'Embed Screencast content.' ),
-		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
-		attributes: { providerNameSlug: 'screencast', responsive: true },
-	},
 	{
 		name: 'scribd',
 		title: getTitle( 'Scribd' ),

package/src/form/block.json

@@ -62,7 +62,6 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
-		},
-		"__experimentalSelector": "form"
+		}
 	}
 }

package/src/form/edit.js

@@ -211,7 +211,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			) }
 			<form
 				{ ...innerBlocksProps }
-				className="wp-block-form"
 				encType={ submissionMethod === 'email' ? 'text/plain' : null }
 			/>
 		</>

package/src/form/index.js

@@ -20,6 +20,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => {

package/src/form-input/index.js

@@ -17,6 +17,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/form-submission-notification/index.js

@@ -21,6 +21,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );