Merge pull request #944 from Automattic/fix/issue-891

Calm Business: Heading Size Adjustment

calm-business/sass/blocks/_blocks.scss

@@ -553,32 +553,38 @@
 		}
 
 		h1 {
-			font-size: $font__size-xxl;
+			font-size: $font__size-xl;
 		}
 
 		.wp-block-cover-image-text,
 		.wp-block-cover-text,
 		h2 {
-			font-size: $font__size-xl;
+			font-size: $font__size-lg;
 			margin: inherit;
 			max-width: inherit;
+			padding: 0;
 			text-align: inherit;
 		}
 
 		h3 {
-			font-size: $font__size-lg;
+			font-size: $font__size-md;
 		}
 
 		h4 {
-			font-size: $font__size-md;
+			font-size: $font__size_base;
 		}
 
 		h5 {
-			font-size: $font__size-base;
+			font-size: $font__size-sm;
 		}
 
 		h6 {
-			font-size: $font__size-sm;
+			font-size: $font__size-xs;
+		}
+
+		p {
+			margin-top: 1rem;
+			margin-bottom: 1rem;
 		}
 
 		@include media(tablet) {
@@ -602,7 +608,7 @@
 			}
 
 			h5 {
-				font-size: $font__size-base;
+				font-size: $font__size_base;
 			}
 
 			h6 {

calm-business/sass/typography/_headings.scss

@@ -66,10 +66,6 @@ h6 {
 
 h1 {
 	font-size: $font__size-lg;
-
-	@include media(tablet) {
-		font-size: $font__size-xl;
-	}
 }
 
 .entry-title,
@@ -84,7 +80,7 @@ h2 {
 .has-large-font-size,
 .comments-title,
 h3 {
-	font-size: $font__size-base;
+	font-size: $font__size_base;
 }
 
 .site-title,
@@ -99,15 +95,12 @@ h2.author-title,
 p.author-bio,
 h4 {
 	font-size: $font__size-sm;
-	@include media(tablet) {
-		font-size: $font__size-sm;
-	}
 }
 
 .pagination .nav-links,
 .comment-content,
 h5 {
-	font-size: $font__size-sm;
+	font-size: $font__size-xs;
 }
 
 .entry-meta,
@@ -122,7 +115,7 @@ h5 {
 #cancel-comment-reply-link,
 img:after,
 h6 {
-	font-size: $font__size-xs;
+	font-size: $font__size-xxs;
 }
 
 .site-title,

calm-business/style-editor.css

@@ -84,6 +84,22 @@ p {
   font-size: 22px;
 }
 
+p.has-small-font-size {
+  font-size: 0.88889em;
+}
+
+p.has-normal-font-size {
+  font-size: 1.125em;
+}
+
+p.has-large-font-size {
+  font-size: 1.6875em;
+}
+
+p.has-huge-font-size {
+  font-size: 2.25em;
+}
+
 h1,
 h2,
 h3,
@@ -92,30 +108,43 @@ h5,
 h6 {
   font-family: "Poppins", sans-serif;
   font-weight: 600;
+  line-height: 1.2;
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.editor-inner-blocks h1, .editor-inner-blocks
+h2, .editor-inner-blocks
+h3, .editor-inner-blocks
+h4, .editor-inner-blocks
+h5, .editor-inner-blocks
+h6 {
+  margin-top: 1.375rem;
+  margin-bottom: 1.375rem;
 }
 
 h1 {
-  font-size: 2.25em;
+  font-size: 1.6875em;
 }
 
 h2 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
 }
 
 h3 {
-  font-size: 1.125em;
+  font-size: 22px;
 }
 
 h4 {
-  font-size: 22px;
+  font-size: 0.88889em;
 }
 
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
 }
 
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
 }
 
 a {
@@ -287,12 +316,66 @@ figcaption,
   font-weight: bolder;
 }
 
+.wp-block-cover .wp-block-cover__inner-container h1,
+.wp-block-cover .wp-block-cover__inner-container h2,
+.wp-block-cover .wp-block-cover__inner-container h3,
+.wp-block-cover .wp-block-cover__inner-container h4,
+.wp-block-cover .wp-block-cover__inner-container h5,
+.wp-block-cover .wp-block-cover__inner-container h6 {
+  font-weight: 700;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h1 {
+  font-size: 2.25em;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h2 {
+  font-size: 1.6875em;
+  max-width: 100%;
+  padding: 0;
+  text-align: left;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h3 {
+  font-size: 1.125em;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h4 {
+  font-size: 22px;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h5 {
+  font-size: 0.88889em;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h6 {
+  font-size: 0.71111em;
+}
+
 @media only screen and (min-width: 768px) {
   .wp-block-cover .wp-block-cover__inner-container {
     margin-left: auto;
     margin-right: auto;
     padding: 0;
   }
+  .wp-block-cover .wp-block-cover__inner-container h1 {
+    font-size: 3.375em;
+  }
+  .wp-block-cover .wp-block-cover__inner-container h2 {
+    font-size: 2.8125em;
+  }
+  .wp-block-cover .wp-block-cover__inner-container h3 {
+    font-size: 1.6875em;
+  }
+  .wp-block-cover .wp-block-cover__inner-container h4 {
+    font-size: 1.125em;
+  }
+  .wp-block-cover .wp-block-cover__inner-container h5 {
+    font-size: 22px;
+  }
+  .wp-block-cover .wp-block-cover__inner-container h6 {
+    font-size: 0.88889em;
+  }
 }
 
 @media only screen and (min-width: 768px) {
@@ -879,16 +962,6 @@ ul.wp-block-archives li ul,
   font-size: 2.25em;
 }
 
-[data-type="core/media-text"] .wp-block-heading h1,
-[data-type="core/media-text"] .wp-block-heading h2,
-[data-type="core/media-text"] .wp-block-heading h3,
-[data-type="core/media-text"] .wp-block-heading h4,
-[data-type="core/media-text"] .wp-block-heading h5,
-[data-type="core/media-text"] .wp-block-heading h6 {
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-}
-
 [data-type="core/media-text"] + [data-type="core/media-text"] {
   margin-top: -32px;
 }

calm-business/style-editor.scss

@@ -86,6 +86,23 @@ body {
 
 p {
 	font-size: $font__size_base;
+
+	//! Font Sizes
+	&.has-small-font-size {
+		font-size: $font__size-sm;
+	}
+
+	&.has-normal-font-size {
+		font-size: $font__size-md;
+	}
+
+	&.has-large-font-size {
+		font-size: $font__size-lg;
+	}
+
+	&.has-huge-font-size {
+		font-size: $font__size-xl;
+	}
 }
 
 h1,
@@ -96,30 +113,38 @@ h5,
 h6 {
 	font-family: $font__heading;
 	font-weight: 600;
+	line-height: $font__line-height-heading;
+	margin-top: $size__vertical-spacing-unit;
+	margin-bottom: $size__vertical-spacing-unit;
+
+	.editor-inner-blocks & {
+		margin-top: 1.375rem;
+		margin-bottom: 1.375rem;
+	}
 }
 
 h1 {
-	font-size: $font__size-xl;
+	font-size: $font__size-lg;
 }
 
 h2 {
-	font-size: $font__size-lg;
+	font-size: $font__size-md;
 }
 
 h3 {
-	font-size: $font__size-md;
+	font-size: $font__size_base;
 }
 
 h4 {
-	font-size: $font__size-base;
+	font-size: $font__size-sm;
 }
 
 h5 {
-	font-size: $font__size-sm;
+	font-size: $font__size-xs;
 }
 
 h6 {
-	font-size: $font__size-xs;
+	font-size: $font__size-xxs;
 }
 
 a {
@@ -274,10 +299,70 @@ figcaption,
 			font-weight: bolder;
 		}
 
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-weight: 700;
+		}
+
+		h1 {
+			font-size: $font__size-xl;
+		}
+
+		h2 {
+			font-size: $font__size-lg;
+			max-width: 100%;
+			padding: 0;
+			text-align: left;
+		}
+
+		h3 {
+			font-size: $font__size-md;
+		}
+
+		h4 {
+			font-size: $font__size_base;
+		}
+
+		h5 {
+			font-size: $font__size-sm;
+		}
+
+		h6 {
+			font-size: $font__size-xs;
+		}
+
 		@include media(tablet) {
 			margin-left: auto;
 			margin-right: auto;
 			padding: 0;
+
+			h1 {
+				font-size: $font__size-xxxl;
+			}
+
+			h2 {
+				font-size: $font__size-xxl;
+			}
+
+			h3 {
+				font-size: $font__size-lg;
+			}
+
+			h4 {
+				font-size: $font__size-md;
+			}
+
+			h5 {
+				font-size: $font__size_base;
+			}
+
+			h6 {
+				font-size: $font__size-sm;
+			}
 		}
 	}
 
@@ -848,18 +933,6 @@ ul.wp-block-archives,
 // Remove spacing between consecutive Media & Text blocks.
 [data-type="core/media-text"] {
 
-	.wp-block-heading {
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin-bottom: $size__spacing-unit;
-			margin-top: $size__spacing-unit;
-		}
-	}
-
 	& + [data-type="core/media-text"] {
 		margin-top: -32px;
 	}

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.4
+Version: 1.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business
@@ -493,12 +493,6 @@ h1 {
   font-size: 1.6875em;
 }
 
-@media only screen and (min-width: 768px) {
-  h1 {
-    font-size: 2.25em;
-  }
-}
-
 .entry-title,
 .not-found .page-title,
 .error-404 .page-title,
@@ -528,26 +522,10 @@ h4 {
   font-size: 0.88889em;
 }
 
-@media only screen and (min-width: 768px) {
-  .site-title,
-  .site-description,
-  .main-navigation,
-  .nav-links,
-  .page-title,
-  .page-description,
-  .comment-author .fn,
-  .no-comments,
-  h2.author-title,
-  p.author-bio,
-  h4 {
-    font-size: 0.88889em;
-  }
-}
-
 .pagination .nav-links,
 .comment-content,
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
 }
 
 .entry-meta,
@@ -562,7 +540,7 @@ h5 {
 #cancel-comment-reply-link,
 img:after,
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
 }
 
 .site-title,
@@ -4099,7 +4077,7 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-cover-image h1,
 .entry .entry-content .wp-block-cover h1 {
-  font-size: 2.8125em;
+  font-size: 2.25em;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -4108,30 +4086,37 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover .wp-block-cover-image-text,
 .entry .entry-content .wp-block-cover .wp-block-cover-text,
 .entry .entry-content .wp-block-cover h2 {
-  font-size: 2.25em;
+  font-size: 1.6875em;
   margin: inherit;
   max-width: inherit;
+  padding: 0;
   text-align: inherit;
 }
 
 .entry .entry-content .wp-block-cover-image h3,
 .entry .entry-content .wp-block-cover h3 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
 }
 
 .entry .entry-content .wp-block-cover-image h4,
 .entry .entry-content .wp-block-cover h4 {
-  font-size: 1.125em;
+  font-size: 22px;
 }
 
 .entry .entry-content .wp-block-cover-image h5,
 .entry .entry-content .wp-block-cover h5 {
-  font-size: 22px;
+  font-size: 0.88889em;
 }
 
 .entry .entry-content .wp-block-cover-image h6,
 .entry .entry-content .wp-block-cover h6 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+.entry .entry-content .wp-block-cover-image p,
+.entry .entry-content .wp-block-cover p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 @media only screen and (min-width: 768px) {

calm-business/style.css

@@ -493,12 +493,6 @@ h1 {
   font-size: 1.6875em;
 }
 
-@media only screen and (min-width: 768px) {
-  h1 {
-    font-size: 2.25em;
-  }
-}
-
 .entry-title,
 .not-found .page-title,
 .error-404 .page-title,
@@ -528,26 +522,10 @@ h4 {
   font-size: 0.88889em;
 }
 
-@media only screen and (min-width: 768px) {
-  .site-title,
-  .site-description,
-  .main-navigation,
-  .nav-links,
-  .page-title,
-  .page-description,
-  .comment-author .fn,
-  .no-comments,
-  h2.author-title,
-  p.author-bio,
-  h4 {
-    font-size: 0.88889em;
-  }
-}
-
 .pagination .nav-links,
 .comment-content,
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
 }
 
 .entry-meta,
@@ -562,7 +540,7 @@ h5 {
 #cancel-comment-reply-link,
 img:after,
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
 }
 
 .site-title,
@@ -4111,7 +4089,7 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-cover-image h1,
 .entry .entry-content .wp-block-cover h1 {
-  font-size: 2.8125em;
+  font-size: 2.25em;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -4120,30 +4098,37 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover .wp-block-cover-image-text,
 .entry .entry-content .wp-block-cover .wp-block-cover-text,
 .entry .entry-content .wp-block-cover h2 {
-  font-size: 2.25em;
+  font-size: 1.6875em;
   margin: inherit;
   max-width: inherit;
+  padding: 0;
   text-align: inherit;
 }
 
 .entry .entry-content .wp-block-cover-image h3,
 .entry .entry-content .wp-block-cover h3 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
 }
 
 .entry .entry-content .wp-block-cover-image h4,
 .entry .entry-content .wp-block-cover h4 {
-  font-size: 1.125em;
+  font-size: 22px;
 }
 
 .entry .entry-content .wp-block-cover-image h5,
 .entry .entry-content .wp-block-cover h5 {
-  font-size: 22px;
+  font-size: 0.88889em;
 }
 
 .entry .entry-content .wp-block-cover-image h6,
 .entry .entry-content .wp-block-cover h6 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+.entry .entry-content .wp-block-cover-image p,
+.entry .entry-content .wp-block-cover p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 @media only screen and (min-width: 768px) {