From 9c048483d2fcfbd011f50d40d570cd343a05cea1 Mon Sep 17 00:00:00 2001
From: NidhiDhandhukiya74 <nidhidhandhukiya7496@gmail.com>
Date: Fri, 13 Dec 2024 16:20:06 +0530
Subject: [PATCH 1/2] refactor site logo media panel

---
 packages/block-library/src/site-logo/edit.js | 34 +++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 36c217c1bf0c79..813a71cc30ab5e 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -24,6 +24,8 @@ import {
 	Button,
 	DropZone,
 	FlexItem,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
@@ -597,8 +599,20 @@ export default function LogoEdit( {
 
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
-			<PanelBody title={ __( 'Media' ) }>
-				<div className="block-library-site-logo__inspector-media-replace-container">
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				resetAll={ () => {
+					setAttributes( {
+						logoUrl: null,
+						mediaItemData: null,
+					} );
+				} }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! logoUrl && ! canUserEdit }
+					label={ __( 'Preview Logo (Read-only)' ) }
+					resetAll={ () => setAttributes( { logoUrl: null } ) }
+				>
 					{ ! canUserEdit && !! logoUrl && (
 						<InspectorLogoPreview
 							mediaItemData={ mediaItemData }
@@ -609,6 +623,12 @@ export default function LogoEdit( {
 							} }
 						/>
 					) }
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => !! logoUrl && canUserEdit }
+					label={ __( 'Replace Logo' ) }
+					resetAll={ () => setAttributes( { logoUrl: null } ) }
+				>
 					{ canUserEdit && !! logoUrl && (
 						<SiteLogoReplaceFlow
 							{ ...mediaReplaceFlowProps }
@@ -620,6 +640,12 @@ export default function LogoEdit( {
 							popoverProps={ {} }
 						/>
 					) }
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => ! logoUrl && canUserEdit }
+					label={ __( 'Upload Logo' ) }
+					resetAll={ () => setAttributes( { logoUrl: null } ) }
+				>
 					{ canUserEdit && ! logoUrl && (
 						<MediaUploadCheck>
 							<MediaUpload
@@ -644,8 +670,8 @@ export default function LogoEdit( {
 							/>
 						</MediaUploadCheck>
 					) }
-				</div>
-			</PanelBody>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

From 2db9acadc435a9ca53842ffca6de34c6ed9d5e2d Mon Sep 17 00:00:00 2001
From: NidhiDhandhukiya74 <nidhidhandhukiya7496@gmail.com>
Date: Fri, 20 Dec 2024 15:27:46 +0530
Subject: [PATCH 2/2] refractor site settings of site logo

---
 packages/block-library/src/site-logo/edit.js | 83 ++++++++++++++------
 1 file changed, 57 insertions(+), 26 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 813a71cc30ab5e..074235b5f5d64b 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	PanelBody,
 	RangeControl,
 	ResizableBox,
 	Spinner,
@@ -280,31 +279,55 @@ const SiteLogo = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel label={ __( 'Settings' ) }>
+					<ToolsPanelItem
+						hasValue={ () => !! width }
 						label={ __( 'Image width' ) }
-						onChange={ ( newWidth ) =>
-							setAttributes( { width: newWidth } )
+						onDeselect={ () =>
+							setAttributes( { width: undefined } )
 						}
-						min={ minWidth }
-						max={ maxWidthBuffer }
-						initialPosition={ Math.min(
-							defaultWidth,
-							maxWidthBuffer
-						) }
-						value={ width || '' }
-						disabled={ ! isResizable }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Image width' ) }
+							onChange={ ( newWidth ) =>
+								setAttributes( { width: newWidth } )
+							}
+							min={ minWidth }
+							max={ maxWidthBuffer }
+							initialPosition={ Math.min(
+								defaultWidth,
+								maxWidthBuffer
+							) }
+							value={ width || '' }
+							disabled={ ! isResizable }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => !! isLink }
 						label={ __( 'Link image to home' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link image to home' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
+
 					{ isLink && (
-						<>
+						<ToolsPanelItem
+							hasValue={ () => linkTarget === '_blank' }
+							label={ __( 'Open in new tab' ) }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -315,10 +338,18 @@ const SiteLogo = ( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
+
 					{ canUserEdit && (
-						<>
+						<ToolsPanelItem
+							hasValue={ () => !! shouldSyncIcon }
+							label={ __( 'Use as Site Icon' ) }
+							onDeselect={ () => {
+								setAttributes( { shouldSyncIcon: false } );
+								setIcon( undefined );
+							} }
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Use as Site Icon' ) }
@@ -329,9 +360,9 @@ const SiteLogo = ( {
 								checked={ !! shouldSyncIcon }
 								help={ syncSiteIconHelpText }
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			<BlockControls group="block">
 				{ canEditImage && ! isEditingImage && (