From 32f4218657f5a007ff3694fd9a48ad6f53733723 Mon Sep 17 00:00:00 2001
From: Alexander Botteram <a.botteram@gmail.com>
Date: Tue, 2 Jul 2019 13:55:22 +0200
Subject: [PATCH] Removed slot, added no-follow toggle

---
 packages/format-library/src/link/inline.js    | 22 ++++---
 .../src/link/no-follow-toggle.js              | 64 +++++++++++++++++++
 .../src/link/open-in-new-tab-toggle.js        | 14 +---
 3 files changed, 78 insertions(+), 22 deletions(-)
 create mode 100644 packages/format-library/src/link/no-follow-toggle.js

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index 9edc4d2db97678..69fbaee1754196 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={ () => (
 					<div className="editor-format-toolbar__link-settings-container">
-						<Slot
-							name="LinkSettings"
-							fillProps={ {
-								url,
-								text: selectedText,
-								attributes: this.state.attributes,
-								setLinkAttributes: this.setLinkAttributes,
-							} }
+						<OpenInNewTabToggle
+							url={ url }
+							text={ selectedText }
+							attributes={ this.state.attributes }
+							setLinkAttributes={ this.setLinkAttributes }
+						/>
+						<NoFollowToggle
+							url={ url }
+							text={ selectedText }
+							attributes={ this.state.attributes }
+							setLinkAttributes={ this.setLinkAttributes }
 						/>
-						<OpenInNewTabToggle />
 					</div>
 				) }
 			>
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 00000000000000..9477a68f9db803
--- /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 (
+			<ToggleControl
+				label={ __( 'No Follow' ) }
+				checked={ this.isChecked() }
+				onChange={ this.toggle.bind( this ) }
+			/>
+		);
+	}
+}
+
+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 ae6730ce88358a..02c0ae2b7261df 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 (
-		<Fill name="LinkSettings">
-			{ ( props ) => (
-				<OpenInNewTabToggle { ...props } />
-			) }
-		</Fill>
-	);
-};
-
-export default OpenInNewTabToggleWrapper;
+export default OpenInNewTabToggle;