diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json index 35313f0212b39..d2fcea1931dee 100644 --- a/packages/block-library/src/site-logo/block.json +++ b/packages/block-library/src/site-logo/block.json @@ -8,6 +8,14 @@ }, "width": { "type": "number" + }, + "isLink": { + "type": "boolean", + "default": true + }, + "linkTarget": { + "type": "string", + "default": "_self" } }, "supports": { diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 9bd1d5eba276e..a748325dd2416 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -16,6 +16,7 @@ import { RangeControl, ResizableBox, Spinner, + ToggleControl, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { @@ -46,7 +47,7 @@ const ACCEPT_MEDIA_STRING = 'image/*'; const SiteLogo = ( { alt, - attributes: { align, width, height }, + attributes: { align, width, height, isLink, linkTarget }, containerRef, isSelected, setAttributes, @@ -59,7 +60,7 @@ const SiteLogo = ( { const isResizable = ! isWideAligned && isLargeViewport; const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} ); const { toggleSelection } = useDispatch( blockEditorStore ); - const classes = classnames( { + const classes = classnames( 'custom-logo-link', { 'is-transient': isBlobURL( logoUrl ), } ); const { maxWidth, title } = useSelect( ( select ) => { @@ -83,35 +84,38 @@ const SiteLogo = ( { } const img = ( - // Disable reason: Image itself is not meant to be interactive, but - // should direct focus to block. - /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ - event.preventDefault() } - > - - { { - setNaturalSize( - pick( event.target, [ - 'naturalWidth', - 'naturalHeight', - ] ) - ); - } } - /> - - - /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ + { { + setNaturalSize( + pick( event.target, [ 'naturalWidth', 'naturalHeight' ] ) + ); + } } + /> ); + 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 */ + event.preventDefault() } + > + { img } + + /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ + ); + } + let imageWidthWithinContainer; if ( clientWidth && naturalWidth && naturalHeight ) { @@ -120,7 +124,7 @@ const SiteLogo = ( { } if ( ! isResizable || ! imageWidthWithinContainer ) { - return
{ img }
; + return
{ imgWrapper }
; } const currentWidth = width || imageWidthWithinContainer; @@ -192,6 +196,24 @@ const SiteLogo = ( { value={ width || '' } disabled={ ! isResizable } /> + setAttributes( { isLink: ! isLink } ) } + checked={ isLink } + /> + { isLink && ( + <> + + setAttributes( { + linkTarget: value ? '_blank' : '_self', + } ) + } + checked={ linkTarget === '_blank' } + /> + + ) } - { img } + { imgWrapper } ); diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index f14feb0cb07a8..81933db0f8b46 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -23,7 +23,20 @@ function render_block_core_site_logo( $attributes ) { add_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); $custom_logo = get_custom_logo(); - $classnames = array(); + + if ( ! $attributes['isLink'] ) { + // Remove the link. + $custom_logo = preg_replace( '#(.*?)#i', '\1', $custom_logo ); + } + + if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) { + // Add the link target after the rel="home". + // Add an aria-label for informing that the page opens in a new tab. + $aria_label = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"'; + $custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . $attributes['linkTarget'] . '"' . $aria_label, $custom_logo ); + } + + $classnames = array(); if ( ! empty( $attributes['className'] ) ) { $classnames[] = $attributes['className']; } diff --git a/packages/e2e-tests/fixtures/blocks/core__site-logo.json b/packages/e2e-tests/fixtures/blocks/core__site-logo.json index 82c70eb3ae261..dfcf4280f9c49 100644 --- a/packages/e2e-tests/fixtures/blocks/core__site-logo.json +++ b/packages/e2e-tests/fixtures/blocks/core__site-logo.json @@ -3,7 +3,10 @@ "clientId": "_clientId_0", "name": "core/site-logo", "isValid": true, - "attributes": {}, + "attributes": { + "isLink": true, + "linkTarget": "_self" + }, "innerBlocks": [], "originalContent": "" }