Merge pull request #950 from Automattic/fix/issue-896

Sophisticated Business: Heading Size Adjustment

sophisticated-business/sass/blocks/_blocks.scss

@@ -534,7 +534,6 @@
 	//! Cover Image
 	.wp-block-cover-image,
 	.wp-block-cover {
-
 		position: relative;
 		min-height: 430px;
 		padding: $size__spacing-unit;
@@ -547,6 +546,7 @@
 		.wp-block-cover__inner-container {
 			padding: 0;
 			color: #fff;
+			width: 100%;
 
 			a {
 				color: inherit;
@@ -565,45 +565,45 @@
 		}
 
 		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;
 			font-weight: 700;
-			margin: inherit;
+			margin: 1rem 0;
 			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;
 		}
 
 		@include media(tablet) {
-
 			h1 {
-				font-size: $font__size-xxxl;
+				font-size: $font__size-xxl;
 			}
 
 			.wp-block-cover-image-text,
 			.wp-block-cover-text,
 			h2 {
-				font-size: $font__size-xxl;
+				font-size: $font__size-xl;
 			}
 
 			h3 {
@@ -615,11 +615,11 @@
 			}
 
 			h5 {
-				font-size: $font__size-base;
+				font-size: $font__size_base;
 			}
 
 			h6 {
-				font-size: $font__size-sm;
+				font-size: $font__size_sm;
 			}
 		}
 
@@ -647,20 +647,6 @@
 
 		&.alignfull {
 
-			.wp-block-cover__inner-container {
-				max-width: calc(8 * (100vw / 12));
-			}
-
-			.wp-block-cover-image-text,
-			.wp-block-cover-text,
-			h1 {
-				font-size: $font__size-xxxl;
-			}
-
-			h2 {
-				font-size: $font__size-xxl;
-			}
-
 			@include media(tablet) {
 				padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 				padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));

sophisticated-business/sass/typography/_headings.scss

@@ -63,8 +63,7 @@ h6 {
 	line-height: 1.25;
 }
 
-.entry-title,
-h1 {
+.entry-title {
 	font-size: $font__size-lg;
 
 	@include media(tablet) {
@@ -72,21 +71,15 @@ h1 {
 	}
 }
 
+h1 {
+	font-size: $font__size-lg;
+}
 
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2,
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
 .not-found .page-title,
 .error-404 .page-title,
 .has-larger-font-size,
 h2 {
 	font-size: $font__size-md;
-	@include media(tablet) {
-		font-size: $font__size-lg;
-	}
 }
 
 .has-regular-font-size,

sophisticated-business/style-editor.css

@@ -82,6 +82,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,
@@ -91,15 +107,20 @@ h6 {
   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-weight: 600;
   letter-spacing: 0;
+  line-height: 1.2;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
   text-align: center;
 }
 
-.wp-block .wp-block h1,
-.wp-block .wp-block h2,
-.wp-block .wp-block h3,
-.wp-block .wp-block h4,
-.wp-block .wp-block h5,
-.wp-block .wp-block h6 {
+.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;
   text-align: inherit;
 }
 
@@ -107,36 +128,24 @@ h1 {
   font-size: 1.6875em;
 }
 
-@media only screen and (min-width: 768px) {
-  h1 {
-    font-size: 2.25em;
-  }
-}
-
 h2 {
   font-size: 1.125em;
 }
 
-@media only screen and (min-width: 768px) {
-  h2 {
-    font-size: 1.6875em;
-  }
-}
-
 h3 {
-  font-size: 1.125em;
+  font-size: 22px;
 }
 
 h4 {
-  font-size: 1.125em;
+  font-size: 0.88889em;
 }
 
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
 }
 
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
 }
 
 a {
@@ -297,6 +306,78 @@ figcaption,
   color: inherit;
 }
 
+.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;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h1 {
+    font-size: 2.8125em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover__inner-container .wp-block-cover-text,
+.wp-block-cover .wp-block-cover__inner-container h2 {
+  font-size: 1.6875em;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  padding: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container .wp-block-cover-image-text,
+  .wp-block-cover .wp-block-cover__inner-container .wp-block-cover-text,
+  .wp-block-cover .wp-block-cover__inner-container h2 {
+    font-size: 2.25em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h3 {
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h3 {
+    font-size: 1.6875em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h4 {
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h4 {
+    font-size: 1.125em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h5 {
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h5 {
+    font-size: 22px;
+  }
+}
+
+.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 h6 {
+    font-size: 0.88889em;
+  }
+}
+
 @media only screen and (min-width: 768px) {
   .wp-block-cover {
     padding-left: 10%;
@@ -350,6 +431,12 @@ figcaption,
     padding-left: calc(10% + 64px);
     padding-right: calc(10% + 64px);
   }
+  .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover .wp-block-cover__inner-container h1 {
+    font-size: 4.5em;
+  }
+  .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover .wp-block-cover__inner-container h2 {
+    font-size: 3.375em;
+  }
 }
 
 /** === Gallery === */

sophisticated-business/style-editor.scss

@@ -83,6 +83,22 @@ body {
 
 p {
 	font-size: $font__size_base;
+
+	&.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,
@@ -94,50 +110,40 @@ h6 {
 	font-family: $font__heading;
 	font-weight: 600;
 	letter-spacing: 0;
+	line-height: $font__line-height-heading;
+	margin-top: 2rem;
+	margin-bottom: 2rem;
 	text-align: center;
-}
 
-.wp-block .wp-block {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
+	.editor-inner-blocks & {
+		margin-top: 1.375rem;
+		margin-bottom: 1.375rem;
 		text-align: inherit;
 	}
 }
 
 h1 {
 	font-size: $font__size-lg;
-
-	@include media(tablet) {
-		font-size: $font__size-xl;
-	}
 }
 
 h2 {
 	font-size: $font__size-md;
-
-	@include media(tablet) {
-		font-size: $font__size-lg;
-	}
 }
 
 h3 {
-	font-size: $font__size-md;
+	font-size: $font__size_base;
 }
 
 h4 {
-	font-size: $font__size-md;
+	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 {
@@ -281,6 +287,64 @@ figcaption,
 		a {
 			color: inherit;
 		}
+
+		h1, h2, h3, h4, h5, h6 {
+			font-weight: 700;
+		}
+
+		h1 {
+			font-size: $font__size-xl;
+
+			@include media(tablet) {
+				font-size: $font__size-xxl;
+			}
+		}
+
+		.wp-block-cover-image-text,
+		.wp-block-cover-text,
+		h2 {
+			font-size: $font__size-lg;
+			margin-left: auto;
+			margin-right: auto;
+			max-width: 100%;
+			padding: 0;
+
+			@include media(tablet) {
+				font-size: $font__size-xl;
+			}
+		}
+
+		h3 {
+			font-size: $font__size-md;
+
+			@include media(tablet) {
+				font-size: $font__size-lg;
+			}
+		}
+
+		h4 {
+			font-size: $font__size_base;
+
+			@include media(tablet) {
+				font-size: $font__size-md;
+			}
+		}
+
+		h5 {
+			font-size: $font__size-sm;
+
+			@include media(tablet) {
+				font-size: $font__size_base;
+			}
+		}
+
+		h6 {
+			font-size: $font__size-xs;
+
+			@include media(tablet) {
+				font-size: $font__size-sm;
+			}
+		}
 	}
 
 	@include media(tablet) {
@@ -341,6 +405,16 @@ figcaption,
 		.wp-block-cover {
 			padding-left: calc(10% + 64px);
 			padding-right: calc(10% + 64px);
+
+			.wp-block-cover__inner-container {
+				h1 {
+					font-size: $font__size-xxxxl;
+				}
+
+				h2 {
+					font-size: $font__size-xxxl;
+				}
+			}
 		}
 	}
 }

sophisticated-business/style-rtl.css

@@ -487,24 +487,20 @@ h6 {
   line-height: 1.25;
 }
 
-.entry-title,
-h1 {
+.entry-title {
   font-size: 1.6875em;
 }
 
 @media only screen and (min-width: 768px) {
-  .entry-title,
-  h1 {
+  .entry-title {
     font-size: 2.25em;
   }
 }
 
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2,
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
+h1 {
+  font-size: 1.6875em;
+}
+
 .not-found .page-title,
 .error-404 .page-title,
 .has-larger-font-size,
@@ -512,21 +508,6 @@ h2 {
   font-size: 1.125em;
 }
 
-@media only screen and (min-width: 768px) {
-  .wp-block-cover .wp-block-cover-image-text,
-  .wp-block-cover .wp-block-cover-text,
-  .wp-block-cover h2,
-  .wp-block-cover-image .wp-block-cover-image-text,
-  .wp-block-cover-image .wp-block-cover-text,
-  .wp-block-cover-image h2,
-  .not-found .page-title,
-  .error-404 .page-title,
-  .has-larger-font-size,
-  h2 {
-    font-size: 1.6875em;
-  }
-}
-
 .has-regular-font-size,
 .has-large-font-size,
 .comments-title,
@@ -3869,6 +3850,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
   padding: 0;
   color: #fff;
+  width: 100%;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container a,
@@ -3897,7 +3879,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,
@@ -3906,37 +3888,38 @@ 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;
   font-weight: 700;
-  margin: inherit;
+  margin: 1rem 0;
   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;
 }
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-cover-image h1,
   .entry .entry-content .wp-block-cover h1 {
-    font-size: 3.375em;
+    font-size: 2.8125em;
   }
   .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
   .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
@@ -3944,7 +3927,7 @@ 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.8125em;
+    font-size: 2.25em;
   }
   .entry .entry-content .wp-block-cover-image h3,
   .entry .entry-content .wp-block-cover h3 {
@@ -3999,25 +3982,6 @@ body.page .main-navigation {
   }
 }
 
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
-  max-width: calc(8 * (100vw / 12));
-}
-
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover-image.alignfull h1,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover.alignfull h1 {
-  font-size: 3.375em;
-}
-
-.entry .entry-content .wp-block-cover-image.alignfull h2,
-.entry .entry-content .wp-block-cover.alignfull h2 {
-  font-size: 2.8125em;
-}
-
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-cover-image.alignfull,
   .entry .entry-content .wp-block-cover.alignfull {

sophisticated-business/style.css

@@ -487,24 +487,20 @@ h6 {
   line-height: 1.25;
 }
 
-.entry-title,
-h1 {
+.entry-title {
   font-size: 1.6875em;
 }
 
 @media only screen and (min-width: 768px) {
-  .entry-title,
-  h1 {
+  .entry-title {
     font-size: 2.25em;
   }
 }
 
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2,
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
+h1 {
+  font-size: 1.6875em;
+}
+
 .not-found .page-title,
 .error-404 .page-title,
 .has-larger-font-size,
@@ -512,21 +508,6 @@ h2 {
   font-size: 1.125em;
 }
 
-@media only screen and (min-width: 768px) {
-  .wp-block-cover .wp-block-cover-image-text,
-  .wp-block-cover .wp-block-cover-text,
-  .wp-block-cover h2,
-  .wp-block-cover-image .wp-block-cover-image-text,
-  .wp-block-cover-image .wp-block-cover-text,
-  .wp-block-cover-image h2,
-  .not-found .page-title,
-  .error-404 .page-title,
-  .has-larger-font-size,
-  h2 {
-    font-size: 1.6875em;
-  }
-}
-
 .has-regular-font-size,
 .has-large-font-size,
 .comments-title,
@@ -3881,6 +3862,7 @@ body.page .main-navigation {
 .entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
   padding: 0;
   color: #fff;
+  width: 100%;
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container a,
@@ -3909,7 +3891,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,
@@ -3918,37 +3900,38 @@ 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;
   font-weight: 700;
-  margin: inherit;
+  margin: 1rem 0;
   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;
 }
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-cover-image h1,
   .entry .entry-content .wp-block-cover h1 {
-    font-size: 3.375em;
+    font-size: 2.8125em;
   }
   .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
   .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
@@ -3956,7 +3939,7 @@ 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.8125em;
+    font-size: 2.25em;
   }
   .entry .entry-content .wp-block-cover-image h3,
   .entry .entry-content .wp-block-cover h3 {
@@ -4011,25 +3994,6 @@ body.page .main-navigation {
   }
 }
 
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
-  max-width: calc(8 * (100vw / 12));
-}
-
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover-image.alignfull h1,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover.alignfull h1 {
-  font-size: 3.375em;
-}
-
-.entry .entry-content .wp-block-cover-image.alignfull h2,
-.entry .entry-content .wp-block-cover.alignfull h2 {
-  font-size: 2.8125em;
-}
-
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-cover-image.alignfull,
   .entry .entry-content .wp-block-cover.alignfull {