From b055d2beedec10759936b8df0c33afe38368d85b Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Mon, 19 Apr 2021 10:57:38 -0700 Subject: [PATCH] Navigation: add a home link that always points to home_url() --- .../src/components/link-control/index.js | 3 +++ .../components/link-control/link-preview.js | 22 ++++++++++------ .../block-library/src/navigation-link/edit.js | 25 +++++++++++++------ .../navigation-link/fallback-variations.js | 13 ++++++++++ .../src/navigation-link/hooks.js | 3 +++ .../src/navigation-link/index.php | 16 +++++++++++- .../test/__snapshots__/hooks.js.snap | 19 ++++++++++++++ 7 files changed, 84 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index d2bac48450bb0d..6276b98c1962f9 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -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( { setIsEditingLink( true ) } + allowEditing={ allowEditing } /> ) } diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index ef6bd09fcf270f..652bd5e8bcc4f1 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -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 } ) { ) } - + { allowEditing && ( + + ) } ); diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index a1ce7bb2781d9c..e57775c08e054a 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -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( { /> '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' ); diff --git a/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap b/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap index 93ed87117d9355..1dfffb3bb944be 100644 --- a/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap +++ b/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap @@ -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": + + , + "isActive": [Function], + "name": "home", + "title": "Home Link", + }, Object { "attributes": Object { "kind": "taxonomy",