Roots Discourse

Sage, Gutenberg and ACF Blocks

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

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

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

Yes adding full class use statement solved it. Thanks.

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

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.

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?

@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.

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…

Is this supposed to work out of the box?
I required the code in the theme directory via composer, and added the example Testimonial block in resources/views/blocks/testimonial.blade.php. It ain’t available as a Gutenberg block though.

Wordpress 5.2.2
ACF 5.8.1

It should indeed work out of the box. It’s working for me on quite a few sites now.

How are you confirming the block isn’t showing in Gutenberg? The example Testimonials block, for instance, should appear in “Formatting”.

Hi Michael, after reading this issue https://github.com/MWDelaney/sage-acf-wp-blocks/issues/14, I did some testing. Your plugin works in ACF PRO 5.8.1 but not in the free ACF 5.8.0 or 5.8.1.

Perhaps worth mentioning in the README. Would be nice to see this working in the free version too, though. I create and maintain a lot of sites running the free ACF version.

EDIT: I wasn’t aware ACF Blocks was PRO only: https://www.advancedcustomfields.com/resources/blocks/. It all makes sense now :-p

1.)
Any ideas how I can solve this error?

Fatal error: Uncaught Error: Class 'Itineris\AcfGutenblocks\Plugin' not found in /app/public/wp-content/plugins/acf-gutenblocks/acf-gutenblocks.php:32
Stack trace:
#0 /app/public/wp-includes/class-wp-hook.php(286): Itineris\AcfGutenblocks\{closure}('')
#1 /app/public/wp-includes/class-wp-hook.php(310): WP_Hook-&gt;apply_filters('', Array)
#2 /app/public/wp-includes/plugin.php(465): WP_Hook-&gt;do_action(Array)
#3 /app/public/wp-content/plugins/advanced-custom-fields-pro/acf.php(334): do_action('acf/init')
#4 /app/public/wp-includes/class-wp-hook.php(286): ACF-&gt;init('')
#5 /app/public/wp-includes/class-wp-hook.php(310): WP_Hook-&gt;apply_filters(NULL, Array)
#6 /app/public/wp-includes/plugin.php(465): WP_Hook-&gt;do_action(Array)
#7 /app/public/wp-settings.php(525): do_action('init')
#8 /app/public/wp-config.php(76): require_once('/app/public/wp-...')
#9 /app/public/wp-load.php(37): require_once('/app/public/wp-...')
#10 /app/public/wp-blog-header.php(13): require_once('/app/public/wp-...')
#11 /app/public/index.php(17): require('/app in /app/public/wp-content/plugins/acf-gutenblocks/acf-gutenblocks.php on line 32

I put the following code into my setup.php:

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

If I remove the code above, my application works correctly.

2.)
Also, do I define ACF fields inside of the controller for the block? So, for example, add to app/blocks/testimonial/testimonial.php the protected function registerFields(): array {} code?

If you scroll up this thread a bit, you’ll see a comment from @jasonbaciulis and an answer regarding your issue.
As for field registration, you can do it anywhere you want, but registerFields is preferred since it keeps them organised with your block.

Thanks a lot for your response! Crazy enough, I did see that already and added it, and got this error.

My structure:

app
– Blocks
– -- Testimonial
– -- – Views
– -- – -- Frontend.php
– -- – Testimonial.php
– setup.php

I’ve got your plugin installed and activated. In my setup.php I have the following code:


Link to Gist with code here
(setup.php, Testimonial.php, Frontend.php)


You’ll notice also I put protected function registerFields(): array {} into the bottom of Testimonial.php, I hope that’s a normal place to put it.

For the setup namespace, I’ve tried different variations:
use Blocks\Testimonial\Testimonial;
use app\blocks\testimonial\testimonial; (with lower case filenames also)

Thanks again for taking a look, this is very helpful!

Edit
The best idea I’ve got so far is that I’ve installed the plugin ( composer require itinerisltd/acf-gutenblocks ) to the directory sitename/app/public/wp-content/plugins/ and maybe the files in the Sage theme aren’t picking up the namespace because it’s in the main WordPress plugins.

Should I also composer require in the theme also? It’s not documented exactly which directory it should go in. It might be common knowledge, but I’m new to the WP ecosystem, so I like to be exactly sure. (Please see Gist code above)

Here’s my Stack Overflow question. I’m really looking to find a solution to this, I feel it must be something simple I’m overlooking. My blocks can be in my theme right, while the plugin lives in the plugin folder, correct? And all the namespaces will talk to each other?

I think I’ve documented my question above well enough for someone to take a quick look at my Gist code and be able to identify why I get the error Fatal error: Uncaught Error: Class 'Itineris\AcfGutenblocks\Plugin' not found in /app/public/wp-content/plugins/acf-gutenblocks/acf-gutenblocks.php:32.

I’m sure there’s someone out there that’s successfully implemented @codepuncher plugin. It’d be super cool if someone would be willing to help me.

And yes, from the beginning I had already tried use App\Blocks\Testimonial\Testimonial; this namespace. I’ve ran the composer command to install the plugin, in the main WordPress plugins folder, I’ve activated it. But using the exact code from the ItinerisLtd/acf-gutenblocks page, I get the error. Can plugin namespace talk to theme namespace? The solution must be simple.

From your error it looks like the plug-in itself is having trouble autoloading its own classes, which is really weird. I’m using the plug-in currently, and never ran into this issue. Are you using Bedrock? Have you tried removing and reinstalling the plug-in? The only thing I can think of is that your composer is misconfigured somehow so it isn’t properly generating an autoloader for the plug-in.

Thanks for the response, @alwaysblank. I am not using Bedrock. I’ll try reinstalling the plugin!

I’ve only tested it on Bedrock as that is what I’ve intended it to use.
Going off of that and comments above, I can only assume the issue relates to autoloading with Composer.
Have you installed it using Composer or adding it the traditional way?

I installed with composer, then went to the WP Dashboard to activate. So, it seems like the missing thing here is that I should be running Bedrock.

I originally wanted to run Bedrock, but all the tutorial setup videos had people editing all these configurations and even they were getting stumped, so I decided not to use it. But, perhaps it’s really not that complicated to setup? I use Local by Flywheel for a local server, so it’s pretty easy. My fear was that I might run into issues locally or during deployment.

Can I “upgrade” a normal Sage project to Bedrock, or would I have to start the project over?