diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
index 00cbf3b021f877..ccc0b92a211ba2 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -7,7 +7,9 @@ import {
BlockList,
BlockTools,
} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback } from '@wordpress/element';
/**
* Internal dependencies
@@ -30,9 +32,29 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
},
[ rootClientId ]
);
+ const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
+ useDispatch( blockEditorStore );
const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+ const offCanvasOnselect = useCallback(
+ ( block ) => {
+ if (
+ block.name === 'core/navigation-link' &&
+ ! block.attributes.url
+ ) {
+ __unstableMarkNextChangeAsNotPersistent();
+ replaceBlock(
+ block.clientId,
+ createBlock( 'core/navigation-link', block.attributes )
+ );
+ } else {
+ onSelect( block );
+ }
+ },
+ [ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+ );
+
// The hidden block is needed because it makes block edit side effects trigger.
// For example a navigation page list load its items has an effect on edit to load its items.
return (
@@ -41,12 +63,12 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
{ ! isLoading && (