Preformatted block: Add support for font sizes (#27584)

* Add preformatted block styles and font settings. * Add font size fallback. * Remove unnecessary overflow property and use `pre-wrap` instead. This is a more elegant solution compared to the previous one, which relied on overflow. * Remove editor.scss * Remove CSS custom property. This is the theme's job. For more information, see #27672 * Add stylesheet to `block.json` file This is added due to new requirement implemented in #25220 Co-authored-by: Ari Stathopoulos <[email protected]> * Add preformatted block to theme-json.md specs. * Fix preformatted block support information on theme-json.md specs. Co-authored-by: Ari Stathopoulos <[email protected]>
WordPress · Dec 15, 2020 · cbbc353 · cbbc353
1 parent c4ba256
commit cbbc353
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
@@ -366,6 +366,7 @@ These are the current typography properties supported by blocks:
 | Post Hierarchical Terms | - | Yes | - | - | Yes | - | - |
 | Post Tags | - | Yes | - | - | Yes | - | - |
 | Post Title | Yes | Yes | - | - | Yes | - | - |
+| Preformatted | - | Yes | - | - | - | - | - |
 | Site Tagline | Yes | Yes | - | - | Yes | - | - |
 | Site Title | Yes | Yes | - | - | Yes | - | - |
 | Verse | Yes | Yes | - | - | - | - | - |

diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
@@ -12,6 +12,8 @@
 		}
 	},
 	"supports": {
-		"anchor": true
-	}
+		"anchor": true,
+		"fontSize": true
+	},
+	"style": "wp-block-preformatted"
 }
diff --git a/packages/block-library/src/preformatted/style.scss b/packages/block-library/src/preformatted/style.scss
@@ -0,0 +1,3 @@
+.wp-block-preformatted {
+	white-space: pre-wrap;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -25,6 +25,7 @@
 @import "./navigation-link/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
+@import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
 @import "./query-loop/style.scss";
 @import "./quote/style.scss";