@wordpress/block-library 6.0.23 → 7.0.0

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

@@ -1,19 +1,44 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, initializeEditor, getEditorHtml } from 'test/helpers';
+import {
+	act,
+	fireEvent,
+	initializeEditor,
+	getEditorHtml,
+	render,
+} from 'test/helpers';
 import { Image } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 /**
  * WordPress dependencies
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { apiFetch } from '@wordpress/data-controls';
+import {
+	setFeaturedImage,
+	sendMediaUpload,
+	subscribeMediaUpload,
+} from '@wordpress/react-native-bridge';
+import { select } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import '@wordpress/jest-console';
 
 /**
  * Internal dependencies
  */
 import { registerCoreBlocks } from '../..';
+import ImageEdit from '../edit';
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
 
 jest.mock( '@wordpress/data-controls', () => {
 	const dataControls = jest.requireActual( '@wordpress/data-controls' );
@@ -23,9 +48,22 @@ jest.mock( '@wordpress/data-controls', () => {
 	};
 } );
 
+/**
+ * Immediately invoke delayed functions. A better alternative would be using
+ * fake timers and test the delay itself. However, fake timers does not work
+ * with our custom waitFor implementation.
+ */
+jest.mock( 'lodash', () => {
+	const actual = jest.requireActual( 'lodash' );
+	return { ...actual, delay: ( cb ) => cb() };
+} );
+
 const apiFetchPromise = Promise.resolve( {} );
 apiFetch.mockImplementation( () => apiFetchPromise );
 
+const clipboardPromise = Promise.resolve( '' );
+Clipboard.getString.mockImplementation( () => clipboardPromise );
+
 beforeAll( () => {
 	registerCoreBlocks();
 
@@ -117,6 +155,8 @@ describe( 'Image Block', () => {
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		// Await asynchronous fetch of clipboard
+		await act( () => clipboardPromise );
 		fireEvent.changeText(
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
@@ -149,12 +189,16 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		// Await asynchronous fetch of clipboard
+		await act( () => clipboardPromise );
 		fireEvent.changeText(
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		// Await asynchronous fetch of clipboard
+		await act( () => clipboardPromise );
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
@@ -247,4 +291,129 @@ describe( 'Image Block', () => {
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
+
+	describe( "when replacing media for an image set as the post's featured image", () => {
+		function mockFeaturedMedia( featuredImageId ) {
+			jest.spyOn(
+				select( editorStore ),
+				'getEditedPostAttribute'
+			).mockImplementation( ( attributeName ) =>
+				attributeName === 'featured_media' ? featuredImageId : undefined
+			);
+		}
+
+		function mockGetMedia( media ) {
+			jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValueOnce(
+				media
+			);
+		}
+
+		it( 'does not prompt to replace featured image during a new image upload', () => {
+			// Arrange
+			const INITIAL_IMAGE = { id: 1, url: 'mock-url-1' };
+			const NEW_IMAGE_PENDING = { id: 2, url: 'mock-url-2' };
+			mockFeaturedMedia( INITIAL_IMAGE.id );
+			const screen = render( <ImageEdit attributes={ INITIAL_IMAGE } /> );
+
+			// Act
+			screen.update( <ImageEdit attributes={ NEW_IMAGE_PENDING } /> );
+			const MEDIA_UPLOAD_STATE_UPLOADING = 1;
+			sendMediaUpload( {
+				state: MEDIA_UPLOAD_STATE_UPLOADING,
+				mediaId: NEW_IMAGE_PENDING.id,
+				progress: 0.1,
+			} );
+
+			// Assert
+			expect( setFeaturedImage ).not.toHaveBeenCalled();
+		} );
+
+		it( 'does not prompt to replace featured image after a new image upload fails', () => {
+			// Arrange
+			const INITIAL_IMAGE = { id: 1, url: 'mock-url-1' };
+			const NEW_IMAGE_PENDING = { id: 2, url: 'mock-url-2' };
+			mockFeaturedMedia( INITIAL_IMAGE.id );
+			const screen = render(
+				<ImageEdit
+					attributes={ INITIAL_IMAGE }
+					setAttributes={ () => {} }
+				/>
+			);
+
+			// Act
+			screen.update(
+				<ImageEdit
+					attributes={ NEW_IMAGE_PENDING }
+					setAttributes={ () => {} }
+				/>
+			);
+			const MEDIA_UPLOAD_STATE_UPLOADING = 1;
+			sendMediaUpload( {
+				state: MEDIA_UPLOAD_STATE_UPLOADING,
+				mediaId: NEW_IMAGE_PENDING.id,
+				progress: 0.1,
+			} );
+			const MEDIA_UPLOAD_STATE_FAILED = 3;
+			sendMediaUpload( {
+				state: MEDIA_UPLOAD_STATE_FAILED,
+				mediaId: NEW_IMAGE_PENDING.id,
+			} );
+
+			// Assert
+			expect( setFeaturedImage ).not.toHaveBeenCalled();
+		} );
+
+		it( 'prompts to replace featured image after a new image upload succeeds', () => {
+			// Arrange
+			const INITIAL_IMAGE = { id: 1, url: 'mock-url-1' };
+			const NEW_IMAGE_PENDING = { id: 2, url: 'mock-url-2' };
+			const NEW_IMAGE_RESOLVED = { id: 3, url: 'mock-url-2' };
+			mockFeaturedMedia( INITIAL_IMAGE.id );
+			const screen = render( <ImageEdit attributes={ INITIAL_IMAGE } /> );
+
+			// Act
+			screen.update( <ImageEdit attributes={ NEW_IMAGE_PENDING } /> );
+			mockGetMedia( { id: NEW_IMAGE_RESOLVED.id } );
+			screen.update(
+				<ImageEdit
+					attributes={ NEW_IMAGE_RESOLVED }
+					setAttributes={ () => {} }
+				/>
+			);
+
+			// Assert
+			expect( setFeaturedImage ).toHaveBeenCalledTimes( 1 );
+			expect( setFeaturedImage ).toHaveBeenCalledWith(
+				NEW_IMAGE_RESOLVED.id
+			);
+		} );
+
+		it( 'prompts to replace featured image for a cached image', () => {
+			// Arrange
+			const INITIAL_IMAGE = { id: 1, url: 'mock-url-1' };
+			const NEW_IMAGE_RESOLVED = { id: 3, url: 'mock-url-2' };
+			mockFeaturedMedia( INITIAL_IMAGE.id );
+			const screen = render(
+				<ImageEdit
+					attributes={ INITIAL_IMAGE }
+					setAttributes={ () => {} }
+				/>
+			);
+
+			// Act
+			mockGetMedia( { id: NEW_IMAGE_RESOLVED.id } );
+			screen.update(
+				<ImageEdit
+					attributes={ NEW_IMAGE_RESOLVED }
+					setAttributes={ () => {} }
+				/>
+			);
+
+			// Assert
+			expect( setFeaturedImage ).toHaveBeenCalledTimes( 1 );
+			expect( setFeaturedImage ).toHaveBeenCalledWith(
+				NEW_IMAGE_RESOLVED.id
+			);
+		} );
+	} );
 } );

package/src/index.js

@@ -29,7 +29,11 @@ import * as commentDate from './comment-date';
 import * as commentEditLink from './comment-edit-link';
 import * as commentReplyLink from './comment-reply-link';
 import * as commentTemplate from './comment-template';
+import * as commentsPaginationPrevious from './comments-pagination-previous';
 import * as commentsQueryLoop from './comments-query-loop';
+import * as commentsPagination from './comments-pagination';
+import * as commentsPaginationNext from './comments-pagination-next';
+import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -55,6 +59,8 @@ import * as pattern from './pattern';
 import * as pageList from './page-list';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
+import * as postAuthorName from './post-author-name';
+import * as postAuthorBiography from './post-author-biography';
 import * as postComment from './post-comment';
 import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
@@ -78,6 +84,7 @@ import * as queryPaginationPrevious from './query-pagination-previous';
 import * as queryTitle from './query-title';
 import * as quote from './quote';
 import * as reusableBlock from './block';
+import * as readMore from './read-more';
 import * as rss from './rss';
 import * as search from './search';
 import * as separator from './separator';
@@ -198,6 +205,8 @@ export const __experimentalGetCoreBlocks = () => [
 	logInOut,
 	termDescription,
 	queryTitle,
+	postAuthorName,
+	postAuthorBiography,
 ];
 
 /**
@@ -236,31 +245,36 @@ export const registerCoreBlocks = (
  * __experimentalRegisterExperimentalCoreBlocks( settings );
  * ```
  */
-export const __experimentalRegisterExperimentalCoreBlocks =
-	process.env.GUTENBERG_PHASE === 2
-		? ( { enableFSEBlocks } = {} ) => {
-				[
-					// Experimental blocks.
-					homeLink,
+export const __experimentalRegisterExperimentalCoreBlocks = process.env
+	.IS_GUTENBERG_PLUGIN
+	? ( { enableFSEBlocks } = {} ) => {
+			[
+				// Experimental blocks.
+				homeLink,
 
-					// Full Site Editing blocks.
-					...( enableFSEBlocks
-						? [
-								commentAuthorAvatar,
-								commentAuthorName,
-								commentContent,
-								commentDate,
-								commentEditLink,
-								commentReplyLink,
-								commentTemplate,
-								commentsQueryLoop,
-								navigationArea,
-								postComment,
-								postCommentsCount,
-								postCommentsForm,
-								postCommentsLink,
-						  ]
-						: [] ),
-				].forEach( registerBlock );
-		  }
-		: undefined;
+				// Full Site Editing blocks.
+				...( enableFSEBlocks
+					? [
+							commentAuthorAvatar,
+							commentAuthorName,
+							commentContent,
+							commentDate,
+							commentEditLink,
+							commentReplyLink,
+							commentTemplate,
+							commentsQueryLoop,
+							commentsPagination,
+							commentsPaginationNext,
+							commentsPaginationNumbers,
+							commentsPaginationPrevious,
+							navigationArea,
+							postComment,
+							postCommentsCount,
+							postCommentsForm,
+							postCommentsLink,
+							readMore,
+					  ]
+					: [] ),
+			].forEach( registerBlock );
+	  }
+	: undefined;

package/src/latest-comments/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/latest-comments",
 	"title": "Latest Comments",

package/src/latest-comments/index.php

@@ -30,7 +30,7 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
 	if ( empty( $title ) ) {
 		$title = __( '(no title)' );
 	}
-	return esc_html( $title );
+	return $title;
 }
 
 /**

package/src/latest-posts/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/latest-posts",
 	"title": "Latest Posts",

package/src/latest-posts/edit.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RawHTML } from '@wordpress/element';
 import {
 	BaseControl,
 	PanelBody,
@@ -55,6 +54,17 @@ const USERS_LIST_QUERY = {
 	context: 'view',
 };
 
+function getFeaturedImageDetails( post, size ) {
+	const image = get( post, [ '_embedded', 'wp:featuredmedia', '0' ] );
+
+	return {
+		url:
+			image?.media_details?.sizes?.[ size ]?.source_url ??
+			image?.source_url,
+		alt: image?.alt_text,
+	};
+}
+
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const {
 		postsToShow,
@@ -77,7 +87,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		addLinkToFeaturedImage,
 	} = attributes;
 	const {
-		imageSizeOptions,
+		imageSizes,
 		latestPosts,
 		defaultImageWidth,
 		defaultImageHeight,
@@ -85,11 +95,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		authorList,
 	} = useSelect(
 		( select ) => {
-			const { getEntityRecords, getMedia, getUsers } = select(
-				coreStore
-			);
-			const { getSettings } = select( blockEditorStore );
-			const { imageSizes, imageDimensions } = getSettings();
+			const { getEntityRecords, getUsers } = select( coreStore );
+			const settings = select( blockEditorStore ).getSettings();
 			const catIds =
 				categories && categories.length > 0
 					? categories.map( ( cat ) => cat.id )
@@ -101,59 +108,28 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					order,
 					orderby: orderBy,
 					per_page: postsToShow,
+					_embed: 'wp:featuredmedia',
 				},
 				( value ) => ! isUndefined( value )
 			);
 
-			const posts = getEntityRecords(
-				'postType',
-				'post',
-				latestPostsQuery
-			);
-
 			return {
 				defaultImageWidth: get(
-					imageDimensions,
+					settings.imageDimensions,
 					[ featuredImageSizeSlug, 'width' ],
 					0
 				),
 				defaultImageHeight: get(
-					imageDimensions,
+					settings.imageDimensions,
 					[ featuredImageSizeSlug, 'height' ],
 					0
 				),
-				imageSizeOptions: imageSizes
-					.filter( ( { slug } ) => slug !== 'full' )
-					.map( ( { name, slug } ) => ( {
-						value: slug,
-						label: name,
-					} ) ),
-				latestPosts: ! Array.isArray( posts )
-					? posts
-					: posts.map( ( post ) => {
-							if ( ! post.featured_media ) return post;
-
-							const image = getMedia( post.featured_media );
-							let url = get(
-								image,
-								[
-									'media_details',
-									'sizes',
-									featuredImageSizeSlug,
-									'source_url',
-								],
-								null
-							);
-							if ( ! url ) {
-								url = get( image, 'source_url', null );
-							}
-							const featuredImageInfo = {
-								url,
-								// eslint-disable-next-line camelcase
-								alt: image?.alt_text,
-							};
-							return { ...post, featuredImageInfo };
-					  } ),
+				imageSizes: settings.imageSizes,
+				latestPosts: getEntityRecords(
+					'postType',
+					'post',
+					latestPostsQuery
+				),
 				categoriesList: getEntityRecords(
 					'taxonomy',
 					'category',
@@ -171,6 +147,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			selectedAuthor,
 		]
 	);
+
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => slug !== 'full' )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
 	const categorySuggestions =
 		categoriesList?.reduce(
 			( accumulator, category ) => ( {
@@ -299,7 +282,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								} )
 							}
 						/>
-						<BaseControl className="block-editor-image-alignment-control__row">
+						<BaseControl className="editor-latest-posts-image-alignment-control">
 							<BaseControl.VisualLabel>
 								{ __( 'Image alignment' ) }
 							</BaseControl.VisualLabel>
@@ -451,11 +434,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 						'';
 
 					const {
-						featuredImageInfo: {
-							url: imageSourceUrl,
-							alt: featuredImageAlt,
-						} = {},
-					} = post;
+						url: imageSourceUrl,
+						alt: featuredImageAlt,
+					} = getFeaturedImageDetails( post, featuredImageSizeSlug );
 					const imageClasses = classnames( {
 						'wp-block-latest-posts__featured-image': true,
 						[ `align${ featuredImageAlign }` ]: !! featuredImageAlign,
@@ -509,12 +490,18 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 									) }
 								</div>
 							) }
-							<a href={ post.link } rel="noreferrer noopener">
-								{ titleTrimmed ? (
-									<RawHTML>{ titleTrimmed }</RawHTML>
-								) : (
-									__( '(no title)' )
-								) }
+							<a
+								href={ post.link }
+								rel="noreferrer noopener"
+								dangerouslySetInnerHTML={
+									!! titleTrimmed
+										? {
+												__html: titleTrimmed,
+										  }
+										: undefined
+								}
+							>
+								{ ! titleTrimmed ? __( '(no title)' ) : null }
 							</a>
 							{ displayAuthor && currentAuthor && (
 								<div className="wp-block-latest-posts__post-author">
@@ -541,11 +528,12 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								) }
 							{ displayPostContent &&
 								displayPostContentRadio === 'full_post' && (
-									<div className="wp-block-latest-posts__post-full-content">
-										<RawHTML key="html">
-											{ post.content.raw.trim() }
-										</RawHTML>
-									</div>
+									<div
+										className="wp-block-latest-posts__post-full-content"
+										dangerouslySetInnerHTML={ {
+											__html: post.content.raw.trim(),
+										} }
+									/>
 								) }
 						</li>
 					);

package/src/latest-posts/editor.scss

@@ -12,3 +12,13 @@
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 	margin-bottom: 20px;
 }
+
+.editor-latest-posts-image-alignment-control {
+	.components-base-control__label {
+		display: block;
+	}
+
+	.components-toolbar {
+		border-radius: $radius-block-ui;
+	}
+}

package/src/latest-posts/index.php

@@ -60,6 +60,11 @@ function render_block_core_latest_posts( $attributes ) {
 
 	foreach ( $recent_posts as $post ) {
 		$post_link = esc_url( get_permalink( $post ) );
+		$title     = get_the_title( $post );
+
+		if ( ! $title ) {
+			$title = __( '(no title)' );
+		}
 
 		$list_items_markup .= '<li>';
 
@@ -81,30 +86,27 @@ function render_block_core_latest_posts( $attributes ) {
 				$post,
 				$attributes['featuredImageSizeSlug'],
 				array(
-					'style' => $image_style,
+					'style' => esc_attr( $image_style ),
 				)
 			);
 			if ( $attributes['addLinkToFeaturedImage'] ) {
 				$featured_image = sprintf(
-					'<a href="%1$s">%2$s</a>',
-					$post_link,
+					'<a href="%1$s" aria-label="%2$s">%3$s</a>',
+					esc_url( $post_link ),
+					esc_attr( $title ),
 					$featured_image
 				);
 			}
 			$list_items_markup .= sprintf(
 				'<div class="%1$s">%2$s</div>',
-				$image_classes,
+				esc_attr( $image_classes ),
 				$featured_image
 			);
 		}
 
-		$title = get_the_title( $post );
-		if ( ! $title ) {
-			$title = __( '(no title)' );
-		}
 		$list_items_markup .= sprintf(
 			'<a href="%1$s">%2$s</a>',
-			$post_link,
+			esc_url( $post_link ),
 			$title
 		);
 
@@ -117,7 +119,7 @@ function render_block_core_latest_posts( $attributes ) {
 			if ( ! empty( $author_display_name ) ) {
 				$list_items_markup .= sprintf(
 					'<div class="wp-block-latest-posts__post-author">%1$s</div>',
-					esc_html( $byline )
+					$byline
 				);
 			}
 		}
@@ -126,7 +128,7 @@ function render_block_core_latest_posts( $attributes ) {
 			$list_items_markup .= sprintf(
 				'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
 				esc_attr( get_the_date( 'c', $post ) ),
-				esc_html( get_the_date( '', $post ) )
+				get_the_date( '', $post )
 			);
 		}
 
@@ -148,7 +150,7 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
 			&& isset( $attributes['displayPostContentRadio'] ) && 'full_post' === $attributes['displayPostContentRadio'] ) {
 
-			$post_content = wp_kses_post( html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) ) );
+			$post_content = html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) );
 
 			if ( post_password_required( $post ) ) {
 				$post_content = __( 'This content is password protected.' );
@@ -156,7 +158,7 @@ function render_block_core_latest_posts( $attributes ) {
 
 			$list_items_markup .= sprintf(
 				'<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
-				$post_content
+				wp_kses_post( $post_content )
 			);
 		}
 

package/src/latest-posts/style.scss

@@ -73,15 +73,3 @@
 		text-align: center;
 	}
 }
-
-.block-editor-image-alignment-control__row {
-	.components-base-control__field {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.components-base-control__label {
-			margin-bottom: 0;
-		}
-	}
-}

package/src/list/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/list",
 	"title": "List",
@@ -51,7 +52,11 @@
 		},
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",