@wordpress/block-library 9.18.0 → 9.19.0

package/build-style/style-rtl.css

@@ -2931,6 +2931,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-right: 0.5em;
 }
 
+.wp-block-post-comments-count {
+  box-sizing: border-box;
+}
+
 .wp-block-post-content {
   display: flow-root;
 }
@@ -3127,6 +3131,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   text-align: left;
 }
 
+.wp-block-pullquote.has-text-align-center blockquote {
+  text-align: center;
+}
+
 .wp-block-pullquote.is-style-solid-color {
   border: none;
 }

package/build-style/style.css

@@ -2963,6 +2963,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-left: 0.5em;
 }
 
+.wp-block-post-comments-count {
+  box-sizing: border-box;
+}
+
 .wp-block-post-content {
   display: flow-root;
 }
@@ -3159,6 +3163,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   text-align: right;
 }
 
+.wp-block-pullquote.has-text-align-center blockquote {
+  text-align: center;
+}
+
 .wp-block-pullquote.is-style-solid-color {
   border: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.18.0",
+	"version": "9.19.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.18.0",
-		"@wordpress/api-fetch": "^7.18.0",
-		"@wordpress/autop": "^4.18.0",
-		"@wordpress/blob": "^4.18.0",
-		"@wordpress/block-editor": "^14.13.0",
-		"@wordpress/blocks": "^14.7.0",
-		"@wordpress/components": "^29.4.0",
-		"@wordpress/compose": "^7.18.0",
-		"@wordpress/core-data": "^7.18.0",
-		"@wordpress/data": "^10.18.0",
-		"@wordpress/date": "^5.18.0",
-		"@wordpress/deprecated": "^4.18.0",
-		"@wordpress/dom": "^4.18.0",
-		"@wordpress/element": "^6.18.0",
-		"@wordpress/escape-html": "^3.18.0",
-		"@wordpress/hooks": "^4.18.0",
-		"@wordpress/html-entities": "^4.18.0",
-		"@wordpress/i18n": "^5.18.0",
-		"@wordpress/icons": "^10.18.0",
-		"@wordpress/interactivity": "^6.18.0",
-		"@wordpress/interactivity-router": "^2.18.0",
-		"@wordpress/keyboard-shortcuts": "^5.18.0",
-		"@wordpress/keycodes": "^4.18.0",
-		"@wordpress/notices": "^5.18.0",
-		"@wordpress/patterns": "^2.18.0",
-		"@wordpress/primitives": "^4.18.0",
-		"@wordpress/private-apis": "^1.18.0",
-		"@wordpress/reusable-blocks": "^5.18.0",
-		"@wordpress/rich-text": "^7.18.0",
-		"@wordpress/server-side-render": "^5.18.0",
-		"@wordpress/url": "^4.18.0",
-		"@wordpress/viewport": "^6.18.0",
-		"@wordpress/wordcount": "^4.18.0",
+		"@wordpress/a11y": "^4.19.0",
+		"@wordpress/api-fetch": "^7.19.0",
+		"@wordpress/autop": "^4.19.0",
+		"@wordpress/blob": "^4.19.0",
+		"@wordpress/block-editor": "^14.14.0",
+		"@wordpress/blocks": "^14.8.0",
+		"@wordpress/components": "^29.5.0",
+		"@wordpress/compose": "^7.19.0",
+		"@wordpress/core-data": "^7.19.0",
+		"@wordpress/data": "^10.19.0",
+		"@wordpress/date": "^5.19.0",
+		"@wordpress/deprecated": "^4.19.0",
+		"@wordpress/dom": "^4.19.0",
+		"@wordpress/element": "^6.19.0",
+		"@wordpress/escape-html": "^3.19.0",
+		"@wordpress/hooks": "^4.19.0",
+		"@wordpress/html-entities": "^4.19.0",
+		"@wordpress/i18n": "^5.19.0",
+		"@wordpress/icons": "^10.19.0",
+		"@wordpress/interactivity": "^6.19.0",
+		"@wordpress/interactivity-router": "^2.19.0",
+		"@wordpress/keyboard-shortcuts": "^5.19.0",
+		"@wordpress/keycodes": "^4.19.0",
+		"@wordpress/notices": "^5.19.0",
+		"@wordpress/patterns": "^2.19.0",
+		"@wordpress/primitives": "^4.19.0",
+		"@wordpress/private-apis": "^1.19.0",
+		"@wordpress/reusable-blocks": "^5.19.0",
+		"@wordpress/rich-text": "^7.19.0",
+		"@wordpress/server-side-render": "^5.19.0",
+		"@wordpress/url": "^4.19.0",
+		"@wordpress/viewport": "^6.19.0",
+		"@wordpress/wordcount": "^4.19.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "afe4fb333177642180ac020f1030c5685eab7183"
+	"gitHead": "d6b0b20fa927b110140dc7fdd906a7e0bf662004"
 }

package/src/cover/edit/index.js

@@ -514,6 +514,8 @@ function CoverEdit( {
 								value={ overlayColor.color }
 								onChange={ onSetOverlayColor }
 								clearable={ false }
+								asButtons
+								aria-label={ __( 'Overlay color' ) }
 							/>
 						</div>
 					</CoverPlaceholder>

package/src/cover/test/edit.js

@@ -47,7 +47,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) {
 
 async function createAndSelectBlock() {
 	await userEvent.click(
-		screen.getByRole( 'option', {
+		screen.getByRole( 'button', {
 			name: 'Black',
 		} )
 	);
@@ -72,7 +72,7 @@ describe( 'Cover block', () => {
 
 		test( 'can set overlay color using color picker on block placeholder', async () => {
 			const { container } = await setup();
-			const colorPicker = screen.getByRole( 'option', {
+			const colorPicker = screen.getByRole( 'button', {
 				name: 'Black',
 			} );
 			await userEvent.click( colorPicker );
@@ -96,7 +96,7 @@ describe( 'Cover block', () => {
 			await setup();
 
 			await userEvent.click(
-				screen.getByRole( 'option', {
+				screen.getByRole( 'button', {
 					name: 'Black',
 				} )
 			);
@@ -389,7 +389,7 @@ describe( 'Cover block', () => {
 	describe( 'isDark settings', () => {
 		test( 'should toggle is-light class if background changed from light to dark', async () => {
 			await setup();
-			const colorPicker = screen.getByRole( 'option', {
+			const colorPicker = screen.getByRole( 'button', {
 				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
@@ -413,7 +413,7 @@ describe( 'Cover block', () => {
 		} );
 		test( 'should remove is-light class if overlay color is removed', async () => {
 			await setup();
-			const colorPicker = screen.getByRole( 'option', {
+			const colorPicker = screen.getByRole( 'button', {
 				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
@@ -426,7 +426,7 @@ describe( 'Cover block', () => {
 				} )
 			);
 			await userEvent.click( screen.getByText( 'Overlay' ) );
-			// The default color is black, so clicking the black color option will remove the background color,
+			// The default color is black, so clicking the black color button will remove the background color,
 			// which should remove the isDark setting and assign the is-light class.
 			const popupColorPicker = screen.getByRole( 'option', {
 				name: 'White',

package/src/form/edit.js

@@ -123,6 +123,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 							help={ __(
 								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
 							) }
+							type="email"
 						/>
 					) }
 				</PanelBody>
@@ -159,6 +160,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						help={ __(
 							'The URL where the form should be submitted.'
 						) }
+						type="url"
 					/>
 				</InspectorControls>
 			) }

package/src/image/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 /**
  * Tracks whether user is touching screen; used to differentiate behavior for
@@ -128,7 +133,7 @@ const { state, actions, callbacks } = store(
 					}, 450 );
 				}
 			},
-			handleKeydown( event ) {
+			handleKeydown: withSyncEvent( ( event ) => {
 				if ( state.overlayEnabled ) {
 					// Focuses the close button when the user presses the tab key.
 					if ( event.key === 'Tab' ) {
@@ -141,8 +146,8 @@ const { state, actions, callbacks } = store(
 						actions.hideLightbox();
 					}
 				}
-			},
-			handleTouchMove( event ) {
+			} ),
+			handleTouchMove: withSyncEvent( ( event ) => {
 				// On mobile devices, prevents triggering the scroll event because
 				// otherwise the page jumps around when it resets the scroll position.
 				// This also means that closing the lightbox requires that a user
@@ -152,7 +157,7 @@ const { state, actions, callbacks } = store(
 				if ( state.overlayEnabled ) {
 					event.preventDefault();
 				}
-			},
+			} ),
 			handleTouchStart() {
 				isTouching = true;
 			},

package/src/navigation/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',
@@ -106,7 +111,7 @@ const { state, actions } = store(
 					actions.openMenu( 'click' );
 				}
 			},
-			handleMenuKeydown( event ) {
+			handleMenuKeydown: withSyncEvent( ( event ) => {
 				const { type, firstFocusableElement, lastFocusableElement } =
 					getContext();
 				if ( state.menuOpenedBy.click ) {
@@ -137,7 +142,7 @@ const { state, actions } = store(
 						}
 					}
 				}
-			},
+			} ),
 			handleMenuFocusout( event ) {
 				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu

package/src/navigation-link/edit.js

@@ -201,6 +201,7 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 						);
 					} }
 					autoComplete="off"
+					type="url"
 				/>
 			</ToolsPanelItem>
 

package/src/navigation-link/editor.scss

@@ -82,30 +82,9 @@
 	// Draw a wavy underline.
 	.wp-block-navigation-link__placeholder-text {
 		span {
-			$blur: 10%;
-			$width: 6%;
-			$stop1: 30%;
-			$stop2: 64%;
-
-			--wp-underline-color: var(--wp-admin-theme-color);
-
-			background-image:
-				linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
-				linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
-			background-position: 0 100%;
-			background-size: 6px 3px;
-			background-repeat: repeat-x;
-
-			// Since applied to a span, it doesn't change the footprint of the item,
-			// but it does vertically shift the underline to better align.
-			padding-bottom: 0.1em;
-		}
-
-		&.is-invalid,
-		&.is-draft {
-			span {
-				--wp-underline-color: #{$alert-red};
-			}
+			text-decoration: wavy underline;
+			text-decoration-skip-ink: none;
+			text-underline-offset: 0.25rem;
 		}
 	}
 

package/src/navigation-submenu/edit.js

@@ -431,6 +431,7 @@ export default function NavigationSubmenuEdit( {
 							} }
 							label={ __( 'Link' ) }
 							autoComplete="off"
+							type="url"
 						/>
 					</ToolsPanelItem>
 

package/src/post-comments-count/block.json

@@ -39,8 +39,15 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
-	}
+	},
+	"style": "wp-block-post-comments-count"
 }

package/src/post-comments-count/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-comments-count {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/post-navigation-link/edit.js

@@ -198,7 +198,7 @@ export default function PostNavigationLinkEdit( {
 					aria-label={ ariaLabel }
 					placeholder={ placeholder }
 					value={ label }
-					allowedFormats={ [ 'core/bold', 'core/italic' ] }
+					withoutInteractiveFormatting
 					onChange={ ( newLabel ) =>
 						setAttributes( { label: newLabel } )
 					}

package/src/pullquote/style.scss

@@ -46,6 +46,10 @@
 .wp-block-pullquote.has-text-align-right blockquote {
 	text-align: right;
 }
+// Ensure that we are reasonably specific to override theme defaults.
+.wp-block-pullquote.has-text-align-center blockquote {
+	text-align: center;
+}
 
 // .is-style-solid-color is deprecated.
 // This selector has not been scoped with `:root :where`, as global styles

package/src/query/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const isValidLink = ( ref ) =>
 	ref &&
@@ -22,7 +27,7 @@ store(
 	'core/query',
 	{
 		actions: {
-			*navigate( event ) {
+			navigate: withSyncEvent( function* ( event ) {
 				const ctx = getContext();
 				const { ref } = getElement();
 				const queryRef = ref.closest(
@@ -42,7 +47,7 @@ store(
 					const firstAnchor = `.wp-block-post-template a[href]`;
 					queryRef.querySelector( firstAnchor )?.focus();
 				}
-			},
+			} ),
 			*prefetch() {
 				const { ref } = getElement();
 				if ( isValidLink( ref ) ) {

package/src/query-total/index.php

@@ -10,6 +10,8 @@
  *
  * @since 6.8.0
  *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/search/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const { actions } = store(
 	'core/search',
@@ -31,7 +36,7 @@ const { actions } = store(
 			},
 		},
 		actions: {
-			openSearchInput( event ) {
+			openSearchInput: withSyncEvent( ( event ) => {
 				const ctx = getContext();
 				const { ref } = getElement();
 				if ( ! ctx.isSearchInputVisible ) {
@@ -39,7 +44,7 @@ const { actions } = store(
 					ctx.isSearchInputVisible = true;
 					ref.parentElement.querySelector( 'input' ).focus();
 				}
-			},
+			} ),
 			closeSearchInput() {
 				const ctx = getContext();
 				ctx.isSearchInputVisible = false;

package/src/site-logo/edit.js

@@ -499,11 +499,6 @@ export default function LogoEdit( {
 	};
 
 	const onFilesDrop = ( filesList ) => {
-		if ( filesList?.length > 1 ) {
-			onUploadError( __( 'Only one image can be used as a site logo.' ) );
-			return;
-		}
-
 		getSettings().mediaUpload( {
 			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList,
@@ -515,6 +510,7 @@ export default function LogoEdit( {
 				onInitialSelectLogo( image );
 			},
 			onError: onUploadError,
+			multiple: false,
 		} );
 	};
 

package/src/social-link/editor.scss

@@ -16,6 +16,7 @@
 	height: auto;
 	font-weight: inherit;
 	font-family: inherit;
+	margin: 0;
 
 	// This rule ensures social link buttons display correctly in template parts.
 	opacity: 1;

package/src/style.scss

@@ -36,6 +36,7 @@
 @import "./post-author/style.scss";
 @import "./post-author-biography/style.scss";
 @import "./post-comments-form/style.scss";
+@import "./post-comments-count/style.scss";
 @import "./post-content/style.scss";
 @import "./post-comments-link/style.scss";
 @import "./post-date/style.scss";

package/src/template-part/index.php

@@ -70,7 +70,9 @@ function render_block_core_template_part( $attributes ) {
 			if ( 0 === validate_file( $attributes['slug'] ) ) {
 				$block_template = get_block_file_template( $template_part_id, 'wp_template_part' );
 
-				$content = $block_template->content;
+				if ( isset( $block_template->content ) ) {
+					$content = $block_template->content;
+				}
 				if ( isset( $block_template->area ) ) {
 					$area = $block_template->area;
 				}

package/src/video/edit-common-settings.js

@@ -22,6 +22,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 	const autoPlayHelpText = __(
 		'Autoplay may cause usability issues for some users.'
 	);
+
 	const getAutoplayHelp = Platform.select( {
 		web: useCallback( ( checked ) => {
 			return checked ? autoPlayHelpText : null;
@@ -32,7 +33,11 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 	const toggleFactory = useMemo( () => {
 		const toggleAttribute = ( attribute ) => {
 			return ( newValue ) => {
-				setAttributes( { [ attribute ]: newValue } );
+				setAttributes( {
+					[ attribute ]: newValue,
+					// Set muted when autoplay changes
+					...( attribute === 'autoplay' && { muted: newValue } ),
+				} );
 			};
 		};
 
@@ -56,7 +61,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				isShownByDefault
 				hasValue={ () => !! autoplay }
 				onDeselect={ () => {
-					setAttributes( { autoplay: false } );
+					setAttributes( { autoplay: false, muted: false } );
 				} }
 			>
 				<ToggleControl
@@ -95,6 +100,10 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 					label={ __( 'Muted' ) }
 					onChange={ toggleFactory.muted }
 					checked={ !! muted }
+					disabled={ autoplay }
+					help={
+						autoplay ? __( 'Muted because of Autoplay.' ) : null
+					}
 				/>
 			</ToolsPanelItem>
 			<ToolsPanelItem