From 5af6a1cbea4aa42309ba8afaef3ba913bffd2b8a Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 8 Mar 2017 16:13:06 +0100 Subject: [PATCH 1/4] Add inserter styles --- shared/index.css | 1 - tinymce-single/blocks/core/gallery/register.js | 6 +++++- tinymce-single/blocks/core/image/register.js | 6 +++++- .../blocks/elements/blockquote/register.js | 1 + .../blocks/elements/headings/register.js | 1 + .../elements/horizontal-rule/register.js | 1 + .../blocks/elements/paragraph/register.js | 6 +++++- .../my-awesome-plugin/youtube/register.js | 6 +++++- tinymce-single/tinymce/block.css | 18 ++++++++++++++++++ tinymce-single/tinymce/block.js | 8 +++----- 10 files changed, 44 insertions(+), 10 deletions(-) diff --git a/shared/index.css b/shared/index.css index f184e2029de965..8765eee003cdb0 100644 --- a/shared/index.css +++ b/shared/index.css @@ -86,7 +86,6 @@ body { #editor p { font-size: 16px; - min-height: 3.4em; } #editor blockquote { diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js index 88a585bfdc8165..047c029aea6d89 100644 --- a/tinymce-single/blocks/core/gallery/register.js +++ b/tinymce-single/blocks/core/gallery/register.js @@ -1,6 +1,7 @@ window.wp.blocks.registerBlock( { name: 'gallery', namespace: 'core', + displayName: 'Gallery', type: 'image', keywords: [], icon: 'gridicons-image-multiple', @@ -24,5 +25,8 @@ window.wp.blocks.registerBlock( { { icon: 'gridicons-cog' } - ] + ], + insert: function( block, editor ) { + + } } ); diff --git a/tinymce-single/blocks/core/image/register.js b/tinymce-single/blocks/core/image/register.js index 738cfae987262e..191da6ac9ac337 100644 --- a/tinymce-single/blocks/core/image/register.js +++ b/tinymce-single/blocks/core/image/register.js @@ -1,6 +1,7 @@ window.wp.blocks.registerBlock( { name: 'image', namespace: 'core', + displayName: 'Image', type: 'image', icon: 'gridicons-image', controls: [ @@ -9,5 +10,8 @@ window.wp.blocks.registerBlock( { 'block-align-right', 'block-align-full', 'togglefigcaption' - ] + ], + insert: function( block, editor ) { + + } } ); diff --git a/tinymce-single/blocks/elements/blockquote/register.js b/tinymce-single/blocks/elements/blockquote/register.js index 336954ada6c741..04f05d9918b5d1 100644 --- a/tinymce-single/blocks/elements/blockquote/register.js +++ b/tinymce-single/blocks/elements/blockquote/register.js @@ -1,5 +1,6 @@ window.wp.blocks.registerBlock( { elements: [ 'blockquote' ], + displayName: 'Quote', type: 'text', icon: 'gridicons-quote', controls: [ diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js index c73a3c4c570b72..23f520c46b6c18 100644 --- a/tinymce-single/blocks/elements/headings/register.js +++ b/tinymce-single/blocks/elements/headings/register.js @@ -28,6 +28,7 @@ wp.blocks.registerBlock( { elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], + displayName: 'Heading', type: 'text', icon: 'gridicons-heading', controls: getControls() diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js index 433bb19b748d1e..3d01c4ce5c455b 100644 --- a/tinymce-single/blocks/elements/horizontal-rule/register.js +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -1,6 +1,7 @@ window.wp.blocks.registerBlock( { elements: [ 'hr' ], type: 'separator', + displayName: 'Horizontal Rule', icon: 'gridicons-minus', insert: function( block ) { block.parentNode.replaceChild( document.createElement( 'hr' ), block ); diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js index d0424216475e64..5d05c610556657 100644 --- a/tinymce-single/blocks/elements/paragraph/register.js +++ b/tinymce-single/blocks/elements/paragraph/register.js @@ -1,6 +1,7 @@ window.wp.blocks.registerBlock( { elements: [ 'p' ], type: 'text', + displayName: 'Paragraph', icon: 'gridicons-posts', controls: [ { @@ -30,5 +31,8 @@ window.wp.blocks.registerBlock( { 'text-align-left', 'text-align-center', 'text-align-right' - ] + ], + insert: function( block, editor ) { + editor.formatter.apply( 'paragraph', block ); + } } ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js index 4d84f3c459447b..bab44c795e16c4 100644 --- a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js @@ -1,6 +1,7 @@ window.wp.blocks.registerBlock( { name: 'youtube', namespace: 'my-awesome-plugin', + displayName: 'YouTube Video', type: 'video', keywords: [], icon: 'gridicons-video', @@ -12,5 +13,8 @@ window.wp.blocks.registerBlock( { { icon: 'gridicons-cog' } - ] + ], + insert: function( block, editor ) { + + } } ); diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index bf4c5273f76737..5a0bce75349291 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -250,3 +250,21 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { background: #fff; border-radius: 12px; } + +.insert-menu { + width: 330px; +} + +.insert-menu .mce-btn { + float: left; +} + +.insert-menu .mce-txt { + font-size: 16px; + text-align: inherit; + vertical-align: inherit; + width: auto; + line-height: 16px; + width: 120px; + padding: 4px; +} diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index dd7497b2f2f0c9..cad1bef837bf03 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -267,20 +267,18 @@ for ( key in allSettings ) { if ( allSettings[ key ].insert ) { buttons.push( { + text: allSettings[ key ].displayName, icon: allSettings[ key ].icon, onClick: allSettings[ key ].insert } ); } } - buttons.push( { - text: 'Work in progress', - onClick: function() {} - } ); - return buttons; } )() ); + insertMenu.$el.addClass( 'insert-menu' ); + insertMenu.reposition = function () { var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect(); From 5be17632dd751817a01f6afa3dc3fc9d25ab9ed1 Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 8 Mar 2017 17:00:37 +0100 Subject: [PATCH 2/4] Register element block group and create separate map --- tinymce-single/blocks.js | 23 ++++++++++++------- .../blocks/elements/blockquote/register.js | 3 ++- .../blocks/elements/headings/register.js | 8 +++++-- .../elements/horizontal-rule/register.js | 3 ++- .../blocks/elements/lists/register.js | 7 +++++- .../blocks/elements/paragraph/register.js | 3 ++- .../blocks/elements/preformatted/register.js | 7 +++++- 7 files changed, 39 insertions(+), 15 deletions(-) diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js index b7518884cad5b7..39633a1908fea0 100644 --- a/tinymce-single/blocks.js +++ b/tinymce-single/blocks.js @@ -4,19 +4,23 @@ _blocks = {}; _controls = {}; + var _elementMap = {}; + wp.blocks = { registerBlock: function( settings ) { // Note, elements should probably only be registered by core. // Maybe for each block, we should offer to extend the settings (add buttons). + var namespace = settings.namespace || 'elements'; + var id = namespace + ':' + settings.name; + + _blocks[ id ] = settings; + _blocks[ id ]._id = id; + if ( settings.elements ) { settings.elements.forEach( function( element ) { - _blocks[ 'element:' + element ] = settings; - _blocks[ 'element:' + element ]._id = 'element:' + element; + _elementMap[ element ] = id; } ); - } else if ( settings.namespace && settings.name ) { - _blocks[ settings.namespace + ':' + settings.name ] = settings; - _blocks[ settings.namespace + ':' + settings.name ]._id = settings.namespace + ':' + settings.name; } }, registerControl: function( name, settings ) { @@ -29,10 +33,13 @@ return _controls[ name ]; }, getBlockSettingsByElement: function( element ) { - var blockType = element.getAttribute( 'data-wp-block-type' ); - var nodeName = element.nodeName.toLowerCase(); + var id = element.getAttribute( 'data-wp-block-type' ); + + if ( ! id ) { + id = _elementMap[ element.nodeName.toLowerCase() ]; + } - return this.getBlockSettings( blockType || 'element:' + nodeName ); + return this.getBlockSettings( id ); }, getBlocks: function() { return _blocks; diff --git a/tinymce-single/blocks/elements/blockquote/register.js b/tinymce-single/blocks/elements/blockquote/register.js index 04f05d9918b5d1..ce4550616d6a12 100644 --- a/tinymce-single/blocks/elements/blockquote/register.js +++ b/tinymce-single/blocks/elements/blockquote/register.js @@ -1,6 +1,7 @@ window.wp.blocks.registerBlock( { - elements: [ 'blockquote' ], + name: 'blockquote', displayName: 'Quote', + elements: [ 'blockquote' ], type: 'text', icon: 'gridicons-quote', controls: [ diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js index 23f520c46b6c18..20b166c097d462 100644 --- a/tinymce-single/blocks/elements/headings/register.js +++ b/tinymce-single/blocks/elements/headings/register.js @@ -27,10 +27,14 @@ } wp.blocks.registerBlock( { - elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], + name: 'heading', displayName: 'Heading', + elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], type: 'text', icon: 'gridicons-heading', - controls: getControls() + controls: getControls(), + insert: function() { + + } } ); } )( window.wp ); diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js index 3d01c4ce5c455b..5459fcc2e3f442 100644 --- a/tinymce-single/blocks/elements/horizontal-rule/register.js +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -1,7 +1,8 @@ window.wp.blocks.registerBlock( { + name: 'hortizontal-rule', + displayName: 'Horizontal Rule', elements: [ 'hr' ], type: 'separator', - displayName: 'Horizontal Rule', icon: 'gridicons-minus', insert: function( block ) { block.parentNode.replaceChild( document.createElement( 'hr' ), block ); diff --git a/tinymce-single/blocks/elements/lists/register.js b/tinymce-single/blocks/elements/lists/register.js index e17561c06b3195..62c87909e70039 100644 --- a/tinymce-single/blocks/elements/lists/register.js +++ b/tinymce-single/blocks/elements/lists/register.js @@ -1,4 +1,6 @@ window.wp.blocks.registerBlock( { + name: 'list', + displayName: 'List', elements: [ 'ul', 'ol' ], type: 'text', icon: 'gridicons-list-unordered', @@ -28,5 +30,8 @@ window.wp.blocks.registerBlock( { } } } - ] + ], + insert: function( block, editor ) { + editor.execCommand( 'InsertUnorderedList' ); + } } ); diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js index 5d05c610556657..b346a55f14dfb9 100644 --- a/tinymce-single/blocks/elements/paragraph/register.js +++ b/tinymce-single/blocks/elements/paragraph/register.js @@ -1,7 +1,8 @@ window.wp.blocks.registerBlock( { + name: 'paragraph', + displayName: 'Paragraph', elements: [ 'p' ], type: 'text', - displayName: 'Paragraph', icon: 'gridicons-posts', controls: [ { diff --git a/tinymce-single/blocks/elements/preformatted/register.js b/tinymce-single/blocks/elements/preformatted/register.js index 48410627428b75..c15cefe7f53aff 100644 --- a/tinymce-single/blocks/elements/preformatted/register.js +++ b/tinymce-single/blocks/elements/preformatted/register.js @@ -1,4 +1,6 @@ window.wp.blocks.registerBlock( { + name: 'preformatted', + displayName: 'Preformatted', elements: [ 'pre' ], type: 'text', icon: 'gridicons-code', @@ -13,5 +15,8 @@ window.wp.blocks.registerBlock( { editor.formatter.remove( 'pre' ); } } - ] + ], + insert: function( block, editor ) { + editor.formatter.apply( 'pre' ); + } } ); From e225df801fc99870ea977e31813ff24e2c882760 Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 8 Mar 2017 17:04:46 +0100 Subject: [PATCH 3/4] Make sure all editor text inherits the same font size --- shared/index.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/shared/index.css b/shared/index.css index 8765eee003cdb0..9c257950c4ca12 100644 --- a/shared/index.css +++ b/shared/index.css @@ -26,6 +26,7 @@ body { #editor { font-family: "Noto Serif", serif; + font-size: 16px; outline: none; padding: 50px; } @@ -84,10 +85,6 @@ body { font-size: 28px; } -#editor p { - font-size: 16px; -} - #editor blockquote { font-size: 20px; border-left: 4px solid black; From 833f04ebd123f2a73ad0d7467fc925a09c851ea6 Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 8 Mar 2017 17:25:41 +0100 Subject: [PATCH 4/4] 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 047c029aea6d89..075aa079fdf747 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 191da6ac9ac337..68bc3ad1d1035b 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 bab44c795e16c4..de35e3969460dc 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 5a0bce75349291..77bb30bf29f7c0 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 cad1bef837bf03..a5892e1ddb0e45 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 ( + '
' + this.settings.text + '
' + ); + } + } ); + 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; } )() );