Sage, Gutenberg and ACF Blocks

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

1 Like
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…

28

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

29

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

30

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

32

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?

33

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.

34

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?

35

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.

36

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.

37

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

38

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?

39

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?

40

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?

41

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?

42

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

43

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

44

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"

1 Like
45

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.

1 Like
46

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

1 Like