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