Twenty Twenty: Correct font-size for Code block and other preformatted 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

Author: karmatosed

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 {

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 {

src/wp-content/themes/twentytwenty/style-rtl.css

@@ -595,6 +595,7 @@ pre {
 
 pre code {
 	background: transparent;
+	font-size: 1em;
 	padding: 0;
 }
 

src/wp-content/themes/twentytwenty/style.css

@@ -599,6 +599,7 @@ pre {
 
 pre code {
 	background: transparent;
+	font-size: 1em;
 	padding: 0;
 }