Enable Post Featured Image to be set, unset and replaced (#27224)

* Enable Post Featured Image to be set, unset and replaced * change default alt text * replace icon with label
WordPress · Nov 24, 2020 · 08d56e3 · 08d56e3
1 parent e13857d
commit 08d56e3
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 19 deletions.
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -3,14 +3,29 @@
  */
 import { useEntityProp } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { Icon, ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	Icon,
+	ToggleControl,
+	PanelBody,
+	ToolbarGroup,
+	ToolbarButton,
+	withNotices,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	BlockControls,
+	MediaPlaceholder,
+	MediaReplaceFlow,
+	BlockIcon,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { postFeaturedImage as icon } from '@wordpress/icons';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { postFeaturedImage } from '@wordpress/icons';
 
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
 	<div className="post-featured-image_placeholder">
-		<Icon icon={ icon } />
+		<Icon icon={ postFeaturedImage } />
 		<p> { __( 'Featured Image' ) }</p>
 	</div>
 );
@@ -19,8 +34,10 @@ function PostFeaturedImageDisplay( {
 	attributes: { isLink },
 	setAttributes,
 	context: { postId, postType },
+	noticeUI,
+	noticeOperations,
 } ) {
-	const [ featuredImage ] = useEntityProp(
+	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postType,
 		'featured_media',
@@ -31,14 +48,44 @@ function PostFeaturedImageDisplay( {
 			featuredImage && select( 'core' ).getMedia( featuredImage ),
 		[ featuredImage ]
 	);
-	const image = ! media ? (
-		placeholderChip
-	) : (
-		<img
-			src={ media.source_url }
-			alt={ media.alt_text || __( 'No alternative text set' ) }
-		/>
-	);
+	const onSelectImage = ( value ) => {
+		if ( value?.id ) {
+			setFeaturedImage( value.id );
+		}
+	};
+	function onUploadError( message ) {
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+	let image;
+	if ( ! featuredImage ) {
+		image = (
+			<MediaPlaceholder
+				icon={ <BlockIcon icon={ postFeaturedImage } /> }
+				onSelect={ onSelectImage }
+				notices={ noticeUI }
+				onError={ onUploadError }
+				accept="image/*"
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				labels={ {
+					title: __( 'Featured image' ),
+					instructions: __(
+						'Upload a media file or pick one from your media library.'
+					),
+				} }
+			/>
+		);
+	} else {
+		// We have a Featured image so show a Placeholder if is loading.
+		image = ! media ? (
+			placeholderChip
+		) : (
+			<img
+				src={ media.source_url }
+				alt={ media.alt_text || __( 'Featured image' ) }
+			/>
+		);
+	}
 
 	return (
 		<>
@@ -55,14 +102,36 @@ function PostFeaturedImageDisplay( {
 					/>
 				</PanelBody>
 			</InspectorControls>
+			<BlockControls>
+				{ !! media && (
+					<ToolbarGroup>
+						<ToolbarButton
+							name="unset"
+							onClick={ () => setFeaturedImage( 0 ) }
+						>
+							{ __( 'Clear' ) }
+						</ToolbarButton>
+						<MediaReplaceFlow
+							mediaId={ featuredImage }
+							mediaURL={ media.source_url }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept="image/*"
+							onSelect={ onSelectImage }
+							onError={ onUploadError }
+						/>
+					</ToolbarGroup>
+				) }
+			</BlockControls>
 			<div { ...useBlockProps() }>{ image }</div>
 		</>
 	);
 }
 
+const PostFeaturedImageWithNotices = withNotices( PostFeaturedImageDisplay );
+
 export default function PostFeaturedImageEdit( props ) {
 	if ( ! props.context?.postId ) {
 		return placeholderChip;
 	}
-	return <PostFeaturedImageDisplay { ...props } />;
+	return <PostFeaturedImageWithNotices { ...props } />;
 }
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
@@ -1,4 +1,12 @@
 div[data-type="core/post-featured-image"] {
+	img {
+		max-width: 100%;
+		height: auto;
+		display: block;
+	}
+}
+
+.editor-styles-wrapper {
 	.post-featured-image_placeholder {
 		display: flex;
 		flex-direction: row;
@@ -16,9 +24,4 @@ div[data-type="core/post-featured-image"] {
 			margin: 0;
 		}
 	}
-	img {
-		max-width: 100%;
-		height: auto;
-		display: block;
-	}
 }