Merge pull request #947 from Automattic/fix/issue-893

Friedlny Business: Heading Size Adjustment

friendly-business/sass/blocks/_blocks.scss

@@ -534,10 +534,58 @@
 			}
 		}
 
+		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;
 			max-width: inherit;
 			margin: inherit;
 			text-align: inherit;
+			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;
+			}
 		}
 
 		&.alignleft,

friendly-business/sass/typography/_headings.scss

@@ -67,7 +67,7 @@ h1 {
 	font-size: $font__size-lg;
 
 	@include media(tablet) {
-		font-size: $font__size-xl;
+		font-size: $font__size-xxl;
 	}
 }
 
@@ -78,7 +78,7 @@ h1 {
 .wp-block-cover-image h2,
 .wp-block-cover h2,
 h2 {
-	font-size: $font__size-lg;
+	font-size: $font__size-md;
 
 	@include media(tablet) {
 		font-size: $font__size-xl;
@@ -90,7 +90,11 @@ h2 {
 .has-large-font-size,
 .comments-title,
 h3 {
-	font-size: $font__size-lg;
+	font-size: $font__size_base;
+
+	@include media(tablet) {
+		font-size: $font__size-lg;
+	}
 }
 
 .main-navigation,
@@ -102,13 +106,21 @@ h3 {
 h2.author-title,
 p.author-bio,
 h4 {
-	font-size: $font__size-md;
+	font-size: $font__size-sm;
+
+	@include media(tablet) {
+		font-size: $font__size-md;
+	}
 }
 
 .pagination .nav-links,
 .comment-content,
 h5 {
-	font-size: $font__size-sm;
+	font-size: $font__size-xs;
+
+	@include media(tablet) {
+		font-size: $font__size_base;
+	}
 }
 
 .site-description,
@@ -124,7 +136,11 @@ h5 {
 #cancel-comment-reply-link,
 img:after,
 h6 {
-	font-size: $font__size-xs;
+	font-size: $font__size-xxs;
+
+	@include media(tablet) {
+		font-size: $font__size-sm;
+	}
 }
 
 .page-description,

friendly-business/style-editor.css

@@ -86,6 +86,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,
@@ -95,6 +111,19 @@ h6 {
   font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
   font-weight: 700;
   text-align: center;
+  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 {
@@ -103,12 +132,12 @@ h1 {
 
 @media only screen and (min-width: 768px) {
   h1 {
-    font-size: 2.25em;
+    font-size: 2.8125em;
   }
 }
 
 h2 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
 }
 
 @media only screen and (min-width: 768px) {
@@ -118,19 +147,43 @@ h2 {
 }
 
 h3 {
-  font-size: 1.6875em;
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  h3 {
+    font-size: 1.6875em;
+  }
 }
 
 h4 {
-  font-size: 1.125em;
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  h4 {
+    font-size: 1.125em;
+  }
 }
 
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  h5 {
+    font-size: 22px;
+  }
 }
 
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
+}
+
+@media only screen and (min-width: 768px) {
+  h6 {
+    font-size: 0.88889em;
+  }
 }
 
 a {
@@ -267,30 +320,88 @@ figcaption,
 }
 
 /** === Cover === */
+.wp-block-cover strong {
+  font-weight: bolder;
+}
+
+.wp-block-cover h1,
+.wp-block-cover h2,
+.wp-block-cover h3,
+.wp-block-cover h4,
+.wp-block-cover h5,
+.wp-block-cover h6 {
+  text-align: left;
+}
+
+.wp-block-cover h1 {
+  font-size: 2.25em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover h1 {
+    font-size: 2.8125em;
+  }
+}
+
 .wp-block-cover h2,
 .wp-block-cover .wp-block-cover-text {
   font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
   font-size: 1.6875em;
   font-weight: bold;
   line-height: 1.4;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.wp-block-cover h2 strong,
-.wp-block-cover .wp-block-cover-text strong {
-  font-weight: bolder;
+  padding: 0;
 }
 
 @media only screen and (min-width: 768px) {
   .wp-block-cover h2,
   .wp-block-cover .wp-block-cover-text {
+    font-size: 2.25em;
     margin-left: auto;
     margin-right: auto;
     padding: 0;
   }
 }
 
+.wp-block-cover h3 {
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover h3 {
+    font-size: 1.6875em;
+  }
+}
+
+.wp-block-cover h4 {
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover h4 {
+    font-size: 1.125em;
+  }
+}
+
+.wp-block-cover h5 {
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover h5 {
+    font-size: 22px;
+  }
+}
+
+.wp-block-cover h6 {
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover h6 {
+    font-size: 0.88889em;
+  }
+}
+
 .wp-block-cover .wp-block-cover__inner-container a {
   color: inherit;
 }
@@ -628,8 +739,6 @@ figcaption,
 .wp-block[data-type="core/media-text"] .wp-block-heading h5,
 .wp-block[data-type="core/media-text"] .wp-block-heading h6 {
   text-align: inherit;
-  margin-bottom: 1rem;
-  margin-top: 1rem;
 }
 
 .wp-block[data-type="core/media-text"] a {

friendly-business/style-editor.scss

@@ -88,6 +88,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,
@@ -99,18 +116,26 @@ h6 {
 	font-family: $font__heading;
 	font-weight: 700;
 	text-align: center;
+	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-lg;
 
 	@include media(tablet) {
-		font-size: $font__size-xl;
+		font-size: $font__size-xxl;
 	}
 }
 
 h2 {
-	font-size: $font__size-lg;
+	font-size: $font__size-md;
 
 	@include media(tablet) {
 		font-size: $font__size-xl;
@@ -118,19 +143,35 @@ h2 {
 }
 
 h3 {
-	font-size: $font__size-lg;
+	font-size: $font__size_base;
+
+	@include media(tablet) {
+		font-size: $font__size-lg;
+	}
 }
 
 h4 {
-	font-size: $font__size-md;
+	font-size: $font__size-sm;
+
+	@include media(tablet) {
+		font-size: $font__size-md;
+	}
 }
 
 h5 {
-	font-size: $font__size-sm;
+	font-size: $font__size-xs;
+
+	@include media(tablet) {
+		font-size: $font__size_base;
+	}
 }
 
 h6 {
-	font-size: $font__size-xs;
+	font-size: $font__size-xxs;
+
+	@include media(tablet) {
+		font-size: $font__size-sm;
+	}
 }
 
 a {
@@ -259,26 +300,77 @@ figcaption,
 
 .wp-block-cover {
 
+	strong {
+		font-weight: bolder;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		text-align: left;
+	}
+
+	h1 {
+		font-size: $font__size-xl;
+
+		@include media(tablet) {
+			font-size: $font__size-xxl;
+		}
+	}
+
 	h2,
 	.wp-block-cover-text {
 		font-family: $font__heading;
 		font-size: $font__size-lg;
 		font-weight: bold;
 		line-height: 1.4;
-		padding-left: $size__spacing-unit;
-		padding-right: $size__spacing-unit;
+		padding: 0;
+
 
-		strong {
-			font-weight: bolder;
-		}
 
 		@include media(tablet) {
+			font-size: $font__size-xl;
 			margin-left: auto;
 			margin-right: auto;
 			padding: 0;
 		}
 	}
 
+	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-xs;
+
+		@include media(tablet) {
+			font-size: $font__size_base;
+		}
+	}
+
+	h6 {
+		font-size: $font__size-xs;
+
+		@include media(tablet) {
+			font-size: $font__size-sm;
+		}
+	}
+
 	.wp-block-cover__inner-container a {
 		color: inherit;
 	}
@@ -631,8 +723,6 @@ figcaption,
 		h5,
 		h6 {
 			text-align: inherit;
-			margin-bottom: $size__spacing-unit;
-			margin-top: $size__spacing-unit;
 		}
 	}
 

friendly-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, approachable, with bold, handsome typography, Friendly Business conveys quality and sustainability, which makes it especially good fit for education, agriculture and family-run businesses.
 Requires at least: WordPress 4.9.6
-Version: 1.2
+Version: 1.3
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: friendly-business
@@ -494,7 +494,7 @@ h1 {
 
 @media only screen and (min-width: 768px) {
   h1 {
-    font-size: 2.25em;
+    font-size: 2.8125em;
   }
 }
 
@@ -505,7 +505,7 @@ h1 {
 .wp-block-cover-image h2,
 .wp-block-cover h2,
 h2 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
 }
 
 @media only screen and (min-width: 768px) {
@@ -525,7 +525,17 @@ h2 {
 .has-large-font-size,
 .comments-title,
 h3 {
-  font-size: 1.6875em;
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-title,
+  .has-regular-font-size,
+  .has-large-font-size,
+  .comments-title,
+  h3 {
+    font-size: 1.6875em;
+  }
 }
 
 .main-navigation,
@@ -537,13 +547,35 @@ h3 {
 h2.author-title,
 p.author-bio,
 h4 {
-  font-size: 1.125em;
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation,
+  .nav-links,
+  .page-title,
+  .page-description,
+  .comment-author .fn,
+  .no-comments,
+  h2.author-title,
+  p.author-bio,
+  h4 {
+    font-size: 1.125em;
+  }
 }
 
 .pagination .nav-links,
 .comment-content,
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .pagination .nav-links,
+  .comment-content,
+  h5 {
+    font-size: 22px;
+  }
 }
 
 .site-description,
@@ -559,7 +591,25 @@ h5 {
 #cancel-comment-reply-link,
 img:after,
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-description,
+  .entry-meta,
+  .entry-footer,
+  .discussion-meta-info,
+  .site-info,
+  .has-small-font-size,
+  .comment-reply-link,
+  .comment-metadata,
+  .comment-notes,
+  .sticky-post,
+  #cancel-comment-reply-link,
+  img:after,
+  h6 {
+    font-size: 0.88889em;
+  }
 }
 
 .page-description,
@@ -3853,11 +3903,88 @@ body.page .main-navigation {
   }
 }
 
+.entry .entry-content .wp-block-cover-image h1,
+.entry .entry-content .wp-block-cover h1 {
+  font-size: 2.25em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h1,
+  .entry .entry-content .wp-block-cover h1 {
+    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,
 .entry .entry-content .wp-block-cover-image h2,
+.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: 1.6875em;
   max-width: inherit;
   margin: inherit;
   text-align: inherit;
+  padding: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
+  .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
+  .entry .entry-content .wp-block-cover-image h2,
+  .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;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h3,
+.entry .entry-content .wp-block-cover h3 {
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h3,
+  .entry .entry-content .wp-block-cover h3 {
+    font-size: 1.6875em;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h4,
+.entry .entry-content .wp-block-cover h4 {
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h4,
+  .entry .entry-content .wp-block-cover h4 {
+    font-size: 1.125em;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h5,
+.entry .entry-content .wp-block-cover h5 {
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h5,
+  .entry .entry-content .wp-block-cover h5 {
+    font-size: 22px;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h6,
+.entry .entry-content .wp-block-cover h6 {
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h6,
+  .entry .entry-content .wp-block-cover h6 {
+    font-size: 0.88889em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright,

friendly-business/style.css

@@ -494,7 +494,7 @@ h1 {
 
 @media only screen and (min-width: 768px) {
   h1 {
-    font-size: 2.25em;
+    font-size: 2.8125em;
   }
 }
 
@@ -505,7 +505,7 @@ h1 {
 .wp-block-cover-image h2,
 .wp-block-cover h2,
 h2 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
 }
 
 @media only screen and (min-width: 768px) {
@@ -525,7 +525,17 @@ h2 {
 .has-large-font-size,
 .comments-title,
 h3 {
-  font-size: 1.6875em;
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-title,
+  .has-regular-font-size,
+  .has-large-font-size,
+  .comments-title,
+  h3 {
+    font-size: 1.6875em;
+  }
 }
 
 .main-navigation,
@@ -537,13 +547,35 @@ h3 {
 h2.author-title,
 p.author-bio,
 h4 {
-  font-size: 1.125em;
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .main-navigation,
+  .nav-links,
+  .page-title,
+  .page-description,
+  .comment-author .fn,
+  .no-comments,
+  h2.author-title,
+  p.author-bio,
+  h4 {
+    font-size: 1.125em;
+  }
 }
 
 .pagination .nav-links,
 .comment-content,
 h5 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .pagination .nav-links,
+  .comment-content,
+  h5 {
+    font-size: 22px;
+  }
 }
 
 .site-description,
@@ -559,7 +591,25 @@ h5 {
 #cancel-comment-reply-link,
 img:after,
 h6 {
-  font-size: 0.71111em;
+  font-size: 0.59259em;
+}
+
+@media only screen and (min-width: 768px) {
+  .site-description,
+  .entry-meta,
+  .entry-footer,
+  .discussion-meta-info,
+  .site-info,
+  .has-small-font-size,
+  .comment-reply-link,
+  .comment-metadata,
+  .comment-notes,
+  .sticky-post,
+  #cancel-comment-reply-link,
+  img:after,
+  h6 {
+    font-size: 0.88889em;
+  }
 }
 
 .page-description,
@@ -3865,11 +3915,88 @@ body.page .main-navigation {
   }
 }
 
+.entry .entry-content .wp-block-cover-image h1,
+.entry .entry-content .wp-block-cover h1 {
+  font-size: 2.25em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h1,
+  .entry .entry-content .wp-block-cover h1 {
+    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,
 .entry .entry-content .wp-block-cover-image h2,
+.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: 1.6875em;
   max-width: inherit;
   margin: inherit;
   text-align: inherit;
+  padding: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
+  .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
+  .entry .entry-content .wp-block-cover-image h2,
+  .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;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h3,
+.entry .entry-content .wp-block-cover h3 {
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h3,
+  .entry .entry-content .wp-block-cover h3 {
+    font-size: 1.6875em;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h4,
+.entry .entry-content .wp-block-cover h4 {
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h4,
+  .entry .entry-content .wp-block-cover h4 {
+    font-size: 1.125em;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h5,
+.entry .entry-content .wp-block-cover h5 {
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h5,
+  .entry .entry-content .wp-block-cover h5 {
+    font-size: 22px;
+  }
+}
+
+.entry .entry-content .wp-block-cover-image h6,
+.entry .entry-content .wp-block-cover h6 {
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h6,
+  .entry .entry-content .wp-block-cover h6 {
+    font-size: 0.88889em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright,