Creating Gutenberg blocks using ACF Blocks

Maciej Palmowski

What is Gutenberg?

What is Gutenberg?

  • a block editor that replaced TinyMCE
  • it changes the way we create administration panel blocks (ReactJS)
  • it gives us more flexability

Is creating Gutenberg blocks simple?

Is creating Gutenberg blocks simple?

Let's use create-guten-block because, based on author info:

  • it doesn't need any configuration
  • we can create blocks in minutes

Is creating Gutenberg blocks simple?

Installation

                                    
npx create-guten-block my-block
cd my-block
npm start
                                    
                                

Is creating Gutenberg blocks simple?

                                    ├── .gitignore
├── plugin.php
├── package.json
├── README.md
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
└── src
    ├── block
    |  ├── block.js
    |  ├── editor.scss
    |  └── style.scss
    ├── blocks.js
    ├── common.scss
    └── init.php
                                    
                                

Is creating Gutenberg blocks simple?

Only two steps to go:

  • learn React
  • use newly acquired skills and create a block

Is it worth it?

YES:

  • That's the only way to use Gutenberg's full potential
  • We won't be dependant on some 3rd party plugins or libraries

But is it necessary?

NO:

  • most blocks we'll create are quite simple - it's passing some data and showing it

How can we achieve this?

  • ACF Blocks
  • Carbon Fields
  • Lazy Blocks
  • Blocks Lab

ACF Blocks - possibilities

  • it works exactly as normal ACF - but within a block
  • we have a real time preview of each block in admin panel
  • it really makes your clients happy

Cons

  • ACF Blocks is quite limited in terms of user interface
  • some advanced Gutenberg functions are missing
  • Gutenberg is changing quite fast and ACF Blocks will always be a step behind
  • ACF Blocks is only included in the PRO version

What we will achieve

Let's create a block

                                    add_action('acf/init', 'my_acf_init');
function my_acf_init() {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type([
            'name'  => 'trips',
            'title' => __('Trips'),
            'description' => __('Promoted trips'),
            'render_callback' => 'my_acf_block_render_callback',
            'category' => 'layout',
            'icon' => 'location-alt',
            'keywords' => [ 'trips', 'flights' ],
        ]);
    }
}
                                

Let's create a block

Let's create a block

                                    function my_acf_block_render_callback( $block, $content='', $is_preview ) {
    $context = Timber::get_context();
    $context['block'] = $block;
    $context['fields'] = get_fields(); 
    $context['is_preview'] = $is_preview;
    
    Timber::render( 'views/blocks/trip-block.twig', $context );
}
                                

Field Group

Admin panel

It works :)

But some stuff is missing:

  • block looks different compared to the frontend version
  • JavaScript doesn't work

Adding own scripts and styles

                                function my_acf_block_editor_style() {
    wp_enqueue_style(
        'trips_css',
        get_template_directory_uri() .'/dist/css/editor.css'
    );
    wp_enqueue_script(
        'trips_js',
        get_template_directory_uri() .'/dist/js/editor.js'
    );
}
add_action( 'enqueue_block_editor_assets', 'my_acf_block_editor_style' );
                            

Adding own scripts and styles

                                acf_register_block_type([
    'name'  => 'trips',
    'title' => __('Trips'),
    'description' => __('Promoted trips'),
    'render_callback' => 'my_acf_block_render_callback',
    'category' => 'layout',
    'icon' => 'location-alt',
    'keywords' => [ 'trips', 'flights' ],
    'enqueue_style' => get_template_directory_uri() .'/dist/css/editor.css',
    'enqueue_script' => get_template_directory_uri() .'/dist/js/editor.js',
]);
                            

Some things that are worth to remember

  • it's not TinyMCE - the editor is not an iframe
  • be really careful about styling global elements like body, html etc
  • it's a good practice to make all the url non-clickable

Some things that are worth to remember

  • wrap your block with a div with some class name
  • create a separate style just for the admin panel, but include the styles used on the frontend
                                        .gutenberg-sasquatch-block {
    @import "components/colors";
    @import "components/mixins";
    @import "components/standards";
    @import "components/typo";
    @import "components/buttons";

    @import "layouts/index";
}
                                

Adding JavaScript

It doesn't work because:

  • our scripts don't launch on block preview

Adding JavaScript

                                    window.acf.addAction('render_block_preview', function( $el, attributes ){
    $.bridget( 'packery', Packery, $ );
    if ( $( '.offers-list').length ) {
        imagesLoaded( $( '.offers-list' ), function() {
            $( '.offers-list' ).each( function( i ) {
                $( '.offers-list' ).packery(
                    {
                        itemSelector: '.item',
                    }
                );
            });
        });
    }
});
                                

It's alive :)

It's alive :)

Conclusions

  • Gutenberg is in very active development - it may sometimes results with some problems with 3rd party plugins like ACF Blocks
  • ACF Blocks has limitations when comes to creating interfaces - you won't be able to use context menus or sidebar the way you could do it with pure Gutenberg

One more thing...

What if...

  • we could only focus on block creation - without writing those boring PHP functions

Introducting Timber ACF WP Blocks

Example block

                                {#
    Title: Testimonial
    Description: Customer testimonial
    Category: formatting
    Icon: admin-comments
    Keywords: testimonial quote "customer testimonial"
    Mode: edit
#}

{{ fields.testimonial }}

{{ fields.author }}

Introducting Timber ACF WP Blocks

Děkuji :)Maciej Palmowski

email m.palmowski@freshpixels.pl

wordpress.org profiles.wordpress.org/palmiak

github github.com/palmiak

Timber Collaborator github.com/timber/timber

I work at WPMU DEV