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

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

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

Installation

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

                                    ├── .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
                                    
                                

Only two steps to go:

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

YES:

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

NO:

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

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

• 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

• ACF Blocks is quite limited in terms of user interface
• some Gutenberg features 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

                                    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' ],
        ]);
    }
}
                                

You can see all the options here: https://www.advancedcustomfields.com/resources/acf_register_block/

                                    <?php function my_acf_block_render_callback( $block, $content = '', $is_preview = false ) {
    // do stuff here
}

                                

                                    

    

        

            

                
<?php the_field( 'name' ); ?>
                <?php the_field( 'description' ); ?>
            
        
        

            

                FROM <?php the_field( 'price' ); ?> EUR
            
        
    


                                

But some stuff is missing:

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

                                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' );
                            

                                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',
]);
                            

• 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
• if the block is using some API - mock or cache data

• 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";
}
                                

It doesn't work because:

• our scripts don't launch on block preview

                                    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',
                    }
                );
            });
        });
    }
});
                                

• 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

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

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

    
{{ fields.testimonial }}
    
    {{ fields.author }}
    

You can read more about Timber ACF WP Blocks on https://github.com/palmiak/timber-acf-wp-blocks

If you don't use Timber try https://github.com/MWDelaney/sage-acf-wp-blocks or https://github.com/micropackage/block-loader