Removed slot, added no-follow toggle

WordPress · Jul 2, 2019 · 32f4218 · 32f4218
1 parent 79bf905
commit 32f4218
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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;