diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index aecda3ec75d2b..e3cd822641797 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -17,7 +17,7 @@ import { ResizableBox, Spinner, ToggleControl, - Icon, + Placeholder, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { @@ -257,37 +257,46 @@ export default function LogoEdit( { const [ error, setError ] = useState(); const ref = useRef(); - const { siteLogoId, canUserEdit, url, mediaItemData } = useSelect( - ( select ) => { - const { canUser, getEntityRecord, getEditedEntityRecord } = select( - coreStore - ); - const siteSettings = getEditedEntityRecord( 'root', 'site' ); - const siteData = getEntityRecord( 'root', '__unstableBase' ); - const _siteLogo = siteSettings?.site_logo; - const _readOnlyLogo = siteData?.site_logo; - const _canUserEdit = canUser( 'update', 'settings' ); - const _siteLogoId = _siteLogo || _readOnlyLogo; - const mediaItem = - _siteLogoId && - select( coreStore ).getEntityRecord( - 'root', - 'media', - _siteLogoId, - { context: 'view' } - ); - return { - siteLogoId: _siteLogoId, - canUserEdit: _canUserEdit, - url: siteData?.url, - mediaItemData: mediaItem && { - url: mediaItem.source_url, - alt: mediaItem.alt_text, - }, - }; - }, - [] - ); + const { + siteLogoId, + canUserEdit, + url, + mediaItemData, + isRequestingMediaItem, + } = useSelect( ( select ) => { + const { canUser, getEntityRecord, getEditedEntityRecord } = select( + coreStore + ); + const siteSettings = getEditedEntityRecord( 'root', 'site' ); + const siteData = getEntityRecord( 'root', '__unstableBase' ); + const _siteLogo = siteSettings?.site_logo; + const _readOnlyLogo = siteData?.site_logo; + const _canUserEdit = canUser( 'update', 'settings' ); + const _siteLogoId = _siteLogo || _readOnlyLogo; + const mediaItem = + _siteLogoId && + select( coreStore ).getEntityRecord( 'root', 'media', _siteLogoId, { + context: 'view', + } ); + const _isRequestingMediaItem = + _siteLogoId && + ! select( coreStore ).hasFinishedResolution( 'getEntityRecord', [ + 'root', + 'media', + _siteLogoId, + { context: 'view' }, + ] ); + return { + siteLogoId: _siteLogoId, + canUserEdit: _canUserEdit, + url: siteData?.url, + mediaItemData: mediaItem && { + url: mediaItem.source_url, + alt: mediaItem.alt_text, + }, + isRequestingMediaItem: _isRequestingMediaItem, + }; + }, [] ); const { editEntityRecord } = useDispatch( coreStore ); const setLogo = ( newValue ) => @@ -336,7 +345,7 @@ export default function LogoEdit( { const label = __( 'Site Logo' ); let logoImage; - const isLoading = siteLogoId === undefined || ( siteLogoId && ! logoUrl ); + const isLoading = siteLogoId === undefined || isRequestingMediaItem; if ( isLoading ) { logoImage = ; } @@ -366,10 +375,17 @@ export default function LogoEdit( { { controls } { !! logoUrl && logoImage } { ! logoUrl && ! canUserEdit && ( -
- -

{ __( 'Site Logo' ) }

-
+ + { isLoading && ( + + + + ) } + ) } { ! logoUrl && canUserEdit && ( svg { margin-right: $grid-unit-05; } @@ -80,23 +83,3 @@ } } } -.editor-styles-wrapper { - .site-logo_placeholder { - display: flex; - flex-direction: row; - align-items: flex-start; - border-radius: $radius-block-ui; - background-color: $white; - box-shadow: inset 0 0 0 $border-width $gray-900; - padding: $grid-unit-15; - svg { - margin-right: $grid-unit-15; - } - p { - font-family: $default-font; - font-size: $default-font-size; - margin: 0; - line-height: initial; - } - } -} diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index 44d63505cc4ff..ef24e73e1e218 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -14,7 +14,7 @@ */ function render_block_core_site_logo( $attributes ) { $adjust_width_height_filter = function ( $image ) use ( $attributes ) { - if ( empty( $attributes['width'] ) ) { + if ( empty( $attributes['width'] ) || empty( $image ) ) { return $image; } $height = (float) $attributes['width'] / ( (float) $image[1] / (float) $image[2] ); @@ -111,54 +111,52 @@ function _override_custom_logo_theme_mod( $custom_logo ) { /** * Updates the site_logo option when the custom_logo theme-mod gets updated. * - * This function is hooked on "update_option_theme_mods_$theme" and not - * "pre_set_theme_mod_custom_logo" because by hooking in `update_option` - * the function accounts for remove_theme_mod() as well. - * - * @param mixed $old_value The old option value. - * @param mixed $value The new option value. + * @param mixed $value Attachment ID of the custom logo or an empty value. + * @return mixed */ -function _sync_custom_logo_to_site_logo( $old_value, $value ) { - // Delete the option when the custom logo does not exist or was removed. - // This step ensures the option stays in sync. - if ( empty( $value['custom_logo'] ) ) { +function _sync_custom_logo_to_site_logo( $value ) { + if ( empty( $value ) ) { delete_option( 'site_logo' ); } else { - remove_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo' ); - update_option( 'site_logo', $value['custom_logo'] ); - add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 ); + update_option( 'site_logo', $value ); } + + return $value; } +add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' ); + /** - * Hooks `_sync_custom_logo_to_site_logo` in `update_option_theme_mods_$theme`. + * Deletes the site_logo when the custom_logo theme mod is removed. * - * Runs on `setup_theme` to account for dynamically-switched themes in the Customizer. + * @param array $old_value Previous theme mod settings. + * @param array $value Updated theme mod settings. */ -function _sync_custom_logo_to_site_logo_on_setup_theme() { - $theme = get_option( 'stylesheet' ); - add_action( "update_option_theme_mods_$theme", '_sync_custom_logo_to_site_logo', 10, 2 ); +function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) { + // If the custom_logo is being unset, it's being removed from theme mods. + if ( isset( $old_value['custom_logo'] ) && ! isset( $value['custom_logo'] ) ) { + delete_option( 'site_logo' ); + } } -add_action( 'setup_theme', '_sync_custom_logo_to_site_logo_on_setup_theme', 11 ); /** - * Updates the custom_logo theme-mod when the site_logo option gets updated. - * - * @param mixed $old_value The old option value. - * @param mixed $value The new option value. - * - * @return void + * Deletes the site logo when all theme mods are being removed. */ -function _sync_site_logo_to_custom_logo( $old_value, $value ) { - // Delete the option when the custom logo does not exist or was removed. - // This step ensures the option stays in sync. - if ( empty( $value ) ) { - remove_theme_mod( 'custom_logo' ); - } else { - remove_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' ); - set_theme_mod( 'custom_logo', $value ); - add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' ); +function _delete_site_logo_on_remove_theme_mods() { + if ( false !== get_theme_support( 'custom-logo' ) ) { + delete_option( 'site_logo' ); } } -add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 ); +/** + * Hooks `_delete_site_logo_on_remove_custom_logo` in `update_option_theme_mods_$theme`. + * Hooks `_delete_site_logo_on_remove_theme_mods` in `delete_option_theme_mods_$theme`. + * + * Runs on `setup_theme` to account for dynamically-switched themes in the Customizer. + */ +function _delete_site_logo_on_remove_custom_logo_on_setup_theme() { + $theme = get_option( 'stylesheet' ); + add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 ); + add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' ); +} +add_action( 'setup_theme', '_delete_site_logo_on_remove_custom_logo_on_setup_theme', 11 );