Add border support to site logo

packages/block-library/src/site-logo/block.json

@@ -33,6 +33,20 @@
 		"html": false,
 		"align": true,
 		"alignWide": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"style": true,
+			"__experimentalSelector": "img, .components-placeholder__illustration, .components-placeholder::before, .wp-block-image__crop-area",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"color": {
 			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,

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

@@ -41,6 +41,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';
@@ -62,7 +63,7 @@ const ACCEPT_MEDIA_STRING = 'image/*';
 
 const SiteLogo = ( {
 	alt,
-	attributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },
+	attributes,
 	containerRef,
 	isSelected,
 	setAttributes,
@@ -74,13 +75,16 @@ 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 );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	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 ),
 	} );
@@ -104,7 +108,7 @@ const SiteLogo = ( {
 		if ( shouldSyncIcon && logoId !== iconId ) {
 			setAttributes( { shouldSyncIcon: false } );
 		}
-	}, [] );
+	}, [ iconId, logoId, setAttributes, shouldSyncIcon ] );
 
 	useEffect( () => {
 		if ( ! isSelected ) {
@@ -122,7 +126,9 @@ const SiteLogo = ( {
 
 	const img = (
 		<img
-			className="custom-logo"
+			className={ classnames( 'custom-logo', {
+				[ borderProps.className ]: !! borderProps.className,
+			} ) }
 			src={ logoUrl }
 			alt={ alt }
 			onLoad={ ( event ) => {
@@ -131,6 +137,7 @@ const SiteLogo = ( {
 					naturalHeight: event.target.naturalHeight,
 				} );
 			} }
+			style={ borderProps.style }
 		/>
 	);
 
@@ -236,6 +243,7 @@ const SiteLogo = ( {
 				onFinishEditing={ () => {
 					setIsEditingImage( false );
 				} }
+				borderProps={ borderProps }
 			/>
 		) : (
 			<ResizableBox
@@ -404,7 +412,7 @@ export default function LogoEdit( {
 } ) {
 	const { width, shouldSyncIcon } = attributes;
 	const ref = useRef();
-
+	const borderProps = useBorderProps( attributes );
 	const {
 		siteLogoId,
 		canUserEdit,
@@ -571,9 +579,7 @@ export default function LogoEdit( {
 				className={ placeholderClassName }
 				preview={ logoImage }
 				withIllustration={ true }
-				style={ {
-					width,
-				} }
+				style={ ( width, borderProps.style ) }
 			>
 				{ content }
 			</Placeholder>
@@ -582,6 +588,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( {

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,19 @@ function render_block_core_site_logo( $attributes ) {
 		$custom_logo = $processor->get_updated_html();
 	}
 
+	$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 +73,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
  */

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 {