Budowanie bloków bez JavaScript: testowanie ACF, Block Lab i Lazy Blocks

Nie każdy jest jeszcze w stanie lub chce budować bloki w JavaScript, a czasami trzeba zainstalować trzy lub cztery kolekcje bloków, aż znajdziesz bloki, które chcesz.

Jest trzeci sposób: wtyczki, które tworzą dla Ciebie bloki z zestawu określonych niestandardowych pól, z szablonem do sterowania wyświetlaniem bloków na interfejsie. Trzy najpopularniejsze opcje to: Block Lab, ACF (Advanced Custom Fields) i Lazy Blocks.

Mój przypadek użycia do tego testu to małe zadanie, które postawiłem sobie do wykonania z każdą z wtyczek – stworzyć blok dla członków zespołu firmy, który zawiera następujące pola: imię, nazwisko, headshot, bio, numer telefonu, i adres e-mail i użyj bloku na stronie w dwukolumnowym wyświetlaczu z dwoma członkami zespołu.

Dla każdej wtyczki będę demonstrować

• jak stworzyć Fieldgroup,
• jak stworzyć szablon dla frontendu i
• jak używać bloków do tworzenia strony zespołu.

Użyłem Local by Flywheel jako mojego lokalnego narzędzia programistycznego. Strona testowa działała na WordPress 5.1.1, Gutenberg 5.4 i motywie biznesowym z WordPress.com

Po przeczytaniu tego posta będziesz mógł wybrać wtyczkę, która odpowiada Twoim potrzebom.

Tworzenie bloku zespołu za pomocą Block Lab

Członkowie zespołu XWP zbudowali Block Lab i jest dostępny jako darmowa wtyczka w wersji komercyjnej. Najpierw użyłem Block Lab, zainstalowałem wtyczkę, a następnie uruchomiłem nowy blok.

Oto film o tym, jak skonfigurować pola.

Następnym krokiem jest ustawienie szablonu bloku

Kiedy spojrzałem na oczekiwaną lokalizację, szablon będzie częścią katalogu motywów w podfolderze o nazwie /blocks/ To coś, o czym programista musi pamiętać, ponieważ podczas przełączania motywów występuje pewna blokada zawartości.

Aby utworzyć szablon, otworzyłem edytor kodu, utworzyłem plik block-team-member.php i dodałem HTML + i minimalne PHP, aby odwoływać się do pól.

 <h2>
<?php block_field( 'imię' );?> 
<?php block_field( 'nazwisko' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'zdjęcie' ); ?>"
 alt="<?php block_field( 'imię' );?> 
<?php block_field( 'nazwisko' );?> " width="150"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em>Możesz dotrzeć do <?php block_field( 'imię' );?></em> 
<br/>przez e-mail <span><a href="mailto:<?php block_field( 'adres-e-mail' ); ?>">
<?php block_field( 'adres-e-mail' ); ?></a></span>
 lub <br/>
telefonicznie: <span><?php block_field( 'rozszerzenie' ); ?></span></p> 

W ostatnim kroku zakończyłem konfigurację tego bloku we właściwościach bloku

• Ustawiam ikonę na osobę,
• wybrał „Elementy układu” jako kategorię i
• dodano „członek zespołu, zespół” jako słowa kluczowe

Wszystko to jest potrzebne do wstawiania bloku w edytorze.

Zobaczmy, jak to działa.

Dodałem nową stronę o nazwie Poznaj nasz zespół Block Lab i dodałem członków zespołu, używając bloku „Członek zespołu”.

Na razie zdecydowałem, że wszystkie informacje zostaną wypełnione w granicach edytora bloków. Podczas konfiguracji grupy pól miałem również możliwość wyświetlenia kontrolek formularzy w zakładce Opcje blokowania na pasku bocznym. Na razie ustaliłem, że to tylko osobiste preferencje. Po kliknięciu poza blokiem formularz znika, a blok jest renderowany podobnie do jego reprezentacji frontendowej.

Teraz, gdy mam sfinalizowany blok, mogę dodać więcej członków zespołu do strony. Postanowiłem, że poproszę je w bloku kolumnowym z dwiema kolumnami.

Jak na razie dobrze. Nie byłem zachwycony, że lokalizacja szablonu wskazuje na folder motywu.

Kiedy chcę zmienić motyw, nadal chciałbym zachować blok i układ bloku w mojej witrynie, więc musiałbym skopiować folder bloków do katalogu nowego motywu. Inny sposób jest opisany w dokumentacji Blocklab na Github. Oferuje dwa filtry do zmiany domyślnej lokalizacji szablonu:

„Aby użyć innego szablonu w swoim motywie, użyj filtra block_lab_override_theme_template( $theme_template ). Aby użyć innego szablonu poza motywem (na przykład we wtyczce), użyj filtra block_lab_template_path( $template_path )”.

To było dość łatwe do skonfigurowania, nawet jeśli nie jesteś programistą PHP, prawdopodobnie możesz użyć jednej funkcji PHP block-field() i upewnić się, że odwołujesz się do właściwych nazw pól.

W zasadzie Block Lab zapewnia metodę tworzenia pól i konfigurowania właściwości bloku na jednym ekranie, a następnie musisz dodać odpowiedni szablon bloku do folderu /blocks/ w katalogu motywu. To dość proste.

Tworzenie bloku zespołu z ACF 5.8

ACF (Advanced Custom Fields) w wersji 5.8 wyszedł z budowniczym bloków (dostępny tylko w wersji Pro). Do testu użyłem ACF 5.8 RC 1. Ostateczna wersja jest już dostępna. Elliot Condon jest autorem wtyczki, a pierwsza wersja została wydana w 2011 roku. Wtyczka stała się niezwykle popularnym narzędziem programistycznym zarówno dla freelancerów, jak i agencji i ma ponad milion instalacji.

Jego sukces i wszechstronność sprawiają, że tworzenie grupy terenowej jest procesem bardziej złożonym w porównaniu do pozostałych dwóch wtyczek. Wersja Pro 5.8 zawiera pierwsze wydanie narzędzia do budowania bloków.

To jest widok administratora grupy Field „Członek zespołu”.

Jak teraz zrobić z tego blok? Dokumentacja jest wystarczająco obszerna. Uwaga: W tym teście poszedłem w nieco innej kolejności…

Zacząłem od Field Group i musiałem wrócić do tego ekranu administratora po zarejestrowaniu bloku (patrz poniżej).

Użyłem dwóch plików. Najpierw musiałem zarejestrować blok w functions.php mojego motywu. W przypadku kodu renderującego szablon/blok użyłem content-block-team-member.php również do przechowywania w folderze aktywnego motywu.

Zobaczysz, jak te dwa pasują do siebie za sekundę. Resztę pracy wykonuje wtyczka w zapleczu.

Napiszmy więc kod blokowy w PHP

Pierwszym fragmentem kodu jest rejestracja bloku. Nadałem mu nazwę, tytuł, opis, wskaż szablon renderowania, nadaję kategorię, ikonę i kilka słów kluczowych, pod którymi producent treści może znaleźć blok we wstawiaczu bloków. Przewinąłem całą drogę do końca pliku functions.php mojego motywu i dodałem ten fragment:

 funkcja register_acf_blocks() {
   // zarejestruj blok członka zespołu.
   acf_register_block(tablica(
       'imię' => 'członek-zespołu-acf',
       'title' => __('Członek zespołu ACF'),
       'description' => __('Niestandardowy blok członka zespołu utworzony przez ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'kategoria' => 'formatowanie',
       'icon' => 'komentarze-administratorów',
       'keywords' => array( 'członek zespołu', 'zespół' ),
   ));
}
// Sprawdź, czy funkcja istnieje i podłącz się do konfiguracji.
if( function_exists('acf_register_block')) {
   add_action('acf/init', 'register_acf_blocks');
}

Ten kod pochodzi prosto z dokumentacji i właśnie zmieniłem kilka wartości.

W kolejnej sekcji stworzyłem szablon renderowania bloków. Nazwa pliku musi być zgodna z atrybutem „render_template” w powyższym tekście, czyli „ content-block-team-member.php ”

Po prostu postępowałem zgodnie z dokumentacją ACF i zmieniłem tylko kilka wartości i zaktualizowałem kod wyświetlacza.

 <?php
// utwórz atrybut id dla określonej stylizacji
$id = 'członek-zespołu' . $blok['id'];

// utwórz klasę align ("alignwide") z ustawienia bloku ("wide")
$align_class = $block['align'] ? 'wyrównywać' . $block['wyrównaj'] : '';

// Załaduj wartości i przypisz wartości domyślne dla pól bloku.
$short_bio = get_field('short_bio') ?: 'Krótka biografia jest tutaj...';
$first_name = get_field('first_name') ?: 'Imię';
$last_name = get_field('last_name') ?: 'Nazwisko';
$obraz = get_field('obraz');
$adres_e-mail = get_field('adres_e-mail');
$rozszerzenie = get_field('rozszerzenie');
?>

" class="członek-zespołu ">
       

   

   " alt="" alt=" " szerokość="150"/>
       
       

       

       
       
   

Kiedy zaczynałem z Fieldgroup, musiałem wrócić i upewnić się, że grupa jest powiązana z blokiem, który właśnie zarejestrowałem. Poniżej ekranu Fieldgroup stworzyłem regułę dla Lokalizacji: Musi brzmieć: „Pokaż tę grupę pól, jeśli Blok jest równy członkowi zespołu ACF.

Zobaczmy teraz, jak to działa w edytorze bloków, gdy dodam dwóch członków.

To było ciekawe doświadczenie. Możesz skorzystać z formularza w sekcji edytora, aby wprowadzić dane. Inną opcją jest wprowadzenie danych w polach formularzy dostępnych na pasku bocznym i wyświetlenie aktualizacji bloku w czasie rzeczywistym. Możesz przełączać się między tymi dwiema metodami, ale klikając przycisk „Przełącz na edycję” lub „Przełącz na podgląd”, w zależności od metody, której obecnie używasz.

Interfejs edytora bloków działa dobrze. Warto przejść przez bardziej rozbudowaną konfigurację i niezbędny kod.

Tworzenie bloku zespołu z leniwych bloków

Trzecia wtyczka w tym teście nosi nazwę „Lazy Blocks” autorstwa Nikity z nkdev.info, tego samego zespołu, który również opublikował kolekcję bloków GhostKit.

Nie tylko pozwala mi przechowywać informacje w post_content, ale także mam możliwość przechowywania ich w tabeli post_meta.

Oto film przedstawiający korzystanie z interfejsu do tworzenia pól.

Ponieważ ten ekran administratora koncentruje się na uzyskaniu wszystkich informacji do tworzenia bloków, po lewej utworzyłem moje pola i na pasku bocznym. Uzupełniłem informacje potrzebne do zarejestrowania bloku w redakcji.

Poniżej udało mi się dodać HTML dla frontendu i backendu. Składnia jest nawet łatwiejsza niż Block Lab i oczywiście znacznie łatwiejsza niż szablonowanie ACF.

Nie musiałem dodawać żadnego kodu do functions.php mojego motywu ani tworzyć dodatkowych plików z moim kodem szablonu.

Możesz dodać to wszystko tutaj, korzystając z podświetlania składni i scalania tagów zamiast wywołań funkcji. Dokumentacja pokazuje wiele sposobów pisania kodu szablonu. Zdecydowanie jestem fanem Handlebars (szablonów semantycznych), ponieważ jest w tym kontekście znacznie bliższy znacznikom scalającym z innych systemów.

Skopiowałem/wkleiłem ten sam kod do zakładki „Edytor HTML”, dzięki czemu mogłem zobaczyć wyświetlacz frontendu pod polami formularza.

Wykorzystajmy to.

Wydaje się, że to działa. Trochę niezręczne było to, że formularz nie znikał, gdy odznaczałem blok. W edytorze zajmuje dużo miejsca. Chociaż chciałem, aby członkowie zespołu byli w dwukolumnowym bloku, nie udało mi się przeciągnąć i upuścić dwóch bloków do bloku kolumn. Wspomniałem o tym w moim temacie pomocy technicznej, a nK odpowiedział: „…ukrywanie kontrolek, gdy blok nie jest zaznaczony, jest dobrą funkcją, która została już dodana w blokach ACF i zostanie wkrótce dodana w blokach leniwych”. Masz to wszystko w odpowiednim czasie.

Wniosek: złożony, rozwinięty lub łatwy.

ACF 5.8 ma bardzo solidną funkcję budowania bloków, a każdy, kto używał wtyczki do tworzenia witryn, będzie bardzo szczęśliwy, mogąc tworzyć dynamiczne bloki dla swoich klientów. Jest to dobrze przemyślane, a programiści wszystkich zestawów umiejętności szybko zaczną działać.

Ktoś, kto nie jest dobrze zorientowany w PHP, będzie miał sprawiedliwy udział w próbach i błędach, aby to wszystko uruchomić. Stanie się jeszcze bardziej skomplikowane, gdy wymagania dotyczące bloków staną się bardziej zaangażowane i wykraczają poza przypadek użycia tego testu. To nie jest narzędzie dla początkujących WordPressa lub osób wdrażających witryny typu „zrób to sam”, którzy sami nie piszą dużo kodu.

Na razie tylko wersja ACF 5.8 Pro jest dostarczana z funkcją budowania bloków. Condon rozważa uczynienie go samodzielną wtyczką. (Zobacz, co Twitteratti myślą o tym pomyśle… )

Block Lab jest na wczesnym etapie rozwoju. Udaje mu się abstrahować większość architektury blokowej i zmniejsza ilość kodu, który należy napisać. Bardzo pomocna jest dokumentacja. Szablon jest przechowywany w osobnym pliku i musi być przechowywany wraz z pozostałymi plikami motywów. Gdybyśmy w mojej firmie używali go do któregokolwiek z naszych projektów, przechowywalibyśmy plik szablonu za pomocą jednej z naszych wtyczek pomocniczych, aby nasi klienci mogli przełączać motywy bez utraty treści i wyświetlania bloków zbudowanych za pomocą Block Lab.

Wersja Pro oferuje dodatkowe funkcje, takie jak pola repeaterów, import/eksport bloków, pola obiektów użytkownika, pole mapy i wiele innych funkcji blokowych.

XWP to agencja współpracująca z klientami korporacyjnymi na hostingu VIP WordPress.com i innymi korporacjami. Członkowie ich zespołu wnoszą wkład w inne wielkie pomysły w przestrzeni WordPress, w tym Customizer, AMP i Tide. Oczekuję, że wtyczka pozostanie w pobliżu i rozwinie się wraz z Gutenberg Phase 2 w solidny system dla twórców witryn, agencji i twórców motywów.

Konfiguracja Lazy Blocks jest przyjemnością i jak wspomniano, jestem fanem składni szablonów Handelbars. Jest łatwy do nauczenia nawet dla początkujących, a przy odrobinie praktyki właściciel witryny byłby w stanie stworzyć określone bloki Gutenberga dla swojej witryny. Obsługa bloków w edytorze, chociaż działa, jest trochę niezgrabna, ponieważ wyświetlacz nie przełącza się w tej chwili między stanem wyboru bloku a stanem odznaczenia.

Jeśli istnieje wymóg posiadania dodatkowych pól na stronę lub sekcję postu, Lazy Blocks jest doskonałym narzędziem do prototypowania i szybkiego przechodzenia od pomysłu do weryfikacji koncepcji.

Jedyne zastrzeżenie: nie udało mi się dowiedzieć, kto stoi za nkdev.info i imieniem Nikita. Ze strony internetowej wynika tylko, że jest to młoda firma, ale nic więcej. Jeśli korzystasz z wtyczki, upewnij się, że masz plan B na wypadek, gdyby programiści porzucili wtyczkę, zanim wystartuje.

ACF 5.8 jest dość złożony; Block Lab jest bardzo elastycznym i tylko półzłożonym; a Lazy Blocks jest odpowiednio nazwany i najłatwiejszy w użyciu. Żadna z nich nie pozwala uciec bez pisania kodu, ponieważ każdy blok wymaga wyświetlania danych wyjściowych w HTML.

Daj mi znać, co myślisz o tych trzech wtyczkach generujących bloki. Ponadto, jeśli znalazłeś inną wtyczkę, która pozwala na budowanie bloków bez wchodzenia w JavaScript, chcę o tym wiedzieć! Podzielcie się swoimi przemyśleniami i odkryciami w komentarzach!