[wp-trac] [WordPress Trac] #54782: Default presets in use by default themes need to be updated

[WordPress Trac]

#54782: Default presets in use by default themes need to be updated
--------------------------+-----------------------------
 Reporter:  oandregal     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Themes that use the same preset slugs as WordPress uses need to be
 updated.

 From the devnote https://make.wordpress.org/core/2022/01/08/updates-for-
 settings-styles-and-theme-json/

 The CSS for some of the presets defined by WordPress (font sizes, colors,
 and gradients) was loaded twice for most themes in WordPress 5.8: in the
 block-library stylesheet plus in the global stylesheet. Additionally,
 there were slight differences in the CSS in both places.

 In WordPress 5.9 those were consolidated into a single place, the global
 stylesheet whose name is `global-styles-inline-css` that is now loaded for
 all themes in the front-end.

 Each preset value generates a single CSS Custom Property and a class, as
 in:


 {{{
 /* CSS Custom Properties for the preset values */
 body {
   --wp--preset--<PRESET_TYPE>--<PRESET_SLUG>: <DEFAULT_VALUE>;
   --wp--preset--color--pale-pink: #f78da7;
   --wp--preset--font-size--large: 36px;
   /* etc. */
 }

 /* CSS classes for the preset values */
 .has-<PRESET_SLUG>-<PRESET_TYPE> { ... }
 .has-pale-pink-color { color: var(--wp--preset--color--pale-pink)
 !important; }
 .has-large-font-size { font-size: var(--wp--preset--font-size--large)
 !important; }

 }}}

 For themes to override the default values they can use the theme.json and
 provide the same slug. Themes that do not use a theme.json can still
 override the default values by enqueuing some CSS that sets the
 corresponding CSS Custom Property.

 Example (sets a new value for the default large font size):


 {{{
 :root {
  --wp--preset--font-size--large: <NEW_VALUE>;
 }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54782>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform