Skip to content

Commit

Permalink
Merge pull request #211 from WordPress/add/tinymce-single/insert
Browse files Browse the repository at this point in the history
Update single MCE inserter
  • Loading branch information
ellatrix authored Mar 8, 2017
2 parents 735e94a + 0f53bd7 commit 612af53
Show file tree
Hide file tree
Showing 13 changed files with 117 additions and 34 deletions.
6 changes: 1 addition & 5 deletions shared/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ body {

#editor {
font-family: "Noto Serif", serif;
font-size: 16px;
outline: none;
padding: 50px;
}
Expand Down Expand Up @@ -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;
Expand Down
23 changes: 15 additions & 8 deletions tinymce-single/blocks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -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;
Expand Down
8 changes: 6 additions & 2 deletions tinymce-single/blocks/core/gallery/register.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
window.wp.blocks.registerBlock( {
name: 'gallery',
namespace: 'core',
type: 'image',
displayName: 'Gallery',
type: 'media',
keywords: [],
icon: 'gridicons-image-multiple',
controls: [
Expand All @@ -24,5 +25,8 @@ window.wp.blocks.registerBlock( {
{
icon: 'gridicons-cog'
}
]
],
insert: function( block, editor ) {

}
} );
8 changes: 6 additions & 2 deletions tinymce-single/blocks/core/image/register.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
window.wp.blocks.registerBlock( {
name: 'image',
namespace: 'core',
type: 'image',
displayName: 'Image',
type: 'media',
icon: 'gridicons-image',
controls: [
'block-align-left',
'block-align-center',
'block-align-right',
'block-align-full',
'togglefigcaption'
]
],
insert: function( block, editor ) {

}
} );
2 changes: 2 additions & 0 deletions tinymce-single/blocks/elements/blockquote/register.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
window.wp.blocks.registerBlock( {
name: 'blockquote',
displayName: 'Quote',
elements: [ 'blockquote' ],
type: 'text',
icon: 'gridicons-quote',
Expand Down
7 changes: 6 additions & 1 deletion tinymce-single/blocks/elements/headings/register.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
2 changes: 2 additions & 0 deletions tinymce-single/blocks/elements/horizontal-rule/register.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
window.wp.blocks.registerBlock( {
name: 'hortizontal-rule',
displayName: 'Horizontal Rule',
elements: [ 'hr' ],
type: 'separator',
icon: 'gridicons-minus',
Expand Down
7 changes: 6 additions & 1 deletion tinymce-single/blocks/elements/lists/register.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
window.wp.blocks.registerBlock( {
name: 'list',
displayName: 'List',
elements: [ 'ul', 'ol' ],
type: 'text',
icon: 'gridicons-list-unordered',
Expand Down Expand Up @@ -28,5 +30,8 @@ window.wp.blocks.registerBlock( {
}
}
}
]
],
insert: function( block, editor ) {
editor.execCommand( 'InsertUnorderedList' );
}
} );
7 changes: 6 additions & 1 deletion tinymce-single/blocks/elements/paragraph/register.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
window.wp.blocks.registerBlock( {
name: 'paragraph',
displayName: 'Paragraph',
elements: [ 'p' ],
type: 'text',
icon: 'gridicons-posts',
Expand Down Expand Up @@ -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 );
}
} );
7 changes: 6 additions & 1 deletion tinymce-single/blocks/elements/preformatted/register.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
window.wp.blocks.registerBlock( {
name: 'preformatted',
displayName: 'Preformatted',
elements: [ 'pre' ],
type: 'text',
icon: 'gridicons-code',
Expand All @@ -13,5 +15,8 @@ window.wp.blocks.registerBlock( {
editor.formatter.remove( 'pre' );
}
}
]
],
insert: function( block, editor ) {
editor.formatter.apply( 'pre' );
}
} );
8 changes: 6 additions & 2 deletions tinymce-single/blocks/my-awesome-plugin/youtube/register.js
Original file line number Diff line number Diff line change
@@ -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: [
Expand All @@ -12,5 +13,8 @@ window.wp.blocks.registerBlock( {
{
icon: 'gridicons-cog'
}
]
],
insert: function( block, editor ) {

}
} );
29 changes: 29 additions & 0 deletions tinymce-single/tinymce/block.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
37 changes: 26 additions & 11 deletions tinymce-single/tinymce/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -258,29 +258,44 @@
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' ];

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();
Expand Down

0 comments on commit 612af53

Please sign in to comment.