@wordpress/block-library 8.6.0 → 8.8.0

package/src/post-date/edit.js

@@ -76,12 +76,15 @@ export default function PostDateEdit( {
 		[ postTypeSlug ]
 	);
 
+	const dateLabel =
+		displayType === 'date' ? __( 'Post Date' ) : __( 'Post Modified Date' );
+
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
 			{ dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
-		__( 'Post Date' )
+		dateLabel
 	);
 
 	if ( isLink && date ) {

package/src/post-date/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/post-date/variations.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { postDate } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'post-date-modified',
+		title: __( 'Post Modified Date' ),
+		description: __( "Display a post's last updated date." ),
+		attributes: { displayType: 'modified' },
+		scope: [ 'block', 'inserter' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.displayType === 'modified',
+		icon: postDate,
+	},
+];
+
+export default variations;

package/src/post-excerpt/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
@@ -18,12 +18,15 @@ import {
 } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
+const ELLIPSIS = '…';
+
 export default function PostExcerptEditor( {
 	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
 	setAttributes,
@@ -32,13 +35,41 @@ export default function PostExcerptEditor( {
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
-	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
-
 	const [
 		rawExcerpt,
 		setExcerpt,
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
+
+	/**
+	 * Check if the post type supports excerpts.
+	 * Add an exception and return early for the "page" post type,
+	 * which is registered without support for the excerpt UI,
+	 * but supports saving the excerpt to the database.
+	 * See: https://core.trac.wordpress.org/browser/branches/6.1/src/wp-includes/post.php#L65
+	 * Without this exception, users that have excerpts saved to the database will
+	 * not be able to edit the excerpts.
+	 */
+	const postTypeSupportsExcerpts = useSelect(
+		( select ) => {
+			if ( postType === 'page' ) {
+				return true;
+			}
+			return !! select( coreStore ).getPostType( postType )?.supports
+				.excerpt;
+		},
+		[ postType ]
+	);
+
+	/**
+	 * The excerpt is editable if:
+	 * - The user can edit the post
+	 * - It is not a descendent of a Query Loop block
+	 * - The post type supports excerpts
+	 */
+	const isEditable =
+		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -65,6 +96,7 @@ export default function PostExcerptEditor( {
 		);
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
+
 	if ( ! postType || ! postId ) {
 		return (
 			<>
@@ -123,14 +155,13 @@ export default function PostExcerptEditor( {
 	 * The excerpt length setting needs to be applied to both
 	 * the raw and the rendered excerpt depending on which is being used.
 	 */
-	const rawOrRenderedExcerpt = !! renderedExcerpt
-		? strippedRenderedExcerpt
-		: rawExcerpt;
+	const rawOrRenderedExcerpt = (
+		rawExcerpt || strippedRenderedExcerpt
+	).trim();
 
 	let trimmedExcerpt = '';
 	if ( wordCountType === 'words' ) {
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.trim()
 			.split( ' ', excerptLength )
 			.join( ' ' );
 	} else if ( wordCountType === 'characters_excluding_spaces' ) {
@@ -143,7 +174,6 @@ export default function PostExcerptEditor( {
 		 * so that the spaces are excluded from the word count.
 		 */
 		const excerptWithSpaces = rawOrRenderedExcerpt
-			.trim()
 			.split( '', excerptLength )
 			.join( '' );
 
@@ -152,14 +182,15 @@ export default function PostExcerptEditor( {
 			excerptWithSpaces.replaceAll( ' ', '' ).length;
 
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.trim()
 			.split( '', excerptLength + numberOfSpaces )
 			.join( '' );
 	} else if ( wordCountType === 'characters_including_spaces' ) {
-		trimmedExcerpt = rawOrRenderedExcerpt.trim().split( '', excerptLength );
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.split( '', excerptLength )
+			.join( '' );
 	}
 
-	trimmedExcerpt = trimmedExcerpt + '...';
+	const isTrimmed = trimmedExcerpt !== rawOrRenderedExcerpt;
 
 	const excerptContent = isEditable ? (
 		<RichText
@@ -168,7 +199,9 @@ export default function PostExcerptEditor( {
 			value={
 				isSelected
 					? rawOrRenderedExcerpt
-					: ( trimmedExcerpt !== '...' ? trimmedExcerpt : '' ) ||
+					: ( ! isTrimmed
+							? rawOrRenderedExcerpt
+							: trimmedExcerpt + ELLIPSIS ) ||
 					  __( 'No post excerpt found' )
 			}
 			onChange={ setExcerpt }
@@ -176,9 +209,9 @@ export default function PostExcerptEditor( {
 		/>
 	) : (
 		<p className={ excerptClassName }>
-			{ trimmedExcerpt !== '...'
-				? trimmedExcerpt
-				: __( 'No post excerpt found' ) }
+			{ ! isTrimmed
+				? rawOrRenderedExcerpt || __( 'No post excerpt found' )
+				: trimmedExcerpt + ELLIPSIS }
 		</p>
 	);
 	return (
@@ -208,7 +241,6 @@ export default function PostExcerptEditor( {
 						value={ excerptLength }
 						onChange={ ( value ) => {
 							setAttributes( { excerptLength: value } );
-							setExcerpt();
 						} }
 						min="10"
 						max="100"

package/src/post-excerpt/index.php

@@ -25,11 +25,11 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	* wp_trim_words is used instead.
 	*/
 	$excerpt_length = $attributes['excerptLength'];
+	$excerpt        = get_the_excerpt( $block->context['postId'] );
 	if ( isset( $excerpt_length ) ) {
-		$excerpt = wp_trim_words( get_the_excerpt(), $excerpt_length );
-	} else {
-		$excerpt = get_the_excerpt();
+		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
 	}
+
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
 	$filter_excerpt_more = function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';

package/src/post-excerpt/style.scss

@@ -1,4 +1,5 @@
-.wp-block-post-excerpt {
+// Lowest specificity on wrapper margins to avoid overriding layout styles.
+:where(.wp-block-post-excerpt) {
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

package/src/post-featured-image/dimension-controls.js

@@ -70,6 +70,10 @@ const DimensionControls = ( {
 		} );
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
+
+	const showScaleControl =
+		height || ( aspectRatio && aspectRatio !== 'auto' );
+
 	return (
 		<InspectorControls group="dimensions">
 			<ToolsPanelItem
@@ -170,7 +174,7 @@ const DimensionControls = ( {
 					units={ units }
 				/>
 			</ToolsPanelItem>
-			{ ( height || aspectRatio ) && (
+			{ showScaleControl && (
 				<ToolsPanelItem
 					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
@@ -204,7 +208,7 @@ const DimensionControls = ( {
 			{ !! imageSizeOptions.length && (
 				<ToolsPanelItem
 					hasValue={ () => !! sizeSlug }
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					onDeselect={ () =>
 						setAttributes( { sizeSlug: undefined } )
 					}
@@ -216,7 +220,7 @@ const DimensionControls = ( {
 				>
 					<SelectControl
 						__nextHasNoMarginBottom
-						label={ __( 'Image size' ) }
+						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
 						onChange={ ( nextSizeSlug ) =>

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

@@ -183,10 +183,15 @@ export default function PostFeaturedImageEdit( {
 	let image;
 
 	/**
-	 * A post featured image block placed in a query loop
-	 * does not have image replacement or upload options.
+	 * A Post Featured Image block should not have image replacement
+	 * or upload options in the following cases:
+	 * - Is placed in a Query Loop. This is a consious decision to
+	 * prevent content editing of different posts in Query Loop, and
+	 * this could change in the future.
+	 * - Is in a context where it does not have a postId (for example
+	 * in a template or template part).
 	 */
-	if ( ! featuredImage && isDescendentOfQueryLoop ) {
+	if ( ! featuredImage && ( isDescendentOfQueryLoop || ! postId ) ) {
 		return (
 			<>
 				{ controls }
@@ -202,32 +207,6 @@ export default function PostFeaturedImageEdit( {
 		);
 	}
 
-	/**
-	 * A post featured image placed in a block template, outside a query loop,
-	 * does not have a postId and will always be a placeholder image.
-	 * It does not have image replacement, upload, or link options.
-	 */
-	if ( ! featuredImage && ! postId ) {
-		return (
-			<>
-				<DimensionControls
-					clientId={ clientId }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					imageSizeOptions={ imageSizeOptions }
-				/>
-				<div { ...blockProps }>
-					{ placeholder() }
-					<Overlay
-						attributes={ attributes }
-						setAttributes={ setAttributes }
-						clientId={ clientId }
-					/>
-				</div>
-			</>
-		);
-	}
-
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,

package/src/post-featured-image/editor.scss

@@ -12,6 +12,7 @@
 		justify-content: center;
 		align-items: center;
 		padding: 0;
+		display: flex;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {

package/src/post-template/block.json

@@ -18,7 +18,7 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true,
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"__experimentalLayout": {
 			"allowEditing": false

package/src/post-template/style.scss

@@ -16,7 +16,7 @@
 		flex-wrap: wrap;
 		gap: 1.25em;
 
-		li {
+		> li {
 			margin: 0;
 			width: 100%;
 		}

package/src/post-time-to-read/block.json

@@ -14,7 +14,30 @@
 		}
 	},
 	"supports": {
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"html": false,
-		"multiple": false
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	}
 }

package/src/post-time-to-read/edit.js

@@ -93,7 +93,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 					} }
 				/>
 			</BlockControls>
-			<p { ...blockProps }>{ minutesToReadString }</p>
+			<div { ...blockProps }>{ minutesToReadString }</div>
 		</>
 	);
 }

package/src/post-time-to-read/index.php

@@ -32,8 +32,8 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
 
 	$minutes_to_read_string = sprintf(
-		/* translators: %d is the number of minutes the post will take to read. */
-		_n( '%d minute', '%d minutes', $minutes_to_read ),
+		/* translators: %s is the number of minutes the post will take to read. */
+		_n( '%s minute', '%s minutes', $minutes_to_read ),
 		$minutes_to_read
 	);
 
@@ -42,7 +42,7 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
 		$minutes_to_read_string
 	);

package/src/post-time-to-read/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-time-to-read {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
+exports[`Preformatted should match snapshot when content is empty 1`] = `
 <View
   style={
     [
@@ -46,7 +46,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
 </View>
 `;
 
-exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
+exports[`Preformatted should match snapshot when content is not empty 1`] = `
 <View
   style={
     [

package/src/preformatted/test/edit.native.js

@@ -1,14 +1,29 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	changeAndSelectTextOfRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import PreformattedEdit from '../edit';
 
-describe( 'core/more/edit/native', () => {
+setupCoreBlocks();
+
+describe( 'Preformatted', () => {
 	it( 'renders without crashing', () => {
 		const screen = render(
 			<PreformattedEdit
@@ -42,4 +57,32 @@ describe( 'core/more/edit/native', () => {
 		);
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
+
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Preformatted' );
+		const verseTextInput = await screen.findByPlaceholderText(
+			'Write preformatted text…'
+		);
+		const string = 'A great statement.';
+		changeAndSelectTextOfRichText( verseTextInput, string, {
+			selectionStart: string.length,
+			selectionEnd: string.length,
+		} );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:preformatted -->
+		<pre class="wp-block-preformatted">A great statement.<br></pre>
+		<!-- /wp:preformatted -->"
+	` );
+	} );
 } );

package/src/pullquote/style.scss

@@ -1,5 +1,4 @@
 .wp-block-pullquote {
-	margin: 0 0 1em 0;
 	padding: 3em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
@@ -25,6 +24,11 @@
 	}
 }
 
+// Lowest specificity to avoid overriding layout styles.
+:where(.wp-block-pullquote) {
+	margin: 0 0 1em 0;
+}
+
 // Ensure that we are reasonably specific to override theme defaults.
 .wp-block-pullquote.has-text-align-left blockquote {
 	text-align: left;

package/src/pullquote/test/edit.native.js

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+	getEditorHtml,
+	fireEvent,
+	within,
+	waitFor,
+	changeAndSelectTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+
+setupCoreBlocks();
+
+describe( 'Pullquote', () => {
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Pullquote' );
+		// Await inner blocks to be rendered
+		const citationBlock = await waitFor( () =>
+			screen.getByPlaceholderText( 'Add citation' )
+		);
+
+		// Act
+		const pullquoteBlock = getBlock( screen, 'Pullquote' );
+		fireEvent.press( pullquoteBlock );
+		const pullquoteTextInput =
+			within( pullquoteBlock ).getByPlaceholderText( 'Add quote' );
+		const string = 'A great statement.';
+		changeAndSelectTextOfRichText( pullquoteTextInput, string, {
+			selectionStart: string.length,
+			selectionEnd: string.length,
+		} );
+		fireEvent( pullquoteTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// TODO: Determine a way to type after pressing ENTER within the block.
+
+		const citationTextInput =
+			within( citationBlock ).getByPlaceholderText( 'Add citation' );
+		changeAndSelectTextOfRichText( citationTextInput, 'A person', {
+			selectionStart: 2,
+			selectionEnd: 2,
+		} );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:pullquote -->
+		<figure class="wp-block-pullquote"><blockquote><p>A great statement.<br></p><cite>A <br>person</cite></blockquote></figure>
+		<!-- /wp:pullquote -->"
+	` );
+	} );
+} );

package/src/query-title/index.php

@@ -28,12 +28,9 @@ function render_block_core_query_title( $attributes ) {
 	if ( $is_archive ) {
 		$show_prefix = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
 		if ( ! $show_prefix ) {
-			$filter_title = function( $title, $original_title ) {
-				return $original_title;
-			};
-			add_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			add_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 			$title = get_the_archive_title();
-			remove_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			remove_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 		} else {
 			$title = get_the_archive_title();
 		}

package/src/quote/block.json

@@ -29,6 +29,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,