Sage, Gutenberg and ACF Blocks

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

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

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

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

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.

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

0.2.1 changes:


0.3.0 changes:

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.

4 Likes

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.

3 Likes

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

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

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/ 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’,

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!

1 Like

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

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.

2 Likes

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) but I noticed that If I go to the preview mode in the Gutemberg Block, the style isn’t enqueued correctly.

image

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?

1 Like

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

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

6 Likes

Nope sorry, haven’t found a way actually

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:

1 Like

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

1 Like

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

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:

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