Revert "Match main and tinymce-single prototype layout. See #134."

This reverts commit befc304.
WordPress · Feb 24, 2017 · 711bc85 · 711bc85
1 parent 351d0ae
commit 711bc85
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 57 deletions.
diff --git a/blocks.js b/blocks.js
@@ -358,13 +358,15 @@ function updateDockedControlsPosition( newClassName ) {
 	var fullBleed = className.match( /full-bleed/ );
 
 	var topPosition = position.top - 36 + window.scrollY;
-	var leftPosition = position.left;
+	var leftPosition = null;
 
 	if ( isImage && alignedRight ) {
+		leftPosition = position.left;
 		topPosition = newClassName ? topPosition - 15 : topPosition;
 	} else if ( isImage && alignedLeft && newClassName ) {
 		topPosition = topPosition - 15;
 	} else if ( isImage && className === 'is-selected' && dockedControls.style.left ) {
+		leftPosition = null;
 		topPosition = topPosition + 15;
 	} else if ( fullBleed ) {
 		leftPosition = ( window.innerWidth / 2 ) - ( dockedControls.clientWidth / 2 );

diff --git a/index.html b/index.html
@@ -4,8 +4,7 @@
 		<title>Editor Blocks</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" type="text/css" href="https://s1.wp.com/i/fonts/merriweather/merriweather.css?v=20160210">
-		<link href="shared/index.css" rel="stylesheet" type="text/css" media="all">
+		<link rel='stylesheet' id='h5-font-css' href='https://fonts.googleapis.com/css?family=Merriweather:700,300,700italic,300italic' />
 		<link href="style.css" rel="stylesheet" type="text/css" media="all">
 	</head>
 	<body>
@@ -71,12 +70,12 @@
 				</div>
 			</div>
 		</div>
-		<div class="editor" contenteditable="true">
-			<h1>1.0 Is The Loneliest Number</h1>
+		<section class="editor" contenteditable="true">
+			<h2>1.0 Is The Loneliest Number</h2>
 			<p>Many entrepreneurs idolize Steve Jobs. He’s such a <a href=""><span class="space-sep">&nbsp;</span>perfectionist<span class="space-sep-end">&nbsp;</span></a>, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>
 			<img alt="" src="https://cldup.com/HN3-c7ER9p.jpg" />
 			<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>
-		</div>
+		</section>
 		<div class="insert-block">
 			<button class="insert-block__button">
 				<svg class="gridicon gridicons-add-outline" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 9h-4V7h-2v4H7v2h4v4h2v-4h4v-2z"></path></g></svg>

diff --git a/shared/index.css b/shared/index.css
@@ -1,83 +1,72 @@
-* {
-	box-sizing: border-box;
-}
-
 body {
+	background: #f3f6f8;
 	color: #2f4452;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
 	font-size: 1.25em;
 	line-height: 1.5;
-	margin: 0;
-	padding: 0;
+	margin: 1em;
 }
 
-svg {
-	fill: currentColor;
-}
-
-a {
-	color: inherit;
-}
-
-.editor {
-	font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
+#editor {
+	background: #fff;
 	margin: 5em auto;
+	outline: none;
 	padding: 5em;
-	width: 47.5em;
+	width: 37.5em;
 }
 
-.editor:focus {
-	outline: none;
+#editor a {
+	color: inherit;
 }
 
-.editor iframe {
+#editor iframe {
 	max-width: 100%;
 	border: 0;
 }
 
-.editor img {
+#editor img {
 	max-width: 100%;
 	height: auto;
 }
 
-.editor figure {
+#editor figure {
 	float: none;
 	margin: 0;
 	width: 100%;
-    transition: margin 0.5s, width 0.5s;
+	transition: margin 0.5s, width 0.5s;
 }
 
-.editor figure.aligncenter {
+#editor figure.aligncenter {
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.editor figure.alignleft {
+#editor figure.alignleft {
 	float: left;
 	margin: 0.5em 1em 0.5em 0;
 	width: 50%;
 }
 
-.editor figure.alignright {
+#editor figure.alignright {
 	float: right;
 	margin: 0.5em 0 0.5em 1em;
 	width: 50%;
 }
 
-.editor figcaption {
+#editor figcaption {
 	font-size: 0.8em;
 	margin-top: 0.5em;
 }
 
-.editor figure img {
+#editor figure img {
 	display: block;
 }
 
-.editor pre {
+#editor pre {
 	overflow: auto;
 }
 
-.editor:after {
+#editor:after {
    content: ".";
    visibility: hidden;
    display: block;

diff --git a/style.css b/style.css
@@ -2,11 +2,31 @@
  * Basic
  */
 
-.editor {
-	/* account for padding for now */
-	width: 49em;
-	padding-bottom: 0;
-	margin-bottom: 0;
+html,
+body {
+	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: 720px;
+	margin: 60px auto;
+	color: #12181e;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+svg {
+	fill: currentColor;
 }
 
 p,
@@ -18,16 +38,31 @@ h4,
 h5,
 h6,
 img {
+	font-family: "Merriweather", serif;
 	margin: 15px 0;
 	/* Uses paddings instead */
 }
 
+h2 {
+	font-weight: 900;
+	font-size: 28px;
+}
+
+p {
+	font-size: 16px;
+	min-height: 3.4em;
+}
+
 blockquote {
 	font-size: 20px;
 	border-left: 4px solid black;
 	font-style: italic;
 }
 
+section:focus {
+	outline: none;
+}
+
 
 /**
  * Hover controls
@@ -239,9 +274,7 @@ img.is-selected {
 	cursor: pointer;
 	padding: 14px 0 0 14px;
 	position: relative;
-	display: block;
-	width: 39em;
-	margin: 0 auto 5em;
+	display: inline-block;
 }
 
 .switch-block__menu {

diff --git a/tinymce-single/index.html b/tinymce-single/index.html
@@ -7,7 +7,7 @@
 		<link rel="stylesheet" type="text/css" href="../shared/index.css">
 	</head>
 	<body>
-		<div class="editor">
+		<div id="editor">
 			<h1>1.0 Is The Loneliest Number</h1>
 
 			<p>Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -1,20 +1,20 @@
-.editor img[data-mce-selected] {
+#editor img[data-mce-selected] {
 	outline: none;
 }
 
-.editor img::selection {
+#editor img::selection {
 	background-color: transparent;
 }
 
-.editor *[data-mce-selected="block"] {
+#editor *[data-mce-selected="block"] {
 	outline: 2px solid #e0e5e9;
 	outline-offset: 11px;
 	/*background-color: rgba( 135, 166, 188, 0.3 );
 	box-shadow: 0px 0px 0px 11px rgba( 135, 166, 188, 0.3 );
 	position: relative;*/
 }
 
-/*.editor *[data-mce-selected="block"]:before {
+/*#editor *[data-mce-selected="block"]:before {
   content: '';
   border-top: 2px solid #87a6bc;
   border-left: 2px solid #87a6bc;
@@ -27,18 +27,18 @@
   bottom: -14px;
 }
 
-.editor *[data-mce-selected="block"] ~ [data-mce-selected="block"]:before {
+#editor *[data-mce-selected="block"] ~ [data-mce-selected="block"]:before {
 	border-top: none;
 	border-bottom: 2px solid #87a6bc;
 }*/
 
-.editor *[data-mce-selected="move"] {
+#editor *[data-mce-selected="move"] {
 	color: #87a6bc;
 	outline: 1px dashed #87a6bc;
 	outline-offset: 11px;
 }
 
-.editor.is-moving-block > *:before {
+#editor.is-moving-block > *:before {
 	content: '\21E2';
 	display: block;
 	position: absolute;
@@ -53,9 +53,9 @@
 	left: 40px;
 }
 
-.editor.is-moving-block > .alignright:before,
-.editor.is-moving-block > [data-mce-selected="move"]:before,
-.editor.is-moving-block > [data-mce-selected="move"] + *:before {
+#editor.is-moving-block > .alignright:before,
+#editor.is-moving-block > [data-mce-selected="move"]:before,
+#editor.is-moving-block > [data-mce-selected="move"] + *:before {
 	content: '';
 }
 

diff --git a/tinymce-single/tinymce/config.js b/tinymce-single/tinymce/config.js
@@ -19,7 +19,7 @@ window.tinymce.init( {
 		'wptextpattern'
 	],
 	schema: 'html5-strict',
-	selector: '.editor',
+	selector: '#editor',
 	theme: false,
 	toolbar: false,
 	formats: {