01Tworzenie bloków Gutenberga za pomocą ACF Blocks

Jak tworzyć własne bloki za pomocą Advanced Custom Fields. Na co zwracać uwagę, na jakie problemy można natrafić i jak ułatwić sobie życie wplątując w to odrobinę Timbera.

Maciek Palmowski

HelloMaciek Palmowski

email m.palmowski@freshpixels.pl

wordpress.org profiles.wordpress.org/palmiak

github github.com/palmiak

Timber Collaborator github.com/timber/timber

WordPress Developer OsomStudio

02Czym jest Gutenberg?

03Czym jest Gutenberg?

  • 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

04Czy łatwo jest stworzyć blok w Gutenbergu?

05Czy łatwo jest stworzyć blok w Gutenbergu?

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

  • zero konfiguracji
  • pozwala tworzyć bloki w minuty

06Czy łatwo jest stworzyć blok w Gutenbergu?

Instalacja

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

07Czy łatwo jest stworzyć blok w Gutenbergu?

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

08Czy łatwo jest stworzyć blok w Gutenbergu?

Pozstają nam tylko dwa kroki:

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

09Czy warto?

TAK:

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

10Ale czy to konieczne?

NIE:

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

11Jakie mamy wyjścia?

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

12ACF Blocks - możliwości

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

13Wady

  • ACF Blocks jest ciągle w wersji beta, mogą więc być błędy
  • Gutenberg ciągle się zmienia co nie ułatwia doprowadzenia wszystkiego do ładu

14Tworzymy blok

                                    add_action('acf/init', 'my_acf_init');
function my_acf_init() {
    if( function_exists('acf_register_block') ) {
        acf_register_block([
            '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
        ]);
    }
}
                                

16Tworzymy blok

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

17Ustawienia

18Panel administratora

>

19Panel administratora - podgląd

>

20Wygląd bloku

21Wygląd bloku

22Działa :)

Są jednak dwa problemy:

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

23Własne style i skrypty

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

24Na co warto uważać

  • w przeciwieństwie do TinyMCE - tutaj nie ma iframe
  • trzeba ostrzożnie podchodzić do stylowania html, body, a etc

25Na co warto uważać

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

26Na co warto uważać

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

27Packery

Nie działa, bo:

  • nie ma (jeszcze) eventu, który odpalany jest po wyświetleniu podglądu

Musimy więc dopisać własny event i wykorzystać zmienną is_preview.

28Packery

                                        {% if is_preview %}

{% endif %}
                                

29Packery

                                    document.addEventListener('tripGridReady', function (e) {
    $.bridget( 'packery', Packery, $ );
    if ( $( '.offers-list').length ) {
        imagesLoaded( $( '.offers-list' ), function() {
            $( '.offers-list' ).each( function( i ) {
                $( '.offers-list' ).packery(
                    {
                        itemSelector: '.item',
                    }
                );
            });
        });
    }
}, false);
                                

30Teraz działa

31Ostateczny efekt

32Wnioski

  • Brak stabilności Gutenberga w połączeniu z wersją beta ACF Blocks powodują, że używanie ich na produkcji może 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
  • ACF Blocks nie współpracuje na obecną chwilę z "reusable blocks"

33Dziękuję

Maciek Palmowski

email m.palmowski@freshpixels.pl

wordpress.org profiles.wordpress.org/palmiak

github github.com/palmiak

WordPress Developer OsomStudio