WordPress · gwwar · Apr 19, 2021
@@ -91,6 +91,7 @@ import { ViewerFill } from './viewer-slot';
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
+ * @property {boolean}                    allowEditing               Whether a URL is editable in link preview. Defaults to true.
  */
 
 /**
@@ -115,6 +116,7 @@ function LinkControl( {
 	suggestionsQuery = {},
 	noURLSuggestion = false,
 	createSuggestionButtonText,
+	allowEditing = true,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -251,6 +253,7 @@ function LinkControl( {
 				<LinkPreview
 					value={ value }
 					onEditClick={ () => setIsEditingLink( true ) }
+					allowEditing={ allowEditing }
 				/>
 			) }
 

@@ -15,7 +15,11 @@ import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
  */
 import { ViewerSlot } from './viewer-slot';
 
-export default function LinkPreview( { value, onEditClick } ) {
+export default function LinkPreview( {
+	value,
+	onEditClick,
+	allowEditing = true,
+} ) {
 	const displayURL =
 		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
 		'';
@@ -42,13 +46,15 @@ export default function LinkPreview( { value, onEditClick } ) {
 				) }
 			</span>
 
-			<Button
-				isSecondary
-				onClick={ () => onEditClick() }
-				className="block-editor-link-control__search-item-action"
-			>
-				{ __( 'Edit' ) }
-			</Button>
+			{ allowEditing && (
+				<Button
+					isSecondary
+					onClick={ () => onEditClick() }
+					className="block-editor-link-control__search-item-action"
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			) }
 			<ViewerSlot fillProps={ value } />
 		</div>
 	);

@@ -175,6 +175,7 @@ export default function NavigationLinkEdit( {
 		numberOfDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
+		homeUrl,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -189,6 +190,8 @@ export default function NavigationLinkEdit( {
 			const descendants = getClientIdsOfDescendants( [ clientId ] )
 				.length;
 
+			const { canUser, getUnstableBase } = select( coreStore );
+
 			return {
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, name ).length >=
@@ -206,14 +209,9 @@ export default function NavigationLinkEdit( {
 					selectedBlockId,
 				] )?.length,
 				numberOfDescendants: descendants,
-				userCanCreatePages: select( coreStore ).canUser(
-					'create',
-					'pages'
-				),
-				userCanCreatePosts: select( coreStore ).canUser(
-					'create',
-					'posts'
-				),
+				userCanCreatePages: canUser( 'create', 'pages' ),
+				userCanCreatePosts: canUser( 'create', 'posts' ),
+				homeUrl: getUnstableBase()?.home,
 			};
 		},
 		[ clientId ]
@@ -265,6 +263,16 @@ export default function NavigationLinkEdit( {
 		}
 	}, [ url ] );
 
+	// Update home url to reflect current value which may have changed since last save. Server render_callback
+	// always ignores url attr in favor of home_url()
+	useEffect( () => {
+		if ( type === 'home' ) {
+			setAttributes( {
+				url: encodeURI( homeUrl ),
+			} );
+		}
+	}, [ url, type ] );
+
 	/**
 	 * Focus the Link label text and select it.
 	 */
@@ -491,6 +499,7 @@ export default function NavigationLinkEdit( {
 							/>
 							<LinkControl
 								className="wp-block-navigation-link__inline-link-input"
+								allowEditing={ 'home' !== type }
 								value={ link }
 								showInitialSuggestions={ true }
 								withCreateSuggestion={ userCanCreate }

@@ -7,6 +7,7 @@ import {
 	page as pageIcon,
 	postTitle as postIcon,
 	tag as tagIcon,
+	home as homeIcon,
 } from '@wordpress/icons';
 
 // FALLBACK: this is only used when the server does not understand the variations property in the
@@ -35,6 +36,18 @@ const fallbackVariations = [
 		description: __( 'A link to a page.' ),
 		attributes: { type: 'page', kind: 'post-type' },
 	},
+	{
+		name: 'home',
+		icon: homeIcon,
+		title: __( 'Home Link' ),
+		description: __( 'A link back to home.' ),
+		attributes: {
+			type: 'home',
+			url: '/', // make sure a url is provided to avoid editing state, this will get overwritten
+			/* translators: default label for home navigation menu link  */
+			label: __( 'Home' ),
+		},
+	},
 	{
 		name: 'category',
 		icon: categoryIcon,

@@ -7,6 +7,7 @@ import {
 	postTitle,
 	tag,
 	customPostType,
+	home,
 } from '@wordpress/icons';
 
 /**
@@ -24,6 +25,8 @@ function getIcon( variationName ) {
 			return tag;
 		case 'category':
 			return category;
+		case 'home':
+			return home;
 		default:
 			return customPostType;
 	}

@@ -150,7 +150,9 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		'<a class="wp-block-navigation-link__content" ';
 
 	// Start appending HTML attributes to anchor tag.
-	if ( isset( $attributes['url'] ) ) {
+	if ( isset( $attributes['type'] ) && 'home' === $attributes['type'] ) {
+		$html .= ' href="' . esc_url( home_url() ) . '"';
+	} elseif ( isset( $attributes['url'] ) ) {
 		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
 	}
 
@@ -311,6 +313,18 @@ function register_block_core_navigation_link() {
 			}
 		}
 	}
+	// Home variation.
+	$built_ins[] = array(
+		'name'        => 'home',
+		'title'       => __( 'Home Link' ),
+		'description' => __( 'A link back to home.' ),
+		'attributes'  => array(
+			'type'  => 'home',
+			/* translators: default label for home navigation menu link  */
+			'label' => __( 'Home' ),
+			'url'   => home_url(),
+		),
+	);
 	if ( $taxonomies ) {
 		foreach ( $taxonomies as $taxonomy ) {
 			$variation = build_variation_for_navigation_link( $taxonomy, 'taxonomy' );

@@ -51,6 +51,25 @@ Object {
       "name": "page",
       "title": "Page Link",
     },
+    Object {
+      "attributes": Object {
+        "label": "Home",
+        "type": "home",
+        "url": "/",
+      },
+      "description": "A link back to home.",
+      "icon": <SVG
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M12 4L4 7.9V20h16V7.9L12 4zm6.5 14.5H14V13h-4v5.5H5.5V8.8L12 5.7l6.5 3.1v9.7z"
+        />
+      </SVG>,
+      "isActive": [Function],
+      "name": "home",
+      "title": "Home Link",
+    },
     Object {
       "attributes": Object {
         "kind": "taxonomy",