diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index ffdba40b5f1625..d394b0b1366c5d 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
diff --git a/lib/blocks.php b/lib/blocks.php
index 5ff1cc5d907281..320d50bf509500 100644
--- a/lib/blocks.php
+++ b/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',
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 852b9ab30d1c9b..f908f544fb2974 100644
--- a/packages/block-library/src/cover/block.json
+++ b/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,
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index a921d225d9cb26..45a090768f6a64 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/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,11 +300,12 @@ function CoverEdit( {
setAttributes,
setOverlayColor,
toggleSelection,
+ context: { postId, postType },
} ) {
const {
contentPosition,
id,
- backgroundType,
+ useFeaturedImage,
dimRatio,
focalPoint,
hasParallax,
@@ -311,11 +314,35 @@ function CoverEdit( {
minHeight,
minHeightUnit,
style: styleAttribute,
- url,
alt,
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;
+
+ // instead of destructuring the attributes
+ // we define the url and background type
+ // depending on the value of the useFeaturedImage flag
+ // to preview in edit the dynamic featured image
+ const url = useFeaturedImage ? mediaUrl : attributes.url;
+ const backgroundType = useFeaturedImage
+ ? IMAGE_BACKGROUND_TYPE
+ : attributes.backgroundType;
+
const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
blockEditorStore
);
@@ -374,6 +401,13 @@ function CoverEdit( {
} );
};
+ const toggleUseFeaturedImage = () => {
+ setAttributes( {
+ useFeaturedImage: ! useFeaturedImage,
+ dimRatio: dimRatio === 100 ? 50 : dimRatio,
+ } );
+ };
+
const onUploadError = ( message ) => {
createErrorNotice( Array.isArray( message ) ? message[ 2 ] : message, {
type: 'snackbar',
@@ -458,14 +492,22 @@ function CoverEdit( {
/>
-
+ { ! useFeaturedImage && (
+
+ ) }
{ !! url && (
@@ -499,27 +541,32 @@ function CoverEdit( {
}
/>
) }
- { url && isImageBackground && isImgElement && (
-
- setAttributes( { alt: newAlt } )
- }
- help={
- <>
-
+ { ! useFeaturedImage &&
+ url &&
+ isImageBackground &&
+ isImgElement && (
+
+ setAttributes( { alt: newAlt } )
+ }
+ help={
+ <>
+
+ { __(
+ 'Describe the purpose of the image'
+ ) }
+
{ __(
- 'Describe the purpose of the image'
+ 'Leave empty if the image is purely decorative.'
) }
-
- { __(
- 'Leave empty if the image is purely decorative.'
- ) }
-
- }
- />
- ) }
+
+ }
+ />
+ ) }