diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 9d9e6f4e188d42..36634e7a68039f 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -387,6 +387,7 @@ function LinkControl( { createSuggestionButtonText } hideLabelFromVision={ ! showTextControl } + isDisabled={ value?.id } /> { errorMessage && ( diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index d6023b9220d630..fea21e2d0e1433 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -47,6 +47,7 @@ const LinkControlSearchInput = forwardRef( withURLSuggestion = true, createSuggestionButtonText, hideLabelFromVision = false, + isDisabled = false, }, ref ) => { @@ -156,6 +157,7 @@ const LinkControlSearchInput = forwardRef( } } } ref={ ref } + isDisabled={ isDisabled } /> { children } diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 1451397ce68e5f..a64f92a9bfe86e 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -435,6 +435,7 @@ class URLInput extends Component { __experimentalRenderControl: renderControl, value = '', hideLabelFromVision = false, + isDisabled, } = this.props; const { @@ -476,6 +477,7 @@ class URLInput extends Component { ? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }` : undefined, ref: this.inputRef, + disabled: isDisabled, }; if ( renderControl ) { diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index df7ca36d7272af..919c19e587e852 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -35,7 +35,7 @@ import { } from '@wordpress/dom'; import { decodeEntities } from '@wordpress/html-entities'; import { link as linkIcon, addSubmenu } from '@wordpress/icons'; -import { store as coreStore } from '@wordpress/core-data'; +import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; import { useMergeRefs } from '@wordpress/compose'; /** @@ -180,6 +180,8 @@ export default function NavigationLinkEdit( { const itemLabelPlaceholder = __( 'Add label…' ); const ref = useRef(); + const { record: navPostRecord } = useEntityRecord( 'postType', type, id ); + // Change the label using inspector causes rich text to change focus on firefox. // This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text. const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false ); @@ -282,6 +284,24 @@ export default function NavigationLinkEdit( { } }, [ url ] ); + useEffect( () => { + // Only updates attributes if: + // - there is an ID (and it has changed). + // - there is a navPostRecord. + if ( id && navPostRecord ) { + // Conditionall update attributes to avoid + // unnecessary re-renders. + setAttributes( { + ...( label !== navPostRecord?.title.rendered && { + label: navPostRecord?.title.rendered, + } ), + ...( url !== navPostRecord?.link && { + url: navPostRecord?.link, + } ), + } ); + } + }, [ id, navPostRecord ] ); + /** * Focus the Link label text and select it. */ diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 5333ab6ea3dc9e..8c53f9086089ed 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -160,16 +160,18 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { $is_post_type = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind']; $is_post_type = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] ); + $post = $is_post_type && $navigation_link_has_id ? get_post( $attributes['id'] ) : null; + // Don't render the block's subtree if it is a draft or if the ID does not exist. - if ( $is_post_type && $navigation_link_has_id ) { - $post = get_post( $attributes['id'] ); - if ( ! $post || 'publish' !== $post->post_status ) { - return ''; - } + if ( ! $post || 'publish' !== $post->post_status ) { + return ''; } + $dynamic_url = $post ? get_permalink( $post ) : $attributes['url']; + $dynamic_label = $post ? $post->post_title : $attributes['label']; + // Don't render the block's subtree if it has no label. - if ( empty( $attributes['label'] ) ) { + if ( empty( $dynamic_label ) ) { return ''; } @@ -195,8 +197,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { ''; - if ( isset( $attributes['label'] ) ) { - $html .= wp_kses_post( $attributes['label'] ); + if ( isset( $dynamic_label ) ) { + $html .= wp_kses_post( $dynamic_label ); } $html .= ''; diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js index 3a7b7d28f9e800..e9405d9c782e46 100644 --- a/packages/block-library/src/navigation-link/link-ui.js +++ b/packages/block-library/src/navigation-link/link-ui.js @@ -158,7 +158,7 @@ export function LinkUI( props ) { }; } - const { label, url, opensInNewTab, type, kind } = props.link; + const { label, url, opensInNewTab, type, kind, id } = props.link; let userCanCreate = false; if ( ! type || type === 'page' ) { @@ -174,8 +174,9 @@ export function LinkUI( props ) { url, opensInNewTab, title: label && stripHTML( label ), + id, } ), - [ label, opensInNewTab, url ] + [ label, opensInNewTab, url, id ] ); return ( diff --git a/packages/block-library/src/navigation-link/update-attributes.js b/packages/block-library/src/navigation-link/update-attributes.js index 6aa28d1818d3cc..050a259d394712 100644 --- a/packages/block-library/src/navigation-link/update-attributes.js +++ b/packages/block-library/src/navigation-link/update-attributes.js @@ -86,12 +86,13 @@ export const updateAttributes = ( ( ! newKind && ! isBuiltInType ) || newKind === 'custom'; const kind = isCustomLink ? 'custom' : newKind; + const hasId = id && Number.isInteger( id ); + setAttributes( { - // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string. ...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ), ...( label && { label } ), ...( undefined !== opensInNewTab && { opensInNewTab } ), - ...( id && Number.isInteger( id ) && { id } ), + ...( hasId && { id } ), ...( kind && { kind } ), ...( type && type !== 'URL' && { type } ), } );