Sage, Gutenberg and ACF Blocks

blade

#1

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

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

Then I was able to create a new bloc in views/blocks like this: 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?


#2

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.


#3

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:


#4

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


#5

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!