refactors the code to use higher level cover block methods, respect c…

…lear media, preserve video covers, reduce opacity when toggling use featured media
WordPress · Mar 27, 2022 · dd6e0eb · dd6e0eb
1 parent 0552d68
commit dd6e0eb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -321,7 +321,11 @@ function CoverEdit( {
 		templateLock,
 	} = attributes;
 
-	const coverImage = useRef( url );
+	const coverImage = useRef( {
+		url,
+		type: backgroundType,
+		isFeaturedImage: useFeaturedImage,
+	} );
 
 	const [ featuredImage ] = useEntityProp(
 		'postType',
@@ -341,12 +345,20 @@ function CoverEdit( {
 	useEffect( () => {
 		// Save the currently set image
 		if ( useFeaturedImage && url ) {
-			coverImage.current = url;
+			coverImage.current = {
+				url,
+				type: backgroundType,
+				isFeaturedImage: false,
+			};
 		}
 
 		// The featured image is in use and it has changed
 		if ( mediaUrl && mediaUrl !== url && useFeaturedImage ) {
-			setAttributes( { url: mediaUrl } );
+			onSelectMedia( {
+				url: mediaUrl,
+				type: IMAGE_BACKGROUND_TYPE,
+				isFeaturedImage: true,
+			} );
 		}
 		// We don't use the featured image
 		// so we reset the URL only if it is
@@ -358,11 +370,9 @@ function CoverEdit( {
 			setAttributes( { url: null } );
 		}
 		// Use the initial image, if set, if featuref image
-		// is toggled off
-		if ( ! useFeaturedImage && coverImage.current ) {
-			setAttributes( {
-				url: coverImage.current,
-			} );
+		// is toggled off, but respect if cleared media
+		if ( url && ! useFeaturedImage && coverImage.current ) {
+			onSelectMedia( coverImage.current );
 		}
 	}, [ mediaUrl, useFeaturedImage ] );
 
@@ -524,14 +534,16 @@ function CoverEdit( {
 						} }
 					/>
 				) }
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ url }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*,video/*"
-					onSelect={ onSelectMedia }
-					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
-				/>
+				{ ! useFeaturedImage && (
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ url }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="image/*,video/*"
+						onSelect={ onSelectMedia }
+						name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					/>
+				) }
 			</BlockControls>
 			<InspectorControls>
 				{ !! url && (
@@ -599,6 +611,7 @@ function CoverEdit( {
 										focalPoint: undefined,
 										hasParallax: undefined,
 										isRepeated: undefined,
+										useFeaturedImage: false,
 									} )
 								}
 							>

diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php
@@ -37,7 +37,7 @@ function render_block_core_cover( $attributes, $content ) {
 
 	if( $isImageBackground && $isImgElement ) {
 		$objectPosition = '';
-		if ( $attributes['focalPoint'] ) {
+		if ( isset( $attributes['focalPoint'] ) ) {
 			$objectPosition = round( $attributes['focalPoint']['x'] * 100 ) . '%'. ' ' .
 			round( $attributes['focalPoint']['x'] * 100 ) . '%';
 		}

diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
@@ -63,13 +63,14 @@ export function attributesFromMedia( setAttributes, dimRatio ) {
 			}
 			mediaType = media.type;
 		}
-
 		setAttributes( {
 			dimRatio: dimRatio === 100 ? 50 : dimRatio,
 			url: media.url,
 			id: media.id,
 			alt: media?.alt,
-			useFeaturedImage: false,
+			useFeaturedImage: media?.isFeaturedImage
+				? media?.isFeaturedImage
+				: false,
 			backgroundType: mediaType,
 			...( mediaType === VIDEO_BACKGROUND_TYPE
 				? { focalPoint: undefined, hasParallax: undefined }