diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js index 49205351e56ab0..e9a3ef5fb2c1ec 100644 --- a/tinymce-single/blocks.js +++ b/tinymce-single/blocks.js @@ -47,6 +47,23 @@ getControls: function() { return _controls; }, + + getHoverSelectedBlock: function (e) { + var editor = window.tinyMCE.activeEditor; + var targetNode = e.target; + var rootNode = editor.getBody(); + + if ( targetNode === rootNode || ! editor.getBody().contains( targetNode ) ) { + return null; + } + + while ( targetNode.parentNode !== rootNode ) { + targetNode = targetNode.parentNode; + } + + return targetNode; + }, + getSelectedBlocks: function() { var editor = window.tinyMCE.activeEditor; var selection = window.getSelection(); @@ -55,7 +72,7 @@ var rootNode = editor.getBody(); var blocks = []; - if ( ! startNode || ! editor.getBody().contains( startNode ) ) { + if ( startNode === rootNode || ! editor.getBody().contains( startNode ) ) { return [ rootNode.firstChild ]; } diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index 23e3d61ca09a6d..45715b4a1f4e3a 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -337,3 +337,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { display: block; margin: 0 auto 20px; } + +#editor .wp-hover-block { + box-shadow: -8px 0px 0 #fff, -10px 0px 0 #e1e6ea; +} \ No newline at end of file diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index c1837e4aab4b0e..ca14193e33f1b2 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -61,6 +61,7 @@ if ( settings.onClick ) { settings.onClick( event, block, function() { editor.nodeChanged() } ) + removeHoverClass(); } } ); @@ -78,17 +79,34 @@ } ); } ); + var currentEditingBlock = null; + var overBlockClass = 'wp-hover-block'; + + function removeHoverClass() { + editor.$( editor.getBody() ).find( '.' + overBlockClass ).removeClass( overBlockClass ); + } + editor.on( 'nodeChange', function( event ) { - var block = wp.blocks.getSelectedBlock(); - var settings = wp.blocks.getBlockSettingsByElement( block ); + currentEditingBlock = wp.blocks.getSelectedBlock(); + var settings = wp.blocks.getBlockSettingsByElement( currentEditingBlock ); if ( settings && settings.editable ) { settings.editable.forEach( function( selector ) { - editor.$( block ).find( selector ).attr( 'contenteditable', 'true' ); + editor.$( currentEditingBlock ).find( selector ).attr( 'contenteditable', 'true' ); + removeHoverClass(); } ); } } ); + editor.on( 'mouseover', function (e) { + var blockOver = wp.blocks.getHoverSelectedBlock(e); + removeHoverClass(); + if ( blockOver !== null && currentEditingBlock !== blockOver) { + blockOver.classList.add(overBlockClass); + } + + }); + function toInlineContent( content ) { var settings = { valid_elements: 'strong,em,del,a[href]'