@wordpress/block-library 8.7.0 → 8.9.0

package/src/post-excerpt/edit.js

@@ -56,7 +56,7 @@ export default function PostExcerptEditor( {
 				return true;
 			}
 			return !! select( coreStore ).getPostType( postType )?.supports
-				.excerpt;
+				?.excerpt;
 		},
 		[ postType ]
 	);

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 }

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

@@ -97,7 +97,7 @@ export default function PostFeaturedImageEdit( {
 		} ) );
 
 	const blockProps = useBlockProps( {
-		style: { width, height, aspectRatio },
+		style: { width, height, aspectRatio, maxWidth: '100%' },
 	} );
 	const borderProps = useBorderProps( attributes );
 
@@ -110,7 +110,8 @@ export default function PostFeaturedImageEdit( {
 				) }
 				withIllustration={ true }
 				style={ {
-					...blockProps.style,
+					height: !! aspectRatio && '100%',
+					width: !! aspectRatio && '100%',
 					...borderProps.style,
 				} }
 			>
@@ -145,9 +146,9 @@ export default function PostFeaturedImageEdit( {
 						label={
 							postType?.labels.singular_name
 								? sprintf(
-										// translators: %s: Name of the post type e.g: "post".
+										// translators: %s: Name of the post type e.g: "Page".
 										__( 'Link to %s' ),
-										postType.labels.singular_name.toLowerCase()
+										postType.labels.singular_name
 								  )
 								: __( 'Link to post' )
 						}
@@ -183,10 +184,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,36 +208,10 @@ 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,
-		height: ( !! aspectRatio && '100%' ) || height,
+		height: aspectRatio ? '100%' : height,
 		width: !! aspectRatio && '100%',
 		objectFit: !! ( height || aspectRatio ) && scale,
 	};

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

@@ -92,7 +92,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! $height && ! $width && ! $aspect_ratio ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height . 'max-width:100%;' ) );
 	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }

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

@@ -14,6 +14,13 @@
 		}
 	},
 	"supports": {
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": 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/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,
+	typeInRichText,
+	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,29 @@ 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 preformattedTextInput = await screen.findByPlaceholderText(
+			'Write preformatted text…'
+		);
+		typeInRichText( preformattedTextInput, 'A great statement.' );
+		fireEvent( preformattedTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		typeInRichText( preformattedTextInput, 'Again' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:preformatted -->
+		<pre class="wp-block-preformatted">A great statement.<br>Again</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,65 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+	getEditorHtml,
+	fireEvent,
+	within,
+	waitFor,
+	typeInRichText,
+} 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' );
+		typeInRichText( pullquoteTextInput, 'A great statement.' );
+		fireEvent( pullquoteTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		typeInRichText( pullquoteTextInput, 'Again' );
+
+		const citationTextInput =
+			within( citationBlock ).getByPlaceholderText( 'Add citation' );
+		typeInRichText( citationTextInput, 'A person', {
+			finalSelectionStart: 2,
+			finalSelectionEnd: 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>Again</p><cite>A <br>person</cite></blockquote></figure>
+		<!-- /wp:pullquote -->"
+	` );
+	} );
+} );

package/src/query/deprecated.js

@@ -6,12 +6,15 @@ import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import cleanEmptyObject from '../utils/clean-empty-object';
+import { unlock } from '../private-apis';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;

package/src/query/edit/inspector-controls/create-new-post-link.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+
+const CreateNewPostLink = ( {
+	attributes: { query: { postType } = {} } = {},
+} ) => {
+	if ( ! postType ) return null;
+	const newPostUrl = addQueryArgs( 'post-new.php', {
+		post_type: postType,
+	} );
+	return (
+		<div className="wp-block-query__create-new-link">
+			{ createInterpolateElement(
+				__( '<a>Add new post</a>' ),
+				// eslint-disable-next-line jsx-a11y/anchor-has-content
+				{ a: <a href={ newPostUrl } /> }
+			) }
+		</div>
+	);
+};
+
+export default CreateNewPostLink;

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

@@ -12,7 +12,10 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 
@@ -24,6 +27,8 @@ import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
+import CreateNewPostLink from './create-new-post-link';
+import { unlock } from '../../../private-apis';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
@@ -32,11 +37,10 @@ import {
 	useTaxonomies,
 } from '../../utils';
 
-export default function QueryInspectorControls( {
-	attributes,
-	setQuery,
-	setDisplayLayout,
-} ) {
+const { BlockInfo } = unlock( blockEditorPrivateApis );
+
+export default function QueryInspectorControls( props ) {
+	const { attributes, setQuery, setDisplayLayout } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -127,6 +131,9 @@ export default function QueryInspectorControls( {
 
 	return (
 		<>
+			<BlockInfo>
+				<CreateNewPostLink { ...props } />
+			</BlockInfo>
 			{ showSettingsPanel && (
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>

package/src/query/edit/pattern-selection-modal.js

@@ -62,6 +62,7 @@ export default function PatternSelectionModal( {
 			overlayClassName="block-library-query-pattern__selection-modal"
 			title={ __( 'Choose a pattern' ) }
 			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+			isFullScreen={ true }
 		>
 			<div className="block-library-query-pattern__selection-content">
 				<div className="block-library-query-pattern__selection-search">

package/src/query/editor.scss

@@ -20,20 +20,17 @@
 }
 
 .block-library-query-pattern__selection-modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	.components-modal__frame {
-		@include break-small() {
-			width: calc(100% - #{$grid-unit-20 * 2});
-			height: calc(100% - #{$header-height * 2});
-		}
 
-		@include break-medium() {
-			width: $break-medium - $grid-unit-20 * 2;
+	.block-editor-block-patterns-list {
+		column-count: 2;
+		column-gap: $grid-unit-30;
+
+		@include break-wide() {
+			column-count: 3;
 		}
 
-		@include break-large() {
-			height: 70%;
+		.block-editor-block-patterns-list__list-item {
+			break-inside: avoid-column;
 		}
 	}
 

package/src/query/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { loop as icon } from '@wordpress/icons';
-import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -13,7 +12,6 @@ import edit from './edit';
 import save from './save';
 import variations from './variations';
 import deprecated from './deprecated';
-import queryInspectorControls from './hooks';
 
 const { name } = metadata;
 export { metadata, name };
@@ -26,8 +24,4 @@ export const settings = {
 	deprecated,
 };
 
-export const init = () => {
-	addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );
-
-	return initBlock( { name, metadata, settings } );
-};
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+	getEditorHtml,
+	fireEvent,
+	within,
+	waitFor,
+	typeInRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+
+setupCoreBlocks();
+
+describe( 'Quote', () => {
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Quote' );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		// A layout event must be explicitly dispatched in BlockList component,
+		// otherwise the inner blocks are not rendered.
+		fireEvent(
+			within( quoteBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 320,
+					},
+				},
+			}
+		);
+		// Await inner blocks to be rendered
+		const citationBlock = await waitFor( () =>
+			screen.getByPlaceholderText( 'Add citation' )
+		);
+
+		// Act
+		fireEvent.press( quoteBlock );
+		// screen.debug();
+		let quoteTextInput =
+			within( quoteBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( quoteTextInput, 'A great statement.' );
+		fireEvent( quoteTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		quoteTextInput =
+			within( quoteBlock ).getAllByPlaceholderText(
+				'Start writing…'
+			)[ 1 ];
+		typeInRichText( quoteTextInput, 'Again.' );
+		const citationTextInput =
+			within( citationBlock ).getByPlaceholderText( 'Add citation' );
+		typeInRichText( citationTextInput, 'A person', {
+			finalSelectionStart: 2,
+			finalSelectionEnd: 2,
+		} );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:quote -->
+		<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+		<p>A great statement.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>Again.</p>
+		<!-- /wp:paragraph --><cite>A <br>person</cite></blockquote>
+		<!-- /wp:quote -->"
+	` );
+	} );
+} );

package/src/search/index.php

@@ -116,7 +116,7 @@ function render_block_core_search( $attributes ) {
 
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
-					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
+					<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
 				</svg>';
 		}
 

package/src/search/style.scss

@@ -45,6 +45,9 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	// !important used to forcibly prevent undesired application of
 	// text-decoration styles on the input field.
 	text-decoration: unset !important;
+
+	// Hides a redundant extra search icon on Mobile Safari.
+	appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only {

package/src/shortcode/editor.scss

@@ -1,13 +1,14 @@
 [data-type="core/shortcode"] {
-	.block-editor-plain-text {
-		max-height: 250px;
-	}
-
 	&.components-placeholder {
 		min-height: 0;
 	}
 }
 
+// The editing view for the Shortcode block is equivalent to block UI.
+// Therefore we increase specificity to avoid theme styles bleeding in.
 .blocks-shortcode__textarea {
-	@include input-control;
+	box-sizing: border-box;
+	max-height: 250px;
+	resize: none;
+	@include editor-input-reset();
 }

package/src/site-logo/block.json

@@ -4,7 +4,7 @@
 	"name": "core/site-logo",
 	"title": "Site Logo",
 	"category": "theme",
-	"description": "Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.",
+	"description": "Display an image to represent this site. Update this block and the changes apply everywhere.",
 	"textdomain": "default",
 	"attributes": {
 		"width": {