Merge pull request #261 from WordPress/update/tinymce-single/mock-ups

Update/tinymce single/mock ups

shared/index.css

@@ -183,10 +183,15 @@ body {
 	color: #86909b;
 	font-size: 0.9em;
 	font-style: normal;
+	margin-left: 1.3em;
+	position: relative;
 }
 
-#editor blockquote footer:before {
+#editor blockquote footer:after {
 	content: '— ';
+	position: absolute;
+	left: -1.3em;
+	top: 0;
 }
 
 #editor table {

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

@@ -1,4 +1,5 @@
 ( function( wp ) {
+
 	function insertEmpty() {
 		return '<blockquote><p><br></p></blockquote>';
 	}
@@ -24,38 +25,47 @@
 		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',
 		icon: 'gridicons-quote',
 		restrictToInline: [ 'footer' ],
+		placeholders: {
+			'': 'Write quote\u2026',
+			footer: 'Write citation\u2026'
+		},
 		controls: [
 			{
 				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 ) ) {
@@ -70,6 +94,9 @@
 		keywords: [],
 		icon: 'gridicons-image-multiple',
 		editable: [ 'figcaption' ],
+		placeholders: {
+			figcaption: 'Write caption\u2026'
+		},
 		controls: [
 			'block-align-left',
 			'block-align-center',
@@ -80,6 +107,9 @@
 			}
 		],
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		onClick: onClick
 	} );
+
 } )( window.wp );

tinymce-single/blocks/elements/headings/register.js → tinymce-single/blocks/core/heading/register.js

@@ -1,4 +1,5 @@
 ( function( wp ) {
+
 	function getControls() {
 		var controls = [];
 
@@ -36,9 +37,13 @@
 
 	wp.blocks.registerBlock( {
 		name: 'heading',
+		nameSpace: 'core',
 		displayName: 'Heading',
 		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		type: 'text',
+		placeholders: {
+			'': 'Write heading\u2026'
+		},
 		icon: 'gridicons-heading',
 		controls: getControls(),
 		toBaseState: toBaseState,
@@ -48,4 +53,5 @@
 			return '<h1><br></h1>';
 		}
 	} );
+
 } )( window.wp );

tinymce-single/blocks/elements/horizontal-rule/register.js → tinymce-single/blocks/core/horizontal-rule/register.js

@@ -1,5 +1,6 @@
 window.wp.blocks.registerBlock( {
 	name: 'hortizontal-rule',
+	nameSpace: 'core',
 	displayName: 'Horizontal Rule',
 	elements: [ 'hr' ],
 	type: 'separator',

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 ) ) {
@@ -59,31 +76,18 @@
 		type: 'media',
 		icon: 'gridicons-image',
 		editable: [ 'figcaption' ],
+		placeholders: {
+			figcaption: 'Write caption\u2026'
+		},
 		controls: [
 			'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/elements/lists/register.js → tinymce-single/blocks/core/list/register.js

@@ -54,6 +54,7 @@
 
 	wp.blocks.registerBlock( {
 		name: 'list',
+		nameSpace: 'core',
 		displayName: 'List',
 		elements: [ 'ul', 'ol' ],
 		type: 'text',

tinymce-single/blocks/elements/paragraph/register.js → tinymce-single/blocks/core/paragraph/register.js

@@ -1,5 +1,6 @@
 window.wp.blocks.registerBlock( {
 	name: 'paragraph',
+	nameSpace: 'core',
 	displayName: 'Paragraph',
 	elements: [ 'p' ],
 	type: 'text',

tinymce-single/blocks/elements/preformatted/register.js → tinymce-single/blocks/core/preformatted/register.js

@@ -14,10 +14,14 @@
 
 	window.wp.blocks.registerBlock( {
 		name: 'preformatted',
+		nameSpace: 'core',
 		displayName: 'Preformatted',
 		elements: [ 'pre' ],
 		type: 'text',
 		icon: 'gridicons-code',
+		placeholders: {
+			'': 'Write preformatted text\u2026'
+		},
 		controls: [
 			{
 				icon: 'gridicons-cog',

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

@@ -17,14 +17,36 @@
 		);
 	}
 
+	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',
 		displayName: 'Table',
-		type: 'media',
+		type: 'data visualisation',
 		icon: 'gridicons-grid',
 		editable: [ 'table', 'figcaption' ],
+		placeholders: {
+			figcaption: 'Write caption\u2026'
+		},
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		controls: [
 			'block-align-left',
 			'block-align-center',
@@ -56,24 +78,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' );
 
@@ -36,35 +53,22 @@
 		keywords: [],
 		icon: 'gridicons-video',
 		editable: [ 'figcaption' ],
+		placeholders: {
+			figcaption: 'Write caption\u2026'
+		},
 		controls: [
 			'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' );
-				}
-			},
 			{
 				icon: 'gridicons-cog',
 				onClick: function() {}
 			}
 		],
 		insert: insertEmpty,
+		onSelect: onSelect,
+		onDeselect: onDeselect,
 		onPaste: onPaste
 	} );