@roots/bud-wordpress-theme-json

@roots/bud-wordpress-theme-json

Webpack plugin to help with wp_enqueue_script

---

Installation

Install @roots/bud-wordpress-theme-json to your project.

Yarn:

yarn add @roots/bud-wordpress-theme-json --dev

npm:

npm install @roots/bud-wordpress-theme-json --save-dev

Usage

You can manage WordPress' theme.json config file from the context of your bud config using bud.wpjson.

If you are using this with the @roots/bud-preset-wordpress or @roots/sage preset you can also access the class using bud.wp.json.

Enabling theme.json support

In order to emit the file you will need to enable the feature:

bud.wpjson.enable();

Managing generic theme.json values

You can use setOption from the bud.js extensions API to set theme.json values:

bud.wpjson.setOption("customTemplates", []).enable();

Managing the settings field

Most theme.json configuration centers around the settings property. You can modify these values using a fluent container interface exposed by bud.wpjson.settings.

bud.wpjson
  .settings((theme) =>
    theme
      .set("typography.customFontSizes", true)
      .set("typography.fontWeight", false)
      .merge("spacing.units", ["px", "%", "em"]),
  )
  .enable();

Using tailwindcss config values

If you use @roots/bud-tailwindcss in your project there are several opt-in config functions that allow you to generate theme.json values directly from your tailwind config.

wp.json.useTailwindColors()

Convert theme.colors to a theme.json palette.

bud.wpjson.useTailwindColors();

wp.json.useTailwindFontSize()

Emits values from theme.fontSize as the typography.fontSizes property of theme.json.

bud.wpjson.useTailwindFontSize();

wp.json.useTailwindFontFamily()

Emits values from theme.fontFamily as the typography.fontFamilies property of theme.json.

bud.wpjson.useTailwindFontFamily();

wp.json.useTailwindSpacing()

Emits values from theme.spacing as the spacing property of theme.json.

bud.wpjson.useTailwindSpacing();

Limiting values to those defined in theme.extend

You can pass 'extend' to any of the the tailwind helper functions to limit the values emitted to those defined under tailwind's theme.extend key.

bud.wpjson.useTailwindColors(`extend`);

In combination

You can use these methods in combination:

bud.wpjson
  .useTailwindColors()
  .useTailwindFontSize()
  .useTailwindFontFamily()
  .setOption("typography.fontWeight", false);

Contributing

Contributions are welcome from everyone.

We have contribution guidelines to help you get started.

License

@roots/bud-wordpress-theme-json is licensed under MIT.

Community

Keep track of development and community news.

• Join us on Roots Slack by becoming a GitHub sponsor
• Participate on the Roots Discourse
• Follow @rootswp on Twitter
• Read and subscribe to the Roots Blog
• Subscribe to the Roots Newsletter

Sponsors

bud.js is an open source project and completely free to use.

However, the amount of effort needed to maintain and develop new features and projects within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider sponsoring Roots.