diff --git a/packages/block-editor/src/components/link-control/constants.js b/packages/block-editor/src/components/link-control/constants.js index eaf07aea73703..6a7322a7f3d2e 100644 --- a/packages/block-editor/src/components/link-control/constants.js +++ b/packages/block-editor/src/components/link-control/constants.js @@ -24,4 +24,10 @@ export const DEFAULT_LINK_SETTINGS = [ id: 'opensInNewTab', title: __( 'Open in new tab' ), }, + { + id: 'markAsNoFollow', + title: __( + 'Search engines should ignore this link (mark as nofollow)' + ), + }, ]; diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 142ffd6db1e50..89b6529abffe4 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -28,11 +28,14 @@ import { DEFAULT_LINK_SETTINGS } from './constants'; * * @typedef WPLinkControlDefaultValue * - * @property {string} url Link URL. - * @property {string=} title Link title. - * @property {boolean=} opensInNewTab Whether link should open in a new browser - * tab. This value is only assigned if not - * providing a custom `settings` prop. + * @property {string} url Link URL. + * @property {string=} title Link title. + * @property {boolean=} opensInNewTab Whether link should open in a new browser + * tab. This value is only assigned if not + * providing a custom `settings` prop. + * @property {boolean=} markAsNoFollow Whether link should be marked as + * `nofollow`. This value is only assigned + * if not providing a custom `settings` prop. */ /* eslint-disable jsdoc/valid-types */ diff --git a/packages/block-editor/src/components/link-control/use-internal-input-value.js b/packages/block-editor/src/components/link-control/use-internal-input-value.js index a4d9a1a7bca11..c35f9783ccb69 100644 --- a/packages/block-editor/src/components/link-control/use-internal-input-value.js +++ b/packages/block-editor/src/components/link-control/use-internal-input-value.js @@ -16,7 +16,7 @@ export default function useInternalInputValue( value ) { if ( value && value !== internalInputValue ) { setInternalInputValue( value ); } - }, [ value ] ); + }, [ internalInputValue, value ] ); return [ internalInputValue, setInternalInputValue ]; } diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 9419b7a547f71..46c25a0789c8a 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -70,6 +70,7 @@ function InlineLinkUI( { type: activeAttributes.type, id: activeAttributes.id, opensInNewTab: activeAttributes.target === '_blank', + markAsNoFollow: activeAttributes.rel?.includes( 'nofollow' ), title: richTextText, ...nextLinkValue, }; @@ -118,6 +119,7 @@ function InlineLinkUI( { ? String( nextValue.id ) : undefined, opensInNewWindow: nextValue.opensInNewTab, + markAsNoFollow: nextValue.markAsNoFollow, } ); const newText = nextValue.title || newUrl; diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js index 3bb003643ac1e..23109ffaed789 100644 --- a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js +++ b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js @@ -42,6 +42,9 @@ const LinkSettingsScreen = ( { const [ opensInNewWindow, setOpensInNewWindows ] = useState( activeAttributes.target === '_blank' ); + const [ markedAsNoFollow, setMarkedAsNoFollow ] = useState( + ( activeAttributes.rel = 'nofollow' ) + ); const [ linkValues, setLinkValues ] = useState( { isActiveLink: isActive, isRemovingLink: false, @@ -64,7 +67,7 @@ const LinkSettingsScreen = ( { onHandleClosingBottomSheet( () => { submit( inputValue, { skipStateUpdates: true } ); } ); - }, [ inputValue, opensInNewWindow, text ] ); + }, [ inputValue, opensInNewWindow, markedAsNoFollow, text ] ); useEffect( () => { const { isActiveLink, isRemovingLink } = linkValues; @@ -99,6 +102,7 @@ const LinkSettingsScreen = ( { const format = createLinkFormat( { url, opensInNewWindow, + markedAsNoFollow, text: linkText, } ); let newAttributes; @@ -213,6 +217,15 @@ const LinkSettingsScreen = ( { onValueChange={ setOpensInNewWindows } separatorType={ 'fullWidth' } /> +