From 0f53bd78bf45a8318e2c626fe9b777d3f012e6db Mon Sep 17 00:00:00 2001 From: iseulde <ella@iseulde.com> Date: Wed, 8 Mar 2017 17:25:41 +0100 Subject: [PATCH] Add insert menu separators --- .../blocks/core/gallery/register.js | 2 +- tinymce-single/blocks/core/image/register.js | 2 +- .../my-awesome-plugin/youtube/register.js | 2 +- tinymce-single/tinymce/block.css | 11 +++++++ tinymce-single/tinymce/block.js | 33 ++++++++++++++----- 5 files changed, 39 insertions(+), 11 deletions(-) diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js index 047c029aea6d8..075aa079fdf74 100644 --- a/tinymce-single/blocks/core/gallery/register.js +++ b/tinymce-single/blocks/core/gallery/register.js @@ -2,7 +2,7 @@ window.wp.blocks.registerBlock( { name: 'gallery', namespace: 'core', displayName: 'Gallery', - type: 'image', + type: 'media', keywords: [], icon: 'gridicons-image-multiple', controls: [ diff --git a/tinymce-single/blocks/core/image/register.js b/tinymce-single/blocks/core/image/register.js index 191da6ac9ac33..68bc3ad1d1035 100644 --- a/tinymce-single/blocks/core/image/register.js +++ b/tinymce-single/blocks/core/image/register.js @@ -2,7 +2,7 @@ window.wp.blocks.registerBlock( { name: 'image', namespace: 'core', displayName: 'Image', - type: 'image', + type: 'media', icon: 'gridicons-image', controls: [ 'block-align-left', diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js index bab44c795e16c..de35e3969460d 100644 --- a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js @@ -2,7 +2,7 @@ window.wp.blocks.registerBlock( { name: 'youtube', namespace: 'my-awesome-plugin', displayName: 'YouTube Video', - type: 'video', + type: 'media', keywords: [], icon: 'gridicons-video', controls: [ diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index 5a0bce7534929..77bb30bf29f7c 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -259,6 +259,13 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { float: left; } +.insert-menu .insert-separator { + clear: both; + background: #f0f2f4; + padding: 4px; + text-transform: uppercase; +} + .insert-menu .mce-txt { font-size: 16px; text-align: inherit; @@ -268,3 +275,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { width: 120px; padding: 4px; } + +.insert-menu .mce-btn-has-text svg.gridicons-heading { + margin: 0; +} diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index cad1bef837bf0..a5892e1ddb0e4 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -258,21 +258,38 @@ return insert; } + window.tinymce.ui.WPInsertSeparator = tinymce.ui.Control.extend( { + renderHtml: function() { + console.log(this) + return ( + '<div id="' + this._id + '" class="insert-separator">' + this.settings.text + '</div>' + ); + } + } ); + function createInsertMenu() { var insertMenu = editor.wp._createToolbar( ( function() { var allSettings = wp.blocks.getBlocks(); var buttons = []; var key; + var types = [ 'text', 'media', 'separator' ]; + + types.forEach( function( type ) { + buttons.push( { + type: 'WPInsertSeparator', + text: type + } ); - for ( key in allSettings ) { - if ( allSettings[ key ].insert ) { - buttons.push( { - text: allSettings[ key ].displayName, - icon: allSettings[ key ].icon, - onClick: allSettings[ key ].insert - } ); + for ( key in allSettings ) { + if ( allSettings[ key ].type === type ) { + buttons.push( { + text: allSettings[ key ].displayName, + icon: allSettings[ key ].icon, + onClick: allSettings[ key ].insert + } ); + } } - } + } ); return buttons; } )() );