[Site Logo]: Add option to remove/clear logo from the block (#34820)

* Add button for removing Site Logo image from block

* Try an icon instead of text button for Remove

* Delete custom logo when site logo is removed

* Linting

* Add label to remove logo button

* Revert to text-based Remove button

* Slightly increase spacing between Replace and Remove buttons

* Change 'Remove' to 'Reset' to avoid confusion

* Unhook both Gutenberg and core hooks for deleting site logo

* Update comments

packages/block-library/src/site-logo/edit.js

@@ -18,6 +18,7 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarButton,
+	ToolbarGroup,
 	Placeholder,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -326,7 +327,7 @@ export default function LogoEdit( {
 		const _siteLogo = siteSettings?.site_logo;
 		const _readOnlyLogo = siteData?.site_logo;
 		const _canUserEdit = canUser( 'update', 'settings' );
-		const _siteLogoId = _siteLogo || _readOnlyLogo;
+		const _siteLogoId = _canUserEdit ? _siteLogo : _readOnlyLogo;
 		const mediaItem =
 			_siteLogoId &&
 			select( coreStore ).getMedia( _siteLogoId, {
@@ -380,6 +381,11 @@ export default function LogoEdit( {
 		setLogo( media.id );
 	};
 
+	const onRemoveLogo = () => {
+		setLogo( null );
+		setLogoUrl( undefined );
+	};
+
 	const onUploadError = ( message ) => {
 		setError( message[ 2 ] ? message[ 2 ] : null );
 	};
@@ -393,6 +399,11 @@ export default function LogoEdit( {
 				onSelect={ onSelectLogo }
 				onError={ onUploadError }
 			/>
+			<ToolbarGroup>
+				<ToolbarButton onClick={ onRemoveLogo }>
+					{ __( 'Reset' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
 		</BlockControls>
 	);
 

packages/block-library/src/site-logo/index.php

@@ -132,7 +132,7 @@ function _sync_custom_logo_to_site_logo( $value ) {
  * @param array $old_value Previous theme mod settings.
  * @param array $value     Updated theme mod settings.
  */
-function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
+function _gutenberg_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' );
@@ -142,7 +142,7 @@ function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
 /**
  * Deletes the site logo when all theme mods are being removed.
  */
-function _delete_site_logo_on_remove_theme_mods() {
+function _gutenberg_delete_site_logo_on_remove_theme_mods() {
 	if ( false !== get_theme_support( 'custom-logo' ) ) {
 		delete_option( 'site_logo' );
 	}
@@ -160,3 +160,32 @@ function _delete_site_logo_on_remove_custom_logo_on_setup_theme() {
 	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 );
+
+/**
+ * Removes the custom_logo theme-mod when the site_logo option gets deleted.
+ */
+function _delete_custom_logo_on_remove_site_logo() {
+	$theme = get_option( 'stylesheet' );
+
+	// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
+	// Remove Gutenberg hooks.
+	remove_action( "update_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_custom_logo', 10 );
+	remove_action( "delete_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_theme_mods' );
+
+	// Remove Core hooks.
+	remove_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10 );
+	remove_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
+
+	// Remove the custom logo.
+	remove_theme_mod( 'custom_logo' );
+
+	// Restore update and delete actions.
+	// Restore Gutenberg hooks.
+	add_action( "update_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_custom_logo', 10, 2 );
+	add_action( "delete_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_theme_mods' );
+
+	// Restore Core hooks.
+	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( 'delete_option_site_logo', '_delete_custom_logo_on_remove_site_logo' );