Roots Discourse

Sage, Gutenberg and ACF Blocks

blade
#7

Another small bit to change:

	'render_callback' => function( $block ) {
	    $slug             = str_replace( 'acf/', '', $block['name'] );
	    $block['slug']    = $slug;
	    $block['classes'] = implode( ' ', [ $block['slug'], $block['className'], $block['align'] ] );
	    echo \App\template( "blocks/${slug}", [ 'block' => $block ] );
	},

Since it wasn’t picking up callback function. Probably an issue with how PHP 7.3 calls namespaced functions inside setup.php.

1 Like

#8

I’ve gotten custom blocks to work, and even render properly in the preview window during page editing, but I can’t seem to find out how to use blade in the template files. It never processes the blade syntax, and I’m forced to use regular ol’ PHP for my custom blocks, which is a real bummer. Any idea where I might have gone wrong?

0 Likes

#9

Nevermind! I finally see where I went wrong.

echo \App\template("blocks/${slug}", ['block' => $block]);

In fact, if anyone is having a hard time getting the style to show up properly in the preview window, just load your main.css file like so:

function my_acf_admin_head() {
    ?>
    <style type="text/css">

        <?php echo file_get_contents(get_theme_file_path() . "/dist/styles/main.css"); ?>

    </style>
    <?php
}

add_action('acf/input/admin_head', 'my_acf_admin_head');

I didn’t come up with that, just spreadin the word. Credit to https://stackoverflow.com/questions/46736025/how-do-you-style-the-admin-backend-of-the-acf-advanced-custom-fields-wordpress

2 Likes

#11

@nicooprat would you mind if I packaged your code up into a composer package for Sage? I’d like to be able to install it quickly and easily on projects. We could also probably feature it on the Roots site as a suggested add-on.

I’ll give you full credit for the code.

8 Likes

#12

No problem of course, that’s a great idea! Glad it’s useful :wink:

2 Likes

#13

Fantastic. I’ve published an early version here: https://github.com/MWDelaney/sage-acf-gutenberg-blocks. I’ll write something more substantial about it after I test it more thoroughly. Thank you!

9 Likes

#14

This works perfect! Thank you very much!

The only issue i’m having is that any of the public functions for my variables declared with in my App controller aren’t getting recognized.

Is there something I need to do so that the new blocks directory can recognize them?

0 Likes

#15

This is much more @withjacoby’s area than mine, but my understanding is that Controller doesn’t yet work within the scope of Gutenberg blocks.

0 Likes

#16

changing

    function sage_blocks_callback($block)
{
  // Set up the slug to be useful
    $slug = str_replace('acf/', '', $block['name']);
    // Set up the block data
    $block['slug'] = $slug;
    $block['classes'] = implode(' ', [$block['slug'], $block['className'], 'align'.$block['align']]);
    // Use Sage's template() function to echo the block and populate it with data
    echo \App\template("blocks/${slug}", ['block' => $block]);
}

with

function sage_blocks_callback($block)
{
  // Set up the slug to be useful
    $slug = str_replace('acf/', '', $block['name']);
    // Set up the block data
    $block['slug'] = $slug;
    $block['classes'] = implode(' ', [$block['slug'], $block['className'], 'align'.$block['align']]);
    // Use Sage's template() function to echo the block and populate it with data
$data = collect(get_body_class())->reduce(function ($data, $class) use ($template) {
			return apply_filters("sage/template/{$class}/data", $data, $template);
    	}, []);
    	
		$data['block'] = $block;
    echo \App\template("blocks/${slug}", $data);
}

should work.

1 Like

#17

Awesome. I’ll add this to the library as soon as I can!

1 Like

#18

Turns out this doesn’t work because $template isn’t defined. I’m sure it’s solvable and I’ll look into as I have time. Just wanted to get back to you!

0 Likes

#19

Have been working on a different approach which we use in our office (still inspired on work by @nicooprat), which I wanted to share:

Block registration is entirely different, but it provides “Controller” functionality for your ACF Blocks.
Supports plain PHP templates and Blade. You can also create your own Block constructor (maybe you want to use Twig + Controller?).

6 Likes

#20

I’m a bit surprised that this thread doesn’t get more attention. Not much love for Gutenberg I guess, even with very promising things ACF is doing :slight_smile:

@nicooprat thanks for starting this discussion and sharing your work. it’s working beautifully!

@codepuncher looks like you figured out “controller” functionality so now this workflow has everything to start creating blocks. Though I’m having trouble setting it up and get this error:

Fatal error: Uncaught Error: Class 'App\Testimonial' not found in /srv/www/jasonbaciulis.com/current/web/app/plugins/acf-gutenblocks/src/Plugin.php on line  *39*

Where do I register blocks with this code?

add_filter('acf_gutenblocks/blocks', function (array $blocks): array {
    $new_blocks = [
        Testimonial::class,
    ];
    return array_merge($blocks, $new_blocks);
});

I placed it in setup.php.

Also, is there a difference where I put Blocks/ folder? Currently, it’s inside the app.

Thanks

0 Likes

#21

The block directory location doesn’t matter as the code will run it from wherever the class is located.

Have you got the full class use statement in setup.php? I should update the docs.

Try this:

use App\Blocks\Testimonial\Testimonial;

add_filter('acf_gutenblocks/blocks', function (array $blocks): array {
    $new_blocks = [
        Testimonial::class,
    ];
    return array_merge($blocks, $new_blocks);
});

Note how I added Testimonial twice.
Hope that works.

2 Likes

#22

Yes adding full class use statement solved it. Thanks.

0 Likes

#23

Hi @codepuncher, thanks so much for making this code available.

I’ve used your demo to set up an acf block and it functions correctly on posts and pages :+1: but on custom post types it does not appear in the Add Block selector. Is there something I need to add to my CPT to allow an acf block to appear?

I’m using Extended-CPTs to register the post types and add gutenberg support as follows…

add_action( 'init', function() {

    register_extended_post_type( 'train', [

      # Add Gutenberg editor support:
		  'show_in_rest' => true,
    ]);
  } );

I use your demo code to register the block and it loads without any errors on normal pages and posts but not my CPT… any ideas?

Thanks

0 Likes

#24

Hi @blu, I can’t see why it wouldn’t work but if you found open an issue on GitHub I’ll take a look when I get a chance.

0 Likes

#25

How are people handling enqueuing scripts and styles? I am still just dipping my toes into using ACF Blocks with Sage 9, and am trying to figure out the best way to have block level styles and scripts enqueued. Or am I looking at this wrong and should I be just enqueuing the main.css and main.js and using those?

0 Likes

#26

@nicooprat has suggested you can do block level assets within your block like so:

<style type="text/css">
 [data-{{$block['id']}}] {
   background: {{get_field('color')}};
 }
</style>

Checkout his Medium post.

I am planning to add per block asset enqueing to my acf-gutenblocks package at some point, though (PRs welcome!).

I think adding your styles and scripts to your main site files are fine if you don’t mind them being loaded everywhere.

Generally though for performance it is best to enqueue per block assets.

0 Likes

#27

Thanks for a lot helpful infos :slight_smile: Anyway if you are struggling with Gutenberg columns and breakpoints, columns ordering etc. After hours of searching I found this great piece Kadence blocks. It’s nicely customizable, you can use just what you really need…

0 Likes