Czy kiedykolwiek chciałeś stworzyć niestandardowy moduł lub blok, który działałby zarówno w Beaver Builder, jak i Gutenberg? Cóż, teraz możesz!

Począwszy od wersji Beaver Builder 2.7, bloki utworzone za pomocą Advanced Custom Fields Pro (ACF) będą dostępne do użytku zarówno w Beaver Builder, jak i Gutenberg.

W tym poście omówimy wszystko, co wiąże się z używaniem bloków ACF w Beaver Builder, w tym dlaczego jest to przydatne, jak działa i jak stworzyć swój pierwszy blok.

Dlaczego bloki ACF w Beaver Builder?

Wprowadzenie Gutenberga jako edytora WordPress sprawiło, że dodawanie bogatej treści do postów stało się łatwiejsze niż kiedykolwiek. Żegnajcie skróty! Nawet dodanie czegoś tak prostego jak przycisk jest teraz ładniejsze. Jednak bloki w edytorze nie działają w Beaver Builder i odwrotnie.

Bloki ACF przydadzą się, jeśli używasz Beaver Builder do tworzenia witryny i układu strony, a jednocześnie używasz edytora WordPress do publikowania treści. Pozwalają stworzyć jeden rodzaj konfigurowalnej treści, którą można wykorzystać w obu miejscach.

ACF ułatwia także budowanie bloków, udostępniając GUI do tworzenia formularzy i ramy do szybkiego ich łączenia. Z tego, co odkryliśmy, jest to bardzo podobne do sposobu kodowania modułu Beaver Builder.

Wyobraź sobie, że tworzysz moduł Beaver Builder, który wyświetla niestandardowy układ galerii. Dokładnie to zrobiłem w ostatniej witrynie, którą zbudowałem. Teraz wyobraź sobie, że chcesz użyć tego samego modułu galerii w poście na blogu. Przed Beaver Builder 2.7 nie było to możliwe. Ale teraz, dzięki blokom ACF, jest to możliwe.

Jak działają bloki ACF w Beaver Builder?

Jak widać na powyższym obrazku, bloki ACF działają w Beaver Builderze w taki sam sposób, jak moduły. Możesz upuścić je w układzie z panelu treści i edytować ustawienia po załadowaniu.

Jedną zauważalną różnicą jest to, że wszystkie pola ACF będą wyświetlane na karcie Ustawienia w formularzach ustawień Beaver Builder. Jeśli potrzebujesz więcej zakładek, możesz skorzystać z zakładek ACF, jak pokazano w powyższym przykładzie.

Aby uzyskać dostęp do bloków ACF w Beaver Builder, otwórz panel treści, jak pokazano poniżej. Twoje bloki będą wyświetlane w modułach standardowych lub w grupie niestandardowej, jeśli ją zdefiniowałeś. Zostaną tam również pokazane wszelkie kategorie bloków lub ikony używane do organizowania i wyświetlania bloków w edytorze WordPress.

Poza tym bloki ACF powinny działać w Beaver Builder tak samo, jak moduły. Obejmuje to wykorzystanie wszystkich ustawień odstępów i wyświetlania, które można uzyskać bezpłatnie na karcie Zaawansowane .

Tworzenie bloku ACF dla programu Beaver Builder

Nie ma wiele, co musisz wiedzieć o tworzeniu bloku ACF dla Beaver Builder, czego nie można się dowiedzieć z dokumentacji ACF i podręcznika WordPressa. Bloki utworzone za pomocą ACF powinny po prostu działać.

Aby pomóc, stworzyliśmy przykładową wtyczkę blokującą ACF, którą możesz pobrać w celach informacyjnych. Jest jednak kilka wad, o których powinieneś wiedzieć…

• Obsługa JSX – bloki deklarujące obsługę JSX nie są obecnie obsługiwane w Beaver Builder i nie będą dostępne. Korzystając z block.json, musisz jawnie ustawić wartość false, jak pokazano w poniższym przykładzie.
• Funkcje bloków – Beaver Builder nie obsługuje obecnie dodatkowych funkcji bloków, które można skonfigurować w pliku block.json, w tym takich jak wyrównanie, kolory i odmiany. Obsługujemy tylko podstawy pokazane w przykładzie.

Absolutne minimum potrzebne do utworzenia bloku ACF to dwa pliki: block.json i template.php . Możliwe jest także załadowanie plików stylów i skryptów specyficznych dla Twojego bloku poprzez zdefiniowanie ich w block.json, jak zobaczysz.

Konfigurowanie block.json

Jest to standardowy plik block.json WordPressa z dodatkiem parametru acf służącego do określenia lokalizacji szablonu. Bez tego nie będziesz mógł wybrać go w ACF podczas budowania formularza.

Dodatkowo w tym miejscu musisz ustawić obsługę JSX na false, w przeciwnym razie Twój blok nie zostanie załadowany w Beaver Builder.

Tutaj możesz także skonfigurować obsługę grup Beaver Builder. Odbywa się to za pomocą parametru beaverBuilder jak pokazano poniżej. Domyślnie bloki będą wyświetlane w grupie Moduły standardowe, ale dzięki tej metodzie możesz je dostosować.

Ścieżki do pliku szablonu (oraz plików stylów lub skryptów) są zależne od pliku block.json i muszą być przechowywane w tej samej lokalizacji.

 { "name": "acf/bb-example-acf-block", "title": "ACF Example Block", "description": "An example ACF block that can be used in Beaver Builder.", "category": "bb-example-acf-blocks", "icon": "admin-appearance", "script": "file:./js/scripts.js", "style": "file:./css/styles.css", "supports": { "jsx": false }, "acf": { "mode": "preview", "renderTemplate": "template.php" }, "beaverBuilder": { "group": "ACF Blocks" } }

Konfigurowanie szablonu.php

W tym pliku PHP wyprowadzasz zawartość swojego bloku. W nim możesz normalnie odpytywać pola ACF za pomocą get_field i używać wyników w swoich wynikach. Jeśli jesteś przyzwyczajony do pracy z ACF, powinno to wyglądać bardzo znajomo.

 <?php $heading = get_field( 'heading' ); $content = get_field( 'content' ); ?> <div> <h3><?php echo $heading; ?></h3> <p><?php echo $content; ?></p> </div>

Ładowanie bloku

Po utworzeniu kodu dla swojego bloku musisz go załadować za pomocą podstawowej funkcji register_block_type . Twój blok nie będzie dostępny do wybrania w ACF podczas tworzenia formularza, dopóki tego nie zrobisz.

 add_action( 'init', function() { register_block_type( 'path/to/block.json' ); } );

Tworzenie formularza bloku

Ostatnią rzeczą, którą musisz zrobić, to utworzyć formularz dla swojego bloku. Możesz to zrobić przed zakodowaniem bloku lub w tandemie, zależy wyłącznie od Ciebie. Wiedz tylko, że blok nie będzie dostępny w regułach grupy pól, jeśli jeszcze nie istnieje.

Odkryliśmy, że wszystkie typy pól ACF działają dla bloków zarówno w Beaver Builder, jak i Gutenberg. Jeśli utworzyłeś już formularz ACF, wszystko powinno być dość standardowe. Po prostu utwórz formularz, ustaw lokalizację swojego bloku i voila, gotowe!

Eksportowanie formularza bloku

Ten krok jest opcjonalny, ale może się przydać, jeśli chcesz wysłać swoje bloki we wtyczce. W narzędziach ACF możesz eksportować lub importować pola w formacie JSON. Umożliwi to przechowywanie formularza bloku we wtyczce, a nawet zarządzanie nim za pomocą kontroli wersji.

Po wyeksportowaniu formularza bloku zawsze możesz go później ponownie zaimportować, jeśli zajdzie potrzeba wprowadzenia zmian. Kiedy już skończysz, po prostu wyeksportuj go ponownie i wypchnij te zmiany do repozytorium git.

ACF umożliwia automatyczną obsługę plików JSON, ale niestety działa tylko w przypadku jednej lokalizacji. Jeśli zrobisz to we wtyczce, może to spowodować uszkodzenie czegoś innego w Twojej witrynie przy użyciu lokalnego JSON ACF.

Jeśli jesteś zainteresowany pracą z polami w ten sposób, oto jak ładujemy je w przykładowej wtyczce…

 add_action( 'acf/init', function() { $fields = json_decode( file_get_contents( 'path/to/fields.json' ), 1 ); /** * Only load if no fields exist in the database with this key. * This allows you to work on the fields if they have been imported. */ if ( empty( acf_get_fields( $fields[0]['key'] ) ) ) { acf_add_local_field_group( $fields[0] ); } } );

Podsumowanie

Byliśmy wielkimi fanami ACF jeszcze zanim powstał Beaver Builder. To potężne narzędzie, które zawsze dawało nam możliwość łatwego tworzenia skomplikowanych, niestandardowych rozwiązań. Dzięki tej integracji jesteśmy tym bardziej podekscytowani niż kiedykolwiek i mamy nadzieję, że przyda się ona również w Twoich projektach!