diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index f8a3a1f452cb3..85f1e5e97fbaf 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/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 } = keycodes; @@ -39,10 +40,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 +54,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 +80,8 @@ class FormatToolbar extends Component { this.setState( { isAddingLink: false, isEditingLink: false, + settingsVisible: false, + opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target, newLinkValue: '', } ); } @@ -93,6 +99,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: '' } ); } @@ -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' : '' } } ); 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,15 @@ class FormatToolbar extends Component { isActive: !! formats[ control.format ], } ) ); + const linkSettings = settingsVisible && ( +
+ ); + if ( enabledControls.indexOf( 'link' ) !== -1 ) { toolbarControls.push( { icon: 'admin-links', @@ -151,6 +176,8 @@ class FormatToolbar extends Component {