Try: Let Featured Image block inherit dimensions, look like a placeho…

…lder (#36517) * Try: Let Featured Image block inherit dimensions, look like a placeholder * Inherit dimensions. * Change notice to snackbar. * Fix edgecase.
WordPress · Nov 17, 2021 · ace1331 · ace1331
1 parent 1cfd763
commit ace1331
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 41 deletions.
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -2,34 +2,50 @@
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	Icon,
 	ToggleControl,
 	PanelBody,
+	Placeholder,
 	withNotices,
+	Button,
 } from '@wordpress/components';
 import {
 	InspectorControls,
 	BlockControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
-	BlockIcon,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { postFeaturedImage } from '@wordpress/icons';
+import { upload } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
 
+const placeholderIllustration = (
+	<SVG
+		className="components-placeholder__illustration"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 60 60"
+		preserveAspectRatio="xMidYMid slice" // @todo: "slice" matches the "cover" behavior, "meet" could be used for "container" and "fill" values.
+	>
+		<Path
+			vectorEffect="non-scaling-stroke"
+			d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
+		/>
+	</SVG>
+);
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
-	<div className="post-featured-image_placeholder">
-		<Icon icon={ postFeaturedImage } />
-		<p> { __( 'Featured Image' ) }</p>
+	<div className="wp-block-post-featured-image__placeholder">
+		{ placeholderIllustration }
 	</div>
 );
 
@@ -38,7 +54,6 @@ function PostFeaturedImageDisplay( {
 	setAttributes,
 	context: { postId, postType, queryId },
 	noticeUI,
-	noticeOperations,
 } ) {
 	const isDescendentOfQueryLoop = !! queryId;
 	const { isLink, height, width, scale } = attributes;
@@ -48,42 +63,67 @@ function PostFeaturedImageDisplay( {
 		'featured_media',
 		postId
 	);
+
 	const media = useSelect(
 		( select ) =>
 			featuredImage &&
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
+
 	const blockProps = useBlockProps( {
-		style: { width },
+		style: { width, height },
 	} );
+
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder className="block-editor-media-placeholder">
+				{ placeholderIllustration }
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
 		}
 	};
-	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const onUploadError = ( message ) => {
+		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+	};
+
 	let image;
 	if ( ! featuredImage && isDescendentOfQueryLoop ) {
 		return <div { ...blockProps }>{ placeholderChip }</div>;
 	}
+
+	const label = __( 'Add a featured 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.'
-					),
+				onError={ onUploadError }
+				placeholder={ placeholder }
+				notices={ noticeUI }
+				mediaLibraryButton={ ( { open } ) => {
+					return (
+						<Button
+							icon={ upload }
+							variant="primary"
+							label={ label }
+							showTooltip
+							tooltipPosition="top center"
+							onClick={ () => {
+								open();
+							} }
+						/>
+					);
 				} }
 			/>
 		);

diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
@@ -1,33 +1,137 @@
-div[data-type="core/post-featured-image"] {
-	img {
-		max-width: 100%;
-		height: auto;
-		display: block;
+// Give the featured image placeholder the appearance of a literal image placeholder.
+// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity
+// to create a new component for placeholders meant to inherit some theme styles.
+.wp-block-post-featured-image.wp-block-post-featured-image {
+	// Inherit border radius from style variations.
+	.components-placeholder,
+	.components-resizable-box__container {
+		border-radius: inherit;
 	}
-}
 
-.editor-styles-wrapper {
-	.post-featured-image_placeholder {
-		display: flex;
-		flex-direction: row;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
 		align-items: center;
-		border-radius: $radius-block-ui;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		padding: $grid-unit-15;
-		svg {
-			margin-right: $grid-unit-15;
+		box-shadow: none;
+		padding: 0;
+
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
+
+		// Position the spinner.
+		.components-placeholder__preview {
+			position: absolute;
+			top: $grid-unit-05;
+			right: $grid-unit-05;
+			bottom: $grid-unit-05;
+			left: $grid-unit-05;
+			background: rgba($white, 0.8);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		// Draw the dashed outline.
+		// By setting the dashed border to currentColor, we ensure it's visible
+		// against any background color.
+		color: currentColor;
+		background: transparent;
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border: $border-width dashed currentColor;
+			opacity: 0.3;
+			pointer-events: none;
+
+			// Inherit border radius from style variations.
+			border-radius: inherit;
+		}
+
+		// Style the upload button.
+		.components-placeholder__fieldset {
+			width: auto;
+		}
+
+		.components-button.components-button {
+			color: inherit;
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			visibility: hidden;
+
+			// Animation.
+			background: transparent;
+			transition: all 0.1s linear;
+			@include reduce-motion("transition");
 		}
-		p {
-			font-family: $default-font;
-			font-size: $default-font-size;
-			margin: 0;
+
+		.components-button.components-button > svg {
+			color: $white;
+		}
+
+		// Style the placeholder illustration.
+		.components-placeholder__illustration {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			stroke: currentColor;
+			stroke-dasharray: 3;
+			opacity: 0.3;
 		}
+
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
+	}
+
+	// Show upload button on block selection.
+	&.is-selected .components-button.components-button {
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
+		border-style: solid;
+		color: $white;
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+div[data-type="core/post-featured-image"] {
+	img {
+		max-width: 100%;
+		height: auto;
+		display: block;
 	}
 }
 
 .block-library-post-featured-image-dimension-controls {
 	margin-bottom: $grid-unit-10;
+
 	&.scale-control-is-visible {
 		margin-bottom: $grid-unit-20;
 	}

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
@@ -57,6 +57,7 @@
 		width: 120px;
 	}
 
+	// Style the placeholder.
 	.components-placeholder {
 		justify-content: center;
 		align-items: center;