Merge pull request #917 from Automattic/fix/issue-885

Calm Business: 885 Fixes editor styles for page title and content mismatches.

calm-business/style-editor.css

@@ -54,13 +54,13 @@ body .wp-block[data-align="full"] {
 
 @media only screen and (min-width: 768px) {
   .wp-block {
-    width: calc(8 * (100vw / 12));
+    width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .wp-block {
-    width: calc(6 * (100vw / 12 ));
+    width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -68,6 +68,10 @@ body .wp-block[data-align="full"] {
   width: 100%;
 }
 
+.block-editor-block-list__layout {
+  padding: 0;
+}
+
 /** === Base Typography === */
 body {
   font-size: 22px;
@@ -196,23 +200,46 @@ figcaption,
 }
 
 /** === Post Title === */
+.editor-post-title {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .editor-post-title {
+    width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .editor-post-title {
+    width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 .editor-post-title__block {
+  font-size: 22px;
   margin: 0;
 }
 
 .editor-post-title__block:before {
-  width: 2.8125em;
   margin-top: 0;
   margin-bottom: 0;
-  margin-left: 1em;
   position: relative;
   top: 0.5em;
 }
 
 .editor-post-title__block .editor-post-title__input {
   font-family: "Poppins", sans-serif;
-  font-size: 2.8125em;
-  font-weight: 700;
+  font-size: 1.125em;
+  font-weight: 600;
+}
+
+@media only screen and (min-width: 768px) {
+  .editor-post-title__block .editor-post-title__input {
+    font-size: 1.6875em;
+  }
 }
 
 /** === Default Appender === */

calm-business/style-editor.scss

@@ -57,17 +57,22 @@ body {
 	max-width: 100%;
 
 	@include media(tablet) {
-		width: calc(8 * (100vw / 12));
+		width: $size__site-tablet-content;
 	}
 
 	@include media(desktop) {
-		width: calc(6 * (100vw / 12 ));
+		width: $size__site-desktop-content;
 	}
 
 	// Only the top level blocks need specific widths, therefore override for every nested block.
 	.wp-block {
 		width: 100%;
 	}
+
+}
+
+.block-editor-block-list__layout {
+	padding: 0;
 }
 
 /** === Base Typography === */
@@ -183,22 +188,37 @@ figcaption,
 
 /** === Post Title === */
 
-.editor-post-title__block {
+.editor-post-title {
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0;
+	@include media(tablet) {
+		width: $size__site-tablet-content;
+	}
 
+	@include media(desktop) {
+		width: $size__site-desktop-content;
+	}
+}
+
+.editor-post-title__block {
+	font-size: $font__size_base;
 	margin: 0;
 	&:before {
-		width: $font__size-xxl;
 		margin-top: 0;
 		margin-bottom: 0;
-		margin-left: 1em;
 		position: relative;
 		top: 0.5em;
 	}
 
 	.editor-post-title__input {
 		font-family: $font__heading;
-		font-size: $font__size-xxl;
-		font-weight: 700;
+		font-size: $font__size-md;
+
+		@include media(tablet) {
+			font-size: $font__size-lg;
+		}
+		font-weight: 600;
 	}
 }
 

calm-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.3
+Version: 1.4
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business