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; + } +}