@wordpress/block-library 7.1.1 → 7.2.0

package/src/navigation/use-navigation-entities.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import {
-	store as coreStore,
-	__experimentalUseEntityRecords as useEntityRecords,
-} from '@wordpress/core-data';
+import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
 
 /**
  * @typedef {Object} NavigationEntitiesData
@@ -29,82 +25,50 @@ import {
  * @return { NavigationEntitiesData } the entity data.
  */
 export default function useNavigationEntities( menuId ) {
-	return {
-		...usePageEntities(),
-		...useMenuEntities(),
-		...useMenuItemEntities( menuId ),
-	};
-}
+	const {
+		records: menus,
+		isResolving: isResolvingMenus,
+		hasResolved: hasResolvedMenus,
+	} = useEntityRecords( 'root', 'menu', { per_page: -1, context: 'view' } );
 
-function useMenuEntities() {
-	const { records, isResolving, hasResolved } = useEntityRecords(
+	const {
+		records: pages,
+		isResolving: isResolvingPages,
+		hasResolved: hasResolvedPages,
+	} = useEntityRecords( 'postType', 'page', {
+		parent: 0,
+		order: 'asc',
+		orderby: 'id',
+		per_page: -1,
+		context: 'view',
+	} );
+
+	const {
+		records: menuItems,
+		hasResolved: hasResolvedMenuItems,
+	} = useEntityRecords(
 		'root',
-		'menu',
-		{ per_page: -1, context: 'view' }
+		'menuItem',
+		{
+			menus: menuId,
+			per_page: -1,
+			context: 'view',
+		},
+		{ enabled: !! menuId }
 	);
 
 	return {
-		menus: records,
-		isResolvingMenus: isResolving,
-		hasResolvedMenus: hasResolved,
-		hasMenus: !! ( hasResolved && records?.length ),
-	};
-}
-
-function useMenuItemEntities( menuId ) {
-	const { menuItems, hasResolvedMenuItems } = useSelect(
-		( select ) => {
-			const { getMenuItems, hasFinishedResolution } = select( coreStore );
-
-			const hasSelectedMenu = menuId !== undefined;
-			const menuItemsParameters = hasSelectedMenu
-				? [
-						{
-							menus: menuId,
-							per_page: -1,
-							context: 'view',
-						},
-				  ]
-				: undefined;
+		pages,
+		isResolvingPages,
+		hasResolvedPages,
+		hasPages: !! ( hasResolvedPages && pages?.length ),
 
-			return {
-				menuItems: hasSelectedMenu
-					? getMenuItems( ...menuItemsParameters )
-					: undefined,
-				hasResolvedMenuItems: hasSelectedMenu
-					? hasFinishedResolution(
-							'getMenuItems',
-							menuItemsParameters
-					  )
-					: false,
-			};
-		},
-		[ menuId ]
-	);
+		menus,
+		isResolvingMenus,
+		hasResolvedMenus,
+		hasMenus: !! ( hasResolvedMenus && menus?.length ),
 
-	return {
 		menuItems,
 		hasResolvedMenuItems,
 	};
 }
-
-function usePageEntities() {
-	const { records, isResolving, hasResolved } = useEntityRecords(
-		'postType',
-		'page',
-		{
-			parent: 0,
-			order: 'asc',
-			orderby: 'id',
-			per_page: -1,
-			context: 'view',
-		}
-	);
-
-	return {
-		pages: records,
-		isResolvingPages: isResolving,
-		hasResolvedPages: hasResolved,
-		hasPages: !! ( hasResolved && records?.length ),
-	};
-}

package/src/navigation-link/edit.js

@@ -18,6 +18,7 @@ import {
 	ToolbarButton,
 	Tooltip,
 	ToolbarGroup,
+	KeyboardShortcuts,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -265,6 +266,64 @@ export const updateNavigationLinkBlockAttributes = (
 	} );
 };
 
+const useIsInvalidLink = ( kind, type, id ) => {
+	const isPostType =
+		kind === 'post-type' || type === 'post' || type === 'page';
+	const hasId = Number.isInteger( id );
+	const postStatus = useSelect(
+		( select ) => {
+			if ( ! isPostType ) {
+				return null;
+			}
+			const { getEntityRecord } = select( coreStore );
+			return getEntityRecord( 'postType', type, id )?.status;
+		},
+		[ isPostType, type, id ]
+	);
+
+	// Check Navigation Link validity if:
+	// 1. Link is 'post-type'.
+	// 2. It has an id.
+	// 3. It's neither null, nor undefined, as valid items might be either of those while loading.
+	// If those conditions are met, check if
+	// 1. The post status is published.
+	// 2. The Navigation Link item has no label.
+	// If either of those is true, invalidate.
+	const isInvalid =
+		isPostType && hasId && postStatus && 'trash' === postStatus;
+	const isDraft = 'draft' === postStatus;
+
+	return [ isInvalid, isDraft ];
+};
+
+const useMissingText = ( type ) => {
+	let missingText = '';
+
+	switch ( type ) {
+		case 'post':
+			/* translators: label for missing post in navigation link block */
+			missingText = __( 'Select post' );
+			break;
+		case 'page':
+			/* translators: label for missing page in navigation link block */
+			missingText = __( 'Select page' );
+			break;
+		case 'category':
+			/* translators: label for missing category in navigation link block */
+			missingText = __( 'Select category' );
+			break;
+		case 'tag':
+			/* translators: label for missing tag in navigation link block */
+			missingText = __( 'Select tag' );
+			break;
+		default:
+			/* translators: label for missing values in navigation link block */
+			missingText = __( 'Add link' );
+	}
+
+	return missingText;
+};
+
 /**
  * Removes HTML from a given string.
  * Note the does not provide XSS protection or otherwise attempt
@@ -329,6 +388,7 @@ export default function NavigationLinkEdit( {
 	clientId,
 } ) {
 	const {
+		id,
 		label,
 		type,
 		opensInNewTab,
@@ -339,6 +399,8 @@ export default function NavigationLinkEdit( {
 		kind,
 	} = attributes;
 
+	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
+
 	const link = {
 		url,
 		opensInNewTab,
@@ -589,36 +651,23 @@ export default function NavigationLinkEdit( {
 		onKeyDown,
 	} );
 
-	if ( ! url ) {
+	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
 	}
 
 	const classes = classnames( 'wp-block-navigation-item__content', {
-		'wp-block-navigation-link__placeholder': ! url,
+		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
 	} );
 
-	let missingText = '';
-	switch ( type ) {
-		case 'post':
-			/* translators: label for missing post in navigation link block */
-			missingText = __( 'Select post' );
-			break;
-		case 'page':
-			/* translators: label for missing page in navigation link block */
-			missingText = __( 'Select page' );
-			break;
-		case 'category':
-			/* translators: label for missing category in navigation link block */
-			missingText = __( 'Select category' );
-			break;
-		case 'tag':
-			/* translators: label for missing tag in navigation link block */
-			missingText = __( 'Select tag' );
-			break;
-		default:
-			/* translators: label for missing values in navigation link block */
-			missingText = __( 'Add link' );
-	}
+	const missingText = useMissingText( type, isInvalid, isDraft );
+	/* translators: Whether the navigation link is Invalid or a Draft. */
+	const placeholderText = `(${
+		isInvalid ? __( 'Invalid' ) : __( 'Draft' )
+	})`;
+	const tooltipText =
+		isInvalid || isDraft
+			? __( 'This item has been deleted, or is a draft' )
+			: __( 'This item is missing a link' );
 
 	return (
 		<Fragment>
@@ -677,46 +726,81 @@ export default function NavigationLinkEdit( {
 					{ /* eslint-enable */ }
 					{ ! url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
-							<Tooltip
-								position="top center"
-								text={ __( 'This item is missing a link' ) }
-							>
-								<span>{ missingText }</span>
+							<Tooltip position="top center" text={ tooltipText }>
+								<>
+									<span>{ missingText }</span>
+									<span className="wp-block-navigation-link__missing_text-tooltip">
+										{ tooltipText }
+									</span>
+								</>
 							</Tooltip>
 						</div>
 					) : (
-						<RichText
-							ref={ ref }
-							identifier="label"
-							className="wp-block-navigation-item__label"
-							value={ label }
-							onChange={ ( labelValue ) =>
-								setAttributes( {
-									label: labelValue,
-								} )
-							}
-							onMerge={ mergeBlocks }
-							onReplace={ onReplace }
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( 'core/navigation-link' )
-								)
-							}
-							aria-label={ __( 'Navigation link text' ) }
-							placeholder={ itemLabelPlaceholder }
-							withoutInteractiveFormatting
-							allowedFormats={ [
-								'core/bold',
-								'core/italic',
-								'core/image',
-								'core/strikethrough',
-							] }
-							onClick={ () => {
-								if ( ! url ) {
-									setIsLinkOpen( true );
-								}
-							} }
-						/>
+						<>
+							{ ! isInvalid && ! isDraft && (
+								<RichText
+									ref={ ref }
+									identifier="label"
+									className="wp-block-navigation-item__label"
+									value={ label }
+									onChange={ ( labelValue ) =>
+										setAttributes( {
+											label: labelValue,
+										} )
+									}
+									onMerge={ mergeBlocks }
+									onReplace={ onReplace }
+									__unstableOnSplitAtEnd={ () =>
+										insertBlocksAfter(
+											createBlock(
+												'core/navigation-link'
+											)
+										)
+									}
+									aria-label={ __( 'Navigation link text' ) }
+									placeholder={ itemLabelPlaceholder }
+									withoutInteractiveFormatting
+									allowedFormats={ [
+										'core/bold',
+										'core/italic',
+										'core/image',
+										'core/strikethrough',
+									] }
+									onClick={ () => {
+										if ( ! url ) {
+											setIsLinkOpen( true );
+										}
+									} }
+								/>
+							) }
+							{ ( isInvalid || isDraft ) && (
+								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
+									<KeyboardShortcuts
+										shortcuts={ {
+											enter: () =>
+												isSelected &&
+												setIsLinkOpen( true ),
+										} }
+									/>
+									<Tooltip
+										position="top center"
+										text={ tooltipText }
+									>
+										<>
+											<span>
+												{
+													/* Trim to avoid trailing white space when the placeholder text is not present */
+													`${ label } ${ placeholderText }`.trim()
+												}
+											</span>
+											<span className="wp-block-navigation-link__missing_text-tooltip">
+												{ tooltipText }
+											</span>
+										</>
+									</Tooltip>
+								</div>
+							) }
+						</>
 					) }
 					{ isLinkOpen && (
 						<Popover

package/src/navigation-link/editor.scss

@@ -55,7 +55,18 @@
 	}
 }
 
+.wp-block-navigation-link__invalid-item {
+	color: #000;
+}
 
+.wp-block-navigation-link__missing_text-tooltip {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+}
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
  */

package/src/post-date/edit.js

@@ -6,14 +6,18 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useRef } from '@wordpress/element';
-import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import {
+	dateI18n,
+	__experimentalGetSettings as getDateSettings,
+} from '@wordpress/date';
 import {
 	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
+	__experimentalDateFormatPicker as DateFormatPicker,
 } from '@wordpress/block-editor';
 import {
 	Dropdown,
@@ -22,58 +26,57 @@ import {
 	ToggleControl,
 	DateTimePicker,
 	PanelBody,
-	CustomSelectControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
 
 export default function PostDateEdit( {
 	attributes: { textAlign, format, isLink },
-	context: { postId, postType, queryId },
+	context: { postId, postType: postTypeSlug, queryId },
 	setAttributes,
 } ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+	const timeRef = useRef();
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
+	const dateSettings = getDateSettings();
+	const [ siteFormat = dateSettings.formats.date ] = useEntityProp(
+		'root',
+		'site',
+		'date_format'
+	);
+	const [ siteTimeFormat = dateSettings.formats.time ] = useEntityProp(
+		'root',
+		'site',
+		'time_format'
+	);
 	const [ date, setDate ] = useEntityProp(
 		'postType',
-		postType,
+		postTypeSlug,
 		'date',
 		postId
 	);
-	const settings = __experimentalGetSettings();
-	// To know if the current time format is a 12 hour time, look for "a".
-	// Also make sure this "a" is not escaped by a "/".
-	const is12Hour = /a(?!\\)/i.test(
-		settings.formats.time
-			.toLowerCase() // Test only for the lower case "a".
-			.replace( /\\\\/g, '' ) // Replace "//" with empty strings.
-			.split( '' )
-			.reverse()
-			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
-	);
-	const formatOptions = Object.values( settings.formats ).map(
-		( formatOption ) => ( {
-			key: formatOption,
-			name: dateI18n( formatOption, date ),
-		} )
+	const postType = useSelect(
+		( select ) =>
+			postTypeSlug
+				? select( coreStore ).getPostType( postTypeSlug )
+				: null,
+		[ postTypeSlug ]
 	);
-	const resolvedFormat = format || siteFormat || settings.formats.date;
-	const blockProps = useBlockProps( {
-		className: classnames( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
-
-	const timeRef = useRef();
 
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ timeRef }>
-			{ dateI18n( resolvedFormat, date ) }
+			{ dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
 		__( 'Post Date' )
 	);
+
 	if ( isLink && date ) {
 		postDate = (
 			<a
@@ -84,6 +87,7 @@ export default function PostDateEdit( {
 			</a>
 		);
 	}
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -93,7 +97,6 @@ export default function PostDateEdit( {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-
 				{ date && ! isDescendentOfQueryLoop && (
 					<ToolbarGroup>
 						<Dropdown
@@ -102,7 +105,9 @@ export default function PostDateEdit( {
 								<DateTimePicker
 									currentDate={ date }
 									onChange={ setDate }
-									is12Hour={ is12Hour }
+									is12Hour={ is12HourFormat(
+										siteTimeFormat
+									) }
 								/>
 							) }
 							renderToggle={ ( { isOpen, onToggle } ) => {
@@ -128,34 +133,40 @@ export default function PostDateEdit( {
 			</BlockControls>
 
 			<InspectorControls>
-				<PanelBody title={ __( 'Format settings' ) }>
-					<CustomSelectControl
-						hideLabelFromVision
-						label={ __( 'Date Format' ) }
-						options={ formatOptions }
-						onChange={ ( { selectedItem } ) =>
-							setAttributes( {
-								format: selectedItem.key,
-							} )
+				<PanelBody title={ __( 'Settings' ) }>
+					<DateFormatPicker
+						format={ format }
+						defaultFormat={ siteFormat }
+						onChange={ ( nextFormat ) =>
+							setAttributes( { format: nextFormat } )
 						}
-						value={ formatOptions.find(
-							( option ) => option.key === resolvedFormat
-						) }
 					/>
-				</PanelBody>
-				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
-						label={ sprintf(
-							// translators: %s: Name of the post type e.g: "post".
-							__( 'Link to %s' ),
-							postType
-						) }
+						label={
+							postType?.labels.singular_name
+								? sprintf(
+										// translators: %s: Name of the post type e.g: "post".
+										__( 'Link to %s' ),
+										postType.labels.singular_name.toLowerCase()
+								  )
+								: __( 'Link to post' )
+						}
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
 				</PanelBody>
 			</InspectorControls>
+
 			<div { ...blockProps }>{ postDate }</div>
 		</>
 	);
 }
+
+export function is12HourFormat( format ) {
+	// To know if the time format is a 12 hour time, look for any of the 12 hour
+	// format characters: 'a', 'A', 'g', and 'h'. The character must be
+	// unescaped, i.e. not preceded by a '\'. Coincidentally, 'aAgh' is how I
+	// feel when working with regular expressions.
+	// https://www.php.net/manual/en/datetime.format.php
+	return /(?:^|[^\\])[aAgh]/.test( format );
+}

package/src/post-date/index.php

@@ -21,7 +21,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$post_ID            = $block->context['postId'];
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	$formatted_date     = get_the_date( isset( $attributes['format'] ) ? $attributes['format'] : '', $post_ID );
+	$formatted_date     = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}

package/src/post-date/test/edit.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import { is12HourFormat } from '../edit';
+
+describe( 'is12HourFormat', () => {
+	test.each( [
+		[ '', false ],
+		[ 'H:i', false ],
+		[ 'g:i A', true ],
+		[ 'g:i a', true ],
+		[ 'h:i', true ],
+		[ '\\g\\r\\e\\a\\t', false ],
+	] )( 'is12HourFormat( %p ) = %p', ( format, expected ) => {
+		expect( is12HourFormat( format ) ).toBe( expected );
+	} );
+} );

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

@@ -179,7 +179,15 @@ function PostFeaturedImageDisplay( {
 		) : (
 			<img
 				src={ mediaUrl }
-				alt={ media.alt_text || __( 'Featured image' ) }
+				alt={
+					media.alt_text
+						? sprintf(
+								// translators: %s: The image's alt text.
+								__( 'Featured image: %s' ),
+								media.alt_text
+						  )
+						: __( 'Featured image' )
+				}
 				style={ { height, objectFit: height && scale } }
 			/>
 		);

package/src/post-featured-image/index.php

@@ -20,7 +20,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$post_ID = $block->context['postId'];
 
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug );
+	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
+	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, array( 'alt' => $post_title ) );
 	if ( ! $featured_image ) {
 		return '';
 	}

package/src/pullquote/edit.js

@@ -14,6 +14,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,9 +22,7 @@ import { createBlock } from '@wordpress/blocks';
 import { Figure } from './figure';
 import { BlockQuote } from './blockquote';
 
-/**
- * Internal dependencies
- */
+const isWebPlatform = Platform.OS === 'web';
 
 function PullQuoteEdit( {
 	attributes,
@@ -70,6 +69,8 @@ function PullQuoteEdit( {
 					{ shouldShowCitation && (
 						<RichText
 							identifier="citation"
+							tagName={ isWebPlatform ? 'cite' : undefined }
+							style={ { display: 'block' } }
 							value={ citation }
 							aria-label={ __( 'Pullquote citation text' ) }
 							placeholder={