diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index d05b7bee2288f0..71229495dff78e 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -240,6 +240,38 @@ function mediaPosition( { x, y } ) {
return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
}
+function CoverPlaceholder( {
+ coverUrl,
+ children,
+ noticeUI,
+ noticeOperations,
+ onSelectMedia,
+} ) {
+ const { removeAllNotices, createErrorNotice } = noticeOperations;
+ return (
+ }
+ labels={ {
+ title: __( 'Cover' ),
+ instructions: __(
+ 'Upload an image or video file, or pick one from your media library.'
+ ),
+ } }
+ onSelect={ onSelectMedia }
+ accept="image/*,video/*"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ notices={ noticeUI }
+ disableMediaButtons={ !! coverUrl }
+ onError={ ( message ) => {
+ removeAllNotices();
+ createErrorNotice( message );
+ } }
+ >
+ { children }
+
+ );
+}
+
function CoverEdit( {
attributes,
isSelected,
@@ -329,7 +361,6 @@ function CoverEdit( {
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
const [ temporaryMinHeight, setTemporaryMinHeight ] = useState( null );
- const { removeAllNotices, createErrorNotice } = noticeOperations;
const minHeightWithUnit = minHeightUnit
? `${ minHeight }${ minHeightUnit }`
@@ -507,9 +538,6 @@ function CoverEdit( {
);
if ( ! hasBackground ) {
- const placeholderIcon = ;
- const label = __( 'Cover' );
-
return (
<>
{ controls }
@@ -520,22 +548,10 @@ function CoverEdit( {
blockProps.className
) }
>
- {
- removeAllNotices();
- createErrorNotice( message );
- } }
+
-
+
>
);
@@ -627,6 +643,12 @@ function CoverEdit( {
/>
) }
{ isBlogUrl && }
+
>
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index b6d6aae7e92ec9..899cf8f84f7f0c 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -65,3 +65,43 @@
// Important is used to have higher specificity than the inline style set by re-resizable library.
height: auto !important;
}
+
+// Only target direct dropzone.
+.wp-block-cover > .components-drop-zone {
+ &.is-active {
+ transition: 0.2s opacity, 0.2s border;
+ @include reduce-motion("transition");
+ }
+
+ &.is-dragging-over-element {
+ background-color: transparent;
+ border: $grid-unit-60 solid var(--wp-admin-theme-color);
+
+ .components-drop-zone__content {
+ transform: none;
+ }
+ }
+
+ .components-drop-zone__content {
+ display: flex;
+ align-items: center;
+ top: -($grid-unit-15 * 3);
+ left: -($grid-unit-15 * 3);
+ transform: none;
+ }
+
+ .components-drop-zone__content-icon,
+ .components-drop-zone__content-text {
+ display: inline;
+ }
+
+ .components-drop-zone__content-icon {
+ // Reset margin.
+ margin: 0;
+ margin-right: $grid-unit;
+ }
+
+ .components-drop-zone__content-text {
+ font-size: $default-font-size;
+ }
+}