Developers

Gust takes a developer first approach to WordPress themes and as you nosey through the code, you'll see that almost everything passes through a filter allowing you to update it.

JIT

You'll need to be using at least 1.3.0 of Gust to use the Tailwind CSS Just-In-Time mode.

When you're building pages with the Gust page builder, there's nothing more you need to do. JIT is already enabled in that environment so you can continue to work as you normally would. However if you want to use JIT within PHP templates you'll need to enabled Developer mode as per the docs below. In this scenario, whenever you reload the page, Tailwind CSS will re-build itself with the new class names you've added.

Remember that once you've finished, you'll need to disable developer mode and re-build your stylesheet for the changes to take effect.

Plugins

Currently the following plugins are enabled:

We're working on adding support for users to add their own plugins, both from NPM and their own custom plugins. Until then, if you have a plugin you'd like to see added, let us know and we can look into adding it.

Working with templates

The Gust page builder is intended to be used for things like landing pages, content pages, etc. For templated pages such as posts, pages, products, etc it's likely that you'll want to touch the codebase directly and code these with PHP. There are a few things you'll need to be aware of to get the most out of Gust when taking this approach.

Developer mode

Turning on Developer Mode in the settings will load the development bundle of Tailwind CSS on the front-end. You don't want to do this in production! This is because the development bundle of Tailwind CSS is huge as it includes all the different class names. But it's perfect for development. So switch this on while you're building and don't forget to turn it off again when you're done.

Compiling stylesheets

If you use the Gust page builder, Gust will automatically keep track of the class names used on that page. When you save, it'll figure out whether it needs to re-build and if it does, will generate a new production CSS file.

When you're working with PHP files however, it's a little more tricky. Gust will scan the following templates in the theme or child theme and do its best to extract CSS class names:

  • 404.php
  • archive.php
  • attachment.php
  • author.php
  • category.php
  • comments.php
  • date.php
  • embed.php
  • footer.php
  • frontpage.php
  • header.php
  • home.php
  • index.php
  • page.php
  • paged.php
  • privacypolicy.php
  • search.php
  • searchform.php
  • sidebar.php
  • single.php
  • singular.php
  • tag.php
  • taxonomy.php

If you want Gust to watch out for any other templates you might be using, you can add them through the gust_safelist_templates filter. These should be relative to your theme directory as Gust will use locate_template under the hood to find them. If you have any other files that you want Gust to watch, pass them in using the gust_safelist_files filter, with the full path to the file.

You will need to trigger a manual rebuild of the stylesheet if you change any templates. To do that go to the Gust settings from the dashboard and click "Rebuild CSS". It may take a little while as it needs to update both the production and the development builds of your stylesheet.

Overriding the safe list

If the above still isn't quite enough, you can override the safe list that Gust sends to Purge CSS by using the gust_safelist filter.

Hooks and filters

It wouldn't be WordPress if it didn't have hooks and filters, and Gust comes with plenty to make sure you have control over what's being output. We're still working on ensuring this list is exhaustive, so there may be a few extra filters lurking around the codebase. If you find one that's not on this list, or you've found somewhere that needs a new one, let us know and we'll take a look at getting it added.

Filter Arguments Description
gust_register_component $json, $componentName This is run before each component is registered. You can override an entire component's JSON with this filter. Great for overriding core components.
gust_render_component $component, $componentName This is called whenever Gust tries to render a component. It should return the component details. Again, you could override the implementation of a core component here, but on only when pages are being built. This does not effect the editor.
{$tagId}_tag_name $tagName, $context, $componentDetails When a component node is being rendered the tag is run through this filter so you can change it if you need to.
{$tagId}_class_names $classNames, $context, $componentDetails Modify any classes being output onto a component node.
{$tagId}_attributes $attributes, $context, $componentDetails Modify any attributes being output on a component node.
{$tagId}_output $output, $context, $componentDetails Modify the full HTML of a component node.