Font sizes: update default values (#37381)

WordPress · Dec 21, 2021 · 7970660 · 7970660
1 parent d9e5799
commit 7970660
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/lib/compat/wordpress-5.9/theme.json b/lib/compat/wordpress-5.9/theme.json
@@ -199,11 +199,6 @@
  "slug": "small",
  "size": "13px"
  },
- {
- "name": "Normal",
- "slug": "normal",
- "size": "16px"
- },
  {
  "name": "Medium",
  "slug": "medium",
@@ -215,8 +210,8 @@
  "size": "36px"
  },
  {
- "name": "Huge",
- "slug": "huge",
+ "name": "Extra Large",
+ "slug": "x-large",
  "size": "42px"
  }
  ],

diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
@@ -6,6 +6,10 @@
  @include background-colors-deprecated();
  @include foreground-colors-deprecated();
  @include gradient-colors-deprecated();
+ // This CSS Custom Properties aren't used anymore as defaults,
+ // but we still need to keep them for backward compatibility.
+ --wp--preset--font-size--normal: 16px;
+ --wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -17,6 +21,14 @@
  font-size: 2.625em;
 }
 
+.has-normal-font-size {
+ font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.has-huge-font-size {
+ font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 // Text alignments.
 .has-text-align-center {
  text-align: center;

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -48,6 +48,10 @@
  @include background-colors-deprecated();
  @include foreground-colors-deprecated();
  @include gradient-colors-deprecated();
+ // This CSS Custom Properties aren't used anymore as defaults,
+ // but we still need to keep them for backward compatibility.
+ --wp--preset--font-size--normal: 16px;
+ --wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -62,6 +66,14 @@
  font-size: 42px;
 }
 
+.editor-styles-wrapper .has-normal-font-size {
+ font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.editor-styles-wrapper .has-huge-font-size {
+ font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 /**
  * Editor Normalization Styles
  *