Modern Business: Fix Cover Block text to respect Block Editor settings

modern-business/sass/typography/_headings.scss

@@ -38,14 +38,21 @@ h6 {
 .comments-title,
 .comment-author .fn,
 .no-comments,
-.site-title,
+.site-title {
+	font-weight: 700;
+	letter-spacing: 0;
+	line-height: $font__line-height-heading;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-	font-weight: 700;
+	font-weight: 300;
 	letter-spacing: 0;
 	line-height: $font__line-height-heading;
 	-webkit-font-smoothing: antialiased;

modern-business/style-editor.css

@@ -89,7 +89,7 @@ h4,
 h5,
 h6 {
   font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-weight: 700;
+  font-weight: 300;
   text-align: center;
 }
 
@@ -104,14 +104,7 @@ h1 {
 }
 
 h2 {
-  font-size: 22px;
-  text-align: center;
-}
-
-@media only screen and (min-width: 768px) {
-  h2 {
-    font-size: 1.125em;
-  }
+  font-size: 1.6875em;
 }
 
 h3 {
@@ -262,48 +255,52 @@ figcaption,
 }
 
 /** === Cover === */
+.wp-block-cover-image,
 .wp-block-cover {
   min-height: 640px;
 }
 
-.wp-block-cover h2,
-.wp-block-cover .wp-block-cover-text {
-  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 1.6875em;
-  font-weight: 300;
-  line-height: 1.4;
+.wp-block-cover-image .wp-block-cover__inner-container,
+.wp-block-cover .wp-block-cover__inner-container {
   max-width: 100%;
   padding-left: 1rem;
   padding-right: 1rem;
   text-shadow: 0 0 12px #000;
 }
 
-.wp-block-cover h2 strong,
-.wp-block-cover .wp-block-cover-text strong {
+.wp-block-cover-image .wp-block-cover__inner-container strong,
+.wp-block-cover .wp-block-cover__inner-container strong {
   font-weight: 700;
 }
 
 @media only screen and (min-width: 768px) {
-  .wp-block-cover h2,
-  .wp-block-cover .wp-block-cover-text {
+  .wp-block-cover-image .wp-block-cover__inner-container,
+  .wp-block-cover .wp-block-cover__inner-container {
     padding: 0;
   }
 }
 
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image h2,
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover h2 {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 @media only screen and (min-width: 768px) {
+  .wp-block-cover-image,
   .wp-block-cover {
     padding-left: 10%;
     padding-right: 10%;
   }
-  .wp-block-cover h2,
-  .wp-block-cover .wp-block-cover-text {
-    font-size: 2.25em;
-  }
 }
 
-.wp-block[data-type="core/cover"][data-align="left"] .editor-block-list__block-edit,
-.wp-block[data-type="core/cover"][data-align="right"] .editor-block-list__block-edit {
-  width: calc(4 * (100vw / 12));
+.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover__inner-container,
+.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover__inner-container {
+  width: calc(2 * (100vw / 12));
 }
 
 .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover,
@@ -313,8 +310,8 @@ figcaption,
   padding: calc(1.375 * 1rem);
 }
 
-.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover p,
-.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover p {
+.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover .wp-block-cover__inner-container,
+.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover .wp-block-cover__inner-container {
   padding-left: 0;
   padding-right: 0;
 }

modern-business/style-editor.scss

@@ -89,7 +89,7 @@ h4,
 h5,
 h6 {
 	font-family: $font__heading;
-	font-weight: 700;
+	font-weight: 300;
 	text-align: center;
 }
 
@@ -102,12 +102,7 @@ h1 {
 }
 
 h2 {
-	font-size: $font__size-base;
-	text-align: center;
-
-	@include media(tablet) {
-		font-size: $font__size-md;
-	}
+	font-size: $font__size-lg;
 }
 
 h3 {
@@ -252,15 +247,11 @@ figcaption,
 
 /** === Cover === */
 
+.wp-block-cover-image,
 .wp-block-cover {
 	min-height: 640px;
 
-	h2,
-	.wp-block-cover-text {
-		font-family: $font__heading;
-		font-size: $font__size-lg;
-		font-weight: 300;
-		line-height: 1.4;
+	.wp-block-cover__inner-container {
 		max-width: 100%;
 		padding-left: $size__spacing-unit;
 		padding-right: $size__spacing-unit;
@@ -275,22 +266,24 @@ figcaption,
 		}
 	}
 
+	.wp-block-cover-image-text,
+	.wp-block-cover-text,
+	h2 {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
 	@include media(tablet) {
 		padding-left: 10%;
 		padding-right: 10%;
-
-		h2,
-		.wp-block-cover-text {
-			font-size: $font__size-xl;
-		}
 	}
 }
 
 .wp-block[data-type="core/cover"][data-align="left"],
 .wp-block[data-type="core/cover"][data-align="right"] {
 
-	.editor-block-list__block-edit {
-		width: calc(4 * (100vw / 12));
+	.wp-block-cover__inner-container {
+		width: calc(2 * (100vw / 12));
 	}
 
 	.wp-block-cover {
@@ -298,7 +291,7 @@ figcaption,
 		max-width: 100%;
 		padding: calc(1.375 * #{$size__spacing-unit});
 
-		p {
+		.wp-block-cover__inner-container {
 			padding-left: 0;
 			padding-right: 0;
 		}

modern-business/style-rtl.css

@@ -466,14 +466,21 @@ h6 {
 .comments-title,
 .comment-author .fn,
 .no-comments,
-.site-title,
+.site-title {
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-weight: 700;
+  font-weight: 300;
   letter-spacing: 0;
   line-height: 1.2;
   -webkit-font-smoothing: antialiased;
@@ -4004,12 +4011,6 @@ body.page .main-navigation {
   display: block;
 }
 
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-image {
-    max-width: calc(6 * (100vw / 12) - 28px);
-  }
-}
-
 .entry .entry-content .wp-block-image.alignfull img {
   width: 100vw;
   max-width: calc( 100% + (2 * 1rem));

modern-business/style.css

@@ -466,14 +466,21 @@ h6 {
 .comments-title,
 .comment-author .fn,
 .no-comments,
-.site-title,
+.site-title {
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-weight: 700;
+  font-weight: 300;
   letter-spacing: 0;
   line-height: 1.2;
   -webkit-font-smoothing: antialiased;