Merge pull request #188 from WordPress/add/tinymce-single/insert

Add insert button to block outline
WordPress · Mar 6, 2017 · d75cc9a · d75cc9a
2 parents 8cc540f + 795dea7
commit d75cc9a
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 19 deletions.
diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -232,7 +232,20 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 }
 
 .block-outline {
+	position: relative;
 	pointer-events: none;
-	outline: 2px solid #e0e5e9;
-	outline-offset: 11px;
+}
+
+.block-outline:before {
+	content: '';
+	position: absolute;
+	top: -12px;
+	right: -12px;
+	bottom: -9px;
+	left: -12px;
+	border: 2px solid #e0e5e9;
+}
+
+.insert-toolbar button {
+	background: #fff;
 }
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -179,8 +179,22 @@
 				icon: 'gridicons-add-outline',
 				tooltip: 'Add Block',
 				onClick: function() {
-					insert = true;
-					editor.nodeChanged();
+					var selection = window.getSelection();
+
+					if ( ! selection.isCollapsed || ! isEmptySlot( selection.anchorNode, true ) ) {
+						var $blocks = editor.$( getSelectedBlock() );
+						var $p = editor.$( '<p><br></p>' );
+
+						editor.undoManager.transact( function() {
+							$blocks.last().after( $p );
+							editor.selection.setCursorLocation( $p[0], 0 );
+						} );
+					}
+
+					setTimeout( function() {
+						insert = true;
+						editor.nodeChanged();
+					} );
 				}
 			} );
 
@@ -204,17 +218,37 @@
 			function createInsertToolbar() {
 				var insert = editor.wp._createToolbar( [ 'add' ] );
 
-				insert.$el.addClass( 'block-toolbar' );
+				insert.$el.addClass( 'block-toolbar insert-toolbar' );
 
-				insert.reposition = function () {
-					var elementRect = getSelectedBlock().getBoundingClientRect();
+				insert.reposition = function ( settings ) {
+					settings = settings || {};
+
+					var toolbar = this.getEl();
+					var block = getSelectedBlock();
+					var isRightAligned = editor.$( block ).hasClass( 'alignright' );
+					var toolbarRect = toolbar.getBoundingClientRect();
+					var blockRect = block.getBoundingClientRect();
 					var contentRect = editor.getBody().getBoundingClientRect();
 
-					DOM.setStyles( this.getEl(), {
-						position: 'absolute',
-						left: contentRect.left + 50 + 'px',
-						top: elementRect.top + window.pageYOffset + 'px'
-					} );
+					if ( isRightAligned ) {
+						var left = contentRect.right - toolbarRect.width - 50;
+					} else {
+						var left = contentRect.left + 50
+					}
+
+					if ( settings.isEmpty ) {
+						DOM.setStyles( toolbar, {
+							position: 'absolute',
+							left: left + 'px',
+							top: blockRect.top + 3 + window.pageYOffset + 'px'
+						} );
+					} else {
+						DOM.setStyles( toolbar, {
+							position: 'absolute',
+							left: left + 'px',
+							top: blockRect.top + Math.max( blockRect.height, 48 ) - 4 + window.pageYOffset + 'px'
+						} );
+					}
 
 					this.show();
 				}
@@ -290,15 +324,22 @@
 
 				navigation.reposition = function () {
 					var toolbar = this.getEl();
+					var block = getSelectedBlock();
+					var isRightAligned = editor.$( block ).hasClass( 'alignright' );
 					var toolbarRect = toolbar.getBoundingClientRect();
-					var elementRect = getSelectedBlock().getBoundingClientRect();
-
+					var blockRect = block.getBoundingClientRect();
 					var contentRect = editor.getBody().getBoundingClientRect();
 
+					if ( isRightAligned ) {
+						var left = contentRect.right - toolbarRect.width - 50;
+					} else {
+						var left = contentRect.left + 50
+					}
+
 					DOM.setStyles( toolbar, {
 						position: 'absolute',
-						left: contentRect.left + 50 + 'px',
-						top: elementRect.top + window.pageYOffset + 'px'
+						left: left + 'px',
+						top: blockRect.top + window.pageYOffset + 'px'
 					} );
 
 					this.show();
@@ -574,10 +615,8 @@
 
 					hideBlockUI();
 					UI.inline.hide();
-					UI.insert.reposition();
+					UI.insert.reposition( { isEmpty: isEmpty } );
 				} else {
-					UI.insert.hide();
-
 					if ( isBlockUIVisible ) {
 						var selectedBlocks = getBlockSelection();
 
@@ -599,8 +638,11 @@
 							height: endRect.bottom - startRect.top + 'px',
 							width: Math.max( startRect.width, endRect.width ) + 'px'
 						} );
+
+						UI.insert.reposition();
 					} else {
 						hideBlockUI();
+						UI.insert.hide();
 					}
 				}
 
@@ -690,6 +732,8 @@
 						return;
 					}
 
+					UI.insert.reposition();
+
 					showBlockUI( true );
 				}