@wordpress/block-library 5.0.1 → 6.0.1

package/src/query-pagination-next/edit.js

@@ -4,19 +4,41 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, PlainText } from '@wordpress/block-editor';
 
+const arrowMap = {
+	none: '',
+	arrow: '→',
+	chevron: '»',
+};
+
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
+	context: { paginationArrow },
 } ) {
+	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<PlainText
-			__experimentalVersion={ 2 }
-			tagName="a"
-			aria-label={ __( 'Next page link' ) }
-			placeholder={ __( 'Next Page' ) }
-			value={ label }
-			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+		<a
+			href="#pagination-next-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
-		/>
+		>
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Next page link' ) }
+				placeholder={ __( 'Next Page' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+		</a>
 	);
 }

package/src/query-pagination-next/index.php

@@ -22,7 +22,11 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$default_label      = __( 'Next Page' );
 	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$content            = '';
+	$pagination_arrow   = get_query_pagination_arrow( $block, true );
+	if ( $pagination_arrow ) {
+		$label .= $pagination_arrow;
+	}
+	$content = '';
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {

package/src/query-pagination-previous/block.json

@@ -11,7 +11,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query" ],
+	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,

package/src/query-pagination-previous/edit.js

@@ -4,19 +4,41 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, PlainText } from '@wordpress/block-editor';
 
+const arrowMap = {
+	none: '',
+	arrow: '←',
+	chevron: '«',
+};
+
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
+	context: { paginationArrow },
 } ) {
+	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<PlainText
-			__experimentalVersion={ 2 }
-			tagName="a"
-			aria-label={ __( 'Previous page link' ) }
-			placeholder={ __( 'Previous Page' ) }
-			value={ label }
-			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+		<a
+			href="#pagination-previous-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
-		/>
+		>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-query-pagination-previous-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Previous page link' ) }
+				placeholder={ __( 'Previous Page' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+		</a>
 	);
 }

package/src/query-pagination-previous/index.php

@@ -21,7 +21,11 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$default_label      = __( 'Previous Page' );
 	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$content            = '';
+	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	if ( $pagination_arrow ) {
+		$label = $pagination_arrow . $label;
+	}
+	$content = '';
 	// Check if the pagination is for Query that inherits the global context
 	// and handle appropriately.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {

package/src/quote/style.scss

@@ -1,4 +1,6 @@
 .wp-block-quote {
+	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
+
 	&.is-style-large,
 	&.is-large {
 		margin-bottom: 1em;

package/src/reset.scss

@@ -127,7 +127,8 @@ html :where(.editor-styles-wrapper) {
 	select:focus {
 		color: revert;
 		border-color: revert;
-		background: revert;
+		background-color: revert;
+		background-image: revert;
 		box-shadow: revert;
 		text-shadow: revert;
 		cursor: revert;

package/src/search/index.php

@@ -43,20 +43,17 @@ function render_block_core_search( $attributes ) {
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
-	if ( $show_label ) {
-		if ( ! empty( $attributes['label'] ) ) {
-			$label_markup = sprintf(
-				'<label for="%s" class="wp-block-search__label">%s</label>',
-				$input_id,
-				$attributes['label']
-			);
-		} else {
-			$label_markup = sprintf(
-				'<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>',
-				$input_id,
-				__( 'Search' )
-			);
-		}
+	$label_markup = sprintf(
+		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
+		$input_id,
+		empty( $attributes['label'] ) ? __( 'Search' ) : $attributes['label']
+	);
+	if ( $show_label && ! empty( $attributes['label'] ) ) {
+		$label_markup = sprintf(
+			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
+			$input_id,
+			$attributes['label']
+		);
 	}
 
 	if ( $show_input ) {
@@ -76,7 +73,7 @@ function render_block_core_search( $attributes ) {
 		$button_classes         = $color_classes;
 
 		if ( ! $is_button_inside ) {
-			$button_classes .= $border_color_classes;
+			$button_classes .= ' ' . $border_color_classes;
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {

package/src/search/test/__snapshots__/edit.native.js.snap

@@ -23,6 +23,7 @@ exports[`Search Block renders block with button inside option 1`] = `
         disableEditingMenu={false}
         focusable={true}
         fontFamily="serif"
+        fontSize={16}
         isMultiline={false}
         maxImagesWidth={200}
         onBackspace={[Function]}
@@ -126,6 +127,7 @@ exports[`Search Block renders block with button inside option 1`] = `
             disableEditingMenu={false}
             focusable={true}
             fontFamily="serif"
+            fontSize={16}
             isMultiline={false}
             maxImagesWidth={200}
             minWidth={75}
@@ -196,6 +198,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         disableEditingMenu={false}
         focusable={true}
         fontFamily="serif"
+        fontSize={16}
         isMultiline={false}
         maxImagesWidth={200}
         onBackspace={[Function]}
@@ -356,6 +359,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
             disableEditingMenu={false}
             focusable={true}
             fontFamily="serif"
+            fontSize={16}
             isMultiline={false}
             maxImagesWidth={200}
             minWidth={75}
@@ -426,6 +430,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         disableEditingMenu={false}
         focusable={true}
         fontFamily="serif"
+        fontSize={16}
         isMultiline={false}
         maxImagesWidth={200}
         onBackspace={[Function]}
@@ -529,6 +534,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             disableEditingMenu={false}
             focusable={true}
             fontFamily="serif"
+            fontSize={16}
             isMultiline={false}
             maxImagesWidth={200}
             minWidth={75}
@@ -599,6 +605,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
         disableEditingMenu={false}
         focusable={true}
         fontFamily="serif"
+        fontSize={16}
         isMultiline={false}
         maxImagesWidth={200}
         onBackspace={[Function]}

package/src/site-logo/block.json

@@ -3,7 +3,7 @@
 	"name": "core/site-logo",
 	"title": "Site Logo",
 	"category": "layout",
-	"description": "Useful for displaying a graphic mark, design, or symbol to represent the site. Once a site logo is set, it can be reused in different places and templates. It should not be confused with the site icon, which is the small image used in the dashboard, browser tabs, public search results, etc, to help recognize a site.",
+	"description": "Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.",
 	"textdomain": "default",
 	"attributes": {
 		"align": {
@@ -24,7 +24,12 @@
 	"supports": {
 		"html": false,
 		"align": true,
-		"alignWide": false
+		"alignWide": false,
+		"color": {
+			"__experimentalDuotone": "img",
+			"text": false,
+			"background": false
+		}
 	},
 	"styles": [
 		{

package/src/site-logo/edit.js

@@ -8,7 +8,7 @@ import { includes, pick } from 'lodash';
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
-import { useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	Notice,
@@ -17,6 +17,8 @@ import {
 	ResizableBox,
 	Spinner,
 	ToggleControl,
+	ToolbarButton,
+	ToolbarGroup,
 	Placeholder,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -28,10 +30,12 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalImageEditor as ImageEditor,
+	__experimentalImageEditingProvider as ImageEditingProvider,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { siteLogo as icon } from '@wordpress/icons';
+import { crop, siteLogo as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -52,19 +56,22 @@ const SiteLogo = ( {
 	containerRef,
 	isSelected,
 	setAttributes,
+	setLogo,
 	logoUrl,
 	siteUrl,
+	logoId,
 } ) => {
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = includes( [ 'wide', 'full' ], align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
+	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 	const classes = classnames( 'custom-logo-link', {
 		'is-transient': isBlobURL( logoUrl ),
 	} );
-	const { maxWidth, title } = useSelect( ( select ) => {
+	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const siteEntities = select( coreStore ).getEditedEntityRecord(
 			'root',
@@ -72,10 +79,16 @@ const SiteLogo = ( {
 		);
 		return {
 			title: siteEntities.title,
-			...pick( getSettings(), [ 'imageSizes', 'maxWidth' ] ),
+			...pick( getSettings(), [ 'imageEditing', 'maxWidth' ] ),
 		};
 	}, [] );
 
+	useEffect( () => {
+		if ( ! isSelected ) {
+			setIsEditingImage( false );
+		}
+	}, [ isSelected ] );
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -179,6 +192,63 @@ const SiteLogo = ( {
 	}
 	/* eslint-enable no-lonely-if */
 
+	const canEditImage =
+		logoId && naturalWidth && naturalHeight && imageEditing;
+
+	const imgEdit =
+		canEditImage && isEditingImage ? (
+			<ImageEditingProvider
+				id={ logoId }
+				url={ logoUrl }
+				naturalWidth={ naturalWidth }
+				naturalHeight={ naturalHeight }
+				clientWidth={ clientWidth }
+				onSaveImage={ ( imageAttributes ) => {
+					setLogo( imageAttributes.id );
+				} }
+				isEditing={ isEditingImage }
+				onFinishEditing={ () => setIsEditingImage( false ) }
+			>
+				<ImageEditor
+					url={ logoUrl }
+					width={ currentWidth }
+					height={ currentHeight }
+					clientWidth={ clientWidth }
+					naturalHeight={ naturalHeight }
+					naturalWidth={ naturalWidth }
+				/>
+			</ImageEditingProvider>
+		) : (
+			<ResizableBox
+				size={ {
+					width: currentWidth,
+					height: currentHeight,
+				} }
+				showHandle={ isSelected }
+				minWidth={ minWidth }
+				maxWidth={ maxWidthBuffer }
+				minHeight={ minHeight }
+				maxHeight={ maxWidthBuffer / ratio }
+				lockAspectRatio
+				enable={ {
+					top: false,
+					right: showRightHandle,
+					bottom: true,
+					left: showLeftHandle,
+				} }
+				onResizeStart={ onResizeStart }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					onResizeStop();
+					setAttributes( {
+						width: parseInt( currentWidth + delta.width, 10 ),
+						height: parseInt( currentHeight + delta.height, 10 ),
+					} );
+				} }
+			>
+				{ imgWrapper }
+			</ResizableBox>
+		);
+
 	return (
 		<>
 			<InspectorControls>
@@ -217,31 +287,16 @@ const SiteLogo = ( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<ResizableBox
-				size={ { width, height } }
-				showHandle={ isSelected }
-				minWidth={ minWidth }
-				maxWidth={ maxWidthBuffer }
-				minHeight={ minHeight }
-				maxHeight={ maxWidthBuffer / ratio }
-				lockAspectRatio
-				enable={ {
-					top: false,
-					right: showRightHandle,
-					bottom: true,
-					left: showLeftHandle,
-				} }
-				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					onResizeStop();
-					setAttributes( {
-						width: parseInt( currentWidth + delta.width, 10 ),
-						height: parseInt( currentHeight + delta.height, 10 ),
-					} );
-				} }
-			>
-				{ imgWrapper }
-			</ResizableBox>
+			<BlockControls group="block">
+				{ canEditImage && ! isEditingImage && (
+					<ToolbarButton
+						onClick={ () => setIsEditingImage( true ) }
+						icon={ crop }
+						label={ __( 'Crop' ) }
+					/>
+				) }
+			</BlockControls>
+			{ imgEdit }
 		</>
 	);
 };
@@ -272,7 +327,7 @@ export default function LogoEdit( {
 		const _siteLogo = siteSettings?.site_logo;
 		const _readOnlyLogo = siteData?.site_logo;
 		const _canUserEdit = canUser( 'update', 'settings' );
-		const _siteLogoId = _siteLogo || _readOnlyLogo;
+		const _siteLogoId = _canUserEdit ? _siteLogo : _readOnlyLogo;
 		const mediaItem =
 			_siteLogoId &&
 			select( coreStore ).getMedia( _siteLogoId, {
@@ -289,6 +344,7 @@ export default function LogoEdit( {
 			canUserEdit: _canUserEdit,
 			url: siteData?.url,
 			mediaItemData: mediaItem && {
+				id: mediaItem.id,
 				url: mediaItem.source_url,
 				alt: mediaItem.alt_text,
 			},
@@ -325,6 +381,11 @@ export default function LogoEdit( {
 		setLogo( media.id );
 	};
 
+	const onRemoveLogo = () => {
+		setLogo( null );
+		setLogoUrl( undefined );
+	};
+
 	const onUploadError = ( message ) => {
 		setError( message[ 2 ] ? message[ 2 ] : null );
 	};
@@ -338,6 +399,11 @@ export default function LogoEdit( {
 				onSelect={ onSelectLogo }
 				onError={ onUploadError }
 			/>
+			<ToolbarGroup>
+				<ToolbarButton onClick={ onRemoveLogo }>
+					{ __( 'Reset' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
 		</BlockControls>
 	);
 
@@ -357,6 +423,8 @@ export default function LogoEdit( {
 				isSelected={ isSelected }
 				setAttributes={ setAttributes }
 				logoUrl={ logoUrl }
+				setLogo={ setLogo }
+				logoId={ mediaItemData?.id || siteLogoId }
 				siteUrl={ url }
 			/>
 		);

package/src/site-logo/index.php

@@ -132,7 +132,7 @@ add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
  * @param array $old_value Previous theme mod settings.
  * @param array $value     Updated theme mod settings.
  */
-function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
+function _gutenberg_delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
 	// If the custom_logo is being unset, it's being removed from theme mods.
 	if ( isset( $old_value['custom_logo'] ) && ! isset( $value['custom_logo'] ) ) {
 		delete_option( 'site_logo' );
@@ -142,7 +142,7 @@ function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
 /**
  * Deletes the site logo when all theme mods are being removed.
  */
-function _delete_site_logo_on_remove_theme_mods() {
+function _gutenberg_delete_site_logo_on_remove_theme_mods() {
 	if ( false !== get_theme_support( 'custom-logo' ) ) {
 		delete_option( 'site_logo' );
 	}
@@ -160,3 +160,32 @@ function _delete_site_logo_on_remove_custom_logo_on_setup_theme() {
 	add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
 }
 add_action( 'setup_theme', '_delete_site_logo_on_remove_custom_logo_on_setup_theme', 11 );
+
+/**
+ * Removes the custom_logo theme-mod when the site_logo option gets deleted.
+ */
+function _delete_custom_logo_on_remove_site_logo() {
+	$theme = get_option( 'stylesheet' );
+
+	// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
+	// Remove Gutenberg hooks.
+	remove_action( "update_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_custom_logo', 10 );
+	remove_action( "delete_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_theme_mods' );
+
+	// Remove Core hooks.
+	remove_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10 );
+	remove_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
+
+	// Remove the custom logo.
+	remove_theme_mod( 'custom_logo' );
+
+	// Restore update and delete actions.
+	// Restore Gutenberg hooks.
+	add_action( "update_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_custom_logo', 10, 2 );
+	add_action( "delete_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_theme_mods' );
+
+	// Restore Core hooks.
+	add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 );
+	add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
+}
+add_action( 'delete_option_site_logo', '_delete_custom_logo_on_remove_site_logo' );

package/src/site-tagline/block.json

@@ -24,6 +24,7 @@
 			"fontSize": true,
 			"lineHeight": true,
 			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalLetterSpacing": true
 		}

package/src/site-title/block.json

@@ -3,7 +3,7 @@
 	"name": "core/site-title",
 	"title": "Site Title",
 	"category": "design",
-	"description": "Displays and allows editing the name of the site. The site title usually appears in the browser title bar, in search results, and more. Also available in Settings > General.",
+	"description": "Displays the name of this site. Update the block, and the changes apply everywhere it’s used. This will also appear in the browser title bar and in search results.",
 	"textdomain": "default",
 	"attributes": {
 		"level": {
@@ -12,6 +12,14 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": true
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
 		}
 	},
 	"supports": {
@@ -19,7 +27,6 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"text": false,
 			"link": true
 		},
 		"spacing": {

package/src/site-title/edit/index.js

@@ -12,9 +12,11 @@ import { __ } from '@wordpress/i18n';
 import {
 	RichText,
 	AlignmentControl,
+	InspectorControls,
 	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -28,7 +30,7 @@ export default function SiteTitleEdit( {
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { level, textAlign } = attributes;
+	const { level, textAlign, isLink, linkTarget } = attributes;
 	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
 	const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord } = select( coreStore );
@@ -49,10 +51,11 @@ export default function SiteTitleEdit( {
 	const siteTitleContent = canUserEdit ? (
 		<TagName { ...blockProps }>
 			<RichText
-				tagName="a"
+				tagName={ isLink ? 'a' : 'span' }
+				href={ isLink ? '#site-title-pseudo-link' : undefined }
 				aria-label={ __( 'Site title text' ) }
 				placeholder={ __( 'Write site title…' ) }
-				value={ title || readOnlyTitle }
+				value={ title }
 				onChange={ setTitle }
 				allowedFormats={ [] }
 				disableLineBreaks
@@ -63,12 +66,16 @@ export default function SiteTitleEdit( {
 		</TagName>
 	) : (
 		<TagName { ...blockProps }>
-			<a
-				href="#site-title-pseudo-link"
-				onClick={ ( event ) => event.preventDefault() }
-			>
-				{ readOnlyTitle || __( 'Site Title placeholder' ) }
-			</a>
+			{ isLink ? (
+				<a
+					href="#site-title-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ readOnlyTitle || __( 'Site Title placeholder' ) }
+				</a>
+			) : (
+				<span>{ title || readOnlyTitle }</span>
+			) }
 		</TagName>
 	);
 	return (
@@ -87,6 +94,26 @@ export default function SiteTitleEdit( {
 					} }
 				/>
 			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Make title link to home' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+					{ isLink && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
 			{ siteTitleContent }
 		</>
 	);