WIP: Add basic text type switcher

WordPress · Mar 13, 2017 · fc2ccfd · fc2ccfd
1 parent ca69ae4
commit fc2ccfd
Show file tree

Hide file tree

Showing 11 changed files with 225 additions and 94 deletions.
diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js
@@ -55,6 +55,47 @@
 		}
 	} ) );
 
+	tinymce.ui.Factory.add( 'svglistbox', tinymce.ui.ListBox.extend( {
+		renderHtml: function() {
+			var id = this._id;
+			var prefix = this.classPrefix;
+			var icon = this.state.get( 'icon' );
+			var text = this.state.get( 'text' );
+			var html = '';
+
+			if ( icon && icon.indexOf( 'gridicons-' ) === 0 ) {
+				html += (
+					'<svg width="24" height="24" class="gridicon ' + icon + '">' +
+						'<use xlink:href="../shared/gridicons.svg#' + icon + '"></use>' +
+					'</svg>'
+				);
+			} else if ( icon ) {
+				html += '<i class="' + prefix + 'ico ' + prefix + 'i-' + icon + '"></i>';
+			}
+
+			if ( text ) {
+				this.classes.add( 'btn-has-text' );
+				html += '<span class="' + prefix + 'txt">' + this.encode( text ) + '</span>';
+			}
+
+			html += (
+				'<svg width="24" height="24" class="gridicon gridicons-dropdown">' +
+					'<use xlink:href="../shared/gridicons.svg#gridicons-dropdown"></use>' +
+				'</svg>'
+			);
+
+			this.aria( 'role', 'button' );
+
+			return (
+				'<div id="' + id + '" class="' + this.classes + '" tabindex="-1" aria-labelledby="' + id + '">' +
+					'<button id="' + id + '-open" role="presentation" type="button" tabindex="-1">' +
+						html +
+					'</button>' +
+				'</div>'
+			);
+		}
+	} ) );
+
 	tinymce.PluginManager.add( 'toolbar', function( editor ) {
 		var each = tinymce.each;
 		var DOM = tinymce.DOM;
@@ -76,9 +117,9 @@
 					var itemName;
 
 					function onClick( callback ) {
-						return function() {
+						return function( event ) {
 							editor.undoManager.transact( function() {
-								callback( window.wp.blocks.getSelectedBlock(), editor );
+								callback( window.wp.blocks.getSelectedBlock(), editor, event );
 							} );
 						}
 					}

diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js
@@ -23,6 +23,18 @@
 				} );
 			}
 		},
+		getType: function( name ) {
+			var settings = [];
+			var key;
+
+			for ( key in _blocks ) {
+				if ( _blocks[ key ].type === name ) {
+					settings.push( _blocks[ key ] );
+				}
+			}
+
+			return settings;
+		},
 		registerControl: function( name, settings ) {
 			_controls[ name ] = settings;
 		},

diff --git a/tinymce-single/blocks/core/table/register.js b/tinymce-single/blocks/core/table/register.js
@@ -21,7 +21,7 @@
 		name: 'table',
 		nameSpace: 'core',
 		displayName: 'Table',
-		type: 'text',
+		type: 'media',
 		icon: 'gridicons-grid',
 		editable: [ 'table', 'figcaption' ],
 		insert: insertEmpty,

diff --git a/tinymce-single/blocks/elements/blockquote/register.js b/tinymce-single/blocks/elements/blockquote/register.js
@@ -1,50 +1,61 @@
-window.wp.blocks.registerBlock( {
-	name: 'blockquote',
-	displayName: 'Quote',
-	elements: [ 'blockquote' ],
-	type: 'text',
-	icon: 'gridicons-quote',
-	restrictToInline: [ 'footer' ],
-	controls: [
-		{
-			classes: 'remove-formatting',
-			icon: 'gridicons-quote',
-			onClick: function( block, editor ) {
-				var footer = block.querySelector( 'footer' );
-				var firstChild = block.firstChild;
-
-				if ( footer ) {
-					block.removeChild( footer );
-				}
+( function( wp ) {
+	function insertEmpty() {
+		return '<blockquote><p><br></p></blockquote>';
+	}
 
-				while ( block.firstChild ) {
-					block.parentNode.insertBefore( block.firstChild, block );
-				}
+	function fromBaseState( block, editor ) {
+		editor.formatter.apply( 'blockquote', block );
+	}
 
-				block.parentNode.removeChild( block );
+	function toBaseState( block ) {
+		var footer = block.querySelector( 'footer' );
+		var firstChild = block.firstChild;
 
-				window.wp.blocks.selectBlock( firstChild );
-			}
-		},
-		{
-			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' );
-			}
+		if ( footer ) {
+			block.removeChild( footer );
 		}
-	],
-	insert: function() {
-		return '<blockquote><p><br></p></blockquote>';
+
+		while ( block.firstChild ) {
+			block.parentNode.insertBefore( block.firstChild, block );
+		}
+
+		block.parentNode.removeChild( block );
+
+		window.wp.blocks.selectBlock( firstChild );
 	}
-} );
 
+	window.wp.blocks.registerBlock( {
+		name: 'blockquote',
+		displayName: 'Quote',
+		elements: [ 'blockquote' ],
+		type: 'text',
+		icon: 'gridicons-quote',
+		restrictToInline: [ 'footer' ],
+		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
+	} );
+} )( window.wp );
diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js
@@ -26,13 +26,23 @@
 		return controls;
 	}
 
+	function toBaseState( block, editor ) {
+		editor.formatter.apply( 'p', block );
+	}
+
+	function fromBaseState( block, editor ) {
+		editor.formatter.apply( 'h1', block );
+	}
+
 	wp.blocks.registerBlock( {
 		name: 'heading',
 		displayName: 'Heading',
 		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		type: 'text',
 		icon: 'gridicons-heading',
 		controls: getControls(),
+		toBaseState: toBaseState,
+		fromBaseState: fromBaseState,
 		insert: function() {
 			// Maybe detect best heading based on document outline.
 			return '<h1><br></h1>';

diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js
@@ -3,36 +3,16 @@ window.wp.blocks.registerBlock( {
 	displayName: 'Paragraph',
 	elements: [ 'p' ],
 	type: 'text',
+	section: 'text',
 	icon: 'gridicons-posts',
 	controls: [
-		{
-			icon: 'gridicons-heading',
-			onClick: function( block, editor ) {
-				editor.formatter.apply( 'h1' );
-			}
-		},
-		{
-			icon: 'gridicons-quote',
-			onClick: function( block, editor ) {
-				editor.formatter.apply( 'blockquote' );
-			}
-		},
-		{
-			icon: 'gridicons-list-unordered',
-			onClick: function( block ) {
-				wp.blocks.getBlockSettings( 'elements:list' ).fromBaseState( block );
-			}
-		},
-		{
-			icon: 'gridicons-code',
-			onClick: function( block, editor ) {
-				editor.formatter.apply( 'pre' );
-			}
-		},
+		'text-switcher',
 		'text-align-left',
 		'text-align-center',
 		'text-align-right'
 	],
+	toBaseState: function() {},
+	fromBaseState: function() {},
 	insert: function() {
 		return '<p><br></p>';
 	}

diff --git a/tinymce-single/blocks/elements/preformatted/register.js b/tinymce-single/blocks/elements/preformatted/register.js
@@ -1,22 +1,39 @@
-window.wp.blocks.registerBlock( {
-	name: 'preformatted',
-	displayName: 'Preformatted',
-	elements: [ 'pre' ],
-	type: 'text',
-	icon: 'gridicons-code',
-	controls: [
-		{
-			icon: 'gridicons-cog'
-		},
-		{
-			classes: 'remove-formatting',
-			icon: 'gridicons-code',
-			onClick: function( block, editor ) {
-				editor.formatter.remove( 'pre' );
-			}
-		}
-	],
-	insert: function() {
+( function( wp ) {
+
+	function insertEmpty() {
 		return '<pre><br></pre>';
 	}
-} );
+
+	function fromBaseState( block, editor ) {
+		editor.formatter.apply( 'pre', block );
+	}
+
+	function toBaseState( block, editor ) {
+		editor.formatter.remove( 'pre', block );
+	}
+
+	window.wp.blocks.registerBlock( {
+		name: 'preformatted',
+		displayName: 'Preformatted',
+		elements: [ 'pre' ],
+		type: 'text',
+		icon: 'gridicons-code',
+		controls: [
+			{
+				icon: 'gridicons-cog',
+				onClick: function() {}
+			},
+			{
+				classes: 'remove-formatting',
+				icon: 'gridicons-code',
+				onClick: function( block, editor ) {
+					editor.formatter.remove( 'pre', block );
+				}
+			}
+		],
+		insert: insertEmpty,
+		fromBaseState: fromBaseState,
+		toBaseState: toBaseState
+	} );
+
+} )( window.wp );
diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js
@@ -42,7 +42,26 @@
 			'block-align-right',
 			'block-align-full',
 			{
-				icon: 'gridicons-cog'
+				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,

diff --git a/tinymce-single/index.html b/tinymce-single/index.html
@@ -73,11 +73,11 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 		<script src="blocks/core/image/register.js"></script>
 		<script src="blocks/core/gallery/register.js"></script>
 		<script src="blocks/core/table/register.js"></script>
-		<script src="blocks/elements/blockquote/register.js"></script>
+		<script src="blocks/elements/paragraph/register.js"></script>
 		<script src="blocks/elements/headings/register.js"></script>
+		<script src="blocks/elements/blockquote/register.js"></script>
 		<script src="blocks/elements/horizontal-rule/register.js"></script>
 		<script src="blocks/elements/lists/register.js"></script>
-		<script src="blocks/elements/paragraph/register.js"></script>
 		<script src="blocks/elements/preformatted/register.js"></script>
 		<script src="blocks/my-awesome-plugin/special-blockquote/register.js"></script>
 		<script src="blocks/my-awesome-plugin/youtube/register.js"></script>

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -341,3 +341,19 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	display: block;
 	margin: 0 auto 20px;
 }
+
+.mce-floatpanel {
+	position: absolute;
+	background-color: #fff;
+	border: 1px solid #e1e6ea;
+	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
+	margin-top: 2px;
+}
+
+.mce-listbox .mce-txt {
+	display: none;
+}
+
+.mce-menu-item {
+	padding: 4px;
+}