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 (