Twenty Twenty: Correct font-size for Code block and other preformatte…

…d elements. The code block font-size was not the same in the editor and front. This sets it to 1em and corrects the value for preformatted elements along with adding border and padding in the editor for pre elements. Props viralsampat, mi5t4n, brobken, sabernhardt. Fixes #61845. git-svn-id: https://develop.svn.wordpress.org/trunk@58960 602fd350-edb4-49c9-b593-d223f7449a82
AKJUS · Aug 31, 2024 · bc09d6a · bc09d6a
1 parent 4486c0a
commit bc09d6a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 26 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
@@ -325,7 +325,7 @@
 .editor-styles-wrapper pre,
 .editor-styles-wrapper samp {
 	border-radius: 0;
-	font-size: 0.75em;
+	font-size: 0.9em;
 	padding: 4px 6px;
 }
 
@@ -336,6 +336,10 @@
 	padding: 1em;
 }
 
+.editor-styles-wrapper pre code {
+	font-size: 1em;
+}
+
 
 /* Custom Text Sizes ------------------------- */
 
@@ -715,9 +719,8 @@ hr.wp-block-separator.is-style-dots::before {
 	color: inherit;
 }
 
-.editor-styles-wrapper .wp-block-code,
-.editor-styles-wrapper .wp-block-preformatted pre,
-.editor-styles-wrapper .wp-block-verse pre {
+.editor-styles-wrapper pre,
+.editor-styles-wrapper .wp-block-code {
 	border: 1px solid #dcd7ca;
 	border-radius: 0;
 	padding: 30px;
@@ -730,7 +733,7 @@ hr.wp-block-separator.is-style-dots::before {
 	background: transparent;
 	color: inherit;
 	font-family: monospace;
-	font-size: 14px;
+	font-size: 16px;
 }
 
 /* Block: Cover ------------------------------ */
@@ -1337,14 +1340,6 @@ hr.wp-block-separator.is-style-dots::before {
 		font-size: 17px;
 	}
 
-	/* BLOCK: CODE */
-
-	.editor-styles-wrapper .wp-block-preformatted pre,
-	.editor-styles-wrapper .wp-block-code .block-editor-plain-text,
-	.editor-styles-wrapper .wp-block-verse pre {
-		font-size: 16px;
-	}
-
 	/* BLOCK: COLUMNS */
 
 	.wp-block-column {

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
@@ -329,7 +329,7 @@
 .editor-styles-wrapper pre,
 .editor-styles-wrapper samp {
 	border-radius: 0;
-	font-size: 0.75em;
+	font-size: 0.9em;
 	padding: 4px 6px;
 }
 
@@ -340,6 +340,10 @@
 	padding: 1em;
 }
 
+.editor-styles-wrapper pre code {
+	font-size: 1em;
+}
+
 
 /* Custom Text Sizes ------------------------- */
 
@@ -719,9 +723,8 @@ hr.wp-block-separator.is-style-dots::before {
 	color: inherit;
 }
 
-.editor-styles-wrapper .wp-block-code,
-.editor-styles-wrapper .wp-block-preformatted pre,
-.editor-styles-wrapper .wp-block-verse pre {
+.editor-styles-wrapper pre,
+.editor-styles-wrapper .wp-block-code {
 	border: 1px solid #dcd7ca;
 	border-radius: 0;
 	padding: 30px;
@@ -734,7 +737,7 @@ hr.wp-block-separator.is-style-dots::before {
 	background: transparent;
 	color: inherit;
 	font-family: monospace;
-	font-size: 14px;
+	font-size: 16px;
 }
 
 /* Block: Cover ------------------------------ */
@@ -1341,14 +1344,6 @@ hr.wp-block-separator.is-style-dots::before {
 		font-size: 17px;
 	}
 
-	/* BLOCK: CODE */
-
-	.editor-styles-wrapper .wp-block-preformatted pre,
-	.editor-styles-wrapper .wp-block-code .block-editor-plain-text,
-	.editor-styles-wrapper .wp-block-verse pre {
-		font-size: 16px;
-	}
-
 	/* BLOCK: COLUMNS */
 
 	.wp-block-column {

diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css
@@ -595,6 +595,7 @@ pre {
 
 pre code {
 	background: transparent;
+	font-size: 1em;
 	padding: 0;
 }
 

diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css
@@ -599,6 +599,7 @@ pre {
 
 pre code {
 	background: transparent;
+	font-size: 1em;
 	padding: 0;
 }