@wordpress/block-library 9.21.0 → 9.22.0

package/src/navigation-submenu/edit.js

@@ -123,7 +123,6 @@ const useIsDraggingWithin = ( elementRef ) => {
  * @property {number}               [id]            A post or term id.
  * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
  * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
  */
 
 export default function NavigationSubmenuEdit( {
@@ -135,7 +134,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description, rel, title } = attributes;
+	const { label, url, description, rel } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -392,7 +391,6 @@ export default function NavigationSubmenuEdit( {
 							label: '',
 							url: '',
 							description: '',
-							title: '',
 							rel: '',
 						} );
 					} }
@@ -458,27 +456,6 @@ export default function NavigationSubmenuEdit( {
 						/>
 					</ToolsPanelItem>
 
-					<ToolsPanelItem
-						label={ __( 'Title attribute' ) }
-						isShownByDefault
-						hasValue={ () => !! title }
-						onDeselect={ () => setAttributes( { title: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ title || '' }
-							onChange={ ( titleValue ) => {
-								setAttributes( { title: titleValue } );
-							} }
-							label={ __( 'Title attribute' ) }
-							autoComplete="off"
-							help={ __(
-								'Additional information to help clarify the purpose of the link.'
-							) }
-						/>
-					</ToolsPanelItem>
-
 					<ToolsPanelItem
 						label={ __( 'Rel attribute' ) }
 						isShownByDefault

package/src/navigation-submenu/index.php

@@ -169,10 +169,6 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html .= ' rel="nofollow"';
 		}
 
-		if ( isset( $attributes['title'] ) ) {
-			$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
-		}
-
 		$html .= '>';
 		// End appending HTML attributes to anchor tag.
 

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

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/post-comments-count",
 	"title": "Comments Count",
 	"category": "theme",

package/src/post-comments-count/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-count` block on the server.
  *
+ * @since 6.9.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -33,6 +35,8 @@ function render_block_core_post_comments_count( $attributes, $content, $block )
 
 /**
  * Registers the `core/post-comments-count` block on the server.
+ *
+ * @since 6.9.0
  */
 function register_block_core_post_comments_count() {
 	register_block_type_from_metadata(

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

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/post-comments-link",
 	"title": "Comments Link",
 	"category": "theme",

package/src/post-comments-link/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-link` block on the server.
  *
+ * @since 6.9.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
@@ -59,6 +61,8 @@ function render_block_core_post_comments_link( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-comments-link` block on the server.
+ *
+ * @since 6.9.0
  */
 function register_block_core_post_comments_link() {
 	register_block_type_from_metadata(

package/src/post-featured-image/edit.js

@@ -196,6 +196,17 @@ export default function PostFeaturedImageEdit( {
 		}
 	};
 
+	// On reset image
+	const onResetImage = () => {
+		setAttributes( {
+			isLink: false,
+			linkTarget: '_self',
+			rel: '',
+			sizeSlug: undefined,
+		} );
+		setFeaturedImage( 0 );
+	};
+
 	// Reset temporary url when media is available.
 	useEffect( () => {
 		if ( mediaUrl && temporaryURL ) {
@@ -228,38 +239,20 @@ export default function PostFeaturedImageEdit( {
 					media={ media }
 				/>
 			</InspectorControls>
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( {
-							isLink: false,
-							linkTarget: '_self',
-							rel: '',
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						label={
-							postType?.labels.singular_name
-								? sprintf(
-										// translators: %s: Name of the post type e.g: "post".
-										__( 'Link to %s' ),
-										postType.labels.singular_name
-								  )
-								: __( 'Link to post' )
-						}
-						isShownByDefault
-						hasValue={ () => !! isLink }
-						onDeselect={ () =>
+			{ ( featuredImage || isDescendentOfQueryLoop || ! postId ) && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
 							setAttributes( {
 								isLink: false,
-							} )
-						}
+								linkTarget: '_self',
+								rel: '',
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
 					>
-						<ToggleControl
-							__nextHasNoMarginBottom
+						<ToolsPanelItem
 							label={
 								postType?.labels.singular_name
 									? sprintf(
@@ -269,66 +262,91 @@ export default function PostFeaturedImageEdit( {
 									  )
 									: __( 'Link to post' )
 							}
-							onChange={ () =>
-								setAttributes( { isLink: ! isLink } )
-							}
-							checked={ isLink }
-						/>
-					</ToolsPanelItem>
-					{ isLink && (
-						<ToolsPanelItem
-							label={ __( 'Open in new tab' ) }
 							isShownByDefault
-							hasValue={ () => '_self' !== linkTarget }
+							hasValue={ () => !! isLink }
 							onDeselect={ () =>
 								setAttributes( {
-									linkTarget: '_self',
+									isLink: false,
 								} )
 							}
 						>
 							<ToggleControl
 								__nextHasNoMarginBottom
+								label={
+									postType?.labels.singular_name
+										? sprintf(
+												// translators: %s: Name of the post type e.g: "post".
+												__( 'Link to %s' ),
+												postType.labels.singular_name
+										  )
+										: __( 'Link to post' )
+								}
+								onChange={ () =>
+									setAttributes( { isLink: ! isLink } )
+								}
+								checked={ isLink }
+							/>
+						</ToolsPanelItem>
+
+						{ isLink && (
+							<ToolsPanelItem
 								label={ __( 'Open in new tab' ) }
-								onChange={ ( value ) =>
+								isShownByDefault
+								hasValue={ () => '_self' !== linkTarget }
+								onDeselect={ () =>
 									setAttributes( {
-										linkTarget: value ? '_blank' : '_self',
+										linkTarget: '_self',
 									} )
 								}
-								checked={ linkTarget === '_blank' }
-							/>
-						</ToolsPanelItem>
-					) }
-					{ isLink && (
-						<ToolsPanelItem
-							label={ __( 'Link rel' ) }
-							isShownByDefault
-							hasValue={ () => !! rel }
-							onDeselect={ () =>
-								setAttributes( {
-									rel: '',
-								} )
-							}
-						>
-							<TextControl
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Open in new tab' ) }
+									onChange={ ( value ) =>
+										setAttributes( {
+											linkTarget: value
+												? '_blank'
+												: '_self',
+										} )
+									}
+									checked={ linkTarget === '_blank' }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ isLink && (
+							<ToolsPanelItem
 								label={ __( 'Link rel' ) }
-								value={ rel }
-								onChange={ ( newRel ) =>
-									setAttributes( { rel: newRel } )
+								isShownByDefault
+								hasValue={ () => !! rel }
+								onDeselect={ () =>
+									setAttributes( {
+										rel: '',
+									} )
+								}
+							>
+								<TextControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Link rel' ) }
+									value={ rel }
+									onChange={ ( newRel ) =>
+										setAttributes( { rel: newRel } )
+									}
+								/>
+							</ToolsPanelItem>
+						) }
+						{ !! media && (
+							<FeaturedImageResolutionTool
+								image={ media }
+								value={ sizeSlug }
+								onChange={ ( nextSizeSlug ) =>
+									setAttributes( { sizeSlug: nextSizeSlug } )
 								}
 							/>
-						</ToolsPanelItem>
-					) }
-					<FeaturedImageResolutionTool
-						image={ media }
-						value={ sizeSlug }
-						onChange={ ( nextSizeSlug ) =>
-							setAttributes( { sizeSlug: nextSizeSlug } )
-						}
-					/>
-				</ToolsPanel>
-			</InspectorControls>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
+			) }
 		</>
 	);
 
@@ -398,8 +416,7 @@ export default function PostFeaturedImageEdit( {
 							label={ label }
 							showTooltip
 							tooltipPosition="top center"
-							onClick={ ( e ) => {
-								e.preventDefault();
+							onClick={ () => {
 								open();
 							} }
 						/>
@@ -451,7 +468,7 @@ export default function PostFeaturedImageEdit( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-						onReset={ () => setFeaturedImage( 0 ) }
+						onReset={ onResetImage }
 					/>
 				</BlockControls>
 			) }

package/src/query/edit/inspector-controls/index.js

@@ -4,18 +4,18 @@
 import {
 	TextControl,
 	SelectControl,
-	RangeControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
+	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { debounce } from '@wordpress/compose';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -40,8 +40,8 @@ import {
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
-	const { query, displayLayout } = attributes;
+	const { attributes, setQuery, isSingular } = props;
+	const { query } = attributes;
 	const {
 		order,
 		orderBy,
@@ -99,29 +99,20 @@ export default function QueryInspectorControls( props ) {
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
-	const onChangeDebounced = useCallback(
-		debounce( () => {
-			if ( query.search !== querySearch ) {
-				setQuery( { search: querySearch } );
-			}
-		}, 250 ),
-		[ querySearch, query.search ]
-	);
-	useEffect( () => {
-		onChangeDebounced();
-		return onChangeDebounced.cancel;
-	}, [ querySearch, onChangeDebounced ] );
+	const debouncedQuerySearch = useMemo( () => {
+		return debounce( ( newQuerySearch ) => {
+			setQuery( { search: newQuerySearch } );
+		}, 250 );
+	}, [ setQuery ] );
 
 	const orderByOptions = useOrderByOptions( postType );
-	const showInheritControl =
-		! isSingular && isControlAllowed( allowedControls, 'inherit' );
+	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
-	const showColumnsControl = false;
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =
@@ -131,7 +122,6 @@ export default function QueryInspectorControls( props ) {
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
-		showColumnsControl ||
 		showOrderControl ||
 		showStickyControl;
 	const showTaxControl =
@@ -185,6 +175,10 @@ export default function QueryInspectorControls( props ) {
 	const showDisplayPanel =
 		showPostCountControl || showOffSetControl || showPagesControl;
 
+	// The block cannot inherit a default WordPress query in singular content (e.g., post, page, 404, blank).
+	// Warn users but still permit this type of query for exceptional cases in Classic and Hybrid themes.
+	const hasInheritanceWarning = isSingular && inherit;
+
 	return (
 		<>
 			{ showSettingsPanel && (
@@ -208,36 +202,48 @@ export default function QueryInspectorControls( props ) {
 							onDeselect={ () => setQuery( { inherit: true } ) }
 							isShownByDefault
 						>
-							<ToggleGroupControl
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
-								label={ __( 'Query type' ) }
-								isBlock
-								onChange={ ( value ) => {
-									setQuery( {
-										inherit: value === 'default',
-									} );
-								} }
-								help={
-									inherit
-										? __(
-												'Display a list of posts or custom post types based on the current template.'
-										  )
-										: __(
-												'Display a list of posts or custom post types based on specific criteria.'
-										  )
-								}
-								value={ !! inherit ? 'default' : 'custom' }
-							>
-								<ToggleGroupControlOption
-									value="default"
-									label={ __( 'Default' ) }
-								/>
-								<ToggleGroupControlOption
-									value="custom"
-									label={ __( 'Custom' ) }
-								/>
-							</ToggleGroupControl>
+							<VStack spacing={ 4 }>
+								<ToggleGroupControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Query type' ) }
+									isBlock
+									onChange={ ( value ) => {
+										setQuery( {
+											inherit: value === 'default',
+										} );
+									} }
+									help={
+										inherit
+											? __(
+													'Display a list of posts or custom post types based on the current template.'
+											  )
+											: __(
+													'Display a list of posts or custom post types based on specific criteria.'
+											  )
+									}
+									value={ !! inherit ? 'default' : 'custom' }
+								>
+									<ToggleGroupControlOption
+										value="default"
+										label={ __( 'Default' ) }
+									/>
+									<ToggleGroupControlOption
+										value="custom"
+										label={ __( 'Custom' ) }
+									/>
+								</ToggleGroupControl>
+								{ hasInheritanceWarning && (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'Cannot inherit the current template query when placed inside the singular content (e.g., post, page, 404, blank).'
+										) }
+									</Notice>
+								) }
+							</VStack>
 						</ToolsPanelItem>
 					) }
 
@@ -282,43 +288,6 @@ export default function QueryInspectorControls( props ) {
 						</ToolsPanelItem>
 					) }
 
-					{ showColumnsControl && (
-						<ToolsPanelItem
-							hasValue={ () => displayLayout?.columns !== 2 }
-							label={ __( 'Columns' ) }
-							onDeselect={ () =>
-								setDisplayLayout( { columns: 2 } )
-							}
-							isShownByDefault
-						>
-							<>
-								<RangeControl
-									__nextHasNoMarginBottom
-									__next40pxDefaultSize
-									label={ __( 'Columns' ) }
-									value={ displayLayout.columns }
-									onChange={ ( value ) =>
-										setDisplayLayout( {
-											columns: value,
-										} )
-									}
-									min={ 2 }
-									max={ Math.max( 6, displayLayout.columns ) }
-								/>
-								{ displayLayout.columns > 6 && (
-									<Notice
-										status="warning"
-										isDismissible={ false }
-									>
-										{ __(
-											'This column count exceeds the recommended amount and may cause visual breakage.'
-										) }
-									</Notice>
-								) }
-							</>
-						</ToolsPanelItem>
-					) }
-
 					{ showOrderControl && (
 						<ToolsPanelItem
 							hasValue={ () =>
@@ -443,14 +412,20 @@ export default function QueryInspectorControls( props ) {
 						<ToolsPanelItem
 							hasValue={ () => !! querySearch }
 							label={ __( 'Keyword' ) }
-							onDeselect={ () => setQuerySearch( '' ) }
+							onDeselect={ () => {
+								setQuery( { search: '' } );
+								setQuerySearch( '' );
+							} }
 						>
 							<TextControl
 								__nextHasNoMarginBottom
 								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
 								value={ querySearch }
-								onChange={ setQuerySearch }
+								onChange={ ( newQuerySearch ) => {
+									debouncedQuerySearch( newQuerySearch );
+									setQuerySearch( newQuerySearch );
+								} }
 							/>
 						</ToolsPanelItem>
 					) }

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

@@ -51,7 +51,7 @@ function ParentControl( { parents, postType, onChange } ) {
 				),
 			};
 		},
-		[ search, parents ]
+		[ search, postType, parents ]
 	);
 	const currentParents = useSelect(
 		( select ) => {
@@ -65,7 +65,7 @@ function ParentControl( { parents, postType, onChange } ) {
 				per_page: parents.length,
 			} );
 		},
-		[ parents ]
+		[ parents, postType ]
 	);
 	// Update the `value` state only after the selectors are resolved
 	// to avoid emptying the input when we're changing parents.

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -120,7 +120,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				),
 			};
 		},
-		[ search, termIds ]
+		[ search, taxonomy.slug, termIds ]
 	);
 	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
 	// They are used to extract the terms' names to populate the `FormTokenField` properly
@@ -137,7 +137,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				per_page: termIds.length,
 			} );
 		},
-		[ termIds ]
+		[ taxonomy.slug, termIds ]
 	);
 	// Update the `value` state only after the selectors are resolved
 	// to avoid emptying the input when we're changing terms.

package/src/query/edit/query-content.js

@@ -38,7 +38,6 @@ export default function QueryContent( {
 	const {
 		queryId,
 		query,
-		displayLayout,
 		enhancedPagination,
 		tagName: TagName = 'div',
 		query: { inherit } = {},
@@ -86,8 +85,11 @@ export default function QueryContent( {
 	// because updates are batched after the render and changes in different query properties
 	// would cause to override previous wanted changes.
 	const updateQuery = useCallback(
-		( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),
-		[ query, setAttributes ]
+		( newQuery ) =>
+			setAttributes( ( prevAttributes ) => ( {
+				query: { ...prevAttributes.query, ...newQuery },
+			} ) ),
+		[ setAttributes ]
 	);
 	useEffect( () => {
 		const newQuery = {};
@@ -98,21 +100,15 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
-		// We need to reset the `inherit` value if in a singular template, as queries
-		// are not inherited when in singular content (e.g. post, page, 404, blank).
-		if ( isSingular && query.inherit ) {
-			newQuery.inherit = false;
-		}
+
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
 	}, [
 		query.perPage,
-		query.inherit,
-		postsPerPage,
 		inherit,
-		isSingular,
+		postsPerPage,
 		__unstableMarkNextChangeAsNotPersistent,
 		updateQuery,
 	] );
@@ -129,10 +125,6 @@ export default function QueryContent( {
 		__unstableMarkNextChangeAsNotPersistent,
 		setAttributes,
 	] );
-	const updateDisplayLayout = ( newDisplayLayout ) =>
-		setAttributes( {
-			displayLayout: { ...displayLayout, ...newDisplayLayout },
-		} );
 
 	return (
 		<>
@@ -146,7 +138,6 @@ export default function QueryContent( {
 					name={ name }
 					attributes={ attributes }
 					setQuery={ updateQuery }
-					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
 					isSingular={ isSingular }

package/src/quote/index.js

@@ -22,7 +22,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			citation: 'Julio Cortázar',
+			citation: __( 'Julio Cortázar' ),
 		},
 		innerBlocks: [
 			{