Moved "Open in new tab" toggle to separate component, using the new API

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

@@ -6,12 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import {
 	ExternalLink,
 	IconButton,
-	ToggleControl,
 	withSpokenMessages,
 	Slot,
 } from '@wordpress/components';
@@ -32,6 +31,7 @@ import { URLInput, URLPopover } from '@wordpress/editor';
  */
 import PositionedAtSelection from './positioned-at-selection';
 import { isValidHref } from './utils';
+import OpenInNewTabToggle from './open-in-new-tab-toggle';
 
 const stopKeyPropagation = ( event ) => event.stopPropagation();
 
@@ -174,49 +174,6 @@ class InlineLinkUI extends Component {
 		} );
 	}
 
-	getLabel( opensInNewWindow ) {
-		const selectedText = getTextContent( slice( this.props.value ) );
-
-		if ( opensInNewWindow ) {
-			return sprintf( __( '%s (opens in a new tab)' ), selectedText );
-		}
-
-		return selectedText;
-	}
-
-	setLinkTarget( opensInNewWindow ) {
-		const { attributes = {} } = this.props;
-		const label = this.getLabel( opensInNewWindow );
-
-		if ( opensInNewWindow ) {
-			let rel = 'noopener noreferrer';
-
-			if ( attributes.rel ) {
-				rel = [ rel, attributes.rel ].join( ' ' );
-			}
-
-			this.setLinkAttributes( {
-				'aria-label': label,
-				target: '_blank',
-				rel,
-				...attributes,
-			} );
-		} else {
-			if ( typeof attributes.rel === 'string' ) {
-				attributes.rel = attributes.rel.split( ' ' ).filter( ( relItem ) => {
-					return relItem !== 'noopener' && relItem !== 'noreferrer';
-				} ).join( ' ' ).trim();
-			} else {
-				delete attributes.rel;
-			}
-
-			delete attributes.target;
-			attributes[ 'aria-label' ] = label;
-
-			this.setLinkAttributes( attributes );
-		}
-	}
-
 	editLink( event ) {
 		this.setState( { editLink: true } );
 		event.preventDefault();
@@ -291,11 +248,6 @@ class InlineLinkUI extends Component {
 					className="editor-format-toolbar__link-settings-container"
 					renderSettings={ () => (
 						<div className="editor-format-toolbar__link-settings-container">
-							<ToggleControl
-								label={ __( 'Open in New Tab' ) }
-								checked={ this.state.attributes.target === '_blank' }
-								onChange={ this.setLinkTarget }
-							/>
 							<Slot
 								name="LinkSettings"
 								fillProps={ {
@@ -305,6 +257,7 @@ class InlineLinkUI extends Component {
 									setLinkAttributes: this.setLinkAttributes,
 								} }
 							/>
+							<OpenInNewTabToggle />
 						</div>
 					) }
 				>

packages/format-library/src/link/open-in-new-tab-toggle.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Fill, ToggleControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+class OpenInNewTabToggle extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.setLinkTarget = this.setLinkTarget.bind( this );
+	}
+
+	setLinkTarget( opensInNewWindow ) {
+		const { attributes = {}, setLinkAttributes } = this.props;
+		const label = this.getLabel( opensInNewWindow );
+
+		if ( opensInNewWindow ) {
+			let rel = 'noopener noreferrer';
+
+			if ( attributes.rel ) {
+				rel = [ rel, attributes.rel ].join( ' ' );
+			}
+
+			setLinkAttributes( {
+				'aria-label': label,
+				target: '_blank',
+				rel,
+				...attributes,
+			} );
+		} else {
+			if ( typeof attributes.rel === 'string' ) {
+				attributes.rel = attributes.rel.split( ' ' ).filter( ( relItem ) => {
+					return relItem !== 'noopener' && relItem !== 'noreferrer';
+				} ).join( ' ' ).trim();
+			} else {
+				delete attributes.rel;
+			}
+
+			delete attributes.target;
+			attributes[ 'aria-label' ] = label;
+
+			setLinkAttributes( attributes );
+		}
+	}
+
+	getLabel( opensInNewWindow ) {
+		const { text } = this.props;
+
+		if ( opensInNewWindow ) {
+			return sprintf( __( '%s (opens in a new tab)' ), text );
+		}
+
+		return text;
+	}
+
+	render() {
+		return (
+			<ToggleControl
+				label={ __( 'Open in New Tab' ) }
+				checked={ this.props.attributes.target === '_blank' }
+				onChange={ this.setLinkTarget }
+			/>
+		);
+	}
+}
+
+const OpenInNewTabToggleWrapper = () => {
+	return (
+		<Fill name="LinkSettings">
+			{ ( props ) => (
+				<OpenInNewTabToggle { ...props } />
+			) }
+		</Fill>
+	);
+};
+
+export default OpenInNewTabToggleWrapper;