# Sage, Gutenberg and ACF Blocks

**URL:** https://discourse.roots.io/t/sage-gutenberg-and-acf-blocks/13945
**Category:** sage
**Tags:** blade
**Created:** 2018-10-23T09:01:31Z
**Posts:** 76

## Post 1 by @nicooprat — 2018-10-23T09:01:32Z

Hi there,

After reading this post about the release of the first Gutenberg-compatible ACF version (beta) [https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/](https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/), I played with it and tried to reduce the work to create a custom block to the minimum.

I wrote an article about it here (sorry it’s in french): [https://medium.com/nicooprat/acf-blocks-avec-gutenberg-et-sage-d8c20dab6270](https://medium.com/nicooprat/acf-blocks-avec-gutenberg-et-sage-d8c20dab6270)

The idea is to be able to create a bloc like we’re used to create a custom template: **just create a file with the right name in the right folder, and with the right meta datas as PHP comments.**

I got it working by adding this in my theme: [https://gist.github.com/nicooprat/2c1a642d102425d3131037e5dc156361](https://gist.github.com/nicooprat/2c1a642d102425d3131037e5dc156361)

Then I was able to create a new bloc in `views/blocks` like this: [https://gist.github.com/nicooprat/767973a9a4bd2b3758e527caf4a25dd6](https://gist.github.com/nicooprat/767973a9a4bd2b3758e527caf4a25dd6)

It’s not battle tested as I just discovered it yesterday, but it looks like there’s no limitation in use by doing that. I’m sure the code can be improved though!

What do you think?

---

## Post 2 by @mcdonagg — 2018-10-29T15:10:17Z

I mostly just wanted to post here because no one else has. What you are doing is awesome, for I see this work flow taking over in my agency as we move from using flexible ACF fields to ACF Blocks. Keep up the good work, in the coming months we will be trying this out and working this or a similar process into production. Thank you for a great starting point.

---

## Post 3 by @kellymears — 2018-10-29T19:22:34Z

This is really cool. I’m going to try my hand at this for the site I’m currently building out.

It’s tough going building blocks without React knowledge – involves a lot of poking around in DevTools. Meanwhile people are yelling at me to get stuff done. Lifesaver really :pray:t4:

---

## Post 4 by @nicooprat — 2018-10-31T11:14:02Z

Working more and more with modern frontend framework, I find it harder and harder to work on WordPress themes because **we still lack a component-based approach**. Blade helps to decompose views, but I think the next step would be to have something like [Vue single file components](https://vuejs.org/v2/guide/single-file-components.html). Sage tooling could really help in this way. IMO, what’s missing to get a full component-based approach would be:

- **ACF fields definition embedded** in component file itself: need to hook the way ACF looks for JSON file I guess
- **Javascript per-component** ; Sage per-route approach is useful but limited. Sure we can insert a script tag in our block template but really not optimal
- A way to **chunk CSS & JS in the file** : like Vue allows to use pre/post-processors and import other files. We’d need a specific Webpack loader for this, but it’s really something I’m not good at :slight_smile:

Of course we could use React or anything else and use WP API, but I think **this way makes it lose a lot of what make WordPress useful** : SEO friendly by default, lot of boilerplate (like head tags), variety of plugins, and so on ; So I don’t believe in this solution except for some very specific projects.

PS. Just sharing some thoughts, nothing in the works atm!

---

## Post 5 by @nicooprat — 2018-11-08T11:01:53Z

Scripts can be scoped & managed like this:

```
<section data-{{$block['id']}}>
...
</section>

<script>
  (function($) {
    var $block = $('[data-{{$block['id']}}]')
    ....
  })(jQuery)
</script>
```

Of course it’s pretty simple and misses a lot of features offered by Sage and all of its Webpack tooling. That’s a first step though!

---

## Post 6 by @jure — 2019-01-04T09:23:32Z

Thank you for sharing this @nicooprat. While I tried to use it, it didn’t work for me until I added a few class backslashes to the script (new \DirectoryIterator, and \locate\_template):

Lines **4** and **10**

> <https://gist.github.com/gandalfar/45ef79e5ca96dee3a66032eccc4c5130>

---

## Post 7 by @jure — 2019-01-04T09:58:20Z

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

---

## Post 8 by @thewizardguy — 2019-01-15T23:02:39Z

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?

---

## Post 9 by @thewizardguy — 2019-01-15T23:18:22Z

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](https://stackoverflow.com/questions/46736025/how-do-you-style-the-admin-backend-of-the-acf-advanced-custom-fields-wordpress)

---

## Post 11 by @MWDelaney — 2019-02-05T19:54:45Z

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

---

## Post 12 by @nicooprat — 2019-02-07T08:49:51Z

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

---

## Post 13 by @MWDelaney — 2019-02-07T14:29:32Z

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

---

## Post 14 by @bonlando — 2019-02-18T17:31:52Z

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?

---

## Post 15 by @MWDelaney — 2019-02-18T19:03:20Z

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.

---

## Post 16 by @tedc — 2019-02-21T17:04:28Z

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.

---

## Post 17 by @MWDelaney — 2019-02-22T14:20:23Z

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

---

## Post 18 by @MWDelaney — 2019-02-26T15:05:16Z

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!

---

## Post 19 by @codepuncher — 2019-02-26T21:04:37Z

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

> **[ItinerisLtd/acf-gutenblocks](https://github.com/ItinerisLtd/acf-gutenblocks)**
>
> Contribute to ItinerisLtd/acf-gutenblocks development by creating an account on GitHub.

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?).

---

## Post 20 by @jasonbaciulis — 2019-03-31T15:06:21Z

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

---

## Post 21 by @codepuncher — 2019-03-31T16:10:10Z

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.

---

## Post 22 by @jasonbaciulis — 2019-04-01T08:13:07Z

Yes adding full class use statement solved it. Thanks.

---

## Post 23 by @blu — 2019-05-04T17:55:42Z

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](https://github.com/johnbillion/extended-cpts/wiki/Registering-Post-Types) 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

---

## Post 24 by @codepuncher — 2019-05-09T11:24:04Z

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.

---

## Post 25 by @mcdonagg — 2019-05-13T19:49:45Z

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?

---

## Post 26 by @codepuncher — 2019-05-15T17:59:05Z

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

---

## Post 27 by @bebjakub — 2019-05-17T10:14:50Z

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](https://wordpress.org/plugins/kadence-blocks/). It’s nicely customizable, you can use just what you really need…

---

## Post 28 by @Jan-Klaas — 2019-06-20T14:00:15Z

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

---

## Post 29 by @MWDelaney — 2019-06-20T21:06:44Z

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

---

## Post 30 by @Jan-Klaas — 2019-06-21T08:17:51Z

Hi Michael, after reading this issue [https://github.com/MWDelaney/sage-acf-wp-blocks/issues/14](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/](https://www.advancedcustomfields.com/resources/blocks/). It all makes sense now :-p

---

## Post 32 by @darthink — 2019-07-04T04:09:16Z

**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?

---

## Post 33 by @codepuncher — 2019-07-04T07:52:13Z

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.

---

## Post 34 by @darthink — 2019-07-04T15:10:07Z

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](https://gist.github.com/darthink/10fd1b70007d0847b6469ae545415f66)**  
**(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](https://wordpress.stackexchange.com/questions/342361/sage-wordpress-plugin-namespace-not-found). 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?

---

## Post 35 by @darthink — 2019-07-09T13:34:42Z

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](https://github.com/ItinerisLtd/acf-gutenblocks) page, I get the error. Can plugin namespace talk to theme namespace? The solution must be simple.

---

## Post 36 by @alwaysblank — 2019-07-09T14:45:32Z

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.

---

## Post 37 by @darthink — 2019-07-09T14:46:57Z

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

---

## Post 38 by @codepuncher — 2019-07-09T15:03:55Z

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?

---

## Post 39 by @darthink — 2019-07-09T15:07:28Z

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?

---

## Post 40 by @ushka — 2019-08-07T16:58:31Z

Is there a way to render Blocks outside of the post\_content block? or is this not the use case for blocks, e.g. blocks can only items inside what would be Sage’s area?

Or is it a matter of me rejigging the layout blade.php to remove the container and then work with the application that way?

---

## Post 41 by @ciromattia — 2019-09-13T16:58:20Z

Hi there. I’m trying to use @MWDelaney **[sage-acf-wp-blocks](https://github.com/MWDelaney/sage-acf-wp-blocks)** but I’m stuck.  
I followed the README, the block is being enlisted and I can use it with my custom ACFs, it’s even being rendered by the _sage\_blocks\_callback()_ callback, but the post content isn’t being updated, I only get the post’s data commented out.  
The field **post\_content** in the database is like this:

```
<!-- wp:paragraph -->
<p>Sed ut perspiciatis unde omnis iste natus Sed ut perspiciatis unde omnis iste natus:</p>
<!-- /wp:paragraph -->

<!-- wp:acf/accordion {
    "id": "block_5d7a692a5ebef",
    "name": "acf\/accordion",
    "data": {
        "accordion-items_0_heading": "Name and Lastname",
        "_accordion-items_0_heading": "field_5d7a68c978958",
        "accordion-items_0_body": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.\r\n\r\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.",
        "_accordion-items_0_body": "field_5d7a68dd78959",
        "accordion-items_1_heading": "Name and Lastname",
        "_accordion-items_1_heading": "field_5d7a68c978958",
        "accordion-items_1_body": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.",
        "_accordion-items_1_body": "field_5d7a68dd78959",
        "accordion-items": 2,
        "_accordion-items": "field_5d7a689778957"
    },
    "align": "",
    "mode": "edit"
} /-->
```

I even tried to What am I missing?

I even tried with @codepuncher’s plugin but the issue is the same, so I think that there’s something in my environment.  
I’m using Sage 9 (latest) with WP 5.2.3 and ACFPro 5.8.4.

Any hint?

---

## Post 42 by @diegofelipece — 2019-09-15T16:56:53Z

Just sharing the best solution I’ve found :slight_smile:

> **[MWDelaney/sage-acf-wp-blocks](https://github.com/MWDelaney/sage-acf-wp-blocks)**
>
> Composer library for generating ACF Gutenberg blocks from templates. - MWDelaney/sage-acf-wp-blocks

---

## Post 43 by @ciromattia — 2019-09-16T07:34:01Z

Uh… I don’t get it, it’s the one I’m using and the one that’s giving me problems :confused:

---

## Post 44 by @stuartcusackie — 2019-09-16T14:51:23Z

For the last couple of months that package has been giving me this error:  
`Undefined index: className`

So I’ve been using this fork instead:  
`composer require "orditeck/sage9-acf-wp-blocks"`

---

## Post 45 by @ciromattia — 2019-09-17T14:22:15Z

Nailed it, at last.  
`get_the_content()` doesn’t pass through the `the_content` filter and the blocks won’t render; to make them back in I had to change all `{!! get_the_content() !!}` occurrences in my code with `@php the_content() @endphp`.

---

## Post 46 by @Jan-Klaas — 2019-09-19T07:42:37Z

Are there any resources on the block description data? For example what are the possible values for mode, align, … What’s the use of supportsalign, supportsmode, supportsmultiple (I don’t see a difference when changing those values).

---

## Post 47 by @Jan-Klaas — 2019-10-04T13:06:38Z

You could use MWDelaney’s package, he stated somewhere we should use the dev-master branch for now. That solves the className issue as well.

---

## Post 48 by @codepuncher — 2019-10-10T22:13:55Z

For those that are interested, I’ve have released some new versions today for acf-gutenblocks.

0.2.1 changes:

> **[ItinerisLtd/acf-gutenblocks](https://github.com/ItinerisLtd/acf-gutenblocks/compare/0.2.0...0.2.1)**
>
> Contribute to ItinerisLtd/acf-gutenblocks development by creating an account on GitHub.

  
0.3.0 changes:  

> **[ItinerisLtd/acf-gutenblocks](https://github.com/ItinerisLtd/acf-gutenblocks/compare/0.2.1...0.3.0)**
>
> Contribute to ItinerisLtd/acf-gutenblocks development by creating an account on GitHub.

New features:

- allow choosing post types (cheers @TangRufus)
- allow customising the blade callback method (useful for Sage 10 - thanks @alwaysblank)

Also contains some bug fixes from other contributors.

---

## Post 49 by @codepuncher — 2019-10-16T21:36:24Z

Just released 0.4.0 which now lets you create template variables in your Block class like so:

```
// Blocks/Testimonial/Testimonial.php
public function with(): array
{
    return [
        'title' => (string) get_field('title'),
        'items' => (array) get_field('items'),
    ];
}
```

```
{{-- Blocks/Testimonial/views/frontend.blade.php --}}

@unless(empty($title))
    <h2>{{ $title }}</h2>
@endunless
@foreach($items as $item)
    <p>{{ $item['title'] }}</p>
@endforeach
```

Also updated the readme a bit as it had some issues.

---

## Post 50 by @Bezelinja — 2019-10-23T13:38:53Z

@ciromattia I’ve been on this for several hours and can’t figure it out. Can You write a quick tutorial and how you got it to work? I’ve got his plugin installed but I’m doing something wrong apparently because blade doesn’t work. I have blade files in ‘views/blocks/’ but blocks are not being created. Not sure why. Would you be so kind to walk me from point a) to point z). I’d love to use Gutenberg blocks for my next project. Thanks in advance.

---

## Post 51 by @Bezelinja — 2019-10-23T20:24:15Z

I figured it out. I had ACF in a custom directory. :grin:

---

## Post 52 by @jameskendy — 2019-10-23T21:56:34Z

Can you also please guide me how can I create a block template? I am doing the same using this resource [https://wpitech.com/create-wordpress-gutenberg-block-templates/](https://wpitech.com/create-wordpress-gutenberg-block-templates/) but it’s giving an error and I am having some programming lines in front end. This is the code  
add\_action( ‘init’, function() {  
$args = array(  
‘public’ =\> true,  
‘label’ =\> ‘News’,  
‘show\_in\_rest’ =\> true,  
‘template\_lock’ =\> ‘all’,  
‘template’ =\> array(  
array( ‘core/paragraph’, array(  
‘placeholder’ =\> ‘Breaking News’,

---

## Post 53 by @abgregs — 2019-10-28T16:17:18Z

Just wanted to say thanks for this suggestion. I was getting the same error and using this package seems to have solved it for me as well. Thanks @MWDelaney @nicooprat and everyone else for all the effort going into making it this a possibility. Extremely useful!

---

## Post 54 by @Jirayu — 2019-11-28T03:53:49Z

I prefer to have a single file that work out of the box without any hook required. just like Sage 9 controller. So I come up with this. [https://github.com/WP63/ACF-Block-Loader](https://github.com/WP63/ACF-Block-Loader)

You just need a class file (a basic controller) and template file. that’s all. no need for hooking or anything (the code behind the scene is a bit hurt. feel free to improve.)

At the moment, it supports only few basic configuration. I’m changing this to support all configuration soon.

The Package is intended to use with Sage 9 but should as well works with anything. theoretically.

---

## Post 55 by @dghez — 2020-03-23T11:04:01Z

Hey there (@MWDelaney), I’m using [GitHub - MWDelaney/sage-acf-wp-blocks: Composer library for generating ACF Gutenberg blocks from templates. Intended for use with Roots/Sage (http://roots.io)](https://github.com/MWDelaney/sage-acf-gutenberg-blocks) but I noticed that If I go to the preview mode in the Gutemberg Block, the style isn’t enqueued correctly.

![image](https://discourse.roots.io/uploads/default/original/2X/7/74c62c968a1d20a3de264b707e16fbb50881f237.png)

How can I fix it?  
I noticed you put

```
EnqueueStyle: styles/style.css
  EnqueueScript: scripts/script.js
```

in the block definition but how can that suppose to work? In `dev` mode there isn’t any style.css file, and after the build the css has his own hash.

Am I missing something?

---

## Post 56 by @jackkemmish — 2020-04-28T17:31:31Z

Did you manage to get anywhere with this at all? I’m interested to know if you found a way around this. Thanks

---

## Post 57 by @Log1x — 2020-04-30T21:22:38Z

If you’re using Sage 10, you can check out [https://github.com/Log1x/acf-composer](https://github.com/Log1x/acf-composer) for handling blocks and everything else ACF.

---

## Post 58 by @dghez — 2020-05-19T13:12:03Z

Nope sorry, haven’t found a way actually

---

## Post 60 by @OyvindLille — 2020-06-12T12:19:42Z

Anyone find a good solution for enqueue\_assets per block with acf-gutenblock? @codepuncher?  
I know about this one:

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

But the best would be having a way to use a sass-way. Perhaps a block-style folder in dist? Idk :slight_smile:

---

## Post 61 by @nicooprat — 2020-06-13T14:42:13Z

@OyvindLille Indeed with this snippet the style element will be printed for each occurrence of the block and won’t be processed by SASS or PostCSS or anything, which is far from perfect.

The best scenario I can think of is using this way for only configurable things, like colors in this example, and have a Webpack loader that extract this part of the block to treat it like any other CSS file (a bit like Vue does this with Single File Component). Unfortunately I’m not good enough with Webpack to achieve this :slight_smile:

From my experience, using Tailwind made it pretty usable so far, as it’s only using CSS classes, so the block doesn’t need to be processed, but it can’t cover 100% of the cases.

---

## Post 62 by @dghez — 2020-07-21T09:38:07Z

Does anyone uses the plugin of @MWDelaney?  
I’m actually using his plugin to manage Blade/ACF block but since I don’t have any need to use `enqueueStyle` & `enqueueScript` I’d like to leave them empty but it causes me problems on loading. The site will continue spinning for several seconds and I get some errors in the console

 ![Screenshot 2020-07-21 at 11.33.49](https://discourse.roots.io/uploads/default/original/2X/8/8f37625ff5f0e1c7ebbe5e8788933601efb388d0.png)

This cause a delayed parsing of the JS file, the site waits a lot before run the main js file.  
How do you manage those properties?

Thanks :smiley:

---

## Post 63 by @djrasmusp — 2020-07-24T11:19:43Z

@dghez, Have you remove the EnqueueStyle, EnqueueScript from the {{ – -- }} in the top or are they just empty ? if They are empty, but still listed remove them, and your problem will be solved :wink:

---

## Post 64 by @Manuel_Fernandez — 2020-11-14T17:13:51Z

> [@ciromattia](#):
>
> Uh… I don’t get it, it’s the one I’m using and the one that’s giving me problems :confused:

Hi! I have this issue and I don’t know what to do to fix it. I am going crazy. :unamused:  
I try change get\_the\_content() for {!! get\_the\_content() !!} in blade pages but not working.

On the frontpage show this but not render the block.

```
<!-- wp:acf/testimonial {
    "id": "block_5fb00bad09b7c",
    "name": "acf\/testimonial",
    "data": { ....
```

Can you help me?  
I use ACFPro 5.9.3, SAGE 9 and WP 5.5.3

---

## Post 65 by @Manuel_Fernandez — 2020-11-26T22:08:48Z

I found the solution a few days ago and forgot to comment. :sweat_smile:

I was including the rendercallback function in app/setup.php. I move the function to functions.php and it works fine

---

## Post 66 by @OyvindLille — 2021-01-27T14:34:38Z

Hi!  
Getting som Fatal Errors… the weird thing is everything works fine locally, but AcfGutenblocks causes a Fatal Error when i deploy through ftp. Yes, I’ve tried both composer install --no-dev and running composer on server on both Sage and AcfGutenblocks, but no luck.

Any suggestions?

Link to a gist with the error:  
[Fatal Error Class App\Blocks\](https://gist.github.com/oyvindlille/0db152526f4def955a1d9af392c4a531)

---

## Post 67 by @alwaysblank — 2021-01-27T17:21:18Z

Frequently when something works locally but not on production, it’s because your local filesystem is non-case-sensitive and your remote filesystem is case-sensitive. You should make sure git is configured for case-sensitivity and that your files have the correct cases.

---

## Post 68 by @OyvindLille — 2021-01-28T07:17:49Z

Ah! Thank you! Of course! For some reason I had my class-file as lowecase… :sweat_smile: I blame working 14,5 hours that day :see_no_evil:

---

## Post 69 by @mefusia — 2021-02-11T22:38:54Z

I know this is an old post, but maybe you remember the problem and solution?

I have:

- copied the ACF Pro plugin to /resources/assets/acf
- included it in setup.php using this code [https://www.advancedcustomfields.com/resources/including-acf-within-a-plugin-or-theme/](https://www.advancedcustomfields.com/resources/including-acf-within-a-plugin-or-theme/)
- ran ‘composer require “mwdelaney/sage-acf-gutenberg-blocks”’
- created a ‘blocks’ folder in /resources/views/
- added a ‘my-block.blade.php’ block with this example code [https://github.com/MWDelaney/sage-acf-wp-blocks](https://github.com/MWDelaney/sage-acf-wp-blocks)

and getting “No block types exist” in ACF

I’m working on Sage 9 and the code seems to be working fine when ACF is working as a plugin and not included in the theme itself.

---

## Post 70 by @diomededavid — 2021-05-04T19:37:15Z

I have an ACF Gutentberg block setup using the module you had created. It sets up ok, I am running into an issue where when I add the block in my page I cannot edit the fields.

My Code:  
{{–  
Title: Icon Card  
Description: Customer testimonial  
Category: formatting  
Icon: admin-comments  
Keywords: card  
Mode: edit  
Align: left  
PostTypes: page post  
SupportsMode: true  
SupportsInnerBlocks: true  
SupportsAlignContent: false  
SupportsMultiple: false  
–}}  
@php  
$icon = get\_field(‘icon’);  
@endphp

 {!! get\_field('card\_description') !!}

---

## Post 71 by @l77 — 2021-05-04T20:32:19Z

Also having the same problem - everything working except being able to add data within blocks to pages - any suggestions on what to do to fix would be great…

---

## Post 73 by @diomededavid — 2021-05-05T02:50:52Z

I realized my issue. A field I created was called `icon` which there is a field in the settings for `icon`, which caused a conflict. In short do not use field names that are the same as what is used for the settings.

---

## Post 74 by @l77 — 2021-05-06T21:08:17Z

Thanks - this was really helpful - i had a similar problem - i think caused by testing some other methods for adding blocks - i ran a fresh install & it’s all working!

---

## Post 75 by @diomededavid — 2021-05-07T03:18:37Z

What version of sage did you end up at? And are you running Bootstrap? How is it working?

---

## Post 76 by @l77 — 2021-05-07T07:56:52Z

I’m using the latest version of sage with bootstrap. Really enjoying using it so far - i think it’s a nicer / more flexible interface for adding content and it’s a lot easier / faster to work with than flexible content fields. How about you?  
Thanks @MWDelaney