Merge pull request #209 from WordPress/update/single-prototype

Normalize some of the single instance interface

Author: jasmussen

shared/index.css

@@ -1,18 +1,33 @@
+/**
+ * Basic
+ */
+
+html,
 body {
-	background: #f3f6f8;
-	color: #2f4452;
-	font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
-	font-size: 1.25em;
-	line-height: 1.5;
-	margin: 1em;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+* {
+	box-sizing: border-box;
 }
 
+body {
+	font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	max-width: 820px;
+	margin: 60px auto;
+	color: #12181e;
+}
+
+/**
+ * Editor Basics
+ */
+
 #editor {
-	background: #fff;
-	margin: 5em auto;
+	font-family: "Noto Serif", serif;
 	outline: none;
-	padding: 5em;
-	width: 37.5em;
+	padding: 50px;
 }
 
 #editor .text-align-left {
@@ -41,6 +56,50 @@ body {
 	height: auto;
 }
 
+#editor svg {
+	fill: currentColor;
+}
+
+
+/**
+ * Editor Basic Blocks
+ */
+
+#editor p,
+#editor blockquote,
+#editor h1,
+#editor h2,
+#editor h3,
+#editor h4,
+#editor h5,
+#editor h6,
+#editor img {
+	margin: 1em 0;
+	box-shadow: inset 0px 0px 0px 0px #e0e5e9;
+	transition: all .2s ease;
+}
+
+#editor h2 {
+	font-weight: 900;
+	font-size: 28px;
+}
+
+#editor p {
+	font-size: 16px;
+	min-height: 3.4em;
+}
+
+#editor blockquote {
+	font-size: 20px;
+	border-left: 4px solid black;
+	padding-left: 1em;
+	font-style: italic;
+}
+
+#editor section:focus {
+	outline: none;
+}
+
 #editor figure {
 	clear: both;
 	float: none;
@@ -88,13 +147,13 @@ body {
 }
 
 #editor figcaption {
-	font-size: 0.8em;
 	margin-top: 0.5em;
 }
 
 #editor figure img,
 #editor figure iframe {
 	display: block;
+	margin: 0;
 }
 
 #editor pre {
@@ -108,7 +167,7 @@ body {
 }
 
 #editor hr:before {
-	content: '\2767';
+	content: '· · ·';
 	display: block;
 	text-align: center;
 }

tinymce-single/tinymce/block.js

@@ -2,6 +2,7 @@
 	tinymce.PluginManager.add( 'block', function( editor ) {
 		var getSelectedBlock = wp.blocks.getSelectedBlock;
 		var getSelectedBlocks = wp.blocks.getSelectedBlocks;
+		var editorPadding = 50;
 
 		// Global controls
 
@@ -234,12 +235,12 @@
 					if ( settings.isEmpty ) {
 						DOM.setStyles( toolbar, {
 							position: 'absolute',
-							left: contentRect.left + 50 + 'px',
+							left: contentRect.left + 'px',
 							top: blockRect.top + 3 + window.pageYOffset + 'px'
 						} );
 					} else {
 						if ( isFullBleed ) {
-							var left = contentRect.left + 50;
+							var left = contentRect.left;
 						} else {
 							var left = blockRect.left - 6;
 						}
@@ -288,7 +289,7 @@
 
 					DOM.setStyles( toolbar, {
 						position: 'absolute',
-						left: contentRect.left + 100 + 'px',
+						left: contentRect.left + editorPadding + 'px',
 						top: elementRect.top + window.pageYOffset + 'px'
 					} );
 
@@ -309,7 +310,7 @@
 
 					DOM.setStyles( toolbar, {
 						position: 'absolute',
-						left: Math.max( contentRect.left + 100, elementRect.left ) + 8 + blockToolbarWidth + 'px',
+						left: Math.max( contentRect.left + editorPadding, elementRect.left ) + 8 + blockToolbarWidth + 'px',
 						top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
 					} );
 
@@ -334,9 +335,9 @@
 					var contentRect = editor.getBody().getBoundingClientRect();
 
 					if ( isRightAligned ) {
-						var left = contentRect.right - toolbarRect.width - 50;
+						var left = contentRect.right - toolbarRect.width;
 					} else {
-						var left = contentRect.left + 50
+						var left = contentRect.left;
 					}
 
 					if ( isFullBleed ) {
@@ -372,7 +373,7 @@
 
 						DOM.setStyles( toolbar, {
 							position: 'absolute',
-							left: Math.max( contentRect.left + 100, elementRect.left ) + 'px',
+							left: Math.max( contentRect.left + editorPadding, elementRect.left ) + 'px',
 							top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
 						} );