Working with dynamic data is a core feature of Gust to help you build flexible and extensible websites.
Gust uses "context" to pass data around. If you have a WordPress background, you can think of context as being inside "the loop", however in Gust it doesn't have to be related to WP_Query
( although it can be ). Essentially context is a wrapper of data and everything inside that context has access to it.
By default, Gust uses the current WP_Query
as its context. For example, if you are on a single post page, your context would be the query for the single post. Again, this is essentially "the loop". But you can override this context for an element and all of its children. You can choose from three types of contexts:
Gust provides a simple interface for building some of the most common queries. You can select from available post types, change the order, along with a few other common settings. You might use this to build a "latest posts" grid for example.
Context doesn't have to be a WP Query, as long as it's iterable. You could return an array of objects for example. Just add the filter name here and ensure that it's implemented, and Gust will take care of the rest.
If you pass the ID of a post, you can make that the context. For example, you may want to pick our a certain post and display its data on the page. This is where you would do that.
Inside of a context you'll need to display data from that context. You can do this for attributes and content by selecting from either:
We've chosen some of the most common functions and added them here for convenience. For example, choose the_title
to display the current post's title. These functions are available to users by selecting "Post Data" when adding content or attributes, and choosing the desired function.
You can add your own functions to this list. This is done in two steps. Firstly, add it to the list of available functions via the gust_content_functions filter. This should return an array with each element containing a function definition. Each element should have the following structure:
Property | Value |
---|---|
id | A unique identifier for this function. |
label | The option label to display in the select box. |
displayValue | The display value used in the Gust builder. |
useHtml ( optional ) | Whether to treat the display value as HTML or plain text. |
Once you have made it available for users to select, you'll need to implement it. This can be done via the gust_function_content filter. This filter takes the value, the ID of the function, and the context that it's called in. It defaults to a string if no implementation is found.
For example, let's imagine that we are keeping track of likes and shares of a page/post and we want to be able to use that in the Gust builder:
// add this function as an option to the list of available functions.
function gust_child_content_functions( $functions ) {
$functions[] = [
'id' => 'gust_child_likes_shares',
'label' => 'Likes and shares',
'displayValue' => 'x Likes, x Shares'
];
return $functions;
}
add_filter( 'gust_content_functions', 'gust_child_content_functions' );
// implement the functionality.
function gust_child_likes_shares( $value, $function ) {
if ( $function !== 'gust_child_likes_shares' ) return $value;
$likes = method_to_calculate_likes();
$shares = method_to_calculate_shares();
return sprintf( __( '%d Likes, %d Shares' ), $likes, $shares );
}
add_filter( 'gust_function_content', 'gust_child_likes_shares', 10, 2 );
You can add any meta key here and it will display it. We've also got support for ACF too. You can read the docs for that here.
If you need even more granular control, you can always drop down to a filter. Filters are passed the context as their second argument, so you can access it. E.g.
function my_custom_function( $value, $context ) {}
add_filter( 'my_custom_filter', 'my_custom_function', 10, 2 );
Inside a context you'll often need to loop over data. Displaying a list of posts, listing features, etc these are all examples of when you may want to loop over data inside a context. To do this select "Use Context Loop" from the context menu. You'll notice that for these elements they show up three times in the editor. This is to help give a visual indication of what looped data may look like. Anything inside this element will now take the context of the looped item. For example, in a traditional WP_Query
if you use the context loop, each element will take on the context of the_post
.
Note: Looping is not to be confused with the useRepeater
property on components. Read more about component properties.