Twenty Twenty: Ensure headings styles are consistent between editor a…

…nd front-end. This changeset removes `.wp-block` container from headings CSS selectors to restore consistency between editor and front-end styles. It also removes `.wp-block` from headings selectors in the `'block-editor'` array of `twentytwenty_get_localized_font_family_elements()`. Props kajalgohel, kmadhak, poena, multidots1896, tahmidulkarim, audrasjb. Fixes #56194. git-svn-id: https://develop.svn.wordpress.org/trunk@54154 602fd350-edb4-49c9-b593-d223f7449a82
ootwch · Nov 4, 2022 · cbde1ce · cbde1ce
1 parent 3fb85eb
commit cbde1ce
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 75 deletions.
diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css
@@ -121,12 +121,12 @@ Inter variable font. Usage:
 
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block-post-title,
-.editor-styles-wrapper .wp-block h1,
-.editor-styles-wrapper .wp-block h2,
-.editor-styles-wrapper .wp-block h3,
-.editor-styles-wrapper .wp-block h4,
-.editor-styles-wrapper .wp-block h5,
-.editor-styles-wrapper .wp-block h6,
+.editor-styles-wrapper h1,
+.editor-styles-wrapper h2,
+.editor-styles-wrapper h3,
+.editor-styles-wrapper h4,
+.editor-styles-wrapper h5,
+.editor-styles-wrapper h6,
 .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
 .editor-styles-wrapper cite,
 .editor-styles-wrapper figcaption,
@@ -138,12 +138,12 @@ Inter variable font. Usage:
 
 	.editor-post-title__block .editor-post-title__input,
 	.editor-styles-wrapper .wp-block-post-title,
-	.editor-styles-wrapper .wp-block h1,
-	.editor-styles-wrapper .wp-block h2,
-	.editor-styles-wrapper .wp-block h3,
-	.editor-styles-wrapper .wp-block h4,
-	.editor-styles-wrapper .wp-block h5,
-	.editor-styles-wrapper .wp-block h6,
+	.editor-styles-wrapper h1,
+	.editor-styles-wrapper h2,
+	.editor-styles-wrapper h3,
+	.editor-styles-wrapper h4,
+	.editor-styles-wrapper h5,
+	.editor-styles-wrapper h6,
 	.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
 	.editor-styles-wrapper cite,
 	.editor-styles-wrapper figcaption,
@@ -242,12 +242,12 @@ Inter variable font. Usage:
 
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block-post-title,
-.editor-styles-wrapper .wp-block h1,
-.editor-styles-wrapper .wp-block h2,
-.editor-styles-wrapper .wp-block h3,
-.editor-styles-wrapper .wp-block h4,
-.editor-styles-wrapper .wp-block h5,
-.editor-styles-wrapper .wp-block h6 {
+.editor-styles-wrapper h1,
+.editor-styles-wrapper h2,
+.editor-styles-wrapper h3,
+.editor-styles-wrapper h4,
+.editor-styles-wrapper h5,
+.editor-styles-wrapper h6 {
 	font-feature-settings: "lnum";
 	font-variant-numeric: lining-nums;
 	font-weight: 700;
@@ -259,29 +259,35 @@ Inter variable font. Usage:
 
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block-post-title,
-.editor-styles-wrapper .wp-block h1 {
+.editor-styles-wrapper h1,
+.editor-styles-wrapper .heading-size-1 {
 	font-size: 36px;
 	font-weight: 800;
 	line-height: 1.138888889;
 }
 
-.editor-styles-wrapper .wp-block h2 {
+.editor-styles-wrapper h2,
+.editor-styles-wrapper .heading-size-2 {
 	font-size: 32px;
 }
 
-.editor-styles-wrapper .wp-block h3 {
+.editor-styles-wrapper h3,
+.editor-styles-wrapper .heading-size-3 {
 	font-size: 28px;
 }
 
-.editor-styles-wrapper .wp-block h4 {
+.editor-styles-wrapper h4,
+.editor-styles-wrapper .heading-size-4 {
 	font-size: 24px;
 }
 
-.editor-styles-wrapper .wp-block h5 {
+.editor-styles-wrapper h5,
+.editor-styles-wrapper .heading-size-5 {
 	font-size: 21px;
 }
 
-.editor-styles-wrapper .wp-block h6 {
+.editor-styles-wrapper h6,
+.editor-styles-wrapper .heading-size-6 {
 	font-size: 16px;
 	letter-spacing: 0.03125em;
 	text-transform: uppercase;
@@ -1248,23 +1254,28 @@ hr.wp-block-separator.is-style-dots::before {
 
 	.editor-post-title__block .editor-post-title__input,
 	.editor-styles-wrapper .wp-block-post-title,
-	.editor-styles-wrapper .wp-block h1 {
+	.editor-styles-wrapper h1,
+	.editor-styles-wrapper .heading-size-1 {
 		font-size: 64px;
 	}
 
-	.editor-styles-wrapper .wp-block h2 {
+	.editor-styles-wrapper h2,
+	.editor-styles-wrapper .heading-size-2 {
 		font-size: 48px;
 	}
 
-	.editor-styles-wrapper .wp-block h3 {
+	.editor-styles-wrapper h3,
+	.editor-styles-wrapper .heading-size-3 {
 		font-size: 40px;
 	}
 
-	.editor-styles-wrapper .wp-block h4 {
+	.editor-styles-wrapper h4,
+	.editor-styles-wrapper .heading-size-4 {
 		font-size: 32px;
 	}
 
-	.editor-styles-wrapper .wp-block h5 {
+	.editor-styles-wrapper h5,
+	.editor-styles-wrapper .heading-size-5 {
 		font-size: 24px;
 	}
 
@@ -1427,11 +1438,13 @@ hr.wp-block-separator.is-style-dots::before {
 
 	.editor-post-title__block .editor-post-title__input,
 	.editor-styles-wrapper .wp-block-post-title,
-	.editor-styles-wrapper .wp-block h1 {
+	.editor-styles-wrapper h1,
+	.editor-styles-wrapper .heading-size-1 {
 		font-size: 84px;
 	}
 
-	.editor-styles-wrapper .wp-block h6 {
+	.editor-styles-wrapper h6,
+	.editor-styles-wrapper .heading-size-6 {
 		font-size: 18px;
 	}
 

diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css
@@ -121,12 +121,12 @@ Inter variable font. Usage:
 
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block-post-title,
-.editor-styles-wrapper .wp-block h1,
-.editor-styles-wrapper .wp-block h2,
-.editor-styles-wrapper .wp-block h3,
-.editor-styles-wrapper .wp-block h4,
-.editor-styles-wrapper .wp-block h5,
-.editor-styles-wrapper .wp-block h6,
+.editor-styles-wrapper h1,
+.editor-styles-wrapper h2,
+.editor-styles-wrapper h3,
+.editor-styles-wrapper h4,
+.editor-styles-wrapper h5,
+.editor-styles-wrapper h6,
 .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
 .editor-styles-wrapper cite,
 .editor-styles-wrapper figcaption,
@@ -138,12 +138,12 @@ Inter variable font. Usage:
 
 	.editor-post-title__block .editor-post-title__input,
 	.editor-styles-wrapper .wp-block-post-title,
-	.editor-styles-wrapper .wp-block h1,
-	.editor-styles-wrapper .wp-block h2,
-	.editor-styles-wrapper .wp-block h3,
-	.editor-styles-wrapper .wp-block h4,
-	.editor-styles-wrapper .wp-block h5,
-	.editor-styles-wrapper .wp-block h6,
+	.editor-styles-wrapper h1,
+	.editor-styles-wrapper h2,
+	.editor-styles-wrapper h3,
+	.editor-styles-wrapper h4,
+	.editor-styles-wrapper h5,
+	.editor-styles-wrapper h6,
 	.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
 	.editor-styles-wrapper cite,
 	.editor-styles-wrapper figcaption,
@@ -242,12 +242,12 @@ Inter variable font. Usage:
 
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block-post-title,
-.editor-styles-wrapper .wp-block h1,
-.editor-styles-wrapper .wp-block h2,
-.editor-styles-wrapper .wp-block h3,
-.editor-styles-wrapper .wp-block h4,
-.editor-styles-wrapper .wp-block h5,
-.editor-styles-wrapper .wp-block h6 {
+.editor-styles-wrapper h1,
+.editor-styles-wrapper h2,
+.editor-styles-wrapper h3,
+.editor-styles-wrapper h4,
+.editor-styles-wrapper h5,
+.editor-styles-wrapper h6 {
 	font-feature-settings: "lnum";
 	font-variant-numeric: lining-nums;
 	font-weight: 700;
@@ -259,29 +259,35 @@ Inter variable font. Usage:
 
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block-post-title,
-.editor-styles-wrapper .wp-block h1 {
+.editor-styles-wrapper h1,
+.editor-styles-wrapper .heading-size-1 {
 	font-size: 36px;
 	font-weight: 800;
 	line-height: 1.138888889;
 }
 
-.editor-styles-wrapper .wp-block h2 {
+.editor-styles-wrapper h2,
+.editor-styles-wrapper .heading-size-2 {
 	font-size: 32px;
 }
 
-.editor-styles-wrapper .wp-block h3 {
+.editor-styles-wrapper h3,
+.editor-styles-wrapper .heading-size-3 {
 	font-size: 28px;
 }
 
-.editor-styles-wrapper .wp-block h4 {
+.editor-styles-wrapper h4,
+.editor-styles-wrapper .heading-size-4 {
 	font-size: 24px;
 }
 
-.editor-styles-wrapper .wp-block h5 {
+.editor-styles-wrapper h5,
+.editor-styles-wrapper .heading-size-5 {
 	font-size: 21px;
 }
 
-.editor-styles-wrapper .wp-block h6 {
+.editor-styles-wrapper h6,
+.editor-styles-wrapper .heading-size-6 {
 	font-size: 16px;
 	letter-spacing: 0.03125em;
 	text-transform: uppercase;
@@ -1252,23 +1258,28 @@ hr.wp-block-separator.is-style-dots::before {
 
 	.editor-post-title__block .editor-post-title__input,
 	.editor-styles-wrapper .wp-block-post-title,
-	.editor-styles-wrapper .wp-block h1 {
+	.editor-styles-wrapper h1,
+	.editor-styles-wrapper .heading-size-1 {
 		font-size: 64px;
 	}
 
-	.editor-styles-wrapper .wp-block h2 {
+	.editor-styles-wrapper h2,
+	.editor-styles-wrapper .heading-size-2 {
 		font-size: 48px;
 	}
 
-	.editor-styles-wrapper .wp-block h3 {
+	.editor-styles-wrapper h3,
+	.editor-styles-wrapper .heading-size-3 {
 		font-size: 40px;
 	}
 
-	.editor-styles-wrapper .wp-block h4 {
+	.editor-styles-wrapper h4,
+	.editor-styles-wrapper .heading-size-4 {
 		font-size: 32px;
 	}
 
-	.editor-styles-wrapper .wp-block h5 {
+	.editor-styles-wrapper h5,
+	.editor-styles-wrapper .heading-size-5 {
 		font-size: 24px;
 	}
 
@@ -1431,11 +1442,13 @@ hr.wp-block-separator.is-style-dots::before {
 
 	.editor-post-title__block .editor-post-title__input,
 	.editor-styles-wrapper .wp-block-post-title,
-	.editor-styles-wrapper .wp-block h1 {
+	.editor-styles-wrapper h1,
+	.editor-styles-wrapper .heading-size-1 {
 		font-size: 84px;
 	}
 
-	.editor-styles-wrapper .wp-block h6 {
+	.editor-styles-wrapper h6,
+	.editor-styles-wrapper .heading-size-6 {
 		font-size: 18px;
 	}
 

diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css
@@ -215,29 +215,35 @@ body#tinymce.wp-editor.content h6 {
 	margin: 40px 0 25px;
 }
 
-body#tinymce.wp-editor.content h1 {
+body#tinymce.wp-editor.content h1,
+body#tinymce.wp-editor.content .heading-size-1 {
 	font-size: 84px;
 	font-weight: 800;
 	line-height: 1.138888889;
 }
 
-body#tinymce.wp-editor.content h2 {
+body#tinymce.wp-editor.content h2,
+body#tinymce.wp-editor.content .heading-size-2 {
 	font-size: 48px;
 }
 
-body#tinymce.wp-editor.content h3 {
+body#tinymce.wp-editor.content h3,
+body#tinymce.wp-editor.content .heading-size-3 {
 	font-size: 40px;
 }
 
-body#tinymce.wp-editor.content h4 {
+body#tinymce.wp-editor.content h4,
+body#tinymce.wp-editor.content .heading-size-4 {
 	font-size: 32px;
 }
 
-body#tinymce.wp-editor.content h5 {
+body#tinymce.wp-editor.content h5,
+body#tinymce.wp-editor.content .heading-size-5 {
 	font-size: 24px;
 }
 
-body#tinymce.wp-editor.content h6 {
+body#tinymce.wp-editor.content h6,
+body#tinymce.wp-editor.content .heading-size-6 {
 	font-size: 18px;
 	letter-spacing: 0.03125em;
 	text-transform: uppercase;

diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css
@@ -215,29 +215,35 @@ body#tinymce.wp-editor.content h6 {
 	margin: 40px 0 25px;
 }
 
-body#tinymce.wp-editor.content h1 {
+body#tinymce.wp-editor.content h1,
+body#tinymce.wp-editor.content .heading-size-1 {
 	font-size: 84px;
 	font-weight: 800;
 	line-height: 1.138888889;
 }
 
-body#tinymce.wp-editor.content h2 {
+body#tinymce.wp-editor.content h2,
+body#tinymce.wp-editor.content .heading-size-2 {
 	font-size: 48px;
 }
 
-body#tinymce.wp-editor.content h3 {
+body#tinymce.wp-editor.content h3,
+body#tinymce.wp-editor.content .heading-size-3 {
 	font-size: 40px;
 }
 
-body#tinymce.wp-editor.content h4 {
+body#tinymce.wp-editor.content h4,
+body#tinymce.wp-editor.content .heading-size-4 {
 	font-size: 32px;
 }
 
-body#tinymce.wp-editor.content h5 {
+body#tinymce.wp-editor.content h5,
+body#tinymce.wp-editor.content .heading-size-5 {
 	font-size: 24px;
 }
 
-body#tinymce.wp-editor.content h6 {
+body#tinymce.wp-editor.content h6,
+body#tinymce.wp-editor.content .heading-size-6 {
 	font-size: 18px;
 	letter-spacing: 0.03125em;
 	text-transform: uppercase;

diff --git a/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-non-latin-languages.php b/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-non-latin-languages.php
@@ -119,7 +119,7 @@ public static function get_non_latin_css( $type = 'front-end' ) {
 				'twentytwenty_get_localized_font_family_elements',
 				array(
 					'front-end'      => array( 'body', 'input', 'textarea', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', '.has-drop-cap:not(:focus)::first-letter', '.entry-content .wp-block-archives', '.entry-content .wp-block-categories', '.entry-content .wp-block-cover-image', '.entry-content .wp-block-latest-comments', '.entry-content .wp-block-latest-posts', '.entry-content .wp-block-pullquote', '.entry-content .wp-block-quote.is-large', '.entry-content .wp-block-quote.is-style-large', '.entry-content .wp-block-archives *', '.entry-content .wp-block-categories *', '.entry-content .wp-block-latest-posts *', '.entry-content .wp-block-latest-comments *', '.entry-content p', '.entry-content ol', '.entry-content ul', '.entry-content dl', '.entry-content dt', '.entry-content cite', '.entry-content figcaption', '.entry-content .wp-caption-text', '.comment-content p', '.comment-content ol', '.comment-content ul', '.comment-content dl', '.comment-content dt', '.comment-content cite', '.comment-content figcaption', '.comment-content .wp-caption-text', '.widget_text p', '.widget_text ol', '.widget_text ul', '.widget_text dl', '.widget_text dt', '.widget-content .rssSummary', '.widget-content cite', '.widget-content figcaption', '.widget-content .wp-caption-text' ),
-					'block-editor'   => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block-post-title', '.editor-styles-wrapper .wp-block h1', '.editor-styles-wrapper .wp-block h2', '.editor-styles-wrapper .wp-block h3', '.editor-styles-wrapper .wp-block h4', '.editor-styles-wrapper .wp-block h5', '.editor-styles-wrapper .wp-block h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
+					'block-editor'   => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block-post-title', '.editor-styles-wrapper h1', '.editor-styles-wrapper h2', '.editor-styles-wrapper h3', '.editor-styles-wrapper h4', '.editor-styles-wrapper h5', '.editor-styles-wrapper h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
 					'classic-editor' => array( 'body#tinymce.wp-editor', 'body#tinymce.wp-editor p', 'body#tinymce.wp-editor ol', 'body#tinymce.wp-editor ul', 'body#tinymce.wp-editor dl', 'body#tinymce.wp-editor dt', 'body#tinymce.wp-editor figcaption', 'body#tinymce.wp-editor .wp-caption-text', 'body#tinymce.wp-editor .wp-caption-dd', 'body#tinymce.wp-editor cite', 'body#tinymce.wp-editor table' ),
 				)
 			);