Add caption placeholder on select, remove empty on deselect. See #91.

tinymce-single/blocks/core/blockquote/register.js

@@ -1,4 +1,5 @@
 ( function( wp ) {
+
 	function insertEmpty() {
 		return '<blockquote><p><br></p></blockquote>';
 	}
@@ -24,8 +25,26 @@
 		window.wp.blocks.selectBlock( firstChild );
 	}
 
-	window.wp.blocks.registerBlock( {
+	function onSelect( block ) {
+		var footer = block.querySelector( 'footer' );
+
+		if ( ! footer ) {
+			block.insertAdjacentHTML( 'beforeend',
+				'<footer><br></footer>' );
+		}
+	}
+
+	function onDeselect( block ) {
+		var footer = block.querySelector( 'footer' );
+
+		if ( ! footer.textContent ) {
+			block.removeChild( footer );
+		}
+	}
+
+	wp.blocks.registerBlock( {
 		name: 'blockquote',
+		nameSpace: 'core',
 		displayName: 'Quote',
 		elements: [ 'blockquote' ],
 		type: 'text',
@@ -36,26 +55,13 @@
 				classes: 'remove-formatting',
 				icon: 'gridicons-quote',
 				onClick: toBaseState
-			},
-			{
-				icon: 'gridicons-caption',
-				onClick: function( block ) {
-					var footer = block.querySelector( 'footer' );
-
-					if ( footer ) {
-						block.removeChild( footer );
-					} else {
-						block.insertAdjacentHTML( 'beforeend',
-							'<footer><br></footer>' );
-					}
-				},
-				isActive: function( block ) {
-					return !! block.querySelector( 'footer' );
-				}
 			}
 		],
 		insert: insertEmpty,
 		fromBaseState: fromBaseState,
-		toBaseState: toBaseState
+		toBaseState: toBaseState,
+		onSelect: onSelect,
+		onDeselect: onDeselect
 	} );
+
 } )( window.wp );

tinymce-single/blocks/core/gallery/register.js

@@ -23,6 +23,30 @@
 		);
 	}
 
+	function onSelect( block ) {
+		var figures = block.querySelectorAll( 'figure' );
+		var figcaption;
+
+		for ( var i = 0; i < figures.length; i++ ) {
+			figcaption = figures[ i ].querySelector( 'figcaption' );
+
+			if ( ! figcaption ) {
+				figures[ i ].insertAdjacentHTML( 'beforeend',
+					'<figcaption><br></figcaption>' );
+			}
+		}
+	}
+
+	function onDeselect( block ) {
+		var figcaptions = block.querySelectorAll( 'figcaption' );
+
+		for ( var i = 0; i < figcaptions.length; i++ ) {
+			if ( ! figcaptions[ i ].textContent ) {
+				figcaptions[ i ].parentNode.removeChild( figcaptions[ i ] );
+			}
+		}
+	}
+
 	function pickTarget( parents, child ) {
 		for ( var i = 0; i < parents.length; i++ ) {
 			if ( parents[ i ] === child || parents[ i ].contains( child ) ) {
@@ -80,6 +104,9 @@
 			}
 		],
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		onClick: onClick
 	} );
+
 } )( window.wp );

tinymce-single/blocks/core/heading/register.js

@@ -1,4 +1,5 @@
 ( function( wp ) {
+
 	function getControls() {
 		var controls = [];
 
@@ -49,4 +50,5 @@
 			return '<h1><br></h1>';
 		}
 	} );
+
 } )( window.wp );

tinymce-single/blocks/core/image/register.js

@@ -13,6 +13,23 @@
 		);
 	}
 
+	function onSelect( block ) {
+		var figcaption = block.querySelector( 'figcaption' );
+
+		if ( ! figcaption ) {
+			block.insertAdjacentHTML( 'beforeend',
+				'<figcaption><br></figcaption>' );
+		}
+	}
+
+	function onDeselect( block ) {
+		var figcaption = block.querySelector( 'figcaption' );
+
+		if ( ! figcaption.textContent ) {
+			block.removeChild( figcaption );
+		}
+	}
+
 	function pickTarget( parents, child ) {
 		for ( var i = 0; i < parents.length; i++ ) {
 			if ( parents[ i ] === child || parents[ i ].contains( child ) ) {
@@ -63,27 +80,11 @@
 			'block-align-left',
 			'block-align-center',
 			'block-align-right',
-			'block-align-full',
-			{
-				icon: 'gridicons-caption',
-				onClick: function( block ) {
-					var figcaption = block.querySelector( 'figcaption' );
-
-					if ( figcaption ) {
-						block.removeChild( figcaption );
-					} else {
-						block.insertAdjacentHTML( 'beforeend',
-							'<figcaption><br></figcaption>' );
-					}
-
-					window.wp.blocks.selectBlock( block );
-				},
-				isActive: function( block ) {
-					return !! block.querySelector( 'figcaption' );
-				}
-			}
+			'block-align-full'
 		],
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		onClick: onClick
 	} );
 

tinymce-single/blocks/core/table/register.js

@@ -17,6 +17,23 @@
 		);
 	}
 
+	function onSelect( block ) {
+		var figcaption = block.querySelector( 'figcaption' );
+
+		if ( ! figcaption ) {
+			block.insertAdjacentHTML( 'beforeend',
+				'<figcaption><br></figcaption>' );
+		}
+	}
+
+	function onDeselect( block ) {
+		var figcaption = block.querySelector( 'figcaption' );
+
+		if ( ! figcaption.textContent ) {
+			block.removeChild( figcaption );
+		}
+	}
+
 	wp.blocks.registerBlock( {
 		name: 'table',
 		nameSpace: 'core',
@@ -25,6 +42,8 @@
 		icon: 'gridicons-grid',
 		editable: [ 'table', 'figcaption' ],
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		controls: [
 			'block-align-left',
 			'block-align-center',
@@ -56,24 +75,6 @@
 					editor.execCommand( 'mceTableInsertColAfter' );
 				}
 			},
-			{
-				icon: 'gridicons-caption',
-				onClick: function( block ) {
-					var figcaption = block.querySelector( 'figcaption' );
-
-					if ( figcaption ) {
-						block.removeChild( figcaption );
-					} else {
-						block.insertAdjacentHTML( 'beforeend',
-							'<figcaption><br></figcaption>' );
-					}
-
-					window.wp.blocks.selectBlock( block );
-				},
-				isActive: function( block ) {
-					return !! block.querySelector( 'figcaption' );
-				}
-			},
 			{
 				icon: 'gridicons-cog',
 				onClick: function() {}

tinymce-single/blocks/my-awesome-plugin/youtube/register.js

@@ -13,6 +13,23 @@
 		);
 	}
 
+	function onSelect( block ) {
+		var figcaption = block.querySelector( 'figcaption' );
+
+		if ( ! figcaption ) {
+			block.insertAdjacentHTML( 'beforeend',
+				'<figcaption><br></figcaption>' );
+		}
+	}
+
+	function onDeselect( block ) {
+		var figcaption = block.querySelector( 'figcaption' );
+
+		if ( ! figcaption.textContent ) {
+			block.removeChild( figcaption );
+		}
+	}
+
 	function onPaste( event, block ) {
 		var target = block.querySelector( 'div' );
 
@@ -41,30 +58,14 @@
 			'block-align-center',
 			'block-align-right',
 			'block-align-full',
-			{
-				icon: 'gridicons-caption',
-				onClick: function( block ) {
-					var figcaption = block.querySelector( 'figcaption' );
-
-					if ( figcaption ) {
-						block.removeChild( figcaption );
-					} else {
-						block.insertAdjacentHTML( 'beforeend',
-							'<figcaption><br></figcaption>' );
-					}
-
-					window.wp.blocks.selectBlock( block );
-				},
-				isActive: function( block ) {
-					return !! block.querySelector( 'figcaption' );
-				}
-			},
 			{
 				icon: 'gridicons-cog',
 				onClick: function() {}
 			}
 		],
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		onPaste: onPaste
 	} );
 

tinymce-single/tinymce/block.js

@@ -183,6 +183,8 @@
 			var dragTarget;
 			var isDragging = false;
 
+			editor.serializer.addTempAttr( 'data-wp-block-selected' );
+
 			editor.addButton( 'block', {
 				icon: 'gridicons-posts',
 				tooltip: 'Add Block',
@@ -749,6 +751,28 @@
 					}
 				} );
 
+				var $prevSelected = editor.$( '*[data-wp-block-selected]' );
+
+				if ( selectedBlocks && $prevSelected[0] !== selectedBlocks[0] ) {
+					if ( $prevSelected.length ) {
+						var prevSettings = wp.blocks.getBlockSettingsByElement( $prevSelected[0] );
+
+						if ( prevSettings.onDeselect ) {
+							prevSettings.onDeselect( $prevSelected[0] );
+						}
+
+						$prevSelected.attr( 'data-wp-block-selected', null );
+					}
+
+					if ( selectedBlocks.length === 1 ) {
+						if ( settings.onSelect ) {
+							settings.onSelect( selectedBlocks[0] );
+						}
+
+						editor.$( selectedBlocks[0] ).attr( 'data-wp-block-selected', 'true' );
+					}
+				}
+
 				if ( selectedBlocks.length === 1 ) {
 					UI.blocks[ settings._id ].reposition();
 					focus && focusToolbar( UI.blocks[ settings._id ] );
@@ -889,11 +913,6 @@
 
 				metaCount = 0;
 			} );
-
-			editor.on( 'nodeChange', function() {
-				editor.$( editor.getBody() ).children().attr( 'data-mce-selected', null );
-				editor.$( getSelectedBlock() ).attr( 'data-mce-selected', 'true' );
-			} );
 		} );
 	} );
 } )( window.tinymce, window.wp, window._ );