WordPress / wporg-parent-2021

21 stars 11 forks source link

Try using a filter to merge child & parent theme.json settings #73

Closed ryelle closed 1 year ago

ryelle commented 1 year ago

This updates the theme.json resolver to merge in parent theme settings for the array properties (color palette, font sizes, etc) before merging back into the parent theme.

Previously, defining an array property would totally overwrite the parent theme value. Now this hooks in wp_theme_json_data_theme to merge the list defined in the parent theme into the child theme's value, using a helper function _merge_by_slug. This only updates those properties that need merging, the core process of merging the child & parent theme.json happens right after this filter returns.

If the child theme.json has values with the same slug as something in the parent theme.json, the child theme will overwrite that single value. Additional values will be added to the end of the parent's list.

Screenshots

There should be no visible changes on the current themes.

I've pushed a testing branch to developer, which adds a new color, updates some font sizes, and heading font using the latest i3 design. If you apply both and spin up developer, you'll see that the headings are all IBM Plex Mono. I also added green paragraphs to show that the color is set correctly 🙂

In the editor, there are different font sizes for the headings (these overwrote the parent).

fontsizes

And the color palette has an additional green at the end (this was added to the parent).

colors

How to test the changes in this Pull Request:

  1. Spin up a child theme site.
  2. Add some changes into one of the array value properties, color.palette, typography.fontFamilies, spacing.spacingSizes, etc.
  3. Open the editor, you should see your updated settings.
  4. Try editing other things in the child theme.json, it should still update correctly on the front end.