diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index c2daa2e9ceefd5..9c6c52022efad9 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -173,7 +173,7 @@ const SiteLogo = ( { return ( <> - + @@ -181,10 +181,6 @@ const SiteLogo = ( { } min={ minWidth } max={ maxWidthBuffer } - initialPosition={ Math.min( - naturalWidth, - maxWidthBuffer - ) } value={ width || '' } disabled={ ! isResizable } /> diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index 8cb4592480eca7..bb2ba56d62d159 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -5,10 +5,25 @@ } .wp-block-site-logo { + // Make the block selectable. + a { + pointer-events: none; + } + &.is-resized { display: table; } + // Provide a sane starting point for the size. + &:not(.is-resized) { + width: 120px; + + img { + width: 100%; + } + } + + .custom-logo-link { cursor: inherit; @@ -25,4 +40,43 @@ display: block; max-width: 100%; } + + // Placeholder improvements. + .components-placeholder { + min-height: auto; + height: 120px; + padding: $grid-unit-10; + + // Massage the label. + .components-placeholder__label { + white-space: nowrap; + } + + .components-placeholder__label .block-editor-block-icon { + margin-right: $grid-unit-05; + } + + // Hide the upload button, as it's also available in the media library. + .components-form-file-upload { + display: none; + } + + // Position the spinner. + .components-placeholder__preview { + position: absolute; + top: $grid-unit-05; + right: $grid-unit-05; + bottom: $grid-unit-05; + left: $grid-unit-05; + background: rgba($white, 0.8); + display: flex; + align-items: center; + justify-content: center; + } + + // Hide drag and drop text. + .components-drop-zone__content-text { + display: none; + } + } } diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js index 8c7b7d04719387..3ce71eacd2e25f 100644 --- a/packages/block-library/src/site-logo/index.js +++ b/packages/block-library/src/site-logo/index.js @@ -15,7 +15,7 @@ export { metadata, name }; export const settings = { title: _x( 'Site Logo', 'block title' ), - description: __( 'Show a site logo' ), + description: __( 'Displays and enables editing of the site logo.' ), icon, styles: [ { diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss index a7f69e834055ac..774a701f6fc6e3 100644 --- a/packages/block-library/src/site-logo/style.scss +++ b/packages/block-library/src/site-logo/style.scss @@ -1,6 +1,15 @@ .wp-block-site-logo { line-height: 0; + a { + display: inline-block; + } + + // Provide a sane starting point for the size. + &:not(.is-resized) img { + width: 120px; + } + .aligncenter { display: table; }