@wordpress/block-library 6.1.0 → 7.0.0

package/src/image/edit.native.js

@@ -174,14 +174,22 @@ function LinkSettings( {
 	);
 }
 
+const UPLOAD_STATE_IDLE = 0;
+const UPLOAD_STATE_UPLOADING = 1;
+const UPLOAD_STATE_SUCCEEDED = 2;
+const UPLOAD_STATE_FAILED = 3;
+
 export class ImageEdit extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.state = {
 			isCaptionSelected: false,
+			uploadStatus: UPLOAD_STATE_IDLE,
 		};
 
+		this.replacedFeaturedImage = false;
+
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
 			this
 		);
@@ -245,7 +253,7 @@ export class ImageEdit extends Component {
 		// this action will only exist if the user pressed the trash button on the block holder
 		if (
 			hasAction( 'blocks.onRemoveBlockCheckUpload' ) &&
-			this.state.isUploadInProgress
+			this.state.uploadStatus === UPLOAD_STATE_UPLOADING
 		) {
 			doAction(
 				'blocks.onRemoveBlockCheckUpload',
@@ -255,13 +263,44 @@ export class ImageEdit extends Component {
 	}
 
 	componentDidUpdate( previousProps ) {
-		const { image, attributes, setAttributes } = this.props;
+		const {
+			image,
+			attributes,
+			setAttributes,
+			featuredImageId,
+		} = this.props;
 		if ( ! previousProps.image && image ) {
 			const url =
 				getUrlForSlug( image, attributes?.sizeSlug ) ||
 				image.source_url;
 			setAttributes( { url } );
 		}
+
+		const { id } = attributes;
+		const { id: previousId } = previousProps.attributes;
+
+		// The media changed and the previous media was set as the Featured Image,
+		// we must keep track of the previous media's featured status to act on it
+		// once the new media has a finalized ID.
+		if (
+			!! id &&
+			id !== previousId &&
+			!! featuredImageId &&
+			featuredImageId === previousId
+		) {
+			this.replacedFeaturedImage = true;
+		}
+
+		// The media changed and now has a finalized ID (e.g. upload completed), we
+		// should attempt to replace the featured image if applicable.
+		if (
+			this.replacedFeaturedImage &&
+			!! image &&
+			this.canImageBeFeatured()
+		) {
+			this.replacedFeaturedImage = false;
+			setFeaturedImage( id );
+		}
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -289,7 +328,7 @@ export class ImageEdit extends Component {
 	onImagePressed() {
 		const { attributes, image } = this.props;
 
-		if ( this.state.isUploadInProgress ) {
+		if ( this.state.uploadStatus === UPLOAD_STATE_UPLOADING ) {
 			requestImageUploadCancelDialog( attributes.id );
 		} else if (
 			attributes.id &&
@@ -314,8 +353,8 @@ export class ImageEdit extends Component {
 			setAttributes( { url: payload.mediaUrl } );
 		}
 
-		if ( ! this.state.isUploadInProgress ) {
-			this.setState( { isUploadInProgress: true } );
+		if ( this.state.uploadStatus !== UPLOAD_STATE_UPLOADING ) {
+			this.setState( { uploadStatus: UPLOAD_STATE_UPLOADING } );
 		}
 	}
 
@@ -323,21 +362,21 @@ export class ImageEdit extends Component {
 		const { setAttributes } = this.props;
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaServerId } );
-		this.setState( { isUploadInProgress: false } );
+		this.setState( { uploadStatus: UPLOAD_STATE_SUCCEEDED } );
 	}
 
 	finishMediaUploadWithFailure( payload ) {
 		const { setAttributes } = this.props;
 
 		setAttributes( { id: payload.mediaId } );
-		this.setState( { isUploadInProgress: false } );
+		this.setState( { uploadStatus: UPLOAD_STATE_FAILED } );
 	}
 
 	mediaUploadStateReset() {
 		const { setAttributes } = this.props;
 
 		setAttributes( { id: null, url: null } );
-		this.setState( { isUploadInProgress: false } );
+		this.setState( { uploadStatus: UPLOAD_STATE_IDLE } );
 	}
 
 	updateImageURL( url ) {
@@ -550,6 +589,23 @@ export class ImageEdit extends Component {
 		return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
 	}
 
+	/**
+	 * Featured images must be set to a successfully uploaded self-hosted image,
+	 * which has an ID.
+	 *
+	 * @return {boolean} Boolean indicating whether or not the current may be set as featured.
+	 */
+	canImageBeFeatured() {
+		const {
+			attributes: { id },
+		} = this.props;
+		return (
+			typeof id !== 'undefined' &&
+			this.state.uploadStatus !== UPLOAD_STATE_UPLOADING &&
+			this.state.uploadStatus !== UPLOAD_STATE_FAILED
+		);
+	}
+
 	render() {
 		const { isCaptionSelected } = this.state;
 		const {
@@ -588,13 +644,7 @@ export class ImageEdit extends Component {
 			selectedSizeOption = 'full';
 		}
 
-		// By default, it's only possible to set images that have been uploaded to a site's library as featured.
-		// The 'canImageBeFeatured' check filters out images that haven't been uploaded based on the following:
-		// - Images that are embedded in a post but are uploaded elsewhere have an id of 'undefined'.
-		// - Image that are uploading or have failed to upload are given a temporary negative ID.
-		const canImageBeFeatured =
-			typeof attributes.id !== 'undefined' && attributes.id > 0;
-
+		const canImageBeFeatured = this.canImageBeFeatured();
 		const isFeaturedImage =
 			canImageBeFeatured && featuredImageId === attributes.id;
 

package/src/image/index.php

@@ -20,7 +20,7 @@ function render_block_core_image( $attributes, $content ) {
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
 		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
-		if ( ! strpos( $content, $data_id_attribute ) ) {
+		if ( false === strpos( $content, $data_id_attribute ) ) {
 			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
 		}
 	}

package/src/image/style.scss

@@ -2,8 +2,6 @@
 	margin: 0 0 1em 0;
 
 	img {
-		height: auto;
-		max-width: 100%;
 		vertical-align: bottom;
 	}
 

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

@@ -1,7 +1,13 @@
 /**
  * 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';
 
@@ -10,11 +16,29 @@ import Clipboard from '@react-native-clipboard/clipboard';
  */
 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' );
@@ -67,7 +91,7 @@ describe( 'Image Block', () => {
 			</a>
 		<figcaption>Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -93,7 +117,7 @@ describe( 'Image Block', () => {
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 		<figcaption>Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -119,7 +143,7 @@ describe( 'Image Block', () => {
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 		<figcaption>Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -152,7 +176,7 @@ describe( 'Image Block', () => {
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 		<figcaption>Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -192,7 +216,7 @@ describe( 'Image Block', () => {
 			</a>
 		<figcaption>Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -216,7 +240,7 @@ describe( 'Image Block', () => {
 			</a>
 		<figcaption>Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -247,7 +271,7 @@ describe( 'Image Block', () => {
 			<figcaption>Mountain</figcaption>
 		</figure>
 		<!-- /wp:image -->`;
-		const screen = initializeEditor( { initialHtml } );
+		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
@@ -267,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

@@ -60,6 +60,7 @@ 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';
@@ -83,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';
@@ -204,6 +206,7 @@ export const __experimentalGetCoreBlocks = () => [
 	termDescription,
 	queryTitle,
 	postAuthorName,
+	postAuthorBiography,
 ];
 
 /**
@@ -242,35 +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,
-								commentsPagination,
-								commentsPaginationNext,
-								commentsPaginationNumbers,
-								commentsPaginationPrevious,
-								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/index.php

@@ -86,14 +86,14 @@ function render_block_core_latest_comments( $attributes = array() ) {
 
 			$author_markup = '';
 			if ( $author_url ) {
-				$author_markup .= '<a class="wp-block-latest-comments__comment-author" href="' . esc_url( $author_url ) . '">' . esc_html( get_comment_author( $comment ) ) . '</a>';
+				$author_markup .= '<a class="wp-block-latest-comments__comment-author" href="' . esc_url( $author_url ) . '">' . get_comment_author( $comment ) . '</a>';
 			} else {
-				$author_markup .= '<span class="wp-block-latest-comments__comment-author">' . esc_html( get_comment_author( $comment ) ) . '</span>';
+				$author_markup .= '<span class="wp-block-latest-comments__comment-author">' . get_comment_author( $comment ) . '</span>';
 			}
 
 			// `_draft_or_post_title` calls `esc_html()` so we don't need to wrap that call in
 			// `esc_html`.
-			$post_title = '<a class="wp-block-latest-comments__comment-link" href="' . esc_url( get_comment_link( $comment ) ) . '">' . esc_html( wp_latest_comments_draft_or_post_title( $comment->comment_post_ID ) ) . '</a>';
+			$post_title = '<a class="wp-block-latest-comments__comment-link" href="' . esc_url( get_comment_link( $comment ) ) . '">' . wp_latest_comments_draft_or_post_title( $comment->comment_post_ID ) . '</a>';
 
 			$list_items_markup .= sprintf(
 				/* translators: 1: author name (inside <a> or <span> tag, based on if they have a URL), 2: post title related to this comment */
@@ -106,7 +106,7 @@ function render_block_core_latest_comments( $attributes = array() ) {
 				$list_items_markup .= sprintf(
 					'<time datetime="%1$s" class="wp-block-latest-comments__comment-date">%2$s</time>',
 					esc_attr( get_comment_date( 'c', $comment ) ),
-					esc_html( date_i18n( get_option( 'date_format' ), get_comment_date( 'U', $comment ) ) )
+					date_i18n( get_option( 'date_format' ), get_comment_date( 'U', $comment ) )
 				);
 			}
 			$list_items_markup .= '</footer>';