Revert "Remove "Open in new window" link option (#4583)"

This reverts commit 5ab37b7.
WordPress · Apr 6, 2018 · 321b709 · 321b709
1 parent 0782f09
commit 321b709
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 6 deletions.
diff --git a/blocks/rich-text/format-toolbar/index.js b/blocks/rich-text/format-toolbar/index.js
@@ -12,6 +12,7 @@ import { keycodes } from '@wordpress/utils';
 import './style.scss';
 import UrlInput from '../../url-input';
 import { filterURLForDisplay } from '../../../editor/utils/url';
+import ToggleControl from '../../inspector-controls/toggle-control';
 
 const { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } = keycodes;
 
@@ -47,10 +48,11 @@ const stopKeyPropagation = ( event ) => event.stopPropagation();
 class FormatToolbar extends Component {
 	constructor() {
 		super( ...arguments );
-
 		this.state = {
 			isAddingLink: false,
 			isEditingLink: false,
+			settingsVisible: false,
+			opensInNewWindow: false,
 			newLinkValue: '',
 		};
 
@@ -60,6 +62,8 @@ class FormatToolbar extends Component {
 		this.submitLink = this.submitLink.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.onChangeLinkValue = this.onChangeLinkValue.bind( this );
+		this.toggleLinkSettingsVisibility = this.toggleLinkSettingsVisibility.bind( this );
+		this.setLinkTarget = this.setLinkTarget.bind( this );
 	}
 
 	onKeyDown( event ) {
@@ -79,6 +83,8 @@ class FormatToolbar extends Component {
 			this.setState( {
 				isAddingLink: false,
 				isEditingLink: false,
+				settingsVisible: false,
+				opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target,
 				newLinkValue: '',
 			} );
 		}
@@ -96,6 +102,16 @@ class FormatToolbar extends Component {
 		};
 	}
 
+	toggleLinkSettingsVisibility() {
+		this.setState( ( state ) => ( { settingsVisible: ! state.settingsVisible } ) );
+	}
+
+	setLinkTarget( event ) {
+		const opensInNewWindow = event.target.checked;
+		this.setState( { opensInNewWindow } );
+		this.props.onChange( { link: { value: this.props.formats.link.value, target: opensInNewWindow ? '_blank' : '' } } );
+	}
+
 	addLink() {
 		this.setState( { isEditingLink: false, isAddingLink: true, newLinkValue: '' } );
 	}
@@ -112,7 +128,7 @@ class FormatToolbar extends Component {
 
 	submitLink( event ) {
 		event.preventDefault();
-		this.props.onChange( { link: { value: this.state.newLinkValue } } );
+		this.props.onChange( { link: { value: this.state.newLinkValue, target: this.state.opensInNewWindow ? '_blank' : '' } } );
 		if ( this.state.isAddingLink ) {
 			this.props.speak( __( 'Link added.' ), 'assertive' );
 		}
@@ -124,7 +140,7 @@ class FormatToolbar extends Component {
 
 	render() {
 		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
-		const { isAddingLink, isEditingLink, newLinkValue } = this.state;
+		const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow } = this.state;
 		const linkStyle = focusPosition ?
 			{ position: 'absolute', ...focusPosition } :
 			null;
@@ -140,6 +156,15 @@ class FormatToolbar extends Component {
 				};
 			} );
 
+		const linkSettings = settingsVisible && (
+			<div className="blocks-format-toolbar__link-modal-line blocks-format-toolbar__link-settings">
+				<ToggleControl
+					label={ __( 'Open in new window' ) }
+					checked={ opensInNewWindow }
+					onChange={ this.setLinkTarget } />
+			</div>
+		);
+
 		return (
 			<div className="blocks-format-toolbar">
 				<Toolbar controls={ toolbarControls } />
@@ -158,7 +183,13 @@ class FormatToolbar extends Component {
 								<UrlInput value={ newLinkValue } onChange={ this.onChangeLinkValue } />
 								<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
 								<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
+								<IconButton
+									icon="admin-generic"
+									label={ __( 'Link Settings' ) }
+									onClick={ this.toggleLinkSettingsVisibility }
+									aria-expanded={ settingsVisible } />
 							</div>
+							{ linkSettings }
 						</form>
 					</Fill>
 					/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
@@ -183,7 +214,13 @@ class FormatToolbar extends Component {
 								</a>
 								<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
 								<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
+								<IconButton
+									icon="admin-generic"
+									label={ __( 'Link Settings' ) }
+									onClick={ this.toggleLinkSettingsVisibility }
+									aria-expanded={ settingsVisible } />
 							</div>
+							{ linkSettings }
 						</div>
 					</Fill>
 					/* eslint-enable jsx-a11y/no-static-element-interactions */

diff --git a/blocks/rich-text/format-toolbar/style.scss b/blocks/rich-text/format-toolbar/style.scss
@@ -7,13 +7,17 @@
 	box-shadow: 0 3px 20px rgba( 18, 24, 30, .1 ), 0 1px 3px rgba( 18, 24, 30, .1 );
 	border: 1px solid #e0e5e9;
 	background: #fff;
-	width: 300px;
+	width: 305px;
 	display: flex;
 	flex-direction: column;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 	z-index: z-index( '.blocks-format-toolbar__link-modal' );
+
+	.blocks-url-input {
+		width: auto;
+	}
 }
 
 .blocks-format-toolbar__link-modal-line {
@@ -42,3 +46,15 @@
 		@include long-content-fade( $size: 40% );
 	}
 }
+
+.blocks-format-toolbar__link-settings {
+	padding: 7px 8px;
+	border-top: 1px solid $light-gray-500;
+	padding-top: 8px; // add 1px for the border
+
+	.blocks-base-control {
+		margin: 0;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+}
diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
@@ -103,7 +103,7 @@ export function getFormatProperties( formatName, parents ) {
 	switch ( formatName ) {
 		case 'link' : {
 			const anchor = find( parents, node => node.nodeName.toLowerCase() === 'a' );
-			return !! anchor ? { value: anchor.getAttribute( 'href' ) || '', node: anchor } : {};
+			return !! anchor ? { value: anchor.getAttribute( 'href' ) || '', target: anchor.getAttribute( 'target' ) || '', node: anchor } : {};
 		}
 		default:
 			return {};
@@ -753,7 +753,7 @@ export class RichText extends Component {
 					if ( ! anchor ) {
 						this.removeFormat( 'link' );
 					}
-					this.applyFormat( 'link', { href: formatValue.value }, anchor );
+					this.applyFormat( 'link', { href: formatValue.value, target: formatValue.target }, anchor );
 				} else {
 					this.editor.execCommand( 'Unlink' );
 				}