makes cover block dynamic and adds featured image binding

docs/reference-guides/core-blocks.md

@@ -222,7 +222,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 -	**Name:** core/cover
 -	**Category:** media
 -	**Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (padding), ~~html~~
--	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url
+-	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage
 
 ## Embed
 

lib/blocks.php

@@ -57,6 +57,7 @@ function gutenberg_reregister_core_block_types() {
 				'block.php'                        => 'core/block',
 				'calendar.php'                     => 'core/calendar',
 				'categories.php'                   => 'core/categories',
+				'cover.php'                        => 'core/cover',
 				'comment-author-avatar.php'        => 'core/comment-author-avatar',
 				'comment-author-name.php'          => 'core/comment-author-name',
 				'comment-content.php'              => 'core/comment-content',

packages/block-library/src/cover/block.json

@@ -10,6 +10,10 @@
 		"url": {
 			"type": "string"
 		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
+		},
 		"id": {
 			"type": "number"
 		},
@@ -72,6 +76,7 @@
 			"enum": [ "all", "insert", false ]
 		}
 	},
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
 		"align": true,

packages/block-library/src/cover/edit.js

@@ -9,6 +9,7 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
 	Fragment,
 	useEffect,
@@ -28,6 +29,7 @@ import {
 	Spinner,
 	TextareaControl,
 	ToggleControl,
+	ToolbarButton,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -54,7 +56,7 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cover as icon } from '@wordpress/icons';
+import { postFeaturedImage, cover as icon } from '@wordpress/icons';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -298,10 +300,12 @@ function CoverEdit( {
 	setAttributes,
 	setOverlayColor,
 	toggleSelection,
+	context: { postId, postType },
 } ) {
 	const {
 		contentPosition,
 		id,
+		useFeaturedImage,
 		backgroundType,
 		dimRatio,
 		focalPoint,
@@ -316,6 +320,38 @@ function CoverEdit( {
 		allowedBlocks,
 		templateLock,
 	} = attributes;
+
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
+	const media = useSelect(
+		( select ) =>
+			featuredImage &&
+			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
+		[ featuredImage ]
+	);
+	const mediaUrl = media?.source_url;
+
+	useEffect( () => {
+		// we use the featured image and it has changed
+		if ( mediaUrl && mediaUrl !== url && useFeaturedImage ) {
+			setAttributes( { url: mediaUrl } );
+		}
+		// we don't use the featured image
+		// so we rest the URL only if it is
+		// the url of the featured image
+		// this is needed to not reset the url
+		// when a new image is selected from the
+		// media library.
+		if ( mediaUrl && ! useFeaturedImage && mediaUrl === url ) {
+			setAttributes( { url: null } );
+		}
+	}, [ mediaUrl, useFeaturedImage ] );
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -374,6 +410,12 @@ function CoverEdit( {
 		} );
 	};
 
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			useFeaturedImage: ! useFeaturedImage,
+		} );
+	};
+
 	const onUploadError = ( message ) => {
 		createErrorNotice( Array.isArray( message ) ? message[ 2 ] : message, {
 			type: 'snackbar',
@@ -458,6 +500,16 @@ function CoverEdit( {
 				/>
 			</BlockControls>
 			<BlockControls group="other">
+				{ !! postId && (
+					<ToolbarButton
+						icon={ postFeaturedImage /*this is temporary*/ }
+						label={ __( 'Use featured image' ) }
+						isPressed={ useFeaturedImage }
+						onClick={ () => {
+							toggleUseFeaturedImage();
+						} }
+					/>
+				) }
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }

packages/block-library/src/cover/index.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Server-side rendering of the `core/categories` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/categories` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the categories list/dropdown markup.
+ */
+function render_block_core_cover( $attributes, $content ) {
+	if( $attributes['useFeaturedImage'] === false ) {
+		return $content;
+	}
+
+	$currentFeaturedImage = get_the_post_thumbnail_url();
+
+	return str_replace( 'WordPress://featured-image', $currentFeaturedImage, $content );
+}
+
+/**
+ * Registers the `core/categories` block on server.
+ */
+function register_block_core_cover() {
+	register_block_type_from_metadata(
+		__DIR__ . '/cover',
+		array(
+			'render_callback' => 'render_block_core_cover',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_cover' );

packages/block-library/src/cover/save.js

@@ -34,16 +34,19 @@ export default function save( { attributes } ) {
 		customOverlayColor,
 		dimRatio,
 		focalPoint,
+		useFeaturedImage,
 		hasParallax,
 		isDark,
 		isRepeated,
 		overlayColor,
-		url,
 		alt,
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
 	} = attributes;
+
+	let { url } = attributes;
+
 	const overlayColorClass = getColorClassName(
 		'background-color',
 		overlayColor
@@ -91,6 +94,10 @@ export default function save( { attributes } ) {
 
 	const gradientValue = gradient || customGradient;
 
+	if ( useFeaturedImage ) {
+		url = 'WordPress://featured-image';
+	}
+
 	return (
 		<div { ...useBlockProps.save( { className: classes, style } ) }>
 			<span

packages/block-library/src/cover/shared.js

@@ -69,6 +69,7 @@ export function attributesFromMedia( setAttributes, dimRatio ) {
 			url: media.url,
 			id: media.id,
 			alt: media?.alt,
+			useFeaturedImage: false,
 			backgroundType: mediaType,
 			...( mediaType === VIDEO_BACKGROUND_TYPE
 				? { focalPoint: undefined, hasParallax: undefined }