How to use blade template to render Carbon Fields Blocks?

sage
1

Hi there,

I’m new to sage and new to Carbon Fields as well.

What I’m trying to do:
Use blade template to render carbon fields created blocks.

My attempt:

Block::make(__('My Shiny Gutenberg Block'))
            ->add_fields(
                array(
                Field::make('text', 'heading', __('Block Heading')),
                Field::make('image', 'image', __('Block Image')),
                Field::make('rich_text', 'content', __('Block Content')),
                )
            )
            ->set_render_callback(
                \Roots\view('blocks.shiny')->render()
            );

For now I just created a folder inside ‘views’ called blocks and in it a file ‘shiny.blade.php’ with a simple ‘Hello world’ just for a test.

I got an error saying that render_callback must be a callable.

How do I use blade template in the set_render_callback?
Am I approaching this correctly? Or is there a best practice to render block content with sage?

Best regards,

Desar

2

I suspect you will have to do something to handle the inputs to the render callback. Quick search turns up this signature
function ( $fields, $attributes, $inner_blocks )

->set_render_callback() accepts a callback, which should output the HTML markup for the block. The callback function will be called with the following arguments:

  • $fields, an array with the entered data in the block.
  • $attributes, an array with the attributes of the block like custom CSS class, alignment, etc.
  • $inner_blocks, a string with the content of all nested blocks.

You are pretty close though I think, remove the () on render so you are passing the method not calling the method (I think that would work)

... 
->set_render_callback(
                \Roots\view('blocks.shiny')->render
            );

Or you might need an array, [\Roots\view('blocks.shiny'),'render'] or just wrap the view render call in a function function() { \Roots\view('blocks.shiny')->render() }

But your view will likely not receive any of the data. You might check out the acf-composer package by Log1x it does most of the heavy lifting for ACF blocks in sage. I’m sure there is a similar handler for its view call.

1 Like
3

Thank you for blazingly fast response!
I managed to call the template, but you’re right, the view doesn’t have any data.
I’ll checkout the acf-composer package.

Thanks a bunch!

4

I took a closer look at the docs, it appears that $fields will be an array and view accepts an array.

You could probably do this:

->set_render_callback( function($fields, $attributes, $inner_blocks) {
                $fields['block'] = $attributes; // pass the attributes in as $block
                 \Roots\view('blocks.shiny', $fields)->render();
              }
            );

Then your fields should be available as $heading, $image, and $content`

no clue how you’d handle inner blocks though.

5

Thank you for your help.
However, I’m out of luck with this.
The only way it would show up is if I do echo on the \Roots\view.

I’ve moved on and use acf-composer and acf by Log1x.

Once again thank you :slight_smile:

6

Why not echo?

Seems reasonable, but I thought the render should be outputting it.

ACF might be worth it though, I use it. Hadn’t actually heard of Carbon Fields, I’m going to check it out now.

Also you should check out https://www.acf-extended.com/ it improves it quite a bit
and https://www.awesomeacf.com/ is another great resource for extensions

7

OK. I finally got it working!!!

Thanks to your comment ‘Why not echo?’, I continued digging.

I found this link sage-acf-wp-blocks/sage-acf-gutenberg-blocks.php at 50118a0a2d94ba2aa088f5a27d6f7dc818bc1245 · MWDelaney/sage-acf-wp-blocks · GitHub that gave me an idea of how to use the blade template to render the carbon fields block.

Here is how I did it.

->set_render_callback( function ( $fields, $attributes, $inner_blocks ) {
        $fields['block'] = $attributes;
	    echo \Roots\view('components.test', ['fields' => $fields])->render();
	} );

Thank you for the insight EHLOVader!! You rock!

4 Likes