From d68baaa2b44eb6eb41c83a38094f31d0ba3ae0a7 Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Thu, 31 Aug 2017 14:38:26 +0100 Subject: [PATCH 1/9] Add "Open in new window" option to links --- blocks/editable/format-toolbar/index.js | 33 ++++++++++++++++++++++--- blocks/editable/index.js | 4 +-- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index f8a3a1f452cb37..96dec8933f60f8 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -39,10 +39,11 @@ const DEFAULT_CONTROLS = [ 'bold', 'italic', 'strikethrough', 'link' ]; class FormatToolbar extends Component { constructor() { super( ...arguments ); - this.state = { isAddingLink: false, isEditingLink: false, + settingsVisible: false, + opensInNewWindow: false, newLinkValue: '', }; @@ -52,6 +53,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 ); } componentDidMount() { @@ -76,6 +79,8 @@ class FormatToolbar extends Component { this.setState( { isAddingLink: false, isEditingLink: false, + settingsVisible: false, + opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target, newLinkValue: '', } ); } @@ -93,6 +98,17 @@ class FormatToolbar extends Component { }; } + toggleLinkSettingsVisibility() { + const settingsVisible = ! this.state.settingsVisible; + this.setState( { settingsVisible } ); + } + + setLinkTarget( event ) { + const opensInNewWindow = event.target.checked; + this.setState( { opensInNewWindow } ); + this.props.onChange( { link: { value: this.props.formats.link.value, target: opensInNewWindow ? '_blank' : undefined } } ); + } + addLink() { this.setState( { isEditingLink: false, isAddingLink: true, newLinkValue: '' } ); } @@ -109,7 +125,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' : undefined } } ); if ( this.state.isAddingLink ) { this.props.speak( __( 'Link inserted.' ), 'assertive' ); } @@ -117,7 +133,7 @@ class FormatToolbar extends Component { render() { const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props; - const { isAddingLink, isEditingLink, newLinkValue } = this.state; + const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow } = this.state; const linkStyle = focusPosition ? { position: 'absolute', ...focusPosition } : null; @@ -130,6 +146,13 @@ class FormatToolbar extends Component { isActive: !! formats[ control.format ], } ) ); + // TODO: make this not look hideous + const linkSettings = settingsVisible && ( +
+ { __( 'Open in new window' ) }: +
+ ); + if ( enabledControls.indexOf( 'link' ) !== -1 ) { toolbarControls.push( { icon: 'admin-links', @@ -151,6 +174,8 @@ class FormatToolbar extends Component { + + { linkSettings } } @@ -165,6 +190,8 @@ class FormatToolbar extends Component { + + { linkSettings } } diff --git a/blocks/editable/index.js b/blocks/editable/index.js index 07ca484d7c8e68..fa7732784164ce 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -448,7 +448,7 @@ export default class Editable extends Component { const formats = {}; const link = find( parents, ( node ) => node.nodeName.toLowerCase() === 'a' ); if ( link ) { - formats.link = { value: link.getAttribute( 'href' ) || '', node: link }; + formats.link = { value: link.getAttribute( 'href' ) || '', target: link.getAttribute( 'target' ) || '', node: link }; } const activeFormats = this.editor.formatter.matchAll( [ 'bold', 'italic', 'strikethrough' ] ); activeFormats.forEach( ( activeFormat ) => formats[ activeFormat ] = true ); @@ -542,7 +542,7 @@ export default class Editable 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' ); } From 8e77332068e12c43c3ec243f7ec9efe6ffb9e4b6 Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Fri, 1 Sep 2017 10:36:55 +0100 Subject: [PATCH 2/9] Works, but still looks awful --- blocks/editable/format-toolbar/index.js | 27 ++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 96dec8933f60f8..8466743c146281 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { IconButton, Toolbar, withSpokenMessages } from '@wordpress/components'; +import { IconButton, FormToggle, Popover, Toolbar, withSpokenMessages } from '@wordpress/components'; import { keycodes } from '@wordpress/utils'; /** @@ -106,7 +106,7 @@ class FormatToolbar extends Component { setLinkTarget( event ) { const opensInNewWindow = event.target.checked; this.setState( { opensInNewWindow } ); - this.props.onChange( { link: { value: this.props.formats.link.value, target: opensInNewWindow ? '_blank' : undefined } } ); + this.props.onChange( { link: { value: this.props.formats.link.value, target: opensInNewWindow ? '_blank' : '' } } ); } addLink() { @@ -125,7 +125,8 @@ class FormatToolbar extends Component { submitLink( event ) { event.preventDefault(); - this.props.onChange( { link: { value: this.state.newLinkValue, target: this.state.opensInNewWindow ? '_blank' : undefined } } ); + console.log('submitting'); + this.props.onChange( { link: { value: this.state.newLinkValue, target: this.state.opensInNewWindow ? '_blank' : '' } } ); if ( this.state.isAddingLink ) { this.props.speak( __( 'Link inserted.' ), 'assertive' ); } @@ -147,10 +148,20 @@ class FormatToolbar extends Component { } ) ); // TODO: make this not look hideous - const linkSettings = settingsVisible && ( -
- { __( 'Open in new window' ) }: -
+ const linkSettings = ( + + event.stopPropagation() } > +
+ + +
+ + ); if ( enabledControls.indexOf( 'link' ) !== -1 ) { @@ -174,7 +185,6 @@ class FormatToolbar extends Component { - { linkSettings } } @@ -190,7 +200,6 @@ class FormatToolbar extends Component { - { linkSettings } } From 84c72337a40349c80a4e4e7cb4af82600b1ffb8b Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Fri, 1 Sep 2017 10:44:33 +0100 Subject: [PATCH 3/9] lint --- blocks/editable/format-toolbar/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 8466743c146281..142667cf235cb7 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -125,7 +125,6 @@ class FormatToolbar extends Component { submitLink( event ) { event.preventDefault(); - console.log('submitting'); this.props.onChange( { link: { value: this.state.newLinkValue, target: this.state.opensInNewWindow ? '_blank' : '' } } ); if ( this.state.isAddingLink ) { this.props.speak( __( 'Link inserted.' ), 'assertive' ); From 6dfd3e30da7e8e1d5d0fd61342f162bb3eca9e43 Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Fri, 1 Sep 2017 11:28:04 +0100 Subject: [PATCH 4/9] Remove popover, use ToggleControl --- blocks/editable/format-toolbar/index.js | 26 +++++++++++-------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 142667cf235cb7..9a90a60c2ae694 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { IconButton, FormToggle, Popover, Toolbar, withSpokenMessages } from '@wordpress/components'; +import { IconButton, Toolbar, withSpokenMessages } from '@wordpress/components'; import { keycodes } from '@wordpress/utils'; /** @@ -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 } = keycodes; @@ -147,20 +148,13 @@ class FormatToolbar extends Component { } ) ); // TODO: make this not look hideous - const linkSettings = ( - - event.stopPropagation() } > -
- - -
- - + const linkSettings = settingsVisible && ( +
+ +
); if ( enabledControls.indexOf( 'link' ) !== -1 ) { @@ -184,6 +178,7 @@ class FormatToolbar extends Component { + { linkSettings } } @@ -199,6 +194,7 @@ class FormatToolbar extends Component { + { linkSettings } } From 79d54cb904e1a8d15df72d88aca126f3371c2ac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 1 Sep 2017 15:03:18 +0200 Subject: [PATCH 5/9] Display link-settings below the input and button tools. --- blocks/editable/format-toolbar/index.js | 2 +- blocks/editable/format-toolbar/style.scss | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 9a90a60c2ae694..9c31543a19070b 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -149,7 +149,7 @@ class FormatToolbar extends Component { // TODO: make this not look hideous const linkSettings = settingsVisible && ( -
+
Date: Fri, 1 Sep 2017 15:07:24 +0100 Subject: [PATCH 6/9] Remove TODO, as it no longer looks hideous --- blocks/editable/format-toolbar/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 9c31543a19070b..245a74037fa1cd 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -147,7 +147,6 @@ class FormatToolbar extends Component { isActive: !! formats[ control.format ], } ) ); - // TODO: make this not look hideous const linkSettings = settingsVisible && (
Date: Mon, 4 Sep 2017 09:55:51 +0100 Subject: [PATCH 7/9] Set aria-expanded correctly --- blocks/editable/format-toolbar/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 245a74037fa1cd..8d835342ba5027 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -177,7 +177,7 @@ class FormatToolbar extends Component { - + { linkSettings } } @@ -193,7 +193,7 @@ class FormatToolbar extends Component { - + { linkSettings } } From 1330124d6177ad835be557f842f2af3d710d80f5 Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Tue, 5 Sep 2017 10:24:39 +0100 Subject: [PATCH 8/9] Made the modal slightly wider to fix a wrap problem in FF --- blocks/editable/format-toolbar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/editable/format-toolbar/style.scss b/blocks/editable/format-toolbar/style.scss index 50ac0b9856f760..e6a80a1f27594b 100644 --- a/blocks/editable/format-toolbar/style.scss +++ b/blocks/editable/format-toolbar/style.scss @@ -7,7 +7,7 @@ box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 ); border: 1px solid #e0e5e9; background: #fff; - width: 300px; + width: 305px; display: inline-flex; flex-wrap: wrap; align-items: center; From 02d0e6db87945e7f50ff415bbe698bdfb1f68616 Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Tue, 5 Sep 2017 11:46:40 +0100 Subject: [PATCH 9/9] Coding standard fix --- blocks/editable/format-toolbar/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 8d835342ba5027..85f1e5e97fbaf3 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -100,8 +100,7 @@ class FormatToolbar extends Component { } toggleLinkSettingsVisibility() { - const settingsVisible = ! this.state.settingsVisible; - this.setState( { settingsVisible } ); + this.setState( ( state ) => ( { settingsVisible: ! state.settingsVisible } ) ); } setLinkTarget( event ) {