@wordpress/block-library 8.5.0 → 8.7.0

package/src/paragraph/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Paragraph block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Paragraph block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block transforms to List block 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Example text</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block transforms to Preformatted block 1`] = `
+"<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Example text</pre>
+<!-- /wp:preformatted -->"
+`;
+
+exports[`Paragraph block transforms to Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
+<!-- /wp:pullquote -->"
+`;
+
+exports[`Paragraph block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Example text</pre>
+<!-- /wp:verse -->"
+`;

package/src/paragraph/test/transforms.native.js

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Paragraph';
+const initialHtml = `
+<!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph -->`;
+
+// NOTE: Paragraph block can be transformed to Buttons block in web,
+// however this transform is not supported in the native version.
+const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Heading',
+	'Preformatted',
+	'Pullquote',
+	'Verse',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/post-author/index.php

@@ -32,7 +32,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	$link        = get_author_posts_url( $author_id );
 	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
-		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s">%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;

package/src/post-content/edit.js

@@ -58,8 +58,12 @@ function EditableContent( { context = {} } ) {
 
 function Content( props ) {
 	const { context: { queryId, postType, postId } = {} } = props;
-	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
+	if ( userCanEdit === undefined ) {
+		return null;
+	}
+
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 
 	return isEditable ? (

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

@@ -84,8 +84,7 @@ add_action( 'init', 'register_block_core_post_excerpt' );
  * Returns 100 because 100 is the max length in the setting.
  */
 if ( is_admin() ||
-	defined( 'REST_REQUEST' ) ||
-	'REST_REQUEST' ) {
+	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
 	add_filter(
 		'excerpt_length',
 		function() {

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

@@ -96,10 +96,6 @@ const DimensionControls = ( {
 							label: __( 'Square' ),
 							value: '1',
 						},
-						{
-							label: __( '16:10' ),
-							value: '16/10',
-						},
 						{
 							label: __( '16:9' ),
 							value: '16/9',
@@ -112,10 +108,6 @@ const DimensionControls = ( {
 							label: __( '3:2' ),
 							value: '3/2',
 						},
-						{
-							label: __( '10:16' ),
-							value: '10/16',
-						},
 						{
 							label: __( '9:16' ),
 							value: '9/16',
@@ -212,7 +204,7 @@ const DimensionControls = ( {
 			{ !! imageSizeOptions.length && (
 				<ToolsPanelItem
 					hasValue={ () => !! sizeSlug }
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					onDeselect={ () =>
 						setAttributes( { sizeSlug: undefined } )
 					}
@@ -224,7 +216,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

@@ -139,7 +139,7 @@ export default function PostFeaturedImageEdit( {
 				imageSizeOptions={ imageSizeOptions }
 			/>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={

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-featured-image/style.scss

@@ -3,6 +3,7 @@
 	margin-right: 0;
 	a {
 		display: block;
+		height: 100%;
 	}
 	img {
 		max-width: 100%;

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

@@ -15,6 +15,22 @@
 	},
 	"supports": {
 		"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/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__/transforms.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preformatted block transforms to Code block 1`] = `
+"<!-- wp:code -->
+<pre class="wp-block-code"><code>Some <em>preformatted</em> text...<br />And more!</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Preformatted block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Preformatted block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Preformatted block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Some <em>preformatted</em> text...<br />And more!</p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Preformatted';
+const initialHtml = `
+<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br>And more!</pre>
+<!-- /wp:preformatted -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/pullquote/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -435,11 +434,8 @@ const v2 = {
 			// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
 			// as there is no expectation that themes create classes that set border colors.
 		} else if ( mainColor ) {
-			const colors = get(
-				select( blockEditorStore ).getSettings(),
-				[ 'colors' ],
-				[]
-			);
+			const colors =
+				select( blockEditorStore ).getSettings().colors ?? [];
 			const colorObject = getColorObjectByAttributeValues(
 				colors,
 				mainColor

package/src/pullquote/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pullquote block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Pullquote block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Pullquote block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">One of the hardest things to do in technology is disrupt yourself.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Matt Mullenweg</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Pullquote block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Matt Mullenweg</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Pullquote block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph --><cite>Matt Mullenweg</cite></blockquote>
+<!-- /wp:quote -->"
+`;

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Pullquote';
+const initialHtml = `
+<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote -->`;
+
+const transformsWithInnerBlocks = [ 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Heading',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );