diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 6d3eda830878ec..d2d2327736fd72 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -33,8 +33,6 @@ import { BlockControls, InspectorControls, MediaPlaceholder, - MediaUpload, - MediaUploadCheck, MediaReplaceFlow, useBlockProps, store as blockEditorStore, @@ -347,29 +345,24 @@ const SiteLogo = ( { // This is a light wrapper around MediaReplaceFlow because the block has two // different MediaReplaceFlows, one for the inspector and one for the toolbar. -function SiteLogoReplaceFlow( { - mediaURL, - onRemoveLogo, - ...mediaReplaceProps -} ) { +function SiteLogoReplaceFlow( { mediaURL, ...mediaReplaceProps } ) { return ( ); } -const InspectorLogoPreview = ( { mediaItemData = {}, itemGroupProps } ) => { +const InspectorLogoPreview = ( { media, itemGroupProps } ) => { const { alt_text: alt, source_url: logoUrl, slug: logoSlug, media_details: logoMediaDetails, - } = mediaItemData; + } = media ?? {}; const logoLabel = logoMediaDetails?.sizes?.full?.file || logoSlug; return ( @@ -530,7 +523,7 @@ export default function LogoEdit( { name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ), onSelect: onSelectLogo, onError: onUploadError, - onRemoveLogo, + onReset: onRemoveLogo, }; const controls = canUserEdit && ( @@ -603,50 +596,40 @@ export default function LogoEdit( {
- { ! canUserEdit && !! logoUrl && ( + { ! canUserEdit ? ( - ) } - { canUserEdit && !! logoUrl && ( - - } - popoverProps={ {} } - /> - ) } - { canUserEdit && ! logoUrl && ( - - ( -
- - -
+ ) : ( + <> + + ) : ( + __( 'Choose logo' ) + ) + } + renderToggle={ ( props ) => ( + ) } /> -
+ + ) }
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index 2f9d1917079bec..da6d8d0830411a 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -108,17 +108,16 @@ } } -.block-library-site-logo__inspector-upload-container { +.block-library-site-logo__inspector-media-replace-container { + // Ensure the dropzone is positioned to the size of the item. position: relative; + // Since there is no option to skip rendering the drag'n'drop icon in drop // zone, we hide it for now. .components-drop-zone__content-icon { display: none; } -} -.block-library-site-logo__inspector-upload-container, -.block-library-site-logo__inspector-media-replace-container { button.components-button { color: $gray-900; box-shadow: inset 0 0 0 1px $gray-400; @@ -144,9 +143,7 @@ text-align: start; text-align-last: center; } -} -.block-library-site-logo__inspector-media-replace-container { .components-dropdown { display: block; }