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 WordPress#23011

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)'
+		),
+	},
 ];

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 */

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 ];
 }

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;

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' }
 						/>
+						<BottomSheet.SwitchCell
+							icon={ external }
+							label={ __(
+								'Search engines should ignore this link (mark as nofollow)'
+							) }
+							value={ markedAsNoFollow }
+							onValueChange={ setMarkedAsNoFollow }
+							separatorType={ 'fullWidth' }
+						/>
 						<BottomSheet.Cell
 							label={ __( 'Remove link' ) }
 							labelStyle={ styles.clearLinkButton }

packages/format-library/src/link/utils.js

@@ -85,10 +85,17 @@ export function isValidHref( href ) {
  * @param {string}  options.type             The type of the link.
  * @param {string}  options.id               The ID of the link.
  * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.
+ * @param {boolean} options.markAsNoFollow   Whether this link will be marked as nofollow.
  *
  * @return {Object} The final format object.
  */
-export function createLinkFormat( { url, type, id, opensInNewWindow } ) {
+export function createLinkFormat( {
+	url,
+	type,
+	id,
+	opensInNewWindow,
+	markAsNoFollow,
+} ) {
 	const format = {
 		type: 'core/link',
 		attributes: {
@@ -101,7 +108,15 @@ export function createLinkFormat( { url, type, id, opensInNewWindow } ) {
 
 	if ( opensInNewWindow ) {
 		format.attributes.target = '_blank';
-		format.attributes.rel = 'noreferrer noopener';
+		format.attributes.rel = format.attributes.rel
+			? format.attributes.rel + ' noreferrer noopener'
+			: 'noreferrer noopener';
+	}
+
+	if ( markAsNoFollow ) {
+		format.attributes.rel = format.attributes.rel
+			? format.attributes.rel + ' nofollow'
+			: 'nofollow';
 	}
 
 	return format;