diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js index 5d6f75cb596182..8c39f71e6060d4 100644 --- a/tinymce-single/blocks/core/gallery/register.js +++ b/tinymce-single/blocks/core/gallery/register.js @@ -5,6 +5,7 @@ window.wp.blocks.registerBlock( { type: 'media', keywords: [], icon: 'gridicons-image-multiple', + editable: [ 'figcaption' ], controls: [ 'block-align-left', 'block-align-center', diff --git a/tinymce-single/blocks/core/image/register.js b/tinymce-single/blocks/core/image/register.js index f4e4ddab81ade2..a9a4293a9cd7ac 100644 --- a/tinymce-single/blocks/core/image/register.js +++ b/tinymce-single/blocks/core/image/register.js @@ -4,6 +4,7 @@ window.wp.blocks.registerBlock( { displayName: 'Image', type: 'media', icon: 'gridicons-image', + editable: [ 'figcaption' ], controls: [ 'block-align-left', 'block-align-center', @@ -18,7 +19,7 @@ window.wp.blocks.registerBlock( { block.removeChild( figcaption ); } else { block.insertAdjacentHTML( 'beforeend', - '

' ); + '

' ); } window.wp.blocks.selectBlock( block ); @@ -30,9 +31,9 @@ window.wp.blocks.registerBlock( { ], insert: function() { return ( - '
' + + '
' + '' + - '
I have no idea which mountain this is. It looks tall!
' + + '
I have no idea which mountain this is. It looks tall!
' + '
' ); } diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js index a56cf8ee5e7842..35acf6f4c511b2 100644 --- a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js @@ -5,6 +5,7 @@ window.wp.blocks.registerBlock( { type: 'media', keywords: [], icon: 'gridicons-video', + editable: [ 'figcaption' ], controls: [ 'block-align-left', 'block-align-center', diff --git a/tinymce-single/index.html b/tinymce-single/index.html index 5aa6fe40f1a151..1d11125304b54e 100644 --- a/tinymce-single/index.html +++ b/tinymce-single/index.html @@ -20,9 +20,9 @@

1.0 Is The Loneliest Number

Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!

-
+
-
I have no idea which mountain this is. It looks tall!
+
I have no idea which mountain this is. It looks tall!

I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.

@@ -39,10 +39,10 @@

NASA discovers system of seven Earth-sized planets

The discovery sets a new record for greatest number of habitable-zone planets found around a single star outside our solar system. All of these seven planets could have liquid water—key to life as we know it—under the right atmospheric conditions, but the chances are highest with the three in the habitable zone.

-
+
A star shines on a planet's surface. -
TRAPPIST-1f
+
TRAPPIST-1f
@@ -54,9 +54,9 @@

NASA discovers system of seven Earth-sized planets

Okay, now let’s take an interstellar road trip:

-
+
-
More planets! 😊
+
More planets! 😊

And this is the end of another editor block prototype.

diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index e8edcb6d319f39..1ec488162483b6 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -46,6 +46,20 @@ editor.addButton( name, settings ); } ); + editor.on( 'setContent', function( event ) { + $blocks = editor.$( editor.getBody() ).find( '*[data-wp-block-type]' ); + $blocks.attr( 'contenteditable', 'false' ); + $blocks.each( function( i, block ) { + var settings = wp.blocks.getBlockSettingsByElement( block ); + + if ( settings && settings.editable ) { + settings.editable.forEach( function( selector ) { + editor.$( block ).find( selector ).attr( 'contenteditable', 'true' ); + } ); + } + } ); + } ); + // Attach block UI. editor.on( 'preinit', function() { @@ -251,8 +265,16 @@ function onClick( callback ) { return function( block ) { var content = callback.apply( this, arguments ); + var args = { + format: 'html', + set: true, + selection: true, + content: content + }; if ( content ) { + editor.fire( 'beforeSetContent', args ); + if ( typeof content === 'string' ) { var temp = document.createElement( 'div' ); temp.innerHTML = content; @@ -261,11 +283,13 @@ } block.parentNode.replaceChild( content, block ); + + editor.fire( 'setContent', args ); } window.wp.blocks.selectBlock( content ); - setTimeout( showBlockUI ) + setTimeout( showBlockUI, 50 ) } }