Render

Retrieve a partial from the theme and pass arguments to it.
Like https://developer.wordpress.org/reference/functions/echo granola_render/ but allows for arguments to be passed in the form or an array. Each partial defines its own array of arguments so read each component to see what keys in $args should be provided.
 * can/should pass
 * @param string $path
 * @param array $args
 * @return string $content
 */

function render(string $partial, $args = []): string

Granola render is a one stop shop for including partials in the theme. Similar in functionality to get_template_part, \Granola\render is more powerful in that it facilitates pure functional components. Not generally common in WordPress development, a functional component (provided side effects are not coded in) allows for the component to be reused in any context, with any source of data.

\Granola\render accepts two parameters, the first a path to the partial, relative to the theme root, and second, a variable that will be provided to the component for rendering.

Example

Documentation helps, but an example is always best, so let’s review the following WYSIWYG component. Here we have included the HTML and PHP from the index file which represents the components output.

# @ assets/components/wysiwyg/index.php

<div class="wysiwyg">
    <?php if(!empty($args['heading'])) { ?>
        <div class="wysiwyg__heading">
            <?php echo $args['heading']; ?>
        </div>
    <?php } ?>

    <?php if(!empty($args['content'])) { ?>
        <div class="wysiwyg__content">
            <?php echo $args['content']; ?>
        </div>
    <?php } ?>
</div>

The component above has two slots, a heading, and content which when rendered, will be populated with the content provided. To render this content the following code can be used:

echo \Granola\render('', [
    'heading' => 'I am josh',
    'content' => apply_filters('the_content', 'Lorem ipsum dolar sit amet');
]);

Render filters

In developing websites on Granola, we have converged on an approach where a component is responsible parsing the data it is provided in to a format that is appropriate for that component. This is achieved the render filters.

The following is a sample from a card component, where $args can be an array most likely configured with ACF, or a WP_Post Object.

add_filter('granola/render/assets/components/card', function ($args): array {

    if (is_array($args)) {
        // Handle filtering content from Gutenberg block
        if(!empty($args['media']){
            $args['media'] = wp_get_attachment_image($args['image']['id'], 'large');
            unset($args['image']);
        }

    } elseif ($args instanceof WP_Post) {
        // Handle filtering content from WordPress posts

        $args = [
            'link' => get_the_permalink($args->ID),
            'heading' => get_the_title($args->ID),
            'media' => get_the_post_thumbnail($args->ID, 'medium'),
        ];
    };

    return $args;
});