diff --git a/packages/block-library/src/navigation-menu-item/block.json b/packages/block-library/src/navigation-menu-item/block.json
index 915c63931cb2b..e2862e15ac15f 100644
--- a/packages/block-library/src/navigation-menu-item/block.json
+++ b/packages/block-library/src/navigation-menu-item/block.json
@@ -8,6 +8,10 @@
"destination": {
"type": "string"
},
+ "rel": {
+ "type": "string",
+ "default": ""
+ },
"nofollow": {
"type": "boolean",
"default": false
diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js
index ce5db4b33d0ce..c7d8d26794424 100644
--- a/packages/block-library/src/navigation-menu-item/edit.js
+++ b/packages/block-library/src/navigation-menu-item/edit.js
@@ -2,6 +2,7 @@
* External dependencies
*/
import { invoke } from 'lodash';
+import classnames from 'classnames/dedupe';
/**
* WordPress dependencies
@@ -39,13 +40,30 @@ function NavigationMenuItemEdit( {
setAttributes,
} ) {
const plainTextRef = useRef( null );
- const onEditLableClicked = useCallback(
+ const onEditLabelClicked = useCallback(
( onClose ) => () => {
onClose();
invoke( plainTextRef, [ 'current', 'textarea', 'focus' ] );
},
[ plainTextRef ]
);
+
+ const setTarget = ( opensInNewTab ) => {
+ const { rel } = attributes;
+
+ const updatedRel = classnames( rel, { noopener: opensInNewTab, noreferrer: opensInNewTab } );
+
+ setAttributes( { opensInNewTab, rel: updatedRel } );
+ };
+
+ const setNofollow = ( nofollow ) => {
+ const { rel } = attributes;
+
+ const updatedRel = classnames( rel, { nofollow } );
+
+ setAttributes( { nofollow, rel: updatedRel } );
+ };
+
let content;
if ( isSelected ) {
content = (
@@ -74,7 +92,7 @@ function NavigationMenuItemEdit( {
) }
/>
@@ -83,6 +101,7 @@ function NavigationMenuItemEdit( {
} else {
content = attributes.label;
}
+
return (
@@ -91,9 +110,7 @@ function NavigationMenuItemEdit( {
>
{
- setAttributes( { opensInNewTab } );
- } }
+ onChange={ setTarget }
label={ __( 'Open in new tab' ) }
/>
{
- setAttributes( { nofollow } );
- } }
+ onChange={ setNofollow }
label={ __( 'Add nofollow to menu item' ) }
help={ (
diff --git a/packages/block-library/src/navigation-menu-item/save.js b/packages/block-library/src/navigation-menu-item/save.js
index 66649929c4ac3..9c5d889bd23f5 100644
--- a/packages/block-library/src/navigation-menu-item/save.js
+++ b/packages/block-library/src/navigation-menu-item/save.js
@@ -2,7 +2,7 @@ export default function save( { attributes } ) {
return (