@wordpress/block-library 9.18.0 → 9.19.1

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-author/edit.js

@@ -99,7 +99,7 @@ function PostAuthorEdit( {
 	const showAuthorControl =
 		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
 
-	if ( ! supportsAuthor ) {
+	if ( ! supportsAuthor && postType !== undefined ) {
 		return (
 			<div { ...blockProps }>
 				{ sprintf(

package/src/post-author-name/edit.js

@@ -132,15 +132,15 @@ function PostAuthorNameEdit( {
 				</ToolsPanel>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ supportsAuthor
-					? displayAuthor
-					: sprintf(
+				{ ! supportsAuthor && postType !== undefined
+					? sprintf(
 							// translators: %s: Name of the post type e.g: "post".
 							__(
 								'This post type (%s) does not support the author.'
 							),
 							postType
-					  ) }
+					  )
+					: displayAuthor }
 			</div>
 		</>
 	);

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/edit/inspector-controls/index.js

@@ -35,6 +35,7 @@ import {
 	useAllowedControls,
 	isControlAllowed,
 	useTaxonomies,
+	useOrderByOptions,
 } from '../../utils';
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
@@ -111,6 +112,7 @@ export default function QueryInspectorControls( props ) {
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
 
+	const orderByOptions = useOrderByOptions( postType );
 	const showInheritControl =
 		! isSingular && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
@@ -329,7 +331,7 @@ export default function QueryInspectorControls( props ) {
 							isShownByDefault
 						>
 							<OrderControl
-								{ ...{ order, orderBy } }
+								{ ...{ order, orderBy, orderByOptions } }
 								onChange={ setQuery }
 							/>
 						</ToolsPanelItem>

package/src/query/edit/inspector-controls/order-control.js

@@ -4,7 +4,7 @@
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const orderOptions = [
+const defaultOrderByOptions = [
 	{
 		label: __( 'Newest to oldest' ),
 		value: 'date/desc',
@@ -24,14 +24,20 @@ const orderOptions = [
 		value: 'title/desc',
 	},
 ];
-function OrderControl( { order, orderBy, onChange } ) {
+
+function OrderControl( {
+	order,
+	orderBy,
+	orderByOptions = defaultOrderByOptions,
+	onChange,
+} ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
-			options={ orderOptions }
+			options={ orderByOptions }
 			onChange={ ( value ) => {
 				const [ newOrderBy, newOrder ] = value.split( '/' );
 				onChange( { order: newOrder, orderBy: newOrderBy } );

package/src/query/utils.js

@@ -6,6 +6,7 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
 import {
 	cloneBlock,
 	getBlockSupport,
@@ -13,6 +14,7 @@ import {
 } from '@wordpress/blocks';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+/** @typedef {import('@wordpress/components/build-types/query-controls/types').OrderByOption} OrderByOption */
 
 /**
  * @typedef IHasNameAndId
@@ -186,6 +188,62 @@ export function useIsPostTypeHierarchical( postType ) {
 	);
 }
 
+/**
+ * List of avaiable options to order by.
+ *
+ * @param {string} postType The post type to check.
+ * @return {OrderByOption[]} List of order options.
+ */
+export function useOrderByOptions( postType ) {
+	const supportsCustomOrder = useSelect(
+		( select ) => {
+			const type = select( coreStore ).getPostType( postType );
+			return !! type?.supports?.[ 'page-attributes' ];
+		},
+		[ postType ]
+	);
+
+	return useMemo( () => {
+		const orderByOptions = [
+			{
+				label: __( 'Newest to oldest' ),
+				value: 'date/desc',
+			},
+			{
+				label: __( 'Oldest to newest' ),
+				value: 'date/asc',
+			},
+			{
+				/* translators: Label for ordering posts by title in ascending order. */
+				label: __( 'A → Z' ),
+				value: 'title/asc',
+			},
+			{
+				/* translators: Label for ordering posts by title in descending order. */
+				label: __( 'Z → A' ),
+				value: 'title/desc',
+			},
+		];
+
+		if ( supportsCustomOrder ) {
+			orderByOptions.push(
+				{
+					/* translators: Label for ordering posts by ascending menu order. */
+					label: __( 'Ascending by order' ),
+					value: 'menu_order/asc',
+				},
+				{
+					/* translators: Label for ordering posts by descending menu order. */
+					label: __( 'Descending by order' ),
+					value: 'menu_order/desc',
+				}
+			);
+		}
+
+		return orderByOptions;
+	}, [ supportsCustomOrder ] );
+}
+
 /**
  * Hook that returns the query properties' names defined by the active
  * block variation, to determine which block's filters to show.

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/block.json

@@ -23,9 +23,9 @@
 		},
 		"color": {
 			"gradients": true,
-			"text": true,
 			"__experimentalDefaultControls": {
-				"background": true
+				"background": true,
+				"text": true
 			}
 		},
 		"typography": {

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.
@@ -21,7 +23,7 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes();
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
 		$query_to_use = $wp_query;
-		$current_page = max( 1, get_query_var( 'paged', 1 ) );
+		$current_page = max( 1, (int) get_query_var( 'paged', 1 ) );
 	} else {
 		$page_key     = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 		$current_page = isset( $_GET[ $page_key ] ) ? (int) $_GET[ $page_key ] : 1;
@@ -29,7 +31,7 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 	}
 
 	$max_rows       = $query_to_use->found_posts;
-	$posts_per_page = $query_to_use->get( 'posts_per_page' );
+	$posts_per_page = (int) $query_to_use->get( 'posts_per_page' );
 
 	// Calculate the range of posts being displayed.
 	$start = ( $current_page - 1 ) * $posts_per_page + 1;

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/site-title/index.php

@@ -31,7 +31,7 @@ function render_block_core_site_title( $attributes ) {
 	}
 
 	if ( $attributes['isLink'] ) {
-		$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+		$aria_current = ! is_paged() && ( is_front_page() || is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) ? ' aria-current="page"' : '';
 		$link_target  = ! empty( $attributes['linkTarget'] ) ? $attributes['linkTarget'] : '_self';
 
 		$site_title = sprintf(

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/edit/advanced-controls.js

@@ -36,7 +36,7 @@ export function TemplatePartAdvancedControls( {
 
 	const defaultTemplatePartAreas = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			select( coreStore ).getCurrentTheme()
 				?.default_template_part_areas || [],
 		[]
 	);

package/src/template-part/edit/utils/hooks.js

@@ -137,7 +137,7 @@ export function useTemplatePartArea( area ) {
 	return useSelect(
 		( select ) => {
 			const definedAreas =
-				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				select( coreStore ).getCurrentTheme()
 					?.default_template_part_areas || [];
 
 			const selectedArea = definedAreas.find(

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