From 3cb7840eed1f7df84773c33901545adaacc2f89b Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 23 Feb 2023 12:45:55 +0100
Subject: [PATCH 01/31] Add border support to site logo

---
 .../block-library/src/site-logo/block.json    | 14 ++++
 packages/block-library/src/site-logo/edit.js  | 15 ++--
 .../block-library/src/site-logo/index.php     | 69 +++++++++++++++++++
 3 files changed, 92 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
index f5eab1de304bc2..15d177ebbbe247 100644
--- a/packages/block-library/src/site-logo/block.json
+++ b/packages/block-library/src/site-logo/block.json
@@ -34,6 +34,20 @@
 		"anchor": true,
 		"align": true,
 		"alignWide": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"style": true,
+			"__experimentalSelector": "img, .components-placeholder__illustration, .components-placeholder::before",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"color": {
 			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 07b44fd877844c..2ee042a74596d5 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -34,6 +34,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -55,7 +56,7 @@ const ACCEPT_MEDIA_STRING = 'image/*';
 
 const SiteLogo = ( {
 	alt,
-	attributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },
+	attributes,
 	containerRef,
 	isSelected,
 	setAttributes,
@@ -67,6 +68,8 @@ const SiteLogo = ( {
 	setIcon,
 	canUserEdit,
 } ) => {
+	const { align, width, height, isLink, linkTarget, shouldSyncIcon } =
+		attributes;
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
@@ -74,6 +77,7 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
+	const borderProps = useBorderProps( attributes );
 	const classes = classnames( 'custom-logo-link', {
 		'is-transient': isBlobURL( logoUrl ),
 	} );
@@ -115,7 +119,7 @@ const SiteLogo = ( {
 
 	const img = (
 		<img
-			className="custom-logo"
+			className={ `custom-logo ${ borderProps.className }` }
 			src={ logoUrl }
 			alt={ alt }
 			onLoad={ ( event ) => {
@@ -124,6 +128,7 @@ const SiteLogo = ( {
 					naturalHeight: event.target.naturalHeight,
 				} );
 			} }
+			style={ borderProps.style }
 		/>
 	);
 
@@ -354,7 +359,7 @@ export default function LogoEdit( {
 } ) {
 	const { width, shouldSyncIcon } = attributes;
 	const ref = useRef();
-
+	const borderProps = useBorderProps( attributes );
 	const {
 		siteLogoId,
 		canUserEdit,
@@ -507,9 +512,7 @@ export default function LogoEdit( {
 				className={ placeholderClassName }
 				preview={ logoImage }
 				withIllustration={ true }
-				style={ {
-					width,
-				} }
+				style={ ( width, borderProps.style ) }
 			>
 				{ content }
 			</Placeholder>
diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index f7dde9d7b05135..30b4e6fe7e5db7 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -34,6 +34,8 @@ function render_block_core_site_logo( $attributes ) {
 	if ( ! $attributes['isLink'] ) {
 		// Remove the link.
 		$custom_logo = preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );
+
+		preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );
 	}
 
 	if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) {
@@ -48,6 +50,20 @@ function render_block_core_site_logo( $attributes ) {
 		$custom_logo = $processor->get_updated_html();
 	}
 
+	// Apply the border to the image
+	$border_attributes = get_block_core_site_logo_border_attributes( $attributes );
+	if ( $border_attributes ) {
+		$processor = new WP_HTML_Tag_Processor( $custom_logo );
+		$processor->next_tag( 'img' );
+		if ( ! empty( $border_attributes['class'] ) ) {
+			$processor->set_attribute( 'class', $border_attributes['class'] );
+		}
+		if ( ! empty( $border_attributes['style'] ) ) {
+			$processor->set_attribute( 'style', $border_attributes['style'] );
+		}
+		$custom_logo = $processor->get_updated_html();
+	}
+
 	$classnames = array();
 	if ( empty( $attributes['width'] ) ) {
 		$classnames[] = 'is-default-size';
@@ -58,6 +74,59 @@ function render_block_core_site_logo( $attributes ) {
 	return $html;
 }
 
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the site logo block.
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_site_logo_border_attributes( $attributes ) {
+
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	$styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$attributes = array();
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+	return $attributes;
+}
+
 /**
  * Register a core site setting for a site logo
  */

From 41cdda149923fc3225cb68b35feb7f6b3fab2c92 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 24 Feb 2023 06:39:44 +0100
Subject: [PATCH 02/31] Update index.php

---
 packages/block-library/src/site-logo/index.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 30b4e6fe7e5db7..308e4ae6c43eaf 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -50,7 +50,6 @@ function render_block_core_site_logo( $attributes ) {
 		$custom_logo = $processor->get_updated_html();
 	}
 
-	// Apply the border to the image
 	$border_attributes = get_block_core_site_logo_border_attributes( $attributes );
 	if ( $border_attributes ) {
 		$processor = new WP_HTML_Tag_Processor( $custom_logo );

From 5602da2f42587b873248384419f26c77e58b0d20 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 27 Jun 2023 06:04:43 +0200
Subject: [PATCH 03/31] Add a check for the border CSS classes

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

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 5fb86f696be40d..6795e32f8c105f 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -108,7 +108,7 @@ const SiteLogo = ( {
 		if ( shouldSyncIcon && logoId !== iconId ) {
 			setAttributes( { shouldSyncIcon: false } );
 		}
-	}, [] );
+	}, [ iconId, logoId, setAttributes, shouldSyncIcon ] );
 
 	useEffect( () => {
 		if ( ! isSelected ) {
@@ -126,7 +126,9 @@ const SiteLogo = ( {
 
 	const img = (
 		<img
-			className={ `custom-logo ${ borderProps.className }` }
+			className={ classnames( 'custom-logo', {
+				[ borderProps.className ]: !! borderProps.className,
+			} ) }
 			src={ logoUrl }
 			alt={ alt }
 			onLoad={ ( event ) => {

From 177b0727cd9f9d5c101d5d68e1e98323e6ec2752 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 27 Jun 2023 07:35:14 +0200
Subject: [PATCH 04/31] Add the custom border to the ImageEditor / cropper

---
 packages/block-library/src/site-logo/block.json | 2 +-
 packages/block-library/src/site-logo/edit.js    | 5 +++++
 packages/block-library/src/site-logo/style.scss | 6 ++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
index b4f9d31c6cadc3..c0fb1fcdac28ce 100644
--- a/packages/block-library/src/site-logo/block.json
+++ b/packages/block-library/src/site-logo/block.json
@@ -38,7 +38,7 @@
 			"radius": true,
 			"width": true,
 			"style": true,
-			"__experimentalSelector": "img, .components-placeholder__illustration, .components-placeholder::before",
+			"__experimentalSelector": "img, .components-placeholder__illustration, .components-placeholder::before, .wp-block-image__crop-area",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 6795e32f8c105f..a24682e688743a 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -243,6 +243,7 @@ const SiteLogo = ( {
 				onFinishEditing={ () => {
 					setIsEditingImage( false );
 				} }
+				borderProps={ borderProps }
 			/>
 		) : (
 			<ResizableBox
@@ -586,6 +587,10 @@ export default function LogoEdit( {
 
 	const classes = classnames( className, {
 		'is-default-size': ! width,
+		'has-custom-border':
+			!! borderProps.className ||
+			( borderProps.style &&
+				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
 	const blockProps = useBlockProps( {
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index 2fae735f369b57..67ea623d2f41a2 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -19,6 +19,12 @@
 		max-width: 100%;
 	}
 
+	&.has-custom-border {
+		img {
+			box-sizing: border-box;
+		}
+	}
+
 	// Inherit border radius from style variations.
 	a,
 	img {

From 501fb91e6b94021f97a67a4c6a469441bb91aecd Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 8 Aug 2023 08:26:14 +0200
Subject: [PATCH 05/31] try height: auto, remove border when placeholder is
 selected

---
 packages/block-library/src/site-logo/edit.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 7a641fca51b395..462cd8c31ed81e 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -249,7 +249,7 @@ const SiteLogo = ( {
 			<ResizableBox
 				size={ {
 					width: currentWidth,
-					height: currentHeight,
+					height: 'auto',
 				} }
 				showHandle={ isSelected }
 				minWidth={ minWidth }
@@ -579,7 +579,10 @@ export default function LogoEdit( {
 				className={ placeholderClassName }
 				preview={ logoImage }
 				withIllustration={ true }
-				style={ ( width, borderProps.style ) }
+				style={
+					( width,
+					isSelected === false ? borderProps.style : undefined )
+				}
 			>
 				{ content }
 			</Placeholder>

From 882acf66a6d06af52d1642b3190ee095aa3edfbd Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 8 Aug 2023 13:01:15 +0200
Subject: [PATCH 06/31] try to fix linked image width

---
 packages/block-library/src/site-logo/editor.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 837cf8df688c16..f9f10e272180d0 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -45,6 +45,12 @@
 		border-radius: inherit;
 	}
 
+	// Make the linked image inside the resize full width
+	.components-resizable-box__container > a,
+	.components-resizable-box__container > a img {
+		width: 100%;
+	}
+
 	// Style the placeholder.
 	.components-placeholder {
 		display: flex;

From 0c5ab730b9186cd6e5a26392b168b7ff0c778052 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 8 Aug 2023 13:21:23 +0200
Subject: [PATCH 07/31] Move the CSS for the linked image width

---
 packages/block-library/src/site-logo/editor.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index f9f10e272180d0..a98865a7a1eedc 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -28,6 +28,12 @@
 		height: auto;
 		max-width: 100%;
 	}
+
+	// Make the linked image inside the resize full width
+	.components-resizable-box__container > a,
+	.components-resizable-box__container > a img {
+		width: 100%;
+	}
 }
 
 // Provide special styling for the placeholder.
@@ -45,12 +51,6 @@
 		border-radius: inherit;
 	}
 
-	// Make the linked image inside the resize full width
-	.components-resizable-box__container > a,
-	.components-resizable-box__container > a img {
-		width: 100%;
-	}
-
 	// Style the placeholder.
 	.components-placeholder {
 		display: flex;

From c340f864939f1c17fb0fe2bfa24dbbafeb9982a8 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 26 Sep 2023 14:15:10 +0200
Subject: [PATCH 08/31] CS: Rename function name

---
 packages/block-library/src/site-logo/index.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 6fb31110903dc2..15907569c2e16f 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -50,7 +50,7 @@ function render_block_core_site_logo( $attributes ) {
 		$custom_logo = $processor->get_updated_html();
 	}
 
-	$border_attributes = get_block_core_site_logo_border_attributes( $attributes );
+	$border_attributes = block_core_site_logo_get_border_attributes( $attributes );
 	if ( $border_attributes ) {
 		$processor = new WP_HTML_Tag_Processor( $custom_logo );
 		$processor->next_tag( 'img' );
@@ -80,7 +80,7 @@ function render_block_core_site_logo( $attributes ) {
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.
  */
-function get_block_core_site_logo_border_attributes( $attributes ) {
+function block_core_site_logo_get_border_attributes( $attributes ) {
 
 	$border_styles = array();
 	$sides         = array( 'top', 'right', 'bottom', 'left' );

From 22491533a1cc7449710827152868d70d29904f74 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 25 Oct 2023 08:53:49 +0200
Subject: [PATCH 09/31] Fix editing tool border color by moving the <a> element

---
 packages/block-library/src/site-logo/edit.js  | 43 +++++++++----------
 .../block-library/src/site-logo/editor.scss   |  9 +---
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 462cd8c31ed81e..50d952aab5993a 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -141,26 +141,6 @@ const SiteLogo = ( {
 		/>
 	);
 
-	let imgWrapper = img;
-
-	// Disable reason: Image itself is not meant to be interactive, but
-	// should direct focus to block.
-	if ( isLink ) {
-		imgWrapper = (
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-			<a
-				href={ siteUrl }
-				className={ classes }
-				rel="home"
-				title={ title }
-				onClick={ ( event ) => event.preventDefault() }
-			>
-				{ img }
-			</a>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-		);
-	}
-
 	let imageWidthWithinContainer;
 
 	if ( clientWidth && naturalWidth && naturalHeight ) {
@@ -169,7 +149,7 @@ const SiteLogo = ( {
 	}
 
 	if ( ! isResizable || ! imageWidthWithinContainer ) {
-		return <div style={ { width, height } }>{ imgWrapper }</div>;
+		return <div style={ { width, height } }>{ img }</div>;
 	}
 
 	// Set the default width to a responsible size.
@@ -272,7 +252,7 @@ const SiteLogo = ( {
 					} );
 				} }
 			>
-				{ imgWrapper }
+				{ img }
 			</ResizableBox>
 		);
 
@@ -360,7 +340,19 @@ const SiteLogo = ( {
 					/>
 				) }
 			</BlockControls>
-			{ imgEdit }
+			{ isLink ? (
+				<a
+					href={ siteUrl }
+					className={ classes }
+					rel="home"
+					title={ title }
+					{ ...disabledClickProps }
+				>
+					{ imgEdit }
+				</a>
+			) : (
+				{ imgEdit }
+			) }
 		</>
 	);
 };
@@ -404,6 +396,11 @@ const InspectorLogoPreview = ( { mediaItemData = {}, itemGroupProps } ) => {
 	);
 };
 
+const disabledClickProps = {
+	onClick: ( event ) => event.preventDefault(),
+	'aria-disabled': true,
+};
+
 export default function LogoEdit( {
 	attributes,
 	className,
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index a98865a7a1eedc..b90e28b3601e63 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -6,11 +6,6 @@
 }
 
 .wp-block-site-logo {
-	// Make the block selectable.
-	a {
-		pointer-events: none;
-	}
-
 	.custom-logo-link {
 		cursor: inherit;
 
@@ -30,8 +25,8 @@
 	}
 
 	// Make the linked image inside the resize full width
-	.components-resizable-box__container > a,
-	.components-resizable-box__container > a img {
+	a > .components-resizable-box__container,
+	a > .components-resizable-box__container img {
 		width: 100%;
 	}
 }

From c1d747dc826d346fd2d2554c9b78d36d044d8ebd Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 15 Nov 2023 13:49:45 +0100
Subject: [PATCH 10/31] Fix the JavaScript error when the link option is
 toggled off

---
 packages/block-library/src/site-logo/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 50d952aab5993a..07f448452762a9 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -351,7 +351,7 @@ const SiteLogo = ( {
 					{ imgEdit }
 				</a>
 			) : (
-				{ imgEdit }
+				imgEdit
 			) }
 		</>
 	);

From ab6c5d4fbac951005feccd0746a7dd1c5268a850 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 20 Nov 2023 11:32:23 +0100
Subject: [PATCH 11/31] Update the <a> image wrapper and editor styles. Add
 'has-custom-boder' class name to index.php

---
 packages/block-library/src/site-logo/edit.js  | 97 ++++++++++++-------
 .../block-library/src/site-logo/editor.scss   | 19 ++--
 .../block-library/src/site-logo/index.php     |  5 +-
 3 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 07f448452762a9..0fd71698bb4110 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -61,6 +61,34 @@ import { MIN_SIZE } from '../image/constants';
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const ACCEPT_MEDIA_STRING = 'image/*';
 
+// If the logo is linked, wrap in an <a /> tag to trigger any inherited link element styles.
+const ImageWrapper = ( { isLink, href, title, classes, children } ) => {
+	if ( ! isLink ) {
+		return children;
+	}
+	return (
+		<a
+			href={ href }
+			className={ classes }
+			title={ title }
+			rel="home"
+			onClick={ ( event ) => event.preventDefault() }
+			aria-disabled={ true }
+			style={ {
+				// When the site logo block is linked,
+				// it's wrapped with a disabled <a /> tag.
+				// Restore cursor style so it doesn't appear 'clickable'
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
+				cursor: 'default',
+				display: 'inline',
+			} }
+		>
+			{ children }
+		</a>
+	);
+};
+
 const SiteLogo = ( {
 	alt,
 	attributes,
@@ -209,27 +237,34 @@ const SiteLogo = ( {
 
 	const imgEdit =
 		canEditImage && isEditingImage ? (
-			<ImageEditor
-				id={ logoId }
-				url={ logoUrl }
-				width={ currentWidth }
-				height={ currentHeight }
-				clientWidth={ clientWidth }
-				naturalHeight={ naturalHeight }
-				naturalWidth={ naturalWidth }
-				onSaveImage={ ( imageAttributes ) => {
-					setLogo( imageAttributes.id );
-				} }
-				onFinishEditing={ () => {
-					setIsEditingImage( false );
-				} }
-				borderProps={ borderProps }
-			/>
+			<ImageWrapper
+				isLink={ isLink }
+				href={ siteUrl }
+				title={ title }
+				classes={ classes }
+			>
+				<ImageEditor
+					id={ logoId }
+					url={ logoUrl }
+					width={ currentWidth }
+					height={ currentHeight }
+					clientWidth={ clientWidth }
+					naturalHeight={ naturalHeight }
+					naturalWidth={ naturalWidth }
+					onSaveImage={ ( imageAttributes ) => {
+						setLogo( imageAttributes.id );
+					} }
+					onFinishEditing={ () => {
+						setIsEditingImage( false );
+					} }
+					borderProps={ borderProps }
+				/>
+			</ImageWrapper>
 		) : (
 			<ResizableBox
 				size={ {
 					width: currentWidth,
-					height: 'auto',
+					height: currentHeight,
 				} }
 				showHandle={ isSelected }
 				minWidth={ minWidth }
@@ -252,7 +287,14 @@ const SiteLogo = ( {
 					} );
 				} }
 			>
-				{ img }
+				<ImageWrapper
+					isLink={ isLink }
+					href={ siteUrl }
+					title={ title }
+					classes={ classes }
+				>
+					{ img }
+				</ImageWrapper>
 			</ResizableBox>
 		);
 
@@ -340,19 +382,7 @@ const SiteLogo = ( {
 					/>
 				) }
 			</BlockControls>
-			{ isLink ? (
-				<a
-					href={ siteUrl }
-					className={ classes }
-					rel="home"
-					title={ title }
-					{ ...disabledClickProps }
-				>
-					{ imgEdit }
-				</a>
-			) : (
-				imgEdit
-			) }
+			{ imgEdit }
 		</>
 	);
 };
@@ -396,11 +426,6 @@ const InspectorLogoPreview = ( { mediaItemData = {}, itemGroupProps } ) => {
 	);
 };
 
-const disabledClickProps = {
-	onClick: ( event ) => event.preventDefault(),
-	'aria-disabled': true,
-};
-
 export default function LogoEdit( {
 	attributes,
 	className,
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index b90e28b3601e63..de4b5e653deae9 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -23,12 +23,6 @@
 		height: auto;
 		max-width: 100%;
 	}
-
-	// Make the linked image inside the resize full width
-	a > .components-resizable-box__container,
-	a > .components-resizable-box__container img {
-		width: 100%;
-	}
 }
 
 // Provide special styling for the placeholder.
@@ -152,3 +146,16 @@
 		height: $grid-unit-50;
 	}
 }
+
+// This is necessary for the editor resize handles to accurately work on a non-floated, non-resized logo.
+.wp-block-site-logo .components-resizable-box__container {
+	// Using "display: table" because:
+	// - it visually hides empty white space in between elements
+	// - it allows the element to be as wide as its contents (instead of 100% width, as it would be with `display: block`)
+	display: table;
+	img {
+		display: block;
+		width: inherit;
+		height: inherit;
+	}
+}
diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 15907569c2e16f..515120a4fa0fa6 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -50,8 +50,12 @@ function render_block_core_site_logo( $attributes ) {
 		$custom_logo = $processor->get_updated_html();
 	}
 
+	$classnames = array();
+
 	$border_attributes = block_core_site_logo_get_border_attributes( $attributes );
 	if ( $border_attributes ) {
+		$classnames[] = 'has-custom-border';
+
 		$processor = new WP_HTML_Tag_Processor( $custom_logo );
 		$processor->next_tag( 'img' );
 		if ( ! empty( $border_attributes['class'] ) ) {
@@ -63,7 +67,6 @@ function render_block_core_site_logo( $attributes ) {
 		$custom_logo = $processor->get_updated_html();
 	}
 
-	$classnames = array();
 	if ( empty( $attributes['width'] ) ) {
 		$classnames[] = 'is-default-size';
 	}

From 038906b311df97ef7f0d367e7669351049fc326f Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 23 Nov 2023 05:33:42 +0100
Subject: [PATCH 12/31] Add display:table to centered logos

---
 packages/block-library/src/site-logo/editor.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index de4b5e653deae9..b219216782e35d 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -1,5 +1,6 @@
 .wp-block[data-align="center"] > .wp-block-site-logo,
-.wp-block-site-logo.aligncenter > div {
+.wp-block-site-logo.aligncenter > div,
+.wp-block-site-logo.aligncenter {
 	display: table;
 	margin-left: auto;
 	margin-right: auto;

From a76a4ac45bdaaa349ac8d41cd188f87ee97a2202 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 24 Nov 2023 10:46:29 +0100
Subject: [PATCH 13/31] Code cleanup based on review

---
 packages/block-library/src/site-logo/edit.js     | 13 ++++++++++++-
 packages/block-library/src/site-logo/editor.scss |  4 ++++
 packages/block-library/src/site-logo/index.php   |  6 ++----
 packages/block-library/src/site-logo/style.scss  |  6 ++----
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 0fd71698bb4110..a4c80eb7042963 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -177,7 +177,18 @@ const SiteLogo = ( {
 	}
 
 	if ( ! isResizable || ! imageWidthWithinContainer ) {
-		return <div style={ { width, height } }>{ img }</div>;
+		return (
+			<div style={ { width, height } }>
+				<ImageWrapper
+					isLink={ isLink }
+					href={ siteUrl }
+					title={ title }
+					classes={ classes }
+				>
+					{ img }
+				</ImageWrapper>
+			</div>
+		);
 	}
 
 	// Set the default width to a responsible size.
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index b219216782e35d..9a6e6b3b1b1d01 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -24,6 +24,10 @@
 		height: auto;
 		max-width: 100%;
 	}
+
+	.wp-block-image__crop-area {
+		pointer-events: auto;
+	}
 }
 
 // Provide special styling for the placeholder.
diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 515120a4fa0fa6..98891c3f5eb327 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -34,8 +34,6 @@ function render_block_core_site_logo( $attributes ) {
 	if ( ! $attributes['isLink'] ) {
 		// Remove the link.
 		$custom_logo = preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );
-
-		preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );
 	}
 
 	if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) {
@@ -105,12 +103,12 @@ function block_core_site_logo_get_border_attributes( $attributes ) {
 
 	// Border color.
 	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
-	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
 	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
 
 	// Individual border styles e.g. top, left etc.
 	foreach ( $sides as $side ) {
-		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
 		$border_styles[ $side ] = array(
 			'color' => isset( $border['color'] ) ? $border['color'] : null,
 			'style' => isset( $border['style'] ) ? $border['style'] : null,
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index 5e22cbd4cbe0b8..d9856b65836431 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -20,10 +20,8 @@
 		max-width: 100%;
 	}
 
-	&.has-custom-border {
-		img {
-			box-sizing: border-box;
-		}
+	&.has-custom-border img {
+		box-sizing: border-box;
 	}
 
 	// Inherit border radius from style variations.

From 122e4a7133ee9e4a8a856cc8db48fbc13e77238f Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 9 Jan 2024 13:07:04 +0100
Subject: [PATCH 14/31] Update editor.scss

---
 packages/block-library/src/site-logo/editor.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 9a6e6b3b1b1d01..2c64eb00b0e7be 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -164,3 +164,13 @@
 		height: inherit;
 	}
 }
+
+.wp-block-site-logo.has-custom-border {
+	.reactEasyCrop_CropArea {
+		border-width: 0;
+	}
+
+	.wp-block-image__crop-area {
+		box-sizing: border-box;
+	}
+}

From 2e987e5add9c7ddc32e69e43ddecff4b729b1d5b Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 10 Jan 2024 08:07:18 +0100
Subject: [PATCH 15/31] Try to fix the height difference that occurs when the
 parent element changes

---
 packages/block-library/src/site-logo/editor.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 2c64eb00b0e7be..ed6e58ccc852c3 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -161,7 +161,6 @@
 	img {
 		display: block;
 		width: inherit;
-		height: inherit;
 	}
 }
 

From cf4af0d379695340df96a1191ee62ce0a75f7570 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Thu, 18 Jan 2024 07:11:44 +0100
Subject: [PATCH 16/31] Remove undefined check for the borderProps.className

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
---
 packages/block-library/src/site-logo/edit.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 5e2cd70fe21d2e..535af2338ed2b1 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -154,9 +154,7 @@ const SiteLogo = ( {
 
 	const img = (
 		<img
-			className={ classnames( 'custom-logo', {
-				[ borderProps.className ]: !! borderProps.className,
-			} ) }
+			className={ classnames( 'custom-logo', borderProps.className ) }
 			src={ logoUrl }
 			alt={ alt }
 			onLoad={ ( event ) => {

From 45702b0059dffe403327a41bda4d1da1c912894b Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 18 Jan 2024 07:13:02 +0100
Subject: [PATCH 17/31] Remove unwanted and duplicate CSS in editor.scss

---
 packages/block-library/src/site-logo/editor.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index ed6e58ccc852c3..24030f71c6fbef 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -21,8 +21,6 @@
 
 	img {
 		display: block;
-		height: auto;
-		max-width: 100%;
 	}
 
 	.wp-block-image__crop-area {
@@ -165,10 +163,6 @@
 }
 
 .wp-block-site-logo.has-custom-border {
-	.reactEasyCrop_CropArea {
-		border-width: 0;
-	}
-
 	.wp-block-image__crop-area {
 		box-sizing: border-box;
 	}

From 9c698f5192fa8751547837712b714f15ab9337ea Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 25 Jan 2024 07:52:11 +0100
Subject: [PATCH 18/31] Simplify the conditions and assignments in
 block_core_site_logo_get_border_attributes()

---
 .../block-library/src/site-logo/index.php     | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 98891c3f5eb327..a12e0e2bf3edef 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -82,37 +82,25 @@ function render_block_core_site_logo( $attributes ) {
  * @return array The border-related classnames and styles for the block.
  */
 function block_core_site_logo_get_border_attributes( $attributes ) {
-
-	$border_styles = array();
 	$sides         = array( 'top', 'right', 'bottom', 'left' );
-
-	// Border radius.
-	if ( isset( $attributes['style']['border']['radius'] ) ) {
-		$border_styles['radius'] = $attributes['style']['border']['radius'];
-	}
-
-	// Border style.
-	if ( isset( $attributes['style']['border']['style'] ) ) {
-		$border_styles['style'] = $attributes['style']['border']['style'];
-	}
-
-	// Border width.
-	if ( isset( $attributes['style']['border']['width'] ) ) {
-		$border_styles['width'] = $attributes['style']['border']['width'];
-	}
+	$border_styles = array(
+		'radius' => $attributes['style']['border']['radius'] ?? null,
+		'style'  => $attributes['style']['border']['style'] ?? null,
+		'width'  => $attributes['style']['border']['width'] ?? null,
+	);
 
 	// Border color.
 	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
 	$custom_color           = $attributes['style']['border']['color'] ?? null;
-	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+	$border_styles['color'] = $preset_color ?? $custom_color;
 
 	// Individual border styles e.g. top, left etc.
 	foreach ( $sides as $side ) {
 		$border                 = $attributes['style']['border'][ $side ] ?? null;
 		$border_styles[ $side ] = array(
-			'color' => isset( $border['color'] ) ? $border['color'] : null,
-			'style' => isset( $border['style'] ) ? $border['style'] : null,
-			'width' => isset( $border['width'] ) ? $border['width'] : null,
+			'color' => $border['color'] ?? null,
+			'style' => $border['style'] ?? null,
+			'width' => $border['width'] ?? null,
 		);
 	}
 

From 43eabd8875c5bf038c8c4a6a263adb0898af3c03 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 25 Jan 2024 14:56:10 +0100
Subject: [PATCH 19/31] Move the border selector from supports to selectors.

---
 packages/block-library/src/site-logo/block.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
index 977a042a72fc36..50d52a6013f97b 100644
--- a/packages/block-library/src/site-logo/block.json
+++ b/packages/block-library/src/site-logo/block.json
@@ -38,7 +38,6 @@
 			"radius": true,
 			"width": true,
 			"style": true,
-			"__experimentalSelector": "img, .components-placeholder__illustration, .components-placeholder::before, .wp-block-image__crop-area",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -61,6 +60,9 @@
 			}
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-site-logo img, .wp-block-site-logo .components-placeholder, .wp-block-site-logo .wp-block-image__crop-area"
+	},
 	"styles": [
 		{
 			"name": "default",

From 90cb781a12955ae8903f53a5bb2d8e824b582c2f Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Sat, 3 Feb 2024 14:28:35 +0100
Subject: [PATCH 20/31] Update style.scss

---
 packages/block-library/src/site-logo/style.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index d9856b65836431..740210e258e5cb 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -18,9 +18,6 @@
 	img {
 		height: auto;
 		max-width: 100%;
-	}
-
-	&.has-custom-border img {
 		box-sizing: border-box;
 	}
 

From cfb275ab040fe9ae746abeef007a6389baf7fe38 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 20 Mar 2024 13:36:31 +0100
Subject: [PATCH 21/31] Fix coding standard issues

Remove the default value for the boolean aria-disabled in edit.js
Add a since to block_core_site_logo_get_border_attributes() in index.php
---
 packages/block-library/src/site-logo/edit.js   | 2 +-
 packages/block-library/src/site-logo/index.php | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 7e85f2dd02941e..dbf9d64a79c877 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -73,7 +73,7 @@ const ImageWrapper = ( { isLink, href, title, classes, children } ) => {
 			title={ title }
 			rel="home"
 			onClick={ ( event ) => event.preventDefault() }
-			aria-disabled={ true }
+			aria-disabled
 			style={ {
 				// When the site logo block is linked,
 				// it's wrapped with a disabled <a /> tag.
diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 294a6abaad430a..5022eab3c97840 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -80,6 +80,8 @@ function render_block_core_site_logo( $attributes ) {
  * Generates class names and styles to apply the border support styles for
  * the site logo block.
  *
+ * @since 6.6.0
+ *
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.
  */

From bc5a7ef1c15ed149fbd0109977ed2ee74ddb6fbd Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 4 Apr 2024 09:52:50 +0200
Subject: [PATCH 22/31] Revert the change to .wp-block-site-logo.aligncenter.

Revert the change to .wp-block-site-logo.aligncenter, to fix a problem with the center alignment when the block has left or right margin set in the dimensions panel.
---
 packages/block-library/src/site-logo/editor.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index e9ee092325ca6c..198f31d08140d3 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -1,6 +1,5 @@
 .wp-block[data-align="center"] > .wp-block-site-logo,
-.wp-block-site-logo.aligncenter > div,
-.wp-block-site-logo.aligncenter {
+.wp-block-site-logo.aligncenter > div {
 	display: table;
 	margin-left: auto;
 	margin-right: auto;

From 635476c3189eb05448a7be37f7d63dc53a5dec73 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 24 Apr 2024 13:13:25 +0200
Subject: [PATCH 23/31] Try to fix merge conflicts, attempt 1

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

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index dbf9d64a79c877..67c93b23ff98ae 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -11,7 +11,6 @@ import {
 	createInterpolateElement,
 	useEffect,
 	useState,
-	useRef,
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
@@ -51,11 +50,6 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import useClientWidth from '../image/use-client-width';
-
-/**
- * Module constants
- */
 import { MIN_SIZE } from '../image/constants';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -92,7 +86,6 @@ const ImageWrapper = ( { isLink, href, title, classes, children } ) => {
 const SiteLogo = ( {
 	alt,
 	attributes,
-	containerRef,
 	isSelected,
 	setAttributes,
 	setLogo,
@@ -105,7 +98,6 @@ const SiteLogo = ( {
 } ) => {
 	const { align, width, height, isLink, linkTarget, shouldSyncIcon } =
 		attributes;
-	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
@@ -113,9 +105,7 @@ const SiteLogo = ( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 	const borderProps = useBorderProps( attributes );
-	const classes = classnames( 'custom-logo-link', {
-		'is-transient': isBlobURL( logoUrl ),
-	} );
+	const classes = classnames( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -153,28 +143,24 @@ const SiteLogo = ( {
 	}
 
 	const img = (
-		<img
-			className={ classnames( 'custom-logo', borderProps.className ) }
-			src={ logoUrl }
-			alt={ alt }
-			onLoad={ ( event ) => {
-				setNaturalSize( {
-					naturalWidth: event.target.naturalWidth,
-					naturalHeight: event.target.naturalHeight,
-				} );
-			} }
-			style={ borderProps.style }
-		/>
+		<>
+			<img
+				className={ classnames( 'custom-logo', borderProps.className ) }
+				src={ logoUrl }
+				alt={ alt }
+				onLoad={ ( event ) => {
+					setNaturalSize( {
+						naturalWidth: event.target.naturalWidth,
+						naturalHeight: event.target.naturalHeight,
+					} );
+				} }
+				style={ borderProps.style }
+			/>
+			{ isBlobURL( logoUrl ) && <Spinner /> }
+		</>
 	);
 
-	let imageWidthWithinContainer;
-
-	if ( clientWidth && naturalWidth && naturalHeight ) {
-		const exceedMaxWidth = naturalWidth > clientWidth;
-		imageWidthWithinContainer = exceedMaxWidth ? clientWidth : naturalWidth;
-	}
-
-	if ( ! isResizable || ! imageWidthWithinContainer ) {
+	if ( ! isResizable || ! naturalWidth || ! naturalHeight ) {
 		return (
 			<div style={ { width, height } }>
 				<ImageWrapper
@@ -257,7 +243,6 @@ const SiteLogo = ( {
 					url={ logoUrl }
 					width={ currentWidth }
 					height={ currentHeight }
-					clientWidth={ clientWidth }
 					naturalHeight={ naturalHeight }
 					naturalWidth={ naturalWidth }
 					onSaveImage={ ( imageAttributes ) => {
@@ -447,7 +432,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-	const ref = useRef();
 	const borderProps = useBorderProps( attributes );
 	const {
 		siteLogoId,
@@ -490,6 +474,7 @@ export default function LogoEdit( {
 		};
 	}, [] );
 	const { getSettings } = useSelect( blockEditorStore );
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -536,6 +521,7 @@ export default function LogoEdit( {
 
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
+			setTemporaryURL( media.url );
 			setLogo( undefined );
 			return;
 		}
@@ -551,6 +537,7 @@ export default function LogoEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
 	const onFilesDrop = ( filesList ) => {
@@ -559,6 +546,7 @@ export default function LogoEdit( {
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
+					setTemporaryURL( image.url );
 					return;
 				}
 				onInitialSelectLogo( image );
@@ -573,7 +561,7 @@ export default function LogoEdit( {
 		onError: onUploadError,
 		onRemoveLogo,
 	};
-	const controls = canUserEdit && logoUrl && (
+	const controls = canUserEdit && logoUrl && ! temporaryURL && (
 		<BlockControls group="other">
 			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
@@ -584,23 +572,32 @@ export default function LogoEdit( {
 	if ( isLoading ) {
 		logoImage = <Spinner />;
 	}
-	if ( !! logoUrl ) {
+
+	// Reset temporary url when logoUrl is available.
+	useEffect( () => {
+		if ( logoUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ logoUrl, temporaryURL ] );
+
+	if ( !! logoUrl || !! temporaryURL ) {
 		logoImage = (
-			<SiteLogo
-				alt={ alt }
-				attributes={ attributes }
-				className={ className }
-				containerRef={ ref }
-				isSelected={ isSelected }
-				setAttributes={ setAttributes }
-				logoUrl={ logoUrl }
-				setLogo={ setLogo }
-				logoId={ mediaItemData?.id || siteLogoId }
-				siteUrl={ url }
-				setIcon={ setIcon }
-				iconId={ siteIconId }
-				canUserEdit={ canUserEdit }
-			/>
+			<>
+				<SiteLogo
+					alt={ alt }
+					attributes={ attributes }
+					className={ className }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+					logoUrl={ temporaryURL || logoUrl }
+					setLogo={ setLogo }
+					logoId={ mediaItemData?.id || siteLogoId }
+					siteUrl={ url }
+					setIcon={ setIcon }
+					iconId={ siteIconId }
+					canUserEdit={ canUserEdit }
+				/>
+			</>
 		);
 	}
 	const placeholder = ( content ) => {
@@ -626,16 +623,14 @@ export default function LogoEdit( {
 
 	const classes = classnames( className, {
 		'is-default-size': ! width,
+		'is-transient': temporaryURL,
 		'has-custom-border':
 			!! borderProps.className ||
 			( borderProps.style &&
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const blockProps = useBlockProps( {
-		ref,
-		className: classes,
-	} );
+	const blockProps = useBlockProps( { className: classes } );
 
 	const label = __( 'Add a site logo' );
 
@@ -696,8 +691,8 @@ export default function LogoEdit( {
 		<div { ...blockProps }>
 			{ controls }
 			{ mediaInspectorPanel }
-			{ !! logoUrl && logoImage }
-			{ ! logoUrl && ! canUserEdit && (
+			{ ( !! logoUrl || !! temporaryURL ) && logoImage }
+			{ ! temporaryURL && ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">
 					{ !! isLoading && (
 						<span className="components-placeholder__preview">
@@ -706,7 +701,7 @@ export default function LogoEdit( {
 					) }
 				</Placeholder>
 			) }
-			{ ! logoUrl && canUserEdit && (
+			{ ! temporaryURL && ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
 					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }

From 7eadd0833997e04169958cbe3e4099cefc00dba1 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 7 May 2024 06:11:56 +0200
Subject: [PATCH 24/31] Fix issues after the merge conflict

Adjust spacing.
replace classnames with clsx.
---
 packages/block-library/src/site-logo/edit.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 5daa38b4685d03..3ab63997d54f68 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -106,7 +106,7 @@ const SiteLogo = ( {
 	const { toggleSelection } = useDispatch( blockEditorStore );
 	const borderProps = useBorderProps( attributes );
 	const classes = clsx( 'custom-logo-link' );
-  
+
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -146,7 +146,7 @@ const SiteLogo = ( {
 	const img = (
 		<>
 			<img
-				className={ classnames( 'custom-logo', borderProps.className ) }
+				className={ clsx( 'custom-logo', borderProps.className ) }
 				src={ logoUrl }
 				alt={ alt }
 				onLoad={ ( event ) => {

From b9008b86eb9e9c896e20daebed3b0739b6e6ada5 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 31 Jul 2024 10:14:00 +0200
Subject: [PATCH 25/31] Remove experimental default controls

---
 packages/block-library/src/site-logo/block.json | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
index d5bdbe9b4e8a14..07855aaa8dc2fb 100644
--- a/packages/block-library/src/site-logo/block.json
+++ b/packages/block-library/src/site-logo/block.json
@@ -38,13 +38,7 @@
 			"radius": true,
 			"width": true,
 			"style": true,
-			"__experimentalSkipSerialization": true,
-			"__experimentalDefaultControls": {
-				"color": true,
-				"radius": true,
-				"width": true,
-				"style": true
-			}
+			"__experimentalSkipSerialization": true
 		},
 		"color": {
 			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",

From b4eb31287389c1f94bcb192794232557c65c8801 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 31 Jul 2024 10:24:40 +0200
Subject: [PATCH 26/31] Border attributes: Use add_class instead of
 set_attributes

---
 packages/block-library/src/site-logo/index.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 792745d5a9f09b..1acc91bd8540aa 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -59,7 +59,7 @@ function render_block_core_site_logo( $attributes ) {
 		$processor = new WP_HTML_Tag_Processor( $custom_logo );
 		$processor->next_tag( 'img' );
 		if ( ! empty( $border_attributes['class'] ) ) {
-			$processor->set_attribute( 'class', $border_attributes['class'] );
+			$processor->add_class( $border_attributes['class'] );
 		}
 		if ( ! empty( $border_attributes['style'] ) ) {
 			$processor->set_attribute( 'style', $border_attributes['style'] );
@@ -80,7 +80,7 @@ function render_block_core_site_logo( $attributes ) {
  * Generates class names and styles to apply the border support styles for
  * the site logo block.
  *
- * @since 6.6.0
+ * @since 6.7.0
  *
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.

From 07117f101f19e6cad76576e3e480ff73ed71c732 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 31 Jul 2024 11:16:07 +0200
Subject: [PATCH 27/31] Try to remove the CSS classes from the ImageWrapper to
 test if anything breaks.

---
 packages/block-library/src/site-logo/edit.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index e0e2d5ad57ec0c..d9799322dafff0 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -56,14 +56,14 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const ACCEPT_MEDIA_STRING = 'image/*';
 
 // If the logo is linked, wrap in an <a /> tag to trigger any inherited link element styles.
-const ImageWrapper = ( { isLink, href, title, classes, children } ) => {
+const ImageWrapper = ( { isLink, href, title, children } ) => {
 	if ( ! isLink ) {
 		return children;
 	}
 	return (
 		<a
 			href={ href }
-			className={ classes }
+			className="custom-logo-link"
 			title={ title }
 			rel="home"
 			onClick={ ( event ) => event.preventDefault() }
@@ -105,7 +105,6 @@ const SiteLogo = ( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 	const borderProps = useBorderProps( attributes );
-	const classes = clsx( 'custom-logo-link' );
 
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
@@ -168,7 +167,6 @@ const SiteLogo = ( {
 					isLink={ isLink }
 					href={ siteUrl }
 					title={ title }
-					classes={ classes }
 				>
 					{ img }
 				</ImageWrapper>
@@ -233,12 +231,7 @@ const SiteLogo = ( {
 
 	const imgEdit =
 		canEditImage && isEditingImage ? (
-			<ImageWrapper
-				isLink={ isLink }
-				href={ siteUrl }
-				title={ title }
-				classes={ classes }
-			>
+			<ImageWrapper isLink={ isLink } href={ siteUrl } title={ title }>
 				<ImageEditor
 					id={ logoId }
 					url={ logoUrl }
@@ -286,7 +279,6 @@ const SiteLogo = ( {
 					isLink={ isLink }
 					href={ siteUrl }
 					title={ title }
-					classes={ classes }
 				>
 					{ img }
 				</ImageWrapper>

From 46c352bf04d40045d408eb07e89f3e058e55b637 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 31 Jul 2024 12:42:05 +0200
Subject: [PATCH 28/31] Show block border styles when the placeholder is
 selected.

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

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index d9799322dafff0..8b16f02ecd3961 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -624,10 +624,7 @@ export default function LogoEdit( {
 				className={ placeholderClassName }
 				preview={ logoImage }
 				withIllustration
-				style={
-					( width,
-					isSelected === false ? borderProps.style : undefined )
-				}
+				style={ ( width, borderProps.style ) }
 			>
 				{ content }
 			</Placeholder>

From 31f50cf5200d9c91120a5dd573576aba7ecd7fe9 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Wed, 31 Jul 2024 14:44:38 +0200
Subject: [PATCH 29/31] WIP: update CSS reduce specificity

---
 packages/block-library/src/site-logo/editor.scss | 11 ++++++++++-
 packages/block-library/src/site-logo/style.scss  |  6 ------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index ec3a28daf67a77..0025e31e860b3a 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -44,16 +44,20 @@
 // @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
 
+	/**
 	&.is-default-size .components-placeholder {
 		height: 60px;
 		width: 60px;
 	}
+	*/
 
+	/**
 	// Inherit radius.
 	> div, // A 60px width div shown only in the editor on mobile.
 	.components-resizable-box__container {
 		border-radius: inherit;
 	}
+	*/
 
 	// Style the placeholder.
 	.components-placeholder {
@@ -61,7 +65,6 @@
 		justify-content: center;
 		align-items: center;
 		padding: 0;
-		border-radius: inherit;
 
 		// Provide a minimum size for the placeholder, for when the logo is resized.
 		// @todo resizing is currently only possible by adding an image, resizing,
@@ -105,6 +108,12 @@
 	}
 }
 
+// Reduced specificity for the placeholder border radius,
+// so that border-radius from global styles can be applied.
+:root :where(.wp-block-site-logo .components-placeholder) {
+	border-radius: inherit;
+}
+
 .block-library-site-logo__inspector-upload-container {
 	position: relative;
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index d238f2ba84dcc1..b66d8bf612951d 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -21,12 +21,6 @@
 		box-sizing: border-box;
 	}
 
-	// Inherit border radius from style variations.
-	a,
-	img {
-		border-radius: inherit;
-	}
-
 	&.aligncenter {
 		margin-left: auto;
 		margin-right: auto;

From 12cdcf0c2b4dec46ba40b64cea98cac2d644fa11 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 1 Aug 2024 06:19:56 +0200
Subject: [PATCH 30/31] Add the size limitation back

---
 packages/block-library/src/site-logo/editor.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 0025e31e860b3a..5123e2be8e2f6e 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -44,12 +44,10 @@
 // @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
 
-	/**
 	&.is-default-size .components-placeholder {
 		height: 60px;
 		width: 60px;
 	}
-	*/
 
 	/**
 	// Inherit radius.

From 95f264fb2305706d3fd42ae76e7ef434fce87155 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Thu, 1 Aug 2024 06:33:22 +0200
Subject: [PATCH 31/31] Try resetting the box-sizing on the placeholder.

---
 packages/block-library/src/site-logo/editor.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 5123e2be8e2f6e..521fcaafd771d9 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -112,6 +112,12 @@
 	border-radius: inherit;
 }
 
+// Reset the box-sizing for the placeholder to prevent the border
+// from covering the logo upload button.
+.wp-block-site-logo .components-placeholder.components-placeholder {
+	box-sizing: initial;
+}
+
 .block-library-site-logo__inspector-upload-container {
 	position: relative;
 	// Since there is no option to skip rendering the drag'n'drop icon in drop