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

Put type switcher in separate group
WordPress · Mar 13, 2017 · e04c6a3 · e04c6a3
2 parents 7f3d374 + 93d9af1
commit e04c6a3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js
@@ -21,7 +21,7 @@
 			}
 		} );
 
-		controls.push( 'text-align-left', 'text-align-center', 'text-align-right' );
+		controls.push( '|', 'text-align-left', 'text-align-center', 'text-align-right' );
 
 		return controls;
 	}

diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js
@@ -7,6 +7,7 @@ window.wp.blocks.registerBlock( {
 	icon: 'gridicons-posts',
 	controls: [
 		'text-switcher',
+		'|',
 		'text-align-left',
 		'text-align-center',
 		'text-align-right'

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -150,18 +150,18 @@ svg.gridicon {
 	transform: rotate( 90deg );
 }
 
-div.mce-inline-toolbar-grp {
+div.mce-btn-group {
 	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 );
 	box-sizing: border-box;
-	margin-bottom: 8px;
-	position: absolute;
+	margin-right: 8px;
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	max-width: 98%;
+	display: block;
+	float: left;
 }
 
 div.wp-link-preview {
@@ -201,7 +201,7 @@ div.wp-link-input input {
 	}
 }
 
-div.mce-inline-toolbar-grp.block-toolbar {
+div.block-toolbar .mce-btn-group {
 	border: none;
 	background: none;
 	box-shadow: none;
@@ -311,6 +311,10 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	width: 330px;
 }
 
+.insert-menu .mce-btn-group {
+	margin: 0;
+}
+
 .insert-menu .mce-btn {
 	float: left;
 }
@@ -367,4 +371,8 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	position: relative;
 	background: none;
 	color: #12181e;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -530,7 +530,7 @@
 
 					DOM.setStyles( toolbar, {
 						position: 'absolute',
-						left: Math.max( contentRect.left + editorPadding, elementRect.left ) + 8 + blockToolbarWidth + 'px',
+						left: Math.max( contentRect.left + editorPadding, elementRect.left ) + blockToolbarWidth + 'px',
 						top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
 					} );