diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index 9edc4d2db9767..69fbaee175419 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -12,7 +12,6 @@ import {
ExternalLink,
IconButton,
withSpokenMessages,
- Slot,
} from '@wordpress/components';
import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
import { getRectangleFromRange } from '@wordpress/dom';
@@ -32,6 +31,7 @@ import { URLInput, URLPopover } from '@wordpress/block-editor';
*/
import { createLinkFormat, isValidHref } from './utils';
import OpenInNewTabToggle from './open-in-new-tab-toggle';
+import NoFollowToggle from './no-follow-toggle';
const stopKeyPropagation = ( event ) => event.stopPropagation();
@@ -266,16 +266,18 @@ class InlineLinkUI extends Component {
focusOnMount={ showInput ? 'firstElement' : false }
renderSettings={ () => (
-
+
-
) }
>
diff --git a/packages/format-library/src/link/no-follow-toggle.js b/packages/format-library/src/link/no-follow-toggle.js
new file mode 100644
index 0000000000000..9477a68f9db80
--- /dev/null
+++ b/packages/format-library/src/link/no-follow-toggle.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+class NoFollowToggle extends Component {
+ isChecked() {
+ const { rel } = this.props.attributes;
+
+ if ( ! rel ) {
+ return false;
+ }
+
+ return rel.split( ' ' ).includes( 'nofollow' );
+ }
+
+ toggle() {
+ const { setLinkAttributes, attributes } = this.props;
+
+ const rel = attributes.rel;
+
+ if ( this.isChecked() ) {
+ if ( ! rel ) {
+ return;
+ }
+
+ const newRel = rel.split( ' ' ).filter( ( relItem ) => {
+ return relItem !== 'nofollow';
+ } ).join( ' ' );
+
+ setLinkAttributes( {
+ ...attributes,
+ rel: newRel,
+ } );
+ return;
+ }
+
+ if ( ! rel ) {
+ setLinkAttributes( {
+ ...attributes,
+ rel: 'nofollow',
+ } );
+ } else {
+ setLinkAttributes( {
+ ...attributes,
+ rel: [ rel, 'nofollow' ].join( ' ' ),
+ } );
+ }
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default NoFollowToggle;
diff --git a/packages/format-library/src/link/open-in-new-tab-toggle.js b/packages/format-library/src/link/open-in-new-tab-toggle.js
index ae6730ce88358..02c0ae2b7261d 100644
--- a/packages/format-library/src/link/open-in-new-tab-toggle.js
+++ b/packages/format-library/src/link/open-in-new-tab-toggle.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import { Fill, ToggleControl } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
class OpenInNewTabToggle extends Component {
@@ -73,14 +73,4 @@ class OpenInNewTabToggle extends Component {
}
}
-const OpenInNewTabToggleWrapper = () => {
- return (
-
- { ( props ) => (
-
- ) }
-
- );
-};
-
-export default OpenInNewTabToggleWrapper;
+export default OpenInNewTabToggle;