Merge pull request #238 from WordPress/try/tinymce-single/contentedit…

…able-false

Allow blocks to register editable fields

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',

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',
-						'<figcaption contenteditable="true"><br></figcaption>' );
+						'<figcaption><br></figcaption>' );
 				}
 
 				window.wp.blocks.selectBlock( block );
@@ -30,9 +31,9 @@ window.wp.blocks.registerBlock( {
 	],
 	insert: function() {
 		return (
-			'<figure data-wp-block-type="core:image" class="alignright" contenteditable="false">' +
+			'<figure data-wp-block-type="core:image">' +
 				'<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">' +
-				'<figcaption contenteditable="true">I have no idea which mountain this is. It looks tall!</figcaption>' +
+				'<figcaption>I have no idea which mountain this is. It looks tall!</figcaption>' +
 			'</figure>'
 		);
 	}

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',

tinymce-single/index.html

@@ -20,9 +20,9 @@ <h1>1.0 Is The Loneliest Number</h1>
 
 			<p>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!</p>
 
-			<figure data-wp-block-type="core:image" class="alignright" contenteditable="false">
+			<figure data-wp-block-type="core:image" class="alignright">
 				<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">
-				<figcaption contenteditable="true">I have no idea which mountain this is. It looks tall!</figcaption>
+				<figcaption>I have no idea which mountain this is. It looks tall!</figcaption>
 			</figure>
 
 			<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>
@@ -39,10 +39,10 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 				<p>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.</p>
 			</blockquote>
 
-			<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3" contenteditable="false">
+			<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3">
 				<figure>
 					<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/1_main_pia21423-png.png" alt="A star shines on a planet's surface.">
-					<figcaption contenteditable="true">TRAPPIST-1f</figcaption>
+					<figcaption>TRAPPIST-1f</figcaption>
 				</figure>
 				<figure>
 					<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/exovolcano1920x1080.00033-1041.jpg" alt="">
@@ -54,9 +54,9 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 
 			<p>Okay, now let’s take an interstellar road trip:</p>
 
-			<figure data-wp-block-type="my-awesome-plugin:youtube" contenteditable="false">
+			<figure data-wp-block-type="my-awesome-plugin:youtube">
 				<iframe width="560" height="315" src="https://www.youtube.com/embed/3-NTv0CdFCk" allowfullscreen></iframe>
-				<figcaption contenteditable="true">More planets! 😊</figcaption>
+				<figcaption>More planets! 😊</figcaption>
 			</figure>
 
 			<p>And this is the end of another editor block prototype.</p>

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 )
 						}
 					}