@wordpress/block-library 9.25.0 → 9.26.1-next.719a03cbe.0

package/src/post-author/edit.js

@@ -15,22 +15,98 @@ import {
 } from '@wordpress/block-editor';
 import {
 	ComboboxControl,
-	PanelBody,
 	SelectControl,
 	ToggleControl,
-	__experimentalVStack as VStack,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 
-const minimumUsersForCombobox = 25;
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const AUTHORS_QUERY = {
 	who: 'authors',
 	per_page: 100,
+	_fields: 'id,name',
+	context: 'view',
 };
 
+function AuthorCombobox( { value, onChange } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const { authors, isLoading } = useSelect(
+		( select ) => {
+			const { getUsers, isResolving } = select( coreStore );
+
+			const query = { ...AUTHORS_QUERY };
+			if ( filterValue ) {
+				query.search = filterValue;
+				query.search_columns = [ 'name' ];
+			}
+
+			return {
+				authors: getUsers( query ),
+				isLoading: isResolving( 'getUsers', [ query ] ),
+			};
+		},
+		[ filterValue ]
+	);
+
+	const authorOptions = useMemo( () => {
+		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+
+		// Ensure the current author is included in the list.
+		const foundAuthor = fetchedAuthors.findIndex(
+			( fetchedAuthor ) => value?.id === fetchedAuthor.value
+		);
+
+		let currentAuthor = [];
+		if ( foundAuthor < 0 && value ) {
+			currentAuthor = [
+				{
+					value: value.id,
+					label: decodeEntities( value.name ),
+				},
+			];
+		} else if ( foundAuthor < 0 && ! value ) {
+			currentAuthor = [
+				{
+					value: 0,
+					label: __( '(No author)' ),
+				},
+			];
+		}
+
+		return [ ...currentAuthor, ...fetchedAuthors ];
+	}, [ authors, value ] );
+
+	return (
+		<ComboboxControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Author' ) }
+			options={ authorOptions }
+			value={ value?.id }
+			onFilterValueChange={ debounce( setFilterValue, 300 ) }
+			onChange={ onChange }
+			allowReset={ false }
+			isLoading={ isLoading }
+		/>
+	);
+}
+
 function PostAuthorEdit( {
 	isSelected,
 	context: { postType, postId, queryId },
@@ -38,22 +114,30 @@ function PostAuthorEdit( {
 	setAttributes,
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { authorId, authorDetails, authors, supportsAuthor } = useSelect(
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const { authorDetails, canAssignAuthor, supportsAuthor } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getUser, getUsers, getPostType } =
+			const { getEditedEntityRecord, getUser, getPostType } =
 				select( coreStore );
-			const _authorId = getEditedEntityRecord(
+			const currentPost = getEditedEntityRecord(
 				'postType',
 				postType,
 				postId
-			)?.author;
+			);
+			const authorId = currentPost?.author;
 
 			return {
-				authorId: _authorId,
-				authorDetails: _authorId ? getUser( _authorId ) : null,
-				authors: getUsers( AUTHORS_QUERY ),
+				authorDetails: authorId
+					? getUser( authorId, { context: 'view' } )
+					: null,
 				supportsAuthor:
 					getPostType( postType )?.supports?.author ?? false,
+				canAssignAuthor: currentPost?._links?.[
+					'wp:action-assign-author'
+				]
+					? true
+					: false,
 			};
 		},
 		[ postType, postId ]
@@ -61,8 +145,15 @@ function PostAuthorEdit( {
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
-		attributes;
+	const {
+		textAlign,
+		showAvatar,
+		showBio,
+		byline,
+		isLink,
+		linkTarget,
+		avatarSize,
+	} = attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
 	if ( authorDetails?.avatar_urls ) {
@@ -80,24 +171,14 @@ function PostAuthorEdit( {
 		} ),
 	} );
 
-	const authorOptions = authors?.length
-		? authors.map( ( { id, name } ) => {
-				return {
-					value: id,
-					label: name,
-				};
-		  } )
-		: [];
-
 	const handleSelect = ( nextAuthorId ) => {
 		editEntityRecord( 'postType', postType, postId, {
 			author: nextAuthorId,
 		} );
 	};
 
-	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
 	const showAuthorControl =
-		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
+		!! postId && ! isDescendentOfQueryLoop && canAssignAuthor;
 
 	if ( ! supportsAuthor && postType !== undefined ) {
 		return (
@@ -114,46 +195,59 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<VStack
-						spacing={ 4 }
-						className="wp-block-post-author__inspector-settings"
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							avatarSize: 48,
+							showAvatar: true,
+							isLink: false,
+							linkTarget: '_self',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ showAuthorControl && (
+						<div style={ { gridColumn: '1 / -1' } }>
+							<AuthorCombobox
+								value={ authorDetails }
+								onChange={ handleSelect }
+							/>
+						</div>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show avatar' ) }
+						isShownByDefault
+						hasValue={ () => ! showAvatar }
+						onDeselect={ () =>
+							setAttributes( { showAvatar: true } )
+						}
 					>
-						{ showAuthorControl &&
-							( ( showCombobox && (
-								<ComboboxControl
-									__next40pxDefaultSize
-									__nextHasNoMarginBottom
-									label={ __( 'Author' ) }
-									options={ authorOptions }
-									value={ authorId }
-									onChange={ handleSelect }
-									allowReset={ false }
-								/>
-							) ) || (
-								<SelectControl
-									__next40pxDefaultSize
-									__nextHasNoMarginBottom
-									label={ __( 'Author' ) }
-									value={ authorId }
-									options={ authorOptions }
-									onChange={ handleSelect }
-								/>
-							) ) }
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show avatar' ) }
 							checked={ showAvatar }
 							onChange={ () =>
-								setAttributes( { showAvatar: ! showAvatar } )
+								setAttributes( {
+									showAvatar: ! showAvatar,
+								} )
 							}
 						/>
-						{ showAvatar && (
+					</ToolsPanelItem>
+					{ showAvatar && (
+						<ToolsPanelItem
+							label={ __( 'Avatar size' ) }
+							isShownByDefault
+							hasValue={ () => avatarSize !== 48 }
+							onDeselect={ () =>
+								setAttributes( { avatarSize: 48 } )
+							}
+						>
 							<SelectControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Avatar size' ) }
-								value={ attributes.avatarSize }
+								value={ avatarSize }
 								options={ avatarSizes }
 								onChange={ ( size ) => {
 									setAttributes( {
@@ -161,15 +255,31 @@ function PostAuthorEdit( {
 									} );
 								} }
 							/>
-						) }
+						</ToolsPanelItem>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show bio' ) }
+						isShownByDefault
+						hasValue={ () => !! showBio }
+						onDeselect={ () =>
+							setAttributes( { showBio: undefined } )
+						}
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show bio' ) }
-							checked={ showBio }
+							checked={ !! showBio }
 							onChange={ () =>
 								setAttributes( { showBio: ! showBio } )
 							}
 						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Link author name to author page' ) }
+						isShownByDefault
+						hasValue={ () => !! isLink }
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Link author name to author page' ) }
@@ -178,7 +288,16 @@ function PostAuthorEdit( {
 								setAttributes( { isLink: ! isLink } )
 							}
 						/>
-						{ isLink && (
+					</ToolsPanelItem>
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Link target' ) }
+							isShownByDefault
+							hasValue={ () => linkTarget !== '_self' }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -189,9 +308,9 @@ function PostAuthorEdit( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
-						) }
-					</VStack>
-				</PanelBody>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			</InspectorControls>
 
 			<BlockControls group="block">
@@ -207,12 +326,8 @@ function PostAuthorEdit( {
 				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
-							width={ attributes.avatarSize }
-							src={
-								authorDetails.avatar_urls[
-									attributes.avatarSize
-								]
-							}
+							width={ avatarSize }
+							src={ authorDetails.avatar_urls[ avatarSize ] }
 							alt={ authorDetails.name }
 						/>
 					</div>

package/src/post-comments-form/form.js

@@ -106,7 +106,7 @@ const CommentsForm = ( { postId, postType } ) => {
 			return (
 				<Warning>
 					{ sprintf(
-						/* translators: 1: Post type (i.e. "post", "page") */
+						/* translators: %s: Post type (i.e. "post", "page") */
 						__(
 							'Post Comments Form block: Comments are not enabled for this post type (%s).'
 						),

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

@@ -248,6 +248,7 @@ export default function PostFeaturedImageEdit( {
 								isLink: false,
 								linkTarget: '_self',
 								rel: '',
+								sizeSlug: DEFAULT_MEDIA_SIZE_SLUG,
 							} );
 						} }
 						dropdownMenuProps={ dropdownMenuProps }

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

@@ -9,9 +9,10 @@ import clsx from 'clsx';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
 	SelectControl,
-	PanelBody,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -25,6 +26,11 @@ import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function PostNavigationLinkEdit( {
 	context: { postType },
 	attributes: {
@@ -94,73 +100,112 @@ export default function PostNavigationLinkEdit( {
 		return [ selectOption, ...taxonomyOptions ];
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							showTitle: false,
+							linkLabel: false,
+							arrow: 'none',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display the title as a link' ) }
-						help={ __(
-							'If you have entered a custom label, it will be prepended before the title.'
-						) }
-						checked={ !! showTitle }
-						onChange={ () =>
-							setAttributes( {
-								showTitle: ! showTitle,
-							} )
+						isShownByDefault
+						hasValue={ () => showTitle }
+						onDeselect={ () =>
+							setAttributes( { showTitle: false } )
 						}
-					/>
-					{ showTitle && (
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __(
-								'Include the label as part of the link'
+							label={ __( 'Display the title as a link' ) }
+							help={ __(
+								'If you have entered a custom label, it will be prepended before the title.'
 							) }
-							checked={ !! linkLabel }
+							checked={ !! showTitle }
 							onChange={ () =>
 								setAttributes( {
-									linkLabel: ! linkLabel,
+									showTitle: ! showTitle,
 								} )
 							}
 						/>
+					</ToolsPanelItem>
+					{ showTitle && (
+						<ToolsPanelItem
+							label={ __(
+								'Include the label as part of the link'
+							) }
+							isShownByDefault
+							hasValue={ () => !! linkLabel }
+							onDeselect={ () =>
+								setAttributes( { linkLabel: false } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __(
+									'Include the label as part of the link'
+								) }
+								checked={ !! linkLabel }
+								onChange={ () =>
+									setAttributes( {
+										linkLabel: ! linkLabel,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleGroupControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
 						label={ __( 'Arrow' ) }
-						value={ arrow }
-						onChange={ ( value ) => {
-							setAttributes( { arrow: value } );
-						} }
-						help={ __(
-							'A decorative arrow for the next and previous link.'
-						) }
-						isBlock
+						isShownByDefault
+						hasValue={ () => arrow !== 'none' }
+						onDeselect={ () => setAttributes( { arrow: 'none' } ) }
 					>
-						<ToggleGroupControlOption
-							value="none"
-							label={ _x(
-								'None',
-								'Arrow option for Next/Previous link'
-							) }
-						/>
-						<ToggleGroupControlOption
-							value="arrow"
-							label={ _x(
-								'Arrow',
-								'Arrow option for Next/Previous link'
-							) }
-						/>
-						<ToggleGroupControlOption
-							value="chevron"
-							label={ _x(
-								'Chevron',
-								'Arrow option for Next/Previous link'
+						<ToggleGroupControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Arrow' ) }
+							value={ arrow }
+							onChange={ ( value ) => {
+								setAttributes( { arrow: value } );
+							} }
+							help={ __(
+								'A decorative arrow for the next and previous link.'
 							) }
-						/>
-					</ToggleGroupControl>
-				</PanelBody>
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="none"
+								label={ _x(
+									'None',
+									'Arrow option for Next/Previous link'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="arrow"
+								label={ _x(
+									'Arrow',
+									'Arrow option for Next/Previous link'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="chevron"
+								label={ _x(
+									'Chevron',
+									'Arrow option for Next/Previous link'
+								) }
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl

package/src/rss/index.php

@@ -46,7 +46,8 @@ function render_block_core_rss( $attributes ) {
 	}
 
 	foreach ( $rss_items as $item ) {
-		$title = esc_html( trim( strip_tags( $item->get_title() ) ) );
+		$title = esc_html( trim( strip_tags( html_entity_decode( $item->get_title() ) ) ) );
+
 		if ( empty( $title ) ) {
 			$title = __( '(no title)' );
 		}

package/src/search/edit.js

@@ -480,7 +480,7 @@ export default function SearchEdit( {
 											key={ widthValue }
 											value={ widthValue }
 											label={ sprintf(
-												/* translators: Percentage value. */
+												/* translators: %d: Percentage value. */
 												__( '%d%%' ),
 												widthValue
 											) }