Next steps

Once you have your project setup from the previous sections, you’ll need to set up your project to include the WordPress generated CSS variables.

If a preset is selected for a particular style in the WordPress block editor, for example selecting a color preset from the color palette as a background color instead of choosing a custom color, then WordPress will refer to the slug name instead of the hex value. This is also true for all other style presets, like font sizes, padding, etc. For example here’s the block data for a paragraph block with a background color set from a preset color from the color palette:

{
  "name": "core/paragraph",
  "attributes": {
    "backgroundColor": "vivid-red",
    "content": "example paragraph"
  }
}

To be able to cater for this, we need to grab a list of all the generated CSS variables and their associated values from WordPress, and render them within a style tag for your site. This can be achieved in slightly different ways depending on which framework you’re using. Choose which framework you’re using below to continue this guide:

• Astro JS
• Next JS (docs coming soon)
• Angular (docs coming soon)