diff --git a/shared/index.css b/shared/index.css index f184e2029de96..9c257950c4ca1 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,11 +85,6 @@ body { font-size: 28px; } -#editor p { - font-size: 16px; - min-height: 3.4em; -} - #editor blockquote { font-size: 20px; border-left: 4px solid black; diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js index b7518884cad5b..39633a1908fea 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/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js index 88a585bfdc816..075aa079fdf74 100644 --- a/tinymce-single/blocks/core/gallery/register.js +++ b/tinymce-single/blocks/core/gallery/register.js @@ -1,7 +1,8 @@ window.wp.blocks.registerBlock( { name: 'gallery', namespace: 'core', - type: 'image', + displayName: 'Gallery', + type: 'media', keywords: [], icon: 'gridicons-image-multiple', controls: [ @@ -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 738cfae987262..68bc3ad1d1035 100644 --- a/tinymce-single/blocks/core/image/register.js +++ b/tinymce-single/blocks/core/image/register.js @@ -1,7 +1,8 @@ window.wp.blocks.registerBlock( { name: 'image', namespace: 'core', - type: 'image', + displayName: 'Image', + type: 'media', icon: 'gridicons-image', controls: [ 'block-align-left', @@ -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 336954ada6c74..ce4550616d6a1 100644 --- a/tinymce-single/blocks/elements/blockquote/register.js +++ b/tinymce-single/blocks/elements/blockquote/register.js @@ -1,4 +1,6 @@ window.wp.blocks.registerBlock( { + name: 'blockquote', + displayName: 'Quote', elements: [ 'blockquote' ], type: 'text', icon: 'gridicons-quote', diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js index c73a3c4c570b7..20b166c097d46 100644 --- a/tinymce-single/blocks/elements/headings/register.js +++ b/tinymce-single/blocks/elements/headings/register.js @@ -27,9 +27,14 @@ } wp.blocks.registerBlock( { + 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 433bb19b748d1..5459fcc2e3f44 100644 --- a/tinymce-single/blocks/elements/horizontal-rule/register.js +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -1,4 +1,6 @@ window.wp.blocks.registerBlock( { + name: 'hortizontal-rule', + displayName: 'Horizontal Rule', elements: [ 'hr' ], type: 'separator', icon: 'gridicons-minus', diff --git a/tinymce-single/blocks/elements/lists/register.js b/tinymce-single/blocks/elements/lists/register.js index e17561c06b319..62c87909e7003 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 d0424216475e6..b346a55f14dfb 100644 --- a/tinymce-single/blocks/elements/paragraph/register.js +++ b/tinymce-single/blocks/elements/paragraph/register.js @@ -1,4 +1,6 @@ window.wp.blocks.registerBlock( { + name: 'paragraph', + displayName: 'Paragraph', elements: [ 'p' ], type: 'text', icon: 'gridicons-posts', @@ -30,5 +32,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/elements/preformatted/register.js b/tinymce-single/blocks/elements/preformatted/register.js index 48410627428b7..c15cefe7f53af 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' ); + } } ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js index 4d84f3c459447..de35e3969460d 100644 --- a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js @@ -1,7 +1,8 @@ window.wp.blocks.registerBlock( { name: 'youtube', namespace: 'my-awesome-plugin', - type: 'video', + displayName: 'YouTube Video', + type: 'media', keywords: [], icon: 'gridicons-video', controls: [ @@ -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 bf4c5273f7673..77bb30bf29f7c 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -250,3 +250,32 @@ 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 .insert-separator { + clear: both; + background: #f0f2f4; + padding: 4px; + text-transform: uppercase; +} + +.insert-menu .mce-txt { + font-size: 16px; + text-align: inherit; + vertical-align: inherit; + width: auto; + line-height: 16px; + 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 dd7497b2f2f0c..a5892e1ddb0e4 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -258,29 +258,44 @@ 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' ]; - for ( key in allSettings ) { - if ( allSettings[ key ].insert ) { - buttons.push( { - icon: allSettings[ key ].icon, - onClick: allSettings[ key ].insert - } ); - } - } + types.forEach( function( type ) { + buttons.push( { + type: 'WPInsertSeparator', + text: type + } ); - buttons.push( { - text: 'Work in progress', - onClick: function() {} + 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; } )() ); + insertMenu.$el.addClass( 'insert-menu' ); + insertMenu.reposition = function () { var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect();