-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add "insert items" menu item to editor (#5071)
Adds an "insert item" menu bar to the editor toolbar to allow inserting various types of media or embeds into a post, similar to how the insert menus in other mainstream applications (such as Pages, Sketch, etc…) work. This patch removes the contact form button and the media button and combines those into the new insert menu. The insert menu button has two behaviors: a default click on the button inserts a media item; a click on the chevron opens the drop-down menu to select one of many possible items to insert. Props to all who helped review and edit and design this feature: @aduth @drw158 @folletto @mtias @rralian
- Loading branch information
Showing
9 changed files
with
175 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
client/components/tinymce/plugins/insert-menu/menu-items.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Gridicon from 'components/gridicon'; | ||
| import SocialLogo from 'components/social-logo'; | ||
| import i18n from 'lib/mixins/i18n'; | ||
|
|
||
| const GridiconButton = ( { icon, label } ) => ( | ||
| <div> | ||
| <Gridicon className="wpcom-insert-menu__menu-icon" icon={ icon } /> | ||
| <span className="wpcom-insert-menu__menu-label">{ label }</span> | ||
| </div> | ||
| ); | ||
|
|
||
| const SocialLogoButton = ( { icon, label } ) => ( | ||
| <div> | ||
| <SocialLogo className="wpcom-insert-menu__menu-icon" icon={ icon } /> | ||
| <span className="wpcom-insert-menu__menu-label">{ label }</span> | ||
| </div> | ||
| ); | ||
|
|
||
| export default [ | ||
| { | ||
| name: 'insert_media_item', | ||
| item: <GridiconButton icon="image-multiple" label={ i18n.translate( 'Add Media' ) } />, | ||
| cmd: 'wpcomAddMedia' | ||
| }, | ||
| { | ||
| name: 'insert_contact_form', | ||
| item: <GridiconButton icon="mention" label={ i18n.translate( 'Add Contact Form' ) } />, | ||
| cmd: 'wpcomContactForm' | ||
| } | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import tinymce from 'tinymce/tinymce'; | ||
| import { renderToString } from 'react-dom/server'; | ||
|
|
||
| import Gridicon from 'components/gridicon'; | ||
| import config from 'config'; | ||
| import i18n from 'lib/mixins/i18n'; | ||
|
|
||
| import menuItems from './menu-items'; | ||
|
|
||
| const initialize = editor => { | ||
| menuItems.forEach( item => | ||
| editor.addMenuItem( item.name, { | ||
| classes: 'wpcom-insert-menu__menu-item', | ||
| cmd: item.cmd, | ||
| onPostRender() { | ||
| this.innerHtml( renderToString( item.item ) ); | ||
| } | ||
| } ) | ||
| ); | ||
|
|
||
| editor.addButton( 'wpcom_insert_menu', { | ||
| type: 'splitbutton', | ||
| title: i18n.translate( 'Insert content' ), | ||
| classes: 'btn wpcom-insert-menu insert-menu', | ||
| cmd: menuItems[0].cmd, | ||
| menu: menuItems.map( ( { name } ) => editor.menuItems[ name ] ), | ||
| onPostRender() { | ||
| ReactDOM.render( | ||
| <Gridicon icon="add-image" />, | ||
| this.$el[0].children[0] | ||
| ); | ||
| } | ||
| } ); | ||
| }; | ||
|
|
||
| export default () => { | ||
| if ( ! config.isEnabled( 'post-editor/insert-menu' ) ) { | ||
| return; | ||
| } | ||
|
|
||
| tinymce.PluginManager.add( 'wpcom/insertmenu', initialize ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| .post-editor, | ||
| .mce-inline-toolbar-grp { | ||
|
|
||
| .mce-toolbar .mce-btn-group .mce-btn.mce-insert-menu { | ||
| margin: 0; | ||
|
|
||
| &:hover .mce-open i.mce-caret, | ||
| &:focus .mce-open i.mce-caret { | ||
| color: lighten( $gray, 10% ); | ||
| } | ||
|
|
||
| &:hover .gridicons-add-image, | ||
| &:focus .gridicons-add-image { | ||
| fill: lighten( $gray, 10% ); | ||
| } | ||
|
|
||
| .mce-open:hover i.mce-caret, | ||
| .mce-open:focus i.mce-caret { | ||
| color: $gray-dark; | ||
| } | ||
|
|
||
| .gridicons-add-image:hover, | ||
| .gridicons-add-image:focus { | ||
| fill: $gray-dark; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .post-editor .mce-toolbar .mce-btn.mce-insert-menu .gridicon, | ||
| .wpcom-insert-menu__menu-icon.gridicon { | ||
| height: 24px; | ||
| width: 24px; | ||
| } | ||
|
|
||
| .mce-toolbar .mce-btn.mce-insert-menu button:first-child { | ||
| padding: 6px; | ||
| } | ||
|
|
||
| .mce-splitbtn.mce-insert-menu .mce-open.mce-active { | ||
| background-color: $white; | ||
| outline: 0; | ||
| } | ||
|
|
||
| .mce-btn.mce-insert-menu span { | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| .mce-toolbar .mce-btn.mce-insert-menu .mce-open { | ||
| padding: 8px 12px; | ||
| } | ||
|
|
||
| .mce-container .wpcom-insert-menu__menu-label { | ||
| color: darken( $gray, 30% ); | ||
| display: inline-block; | ||
| font-family: $sans; | ||
| margin-left: 8px; | ||
| margin-top: 2px; | ||
| } | ||
|
|
||
| .wpcom-insert-menu__menu-icon { | ||
| fill: $gray; | ||
| } | ||
|
|
||
| .mce-container.mce-menu .mce-container-body .mce-wpcom-insert-menu__menu-item { | ||
| padding: 9px 16px; | ||
| margin: 0; | ||
| border: none; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
|
|
||
| .wpcom-insert-menu__menu-label { | ||
| color: $blue-medium; | ||
| } | ||
|
|
||
| .wpcom-insert-menu__menu-icon { | ||
| fill: $blue-medium; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters