Sage, Gutenberg and ACF Blocks

jasonbaciulis · April 1, 2019, 8:13am

Yes adding full class use statement solved it. Thanks.

blu · May 4, 2019, 5:55pm

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

codepuncher · May 9, 2019, 11:24am

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.

mcdonagg · May 13, 2019, 7:49pm

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?

codepuncher · May 15, 2019, 5:59pm

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

bebjakub · May 17, 2019, 10:14am

Thanks for a lot helpful infos 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…

Jan-Klaas · June 20, 2019, 2:00pm

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

MWDelaney · June 20, 2019, 9:06pm

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

Jan-Klaas · June 21, 2019, 8:17am

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

darthink · July 4, 2019, 4:09am

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?

codepuncher · July 4, 2019, 7:52am

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.

darthink · July 4, 2019, 3:10pm

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?

darthink · July 9, 2019, 1:34pm

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.

alwaysblank · July 9, 2019, 2:45pm

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.

darthink · July 9, 2019, 2:46pm

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

codepuncher · July 9, 2019, 3:03pm

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?

darthink · July 9, 2019, 3:07pm

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?

ushka · August 7, 2019, 4:58pm

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?

ciromattia · September 13, 2019, 4:58pm

Hi there. I’m trying to use @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?

diegofelipece · September 15, 2019, 4:56pm

Just sharing the best solution I’ve found