feat: generate `theme.json` from `bud.config.js` #2999

kellymears · 2022-03-05T06:29:52Z

This PR

generates theme.json from bud.config.js
sets theme.json palette from tailwind.config.js

See: updated @roots/sage documentation on theme.json support

TODOs

Fix colors generator (@kellymears - done in Bud v6.4.3)
Update docs on removing Tailwind to account for the Tailwind settings in this file (@retlehs - 📝 Removing Tailwind docs: Account for theme.json generator docs#427)

joshuafredrickson · 2022-03-28T13:41:21Z

I'm running into this when using a callback with themeJson:

bud.config.js:

    .themeJson((theme) => {
      theme.set("typography.customFontSize", true);
      return theme;
    })

This nests a duplicate settings object inside settings > respository and doesn't set the customFontSize. Resulting theme.json:

{
  "__generated__": "⚠️ This file is generated. Do not edit.",
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "ident": "container",
    "repository": {
      "path": "/site/wp-content/themes/sage-10/theme.json",
      "settings": {
        "color": {
          "custom": false,
          "customGradient": false
        },
        "custom": {
          "spacing": {},
          "typography": {
            "font-size": {},
            "line-height": {}
          }
        },
        "spacing": {
          "padding": true,
          "units": [
            "px",
            "%",
            "em",
            "rem",
            "vw",
            "vh"
          ]
        },
        "typography": {
          "customFontSize": false,
          "dropCap": false
        }
      }
    }
  }
}

It all works if I use standard json with themeJson, but then I have to set the entire json vs using the handy defaults already available.

kellymears · 2022-07-28T21:46:24Z

this would obviously need to be updated, but I'm thinking we can revisit now.

This:

  app.wpjson
    .settings((theme) => theme.set("typography.customFontSize", true))
    .enable();

Yields the expected result:

{
  "__generated__": "⚠️ This file is generated. Do not edit.",
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "custom": false,
      "customGradient": false
    },
    "custom": {
      "spacing": {},
      "typography": {
        "font-size": {},
        "line-height": {}
      }
    },
    "spacing": {
      "padding": true,
      "units": [
        "px",
        "%",
        "em",
        "rem",
        "vw",
        "vh"
      ]
    },
    "typography": {
      "customFontSize": true,
      "dropCap": false
    }
  }
}

setOption, and the tailwind helpers all seem OK too:

app.wpjson.useTailwindColors().enable()

  app.wpjson
    .setOption("settings", (settings) => ({
      ...settings,
      typography: {
        ...(settings?.typography ?? {}),
        customFontSize: true,
      },
    }))
    .enable();

Tested w/ 6.3.5

joshuafredrickson · 2022-08-14T22:06:19Z

I've added this into a new site build and in my limited time with it so far, I agree this is in a place where it's working as expected. 👍

codepuncher · 2022-08-15T09:01:04Z

Same here! All working for me. Great feature.

abombelli · 2022-11-07T17:08:58Z

The script does not include the global styles node at the right position.

The generated theme.json looks like this:

{
  "__generated__": "⚠️ This file is generated. Do not edit.",
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": false,
    "color": {
      "custom": false,
      "customGradient": false,
      "defaultPalette": false,
      "defaultGradients": false
    },
    "custom": {
      "spacing": {},
      "typography": {
        "font-size": {},
        "line-height": {}
      }
    },
    "spacing": {
      "padding": true,
      "units": [
        "px",
        "%",
        "em",
        "rem",
        "vw",
        "vh"
      ]
    },
    "typography": {
      "customFontSize": false,
      "fontWeight": false,
      "letterSpacing": false,
      "lineHeight": false,
      "textDecoration": false,
      "textTransform": false,
      "dropCap": false,
      "fontSizes": [],
      "fontFamilies": [
        {
          "fontFamily": "'Frutiger Next', sans-serif",
          "slug": "base",
          "name": "Frutiger Next",
          "fontFace": [
            {
              "fontFamily": "Frutiger Next",
              "fontWeight": "300",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "src": [
                "file:./public/fonts/FrutigerNextLight_normal_normal.e764ad.woff2"
              ]
            }
          ]
        }
      ]
    },
    "layout": {
      "contentSize": "900px",
      "wideSize": "calc(900px + 10vw)"
    },
    "blocks": {
      "core/site-title": {
        "typography": {
          "fontFamilies": [
            {
              "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
              "slug": "helvetica-arial",
              "name": "Helvetica or Arial"
            }
          ]
        }
      },
      "core/paragraph": {
        "color": {},
        "custom": {},
        "layout": {},
        "spacing": {},
        "typography": {
          "customFontSize": false
        }
      }
    },
    "styles": {
      "elements": {
        "h1": {
          "typography": {
            "fontFamily": "var(--wp--preset--font-family--base)",
            "fontWeight": "500"
          }
        }
      },
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--base)",
        "fontWeight": "300"
      }
    }
  }
}

But the styles node a t the end should be placed outside the settings node:

{
  "__generated__": "⚠️ This file is generated. Do not edit.",
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": false,
    "color": {
      "custom": false,
      "customGradient": false,
      "defaultPalette": false,
      "defaultGradients": false
    },
    "custom": {
      "spacing": {},
      "typography": {
        "font-size": {},
        "line-height": {}
      }
    },
    "spacing": {
      "padding": true,
      "units": [
        "px",
        "%",
        "em",
        "rem",
        "vw",
        "vh"
      ]
    },
    "typography": {
      "customFontSize": false,
      "fontWeight": false,
      "letterSpacing": false,
      "lineHeight": false,
      "textDecoration": false,
      "textTransform": false,
      "dropCap": false,
      "fontSizes": [],
      "fontFamilies": [
        {
          "fontFamily": "'Frutiger Next', sans-serif",
          "slug": "base",
          "name": "Frutiger Next",
          "fontFace": [
            {
              "fontFamily": "Frutiger Next",
              "fontWeight": "300",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "src": [
                "file:./public/fonts/FrutigerNextLight_normal_normal.e764ad.woff2"
              ]
            }
          ]
        }
      ]
    },
    "layout": {
      "contentSize": "900px",
      "wideSize": "calc(900px + 10vw)"
    },
    "blocks": {
      "core/site-title": {
        "typography": {
          "fontFamilies": [
            {
              "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
              "slug": "helvetica-arial",
              "name": "Helvetica or Arial"
            }
          ]
        }
      },
      "core/paragraph": {
        "color": {},
        "custom": {},
        "layout": {},
        "spacing": {},
        "typography": {
          "customFontSize": false
        }
      }
    }
  },
  "styles": {
    "elements": {
      "h1": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--base)",
          "fontWeight": "500"
        }
      }
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--base)",
      "fontWeight": "300"
    }
  }
}

This is the setup in bud.config.mjs


/**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        appearanceTools: false,
        color: {
          custom: false,
          customGradient: false,
          defaultPalette: false,
          defaultGradients: false,
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          padding: true,
          units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
        },
        typography: {
          customFontSize: false,
          fontWeight: false,
          letterSpacing: false,
          lineHeight: false,
          textDecoration: false,
          textTransform: false,
          dropCap: false,
          fontSizes: [],
          fontFamilies: [
            {
              fontFamily: "'Frutiger Next', sans-serif",
              slug: "base",
              name: "Frutiger Next",
              "fontFace": [
                {
                  "fontFamily": "Frutiger Next",
                  "fontWeight": "300",
                  "fontStyle": "normal",
                  "fontStretch": "normal",
                  "src": [ "file:./public/fonts/FrutigerNextLight.woff2" ]
                }
              ]
            },
          ],
        },
        layout: {
          contentSize: '900px',
          wideSize: 'calc(900px + 10vw)'
        } ,
        blocks: {
          "core/site-title": {
            "typography": {
              "fontFamilies": [
                {
                  "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
                  "slug": "helvetica-arial",
                  "name": "Helvetica or Arial"
                }
              ]
            }
          },
            'core/paragraph': {
                color: {},
                custom: {},
                layout: {},
                spacing: {},
                typography: {
                  customFontSize: false
                }
            }
        },
      styles: {
        elements: {
          h1: {
              typography: {
                  fontFamily: "var(--wp--preset--font-family--base)",
                  fontWeight: "500"
              }
          }
        },
        typography: {
              fontFamily: "var(--wp--preset--font-family--base)",
              fontWeight: "300"
        }
      },
    })

Or am I missing something?

UPDATE: Solved using .setOption('styles', { })

github-actions bot added the build label Mar 5, 2022

kellymears requested a review from retlehs March 5, 2022 06:31

retlehs force-pushed the feat-bud-config branch from bd9e383 to 5ef5c97 Compare March 5, 2022 15:43

retlehs changed the title ~~feat: bud 5.5.0 config features~~ feat: generate theme.json from bud.config.js Mar 5, 2022

This comment was marked as resolved.

Sign in to view

retlehs assigned retlehs and kellymears Mar 5, 2022

retlehs modified the milestones: 10.1.0, 10.2.0 Mar 5, 2022

This comment was marked as resolved.

Sign in to view

retlehs mentioned this pull request Jun 29, 2022

Sage: theme.json docs roots/docs#414

Closed

retlehs removed this from the 10.2.0 milestone Jul 10, 2022

retlehs force-pushed the feat-bud-config branch from 4cfc448 to dbf1a4e Compare September 22, 2022 03:38

github-actions bot removed the build label Sep 22, 2022

retlehs force-pushed the feat-bud-config branch from dbf1a4e to 1cd4fbd Compare September 23, 2022 20:25

retlehs marked this pull request as draft September 23, 2022 20:49

retlehs added this to the 10.3.0 milestone Sep 23, 2022

retlehs added build enhancement editor labels Sep 23, 2022

github-actions bot removed the build label Sep 24, 2022

retlehs marked this pull request as ready for review September 24, 2022 15:25

kellymears and others added 3 commits September 24, 2022 10:28

improve: set theme.json colors in tailwind conf

972f4cd

🔧 account for #3002

fb8de9a

🚧 theme.json generator updates

a2bd26a

retlehs added 3 commits September 24, 2022 10:28

🔧 theme.json generator - move Tailwind to end

8e37498

🔧 Remove test color

74bad62

🔧 Generated theme.json

b063fa0

retlehs force-pushed the feat-bud-config branch from 0749047 to b063fa0 Compare September 24, 2022 15:29

retlehs approved these changes Sep 24, 2022

View reviewed changes

retlehs mentioned this pull request Sep 24, 2022

📝 Removing Tailwind docs: Account for theme.json generator roots/docs#427

Merged

kellymears merged commit 1b79a94 into main Sep 25, 2022

kellymears deleted the feat-bud-config branch September 25, 2022 17:08

This was referenced Oct 11, 2022

Add Bud support roots/palette-webpack-plugin#21

Closed

Feature Request: theme.json palette support roots/palette-webpack-plugin#23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: generate `theme.json` from `bud.config.js` #2999

feat: generate `theme.json` from `bud.config.js` #2999

Uh oh!

kellymears commented Mar 5, 2022 •

edited by retlehs

Loading

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

joshuafredrickson commented Mar 28, 2022

Uh oh!

kellymears commented Jul 28, 2022 •

edited

Loading

Uh oh!

joshuafredrickson commented Aug 14, 2022

Uh oh!

codepuncher commented Aug 15, 2022

Uh oh!

abombelli commented Nov 7, 2022 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

feat: generate theme.json from bud.config.js #2999

feat: generate theme.json from bud.config.js #2999

Uh oh!

Conversation

kellymears commented Mar 5, 2022 • edited by retlehs Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

joshuafredrickson commented Mar 28, 2022

Uh oh!

kellymears commented Jul 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshuafredrickson commented Aug 14, 2022

Uh oh!

codepuncher commented Aug 15, 2022

Uh oh!

abombelli commented Nov 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat: generate `theme.json` from `bud.config.js` #2999

feat: generate `theme.json` from `bud.config.js` #2999

kellymears commented Mar 5, 2022 •

edited by retlehs

Loading

kellymears commented Jul 28, 2022 •

edited

Loading

abombelli commented Nov 7, 2022 •

edited

Loading