Content

There are a few different ways that you can add content to a component or element.

Content

This option is selected by default. It will let you add plain text content to an element and is the most basic form of content.

Rich Text Editor

Gust comes with a built in Rich Text Editor. Selecting the RTE option lets you add headings, links, colours, and other formatting options to your text.

Filters and Functions

Sometimes you just need extra control over the content in a component or you need to keep that content dynamic. To do this you can use a filter or a built in WordPress function. You can set any filter you like by adding the filter name, but there are only a few vetted functions you can use that WordPress provides out of the box. If you want to see more of these, get in touch with support and send us your ideas.

Repeatable Content

Gust provides a few components out of the box which provide repeatable content. Repeatable content exists for those times where you want to repeat a certain component or layout within the scope of another content. A tabbed component is a great example of this. You need users to be able to add a single "Tab" component, but they need to be able to add tabs which would add a new tab button but also a new tab content area. This is where repeatable content comes in.

For developers

There is a bit more information on how to set up repeatable content on the components page but there are also a couple of class names that Gust provides and has integrated into Tailwind for you. It's also something you can take advantage of when creating your own components.

gust-active-item is applied within the editor but is up to you to apply to your components on the front end. Variants have been added for this too, so you can do things like gust-active-item:bg-primary or hidden gust-active-item:block. This works for most cases, but sometimes the element you want to change is nested within the active element. Gust has your back! You can also use the group variants. Make sure that the active element also has the group class and you can use things like group-gust-active-item:bg-primary. Take a look at the built in Tabs component definition for a more detailed example.

Context

It's not often you'll get away with building a purely static website. Most of the time you need to pull data from somewhere or display data that can change often, a list of latest posts for example.

This is where Context comes in. Gust allows you to add "Context" to a component or element, that its children can then tap into. Let's say that you want to display a list of posts. You'd add in a container of some sort ( maybe it's a div, or maybe it's a "Grid" component ). Then you'd scroll down to the Context section and add in a context of some sort. In this case we'd probably want to use the WP Query context so we can pull some posts from WordPress. You can then start adding components that you'd like to consume that context. In this example we'll add a Post Card component and it it's "Context" section we'll select "Use Context Loop". This will set the card up to loop through the provided context and display the output.

As a developer you can take this as far as you want. You can use the WP Query API as we've exposed a few of the most common options for you, or you can use filters, functions, etc to add your own pieces of dynamic content.