• nowy, blokowy edytor w WordPress 5.0
• zmienia zupełnie sposób tworzenia elementów w panelu administratora (ReactJS)
• zwiększa elastyczność przy tworzeniu treści

Użyjmy create-guten-block który wg. autora ma takie zalety jak:

• zero konfiguracji
• pozwala tworzyć bloki w minuty

Instalacja

                                    
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
                                    
                                

Pozstają nam tylko dwa kroki:

• nauczyć się Reacta
• wykorzystać pozyskaną wiedzę i stworzyć blok

TAK:

• tylko tak wykorzystamy pełen potencjał Gutenberga
• nie będziemy uzależnieni od różnych bibliotek z blokami

NIE:

• większość bloków, które tworzymy ogranicza się do tego, że user wpisuje dane, a my je wyświetlamy

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

• możemy tworzyć formularze (jak to w ACF)
• możemy podejrzeć jak wygląda dany blok
• zaspokoić potrzeby większości klientów

• ACF Blocks ma ograniczenia w kwestii korzystania z natywnych elementów interface'u Gutenberga
• Gutenberg ciągle się zmienia co nie ułatwia doprowadzenia wszystkiego do ładu

Nasz cel

                                    add_action('acf/init', 'my_acf_init');
function my_acf_init() {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type([
            'name'  => 'trips', // nazwa
            'title' => __('Trips'), // wyświetlany tytuł
            'description' => __('Promoted trips'), // opis
            'render_callback' => 'my_acf_block_render_callback', // nazwa funkcji renderującej
            'category' => 'layout', // kategoria
            'icon' => 'location-alt', // ikona
            'keywords' => [ 'trips', 'flights' ], // słowa kluczowe
        ]);
    }
}
                                

Więcej opcji na https://www.advancedcustomfields.com/resources/acf_register_block/

                                    function my_acf_block_render_callback( $block, $content='', $is_preview ) {
    $context = Timber::get_context();
    // Wszystkie informacje o bloku
    $context['block'] = $block;
    // Wszystkie pola użyte w bloku
    $context['fields'] = get_fields(); 
    // Sprawdzamy czy to podgląd w panelu admina.
    $context['is_preview'] = $is_preview;
    // Renderujemy blok.
    Timber::render( 'views/blocks/trip-block.twig', $context );
}
                                

Są jednak dwa problemy:

• Blok w panelu admina wygląda inaczej niż na froncie
• W panelu nie działa nam Packery

                                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', // nazwa
    'title' => __('Trips'), // wyświetlany tytuł
    'description' => __('Promoted trips'), // opis
    'render_callback' => 'my_acf_block_render_callback', // nazwa funkcji renderującej
    'category' => 'layout', // kategoria
    'icon' => 'location-alt', // ikona
    'keywords' => [ 'trips', 'flights' ], // słowa kluczowe
    'enqueue_style' => get_template_directory_uri() .'/dist/css/editor.css',
    'enqueue_script' => get_template_directory_uri() .'/dist/js/editor.js',
]);
                            

• w przeciwieństwie do TinyMCE - tutaj nie ma iframe
• trzeba ostrzożnie podchodzić do stylowania html, body, a etc
• warto wyelminować w panelu admina możliwość klikania w URLe

• warto stworzyć sobie osobny styl tylko dla edytora, ale używający komponentów z frontu

                                        .gutenberg-sasquatch-block {
    @import "components/colors";
    @import "components/mixins";
    @import "components/standards";
    @import "components/typo";
    @import "components/buttons";

    @import "layouts/index";
}
                                

• warto blok owinąć w dodatkowy div z indywidualną klasą

                                        

...

                                

Nie działa, bo:

• nie jest powiązany z eventem, który byłby odpalany po wyświetleniu podglądu

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

• Bardzo intensywny rozwój Gutenberga w połączeniu z chorobami wieku dziecięcego ACF Blocks mogą napsuć nam trochę krwi
• ACF Blocks ma ograniczenia jeśli chodzi o dodatkowe elementy interface'u (np. sidebar czy dodatkowe menu kontekstowe) - trzeba więc bardzo poważnie pomyśleć jak stworzyć wygodny interface