Theme JSON for Developers
A Webpack plugin for programmatically generating WordPress theme.json with JavaScript from tailwind.config or another configuration file.
Core Concepts
- Use Webpack and JavaScript functions to programmatically generate JSON files.
- Reduce duplicate code by re-using the Tailwind variables you're already to create the
theme.jsonoptions. - JSON is difficult to work with, writing JSON as JavaScript is much more efficient and allows for using variables and functions.
Getting Started
To begin, you'll need to install theme-json-generator.
npm install theme-json-generator --save-devThen add the plugin to your webpack config like so:
// webpack.config.js
const { ThemeJsonPlugin } = require( 'theme-json-generator' );
module.exports = {
plugins: [
new ThemeJsonPlugin( {
from: './src/theme.config.js',
to: './theme.json',
} ),
],
};Config Parameters
| Option | Description | Default | Type |
|---|---|---|---|
from |
Relative path to the config JS file used to generate theme.json. |
theme.config.js |
string |
to |
Relative path to the generated JSON file. If the file does not exist it will be created at runtime. | theme.json |
string |
Note: Do not use absolute filepaths using NodeJS path module in theto or from options. These should be relative file paths based on the location of the originating script.
theme.config.js
theme.config.js is the JavaScript file used for compiling theme.json.
This file is essentially as JavaScript version of theme.json where functions and variables are used to build out the contents of the json file.
Code Example
In the code example below, Tailwind config values are passed into the theme.config and are used to generate the theme.json options.
// theme.config.js
const {transform} = require('theme-json-generator'); // Plugin helper for transforming data.
const {theme} = require('../tailwind.config.js'); // Import Tailwind config.
module.exports = {
settings: {
layout: {
contentSize: theme.extend.screens.desktop || '',
},
typography: {
lineHeight: false,
textDecoration: false,
textTransform: false,
dropCap: false,
fontSizes: [],
fontFamilies: [],
},
color: {
palette: transform('palette', theme.extend.colors),
},
blocks: {
'core/button': {
color: {
background: true,
text: true,
gradients: [],
palette: transform('palette', theme.extend.colors),
},
},
'core/pullquote': {
border: {
radius: false,
style: false,
color: false,
width: false,
},
typography: {
fontSizes: [],
},
},
'core/buttons': {
layout: {},
typography: {
fontSizes: [],
},
},
'core/heading': {
color: {
text: true,
background: true,
palette: transform('palette', theme.extend.colors, [
'blue',
'teal',
'cyan',
'black',
]),
link: false,
},
},
},
},
styles: {
typography: {
fontFamily: theme.extend.fontFamily.sans.toString(),
fontSize: theme.extend.fontSize.base,
lineHeight: '1.5',
},
elements: {
link: {
color: {
text: theme.extend.colors.blue,
},
typography: {
textDecoration: 'none',
},
':hover': {
color: {
text: theme.extend.colors.black,
},
},
':focus': {
color: {
text: theme.extend.colors.black,
},
},
},
cite: {
typography: {
fontSize: theme.extend.fontSize['14'],
fontStyle: 'normal',
fontWeight: '800',
textTransform: 'uppercase',
},
},
},
blocks: {
'core/quote': {
typography: {
fontSize: theme.extend.fontSize['20'],
fontWeight: '400',
},
color: {
text: theme.extend.colors.text,
background: theme.extend.colors.bkg,
},
spacing: {
padding: {
top: theme.spacing[5],
right: theme.spacing[5],
bottom: theme.spacing[5],
left: theme.spacing[5],
},
margin: {
bottom: theme.spacing[5],
},
},
},
'core/heading': {
typography: {
fontWeight: '700',
},
color: {
text: theme.extend.colors.heading,
},
spacing: {
margin: {
bottom: theme.spacing[3],
},
},
},
'core/paragraph': {
typography: {
lineHeight: '1.5',
},
color: {
text: theme.extend.colors.text,
},
spacing: {
margin: {
top: '0',
bottom: theme.spacing[5],
},
},
},
},
},
};