@wordpress/block-library 7.1.0 → 7.3.0

package/src/navigation-link/index.php

@@ -197,6 +197,14 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	}
 
 	$html .= '</span>';
+
+	// Add description if available.
+	if ( ! empty( $attributes['description'] ) ) {
+		$html .= '<span class="wp-block-navigation-item__description">';
+		$html .= wp_kses_post( $attributes['description'] );
+		$html .= '</span>';
+	}
+
 	$html .= '</a>';
 	// End anchor tag content.
 

package/src/navigation-link/style.scss

@@ -8,4 +8,10 @@
 		word-break: normal;
 		overflow-wrap: break-word;
 	}
+
+	// Hide the description by default.
+	// If a theme opts-in to show descriptions, they will need to provide styles for them.
+	.wp-block-navigation-item__description {
+		display: none;
+	}
 }

package/src/navigation-submenu/block.json

@@ -52,6 +52,7 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
+		"maxNestingLevel",
 		"openSubmenusOnClick",
 		"style"
 	],

package/src/navigation-submenu/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, pull } from 'lodash';
+import { escape, without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,8 +55,6 @@ const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
 };
 
-const MAX_NESTING = 5;
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -293,7 +291,7 @@ export default function NavigationSubmenuEdit( {
 		url,
 		opensInNewTab,
 	};
-	const { showSubmenuIcon, openSubmenusOnClick } = context;
+	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const {
@@ -351,7 +349,7 @@ export default function NavigationSubmenuEdit( {
 			return {
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, name ).length >=
-					MAX_NESTING,
+					maxNestingLevel,
 				isTopLevelItem:
 					getBlockParentsByBlockName( clientId, name ).length === 0,
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
@@ -503,9 +501,9 @@ export default function NavigationSubmenuEdit( {
 	// Always use overlay colors for submenus.
 	const innerBlocksColors = getColors( context, true );
 
-	if ( isAtMaxNesting ) {
-		pull( ALLOWED_BLOCKS, 'core/navigation-submenu' );
-	}
+	const allowedBlocks = isAtMaxNesting
+		? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
+		: ALLOWED_BLOCKS;
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -528,7 +526,7 @@ export default function NavigationSubmenuEdit( {
 			},
 		},
 		{
-			allowedBlocks: ALLOWED_BLOCKS,
+			allowedBlocks,
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: true,
 

package/src/paragraph/style.scss

@@ -28,11 +28,6 @@
 	font-style: normal;
 }
 
-p {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
-}
-
 // Prevent the dropcap from breaking out of the box when a background is applied.
 p.has-drop-cap.has-background {
 	overflow: hidden;

package/src/post-author/index.php

@@ -30,7 +30,6 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
 	$classes = array_merge(
-		isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
 		isset( $attributes['textAlign'] ) ? array( 'has-text-align-' . $attributes['textAlign'] ) : array()
 	);

package/src/post-comment/edit.js

@@ -8,7 +8,7 @@ import { blockDefault } from '@wordpress/icons';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 const ALLOWED_BLOCKS = [
-	'core/comment-author-avatar',
+	'core/avatar',
 	'core/comment-author-name',
 	'core/comment-content',
 	'core/comment-date',
@@ -16,7 +16,7 @@ const ALLOWED_BLOCKS = [
 	'core/comment-reply-link',
 ];
 const TEMPLATE = [
-	[ 'core/comment-author-avatar' ],
+	[ 'core/avatar' ],
 	[ 'core/comment-author-name' ],
 	[ 'core/comment-date' ],
 	[ 'core/comment-content' ],

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

@@ -34,6 +34,8 @@ export default function PostCommentsFormEdit( {
 		} ),
 	} );
 
+	const isInSiteEditor = postType === undefined || postId === undefined;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -45,7 +47,7 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ ! commentStatus && (
+				{ ! commentStatus && ! isInSiteEditor && (
 					<Warning>
 						{ __(
 							'Post Comments Form block: comments are not enabled for this post type.'
@@ -53,7 +55,7 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ 'open' !== commentStatus && (
+				{ 'open' !== commentStatus && ! isInSiteEditor && (
 					<Warning>
 						{ sprintf(
 							/* translators: 1: Post type (i.e. "post", "page") */
@@ -65,7 +67,8 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ 'open' === commentStatus && __( 'Post Comments Form' ) }
+				{ ( 'open' === commentStatus || isInSiteEditor ) &&
+					__( 'Post Comments Form' ) }
 			</div>
 		</>
 	);

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

@@ -29,7 +29,7 @@
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img",
+			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},

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

@@ -26,7 +26,10 @@ const TEMPLATE = [
 ];
 
 function PostTemplateInnerBlocks() {
-	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	const innerBlocksProps = useInnerBlocksProps(
+		{ className: 'wp-block-post' },
+		{ template: TEMPLATE }
+	);
 	return <li { ...innerBlocksProps } />;
 }
 
@@ -38,6 +41,9 @@ function PostTemplateBlockPreview( {
 } ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
+		props: {
+			className: 'wp-block-post',
+		},
 	} );
 
 	const handleOnClick = () => {

package/src/post-terms/edit.js

@@ -12,6 +12,7 @@ import {
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
+	useBlockDisplayInformation,
 } from '@wordpress/block-editor';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -25,6 +26,7 @@ import usePostTerms from './use-post-terms';
 
 export default function PostTermsEdit( {
 	attributes,
+	clientId,
 	context,
 	setAttributes,
 } ) {
@@ -46,6 +48,7 @@ export default function PostTermsEdit( {
 		term: selectedTerm,
 	} );
 	const hasPost = postId && postType;
+	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -54,7 +57,7 @@ export default function PostTermsEdit( {
 	} );
 
 	if ( ! hasPost || ! term ) {
-		return <div { ...blockProps }>{ __( 'Post Terms' ) }</div>;
+		return <div { ...blockProps }>{ blockInformation.title }</div>;
 	}
 
 	return (

package/src/post-terms/variations.js

@@ -2,14 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { postCategories as icon } from '@wordpress/icons';
+import { postCategories, postTerms } from '@wordpress/icons';
 
 const variations = [
 	{
 		name: 'category',
 		title: __( 'Post Categories' ),
 		description: __( "Display a post's categories." ),
-		icon,
+		icon: postCategories,
 		isDefault: true,
 		attributes: { term: 'category' },
 		isActive: ( blockAttributes ) => blockAttributes.term === 'category',
@@ -19,7 +19,7 @@ const variations = [
 		name: 'post_tag',
 		title: __( 'Post Tags' ),
 		description: __( "Display a post's tags." ),
-		icon,
+		icon: postTerms,
 		attributes: { term: 'post_tag' },
 		isActive: ( blockAttributes ) => blockAttributes.term === 'post_tag',
 	},

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={

package/src/pullquote/style.scss

@@ -46,11 +46,6 @@
 	text-align: right;
 }
 
-// .is-style-solid-color is deprecated.
-.wp-block-pullquote:not(.is-style-solid-color) {
-	background: none;
-}
-
 // .is-style-solid-color is deprecated.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;

package/src/query/variations.js

@@ -66,6 +66,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-date' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -81,6 +82,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-excerpt' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -100,6 +102,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -119,6 +122,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},

package/src/query-no-results/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/query-no-results",
+	"title": "No results",
+	"category": "theme",
+	"description": "Contains the block elements used to render content when no query results are found.",
+	"parent": [ "core/query" ],
+	"textdomain": "default",
+	"usesContext": [ "queryId", "query" ],
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		}
+	}
+}

package/src/query-no-results/edit.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add a text or blocks that will display when the query returns no results.'
+			),
+		},
+	],
+];
+
+export default function QueryNoResultsEdit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+	return (
+		<>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/query-no-results/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { loop as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};