From 7d1351c5952e360b5304c992473b5b5c7dc06354 Mon Sep 17 00:00:00 2001 From: Thomas de Visser Date: Fri, 3 Mar 2023 12:27:22 +0100 Subject: [PATCH] Link Control: Add more controls After almost three years and a lot of fruitful discussion, it's finally here. The ability to add a nofollow rel to a link. Everything works in the backend as shown on the screengrab. The only thing I couldn't figure out in the time I had was how to save this to the markup so it also renders correctly on the frontend. Hope someone can help with this or point me in the right direction. Fixes #23011 --- .../src/components/link-control/constants.js | 6 ++++++ .../src/components/link-control/index.js | 13 ++++++++----- .../link-control/use-internal-input-value.js | 2 +- packages/format-library/src/link/inline.js | 2 ++ .../link-settings-screen.native.js | 15 ++++++++++++++- packages/format-library/src/link/utils.js | 19 +++++++++++++++++-- 6 files changed, 48 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/link-control/constants.js b/packages/block-editor/src/components/link-control/constants.js index eaf07aea73703b..6a7322a7f3d2e6 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 142ffd6db1e503..89b6529abffe4b 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 a4d9a1a7bca118..c35f9783ccb693 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 9419b7a547f710..46c25a0789c8a2 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 3bb003643ac1e7..23109ffaed7893 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' } /> +