Editable: Adding the link control #505
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,27 +9,34 @@ import classNames from 'classnames'; | |
| import './style.scss'; | ||
| import IconButton from 'components/icon-button'; | ||
|
|
||
| function Toolbar( { attributes, setAttributes, controls } ) { | ||
|
Member
There was a problem hiding this comment. My first reaction to these changes is that the line is becoming blurred between the concept of a general-purpose toolbar and a block-specific toolbar. We should decide if there's value in the former and whether we can or care to preserve this distinction.
Contributor
Author
There was a problem hiding this comment. Well
Member
There was a problem hiding this comment.
Given that I had trouble making this distinction, I expect others will as well. |
||
| if ( ! controls || ! controls.length ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <ul className="editor-toolbar"> | ||
| { controls.map( ( control, index ) => { | ||
| if ( control.edit ) { | ||
| const element = wp.element.createElement( control.edit, { attributes, setAttributes } ); | ||
| return wp.element.cloneElement( element, { key: index } ); | ||
| } | ||
|
|
||
| return ( | ||
| <IconButton | ||
| key={ index } | ||
| icon={ control.icon } | ||
| label={ control.title } | ||
| data-subscript={ control.subscript } | ||
| onClick={ ( event ) => { | ||
| event.stopPropagation(); | ||
| control.onClick( attributes, setAttributes ); | ||
| } } | ||
| className={ classNames( 'editor-toolbar__control', { | ||
| 'is-active': control.isActive && control.isActive( attributes ) | ||
|
Member
There was a problem hiding this comment. This will need to be rebased to account for changes in #500. |
||
| } ) } /> | ||
| ); | ||
| } ) } | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /** | ||
|
Member
There was a problem hiding this comment. Should this file have been named
Member
There was a problem hiding this comment. Oh, I see now the
Contributor
Author
There was a problem hiding this comment. Could be two files |
||
| * External dependencies | ||
| */ | ||
| import classNames from 'classnames'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './style.scss'; | ||
| import IconButton from 'components/icon-button'; | ||
|
|
||
| class LinkControl extends wp.element.Component { | ||
| constructor() { | ||
| super( ...arguments ); | ||
| this.state = { | ||
| opened: false | ||
| }; | ||
| this.toggleLinkModal = this.toggleLinkModal.bind( this ); | ||
| this.submitLinkModal = this.submitLinkModal.bind( this ); | ||
| this.updateLinkValue = this.updateLinkValue.bind( this ); | ||
| } | ||
|
|
||
| componentWillMount() { | ||
| this.setState( { value: this.props.attributes.link } ); | ||
| } | ||
|
|
||
| componentWillReceiveProps( nextProps ) { | ||
| this.setState( { value: nextProps.attributes.link } ); | ||
| } | ||
|
|
||
| toggleLinkModal() { | ||
| this.setState( { | ||
| opened: ! this.state.opened | ||
| } ); | ||
| } | ||
|
|
||
| submitLinkModal( event ) { | ||
| event.preventDefault(); | ||
| this.props.setAttributes( { link: this.state.value } ); | ||
| this.setState( { | ||
| opened: false | ||
| } ); | ||
| } | ||
|
|
||
| updateLinkValue( event ) { | ||
| this.setState( { | ||
| value: event.target.value | ||
| } ); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="editable-visual-editor__link-control"> | ||
| <IconButton | ||
| icon="admin-links" | ||
| label={ wp.i18n.__( 'Link' ) } | ||
| onClick={ this.toggleLinkModal } | ||
| className={ classNames( 'editor-toolbar__control', { | ||
| 'is-active': !! this.props.attributes.link | ||
| } ) } | ||
| /> | ||
| { this.state.opened && | ||
| <div className="editable-visual-editor__link-modal"> | ||
|
Member
There was a problem hiding this comment. Can we apply this class to the |
||
| <form onSubmit={ this.submitLinkModal }> | ||
| <input type="url" value={ this.state.value } onChange={ this.updateLinkValue } /> | ||
| <button>{ wp.i18n.__( 'Add Link' ) }</button> | ||
|
Member
There was a problem hiding this comment. Trying to decide if there's value in the
Contributor
Author
There was a problem hiding this comment. Yes, this needs to be updated to match @jasmussen's comment |
||
| </form> | ||
| </div> | ||
| } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const formattingControls = [ | ||
| { | ||
| icon: 'editor-bold', | ||
| title: wp.i18n.__( 'Bold' ), | ||
| isActive: ( { bold } ) => !! bold, | ||
| onClick( attributes, setAttributes ) { | ||
| setAttributes( { bold: ! attributes.bold } ); | ||
| }, | ||
| }, | ||
| { | ||
| icon: 'editor-italic', | ||
| title: wp.i18n.__( 'Italic' ), | ||
| isActive: ( { italic } ) => !! italic, | ||
| onClick( attributes, setAttributes ) { | ||
| setAttributes( { italic: ! attributes.italic } ); | ||
| }, | ||
| }, | ||
| { | ||
| icon: 'editor-strikethrough', | ||
| title: wp.i18n.__( 'Strikethrough' ), | ||
| isActive: ( { strikethrough } ) => !! strikethrough, | ||
| onClick( attributes, setAttributes ) { | ||
| setAttributes( { strikethrough: ! attributes.strikethrough } ); | ||
| }, | ||
| }, | ||
| { | ||
| edit: LinkControl | ||
| } | ||
| ]; | ||
|
|
||
| export default formattingControls; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -60,3 +60,22 @@ | |
| .editor-visual-editor .editor-inserter { | ||
| margin: $item-spacing; | ||
| } | ||
|
|
||
|
|
||
| // joen make me pretty | ||
|
Contributor
Author
There was a problem hiding this comment. @jasmussen you shouldn't have showed me this tip :)
Contributor
There was a problem hiding this comment. Haha love it :D — I'll take a look. |
||
| .editable-visual-editor__link-control { | ||
| position: relative; | ||
| } | ||
|
|
||
| .editable-visual-editor__link-modal { | ||
| position: absolute; | ||
| top: 42px; | ||
| box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 ); | ||
| border: 1px solid #e0e5e9; | ||
| background: #fff; | ||
| padding: 10px; | ||
|
|
||
| input { | ||
| font-size: 13px; | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We're not polyfilling
Array#find, this will error in IE11.