Jak tworzyć szablony Gutenberg

Jedną z zalet budowania stron i postów za pomocą Gutenberg Blocks jest możliwość zapisywania ich jako szablonów. Tworzenie szablonów dla Gutenberga to świetny sposób na przyspieszenie procesu publikacji. Istnieje kilka sposobów ich tworzenia. W tym artykule zobaczymy, jak tworzyć szablony Gutenberga.

Omówimy trzy metody ich tworzenia:

1. Tworzenie układu do dodania do biblioteki Gutenberga w celu wyeksportowania lub sklonowania.
2. Tworzenie układu do skopiowania i wklejenia, gdy chcesz go użyć.
3. Tworzenie układu do dodania jako domyślnego układu stron, postów lub niestandardowych typów postów.

Te metody pozwalają nam na ponowne wykorzystanie samych bloków. Żadne inne ustawienia nie zostaną uwzględnione.

Dlaczego warto tworzyć szablony Gutenberg

Po zaprojektowaniu układu strony lub posta możesz zapisać listę bloków wraz z ich atrybutami do ponownego wykorzystania. Daje to przewagę nad tworzeniem treści, ponieważ nie musisz koncentrować się na układzie. Szablony blokowe pozwalają uzyskać spójny projekt.

Szablon bloku może mieć zawartość zastępczą. Mogą być statyczne lub dynamiczne. Możesz zdefiniować domyślny stan sesji edytora. Możesz nawet importować lub eksportować swoje szablony jako pliki JSON, dzięki czemu możesz ponownie wykorzystywać swoje projekty w wielu witrynach internetowych lub udostępniać je innym. Możesz je zablokować, aby użytkownicy mogli dodawać zawartość, ale nie zmieniać bloków.

Metoda 1: Utwórz szablon układu

Szablony układu umożliwiają korzystanie z funkcji wielokrotnego wyboru, która została pierwotnie dodana, aby umożliwić nam jednoczesne przenoszenie lub usuwanie wielu bloków.

Możemy wybrać i dodać jeden blok na raz lub wiele bloków na raz do naszej biblioteki globalnych bloków wielokrotnego użytku. Ułatwia to eksportowanie ich jako plików JSON.

Przykładowy szablon układu

Stworzyłem prosty układ, którego mogę użyć jako posta na blogu, recenzji produktu itp. Łatwo jest zapisać go w bibliotece, aby móc go ponownie wykorzystać.

Umieść kursor na pierwszym bloku, który chcesz uwzględnić i przeciągnij myszą do ostatniego bloku, aby je podświetlić.

Nad pierwszym blokiem zobaczysz trzy kropki po lewej stronie. Kliknij kropki i wybierz Dodaj do bloków wielokrotnego użytku .

Zielony pasek wiadomości u góry pokaże, że blok został utworzony. Nadaj układowi odpowiednią dla Ciebie nazwę i wybierz Zapisz .

Komunikat na zielonym pasku pokaże, że blok został zaktualizowany. Utworzyłeś układ!

Aby z niego skorzystać, utwórz nową stronę lub post i otwórz opcje (trzy kropki). W obszarze Narzędzia wybierz opcję Zarządzaj wszystkimi blokami wielokrotnego użytku .

To pokazuje listę wszystkich twoich bloków. Tutaj możesz eksportować i importować swoje bloki jako pliki JSON. Bloki wielokrotnego użytku są globalne. Jeśli edytujesz, edytujesz oryginał. Aby zachować oryginał i utworzyć nowy post przy użyciu układu, musisz go wyeksportować, zmienić jego nazwę i zaimportować układ.

Zduplikowane posty

Na szczęście mamy inną opcję. Wtyczka o nazwie Duplicate Post dodaje funkcję klonowania bloków Gutenberga.

W ustawieniach Duplikaty postów włącz Bloki .

Mam teraz opcję klonowania w bibliotece bloków. Sklonuj żądany układ, a następnie edytuj. Każdy układ jest globalny, więc za każdym razem, gdy chcesz go użyć, będziesz musiał klonować i edytować.

Metoda 2: Łatwy alternatywny sposób tworzenia szablonu Gutenberg

Ta metoda jest tylko prostym oszustwem, ale działa. Najpierw utwórz układ, który chcesz ponownie wykorzystać wraz z dowolną zawartością zastępczą.

Następnie przejdź do edytora kodu. Aby to zrobić, wybierz trzy kropki w prawym górnym rogu. W sekcji Edytor wybierz Edytor kodu .

Zaznacz i skopiuj kod.

Wklej kod do edytora tekstu i zapisz go do ponownego wykorzystania.

Kiedy będziesz gotowy do użycia szablonu, po prostu utwórz nowy post, przełącz się do edytora kodu i wklej kod.

Mam teraz nowy post, do którego mogę zacząć dodawać treść.

Metoda 3: Utwórz niestandardowy typ postu

Argumentem jest szablon bloku. Możesz dodać argument do stron i postów lub utworzyć nowy typ postu. Układ zostanie powiązany z tym typem posta, więc po utworzeniu tego typu posta układ jest wyświetlany domyślnie.

Świetnie nadaje się do tworzenia układów dla różnych typów artykułów. Na przykład możesz mieć typ posta z oceną produktu, typ posta podsumowania wakacji, typ postu z przepisami itp., a po załadowaniu typu posta automatycznie wyświetla się powiązany z nim układ.

Tworzenie szablonu obejmuje:

• Dynamiczne ustawianie stanu domyślnego.
• Zarejestrowanie go jako domyślnego układu dla określonego typu postu.

Deklarowanie szablonu

Sam szablon zostanie zadeklarowany jako tablica blockTypes. Odbywa się to w JavaScript lub PHP. Jak pokazuje podręcznik dewelopera Gutenberga, wyglądałoby to tak:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

Albo to:

'template' => array(

array( 'block/name' ),

),

Rejestrowanie szablonu w niestandardowych typach postów

Niestandardowy typ posta może również zarejestrować szablon. Może to wyglądać tak:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

Tablica identyfikuje skąd pochodzi blok i nazwę bloku. W tym przykładzie tablica używa „core/paragraph”. Oznacza to, że blok pochodzi z rdzenia WordPressa (w przeciwieństwie do wtyczki) i jego nazwa to akapit (identyfikujący, którego bloku użyć).

Rejestracja szablonu na stronach i postach

Jeśli dodasz szablon do stron lub postów, załaduje się on automatycznie za każdym razem, gdy utworzysz stronę lub post. Wolę dodawać je do określonych niestandardowych typów postów, ponieważ masz większą swobodę twórczą i usprawnia proces tworzenia treści, ułatwiając znalezienie szablonów.

Jeśli zdecydujesz się dodać je do stron lub postów, możesz użyć tego kodu:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Szablony zagnieżdżania

Możesz nawet zagnieżdżać szablony w blokach kontenerów (na przykład bloki kolumn). Odbywa się to poprzez przypisanie zagnieżdżonego szablonu do samego bloku. Na przykład:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Blokowanie szablonu

Możesz zablokować szablon za pomocą tego kodu:

'template_lock' => 'all', // or 'insert' to allow moving

Przykładowy szablon z niestandardowym typem postu

Chcę utworzyć niestandardowy typ posta o nazwie Książki, który widzieliśmy powyżej. Wyświetli szablon układu i będzie zawierał obraz, nagłówek i akapit.

Kod zostanie wklejony do pliku functions.php. Zawsze używaj motywu potomnego podczas dodawania kodu do plików PHP. Jeśli tego nie zrobisz, kod zostanie nadpisany podczas aktualizacji motywu.

Będziesz musiał napisać kod ręcznie (polecam korzystanie z przykładów kodu, które pokazałem). Jedną z opcji jest utworzenie odpowiedniego układu, a następnie wyświetlenie kodu (kliknij trzy kropki w prawym górnym rogu i wybierz Edytor kodu w sekcji Edytor ). Spowoduje to wyświetlenie bloków z ich atrybutami z układu, który już stworzyłeś, dzięki czemu możesz wiedzieć z wyprzedzeniem, jak rozmieścić bloki w kodzie.

Wejdź do Theme Functions (functions.php) i wklej kod. Kod wkleiłem na samym dole. To jest strona testowa i nie planuję zachowywać kodu, więc nie użyłem motywu potomnego.

Do menu pulpitu nawigacyjnego o nazwie Książki zostanie dodany nowy typ wpisu. Zawiera listę i łącze Dodaj nowy . Kliknąłem Dodaj nowy i mój nowy szablon zostanie dodany do edytora, w którym mogę po prostu rozpocząć dodawanie treści.

Bloki są umieszczane w kolejności, w jakiej pojawiają się w kodzie i zawierają przypisane im atrybuty. Możesz umieścić dowolną liczbę bloków w kodzie i nadać im dowolne atrybuty. Możesz utworzyć dowolną liczbę niestandardowych typów postów, a każdy z nich może mieć unikalny układ domyślny. Ten przykład zawiera tekst zastępczy.

Końcowe myśli

Oto nasze spojrzenie na tworzenie szablonów Gutenberga. Wszystkie trzy metody działają świetnie. Szablony wielokrotnego użytku lub jedna z metod powielania mogą być lepszym wyborem, jeśli nie chcesz tworzyć nowych niestandardowych typów postów. Lubię niestandardowe typy postów, ponieważ ułatwiają wybór rodzaju treści, które chcesz tworzyć, a szablony są dla Ciebie wstępnie posortowane.

Niestandardowe typy postów są łatwe do wykonania, jeśli znasz się na kodzie, i są najwygodniejsze w użyciu w WordPressie. Główną wadą tworzenia szablonów do dodania do functions.php jest to, że tworzysz układ w kodzie, a nie w edytorze Gutenberga, więc nie jest to wizualne.

Podoba mi się, że możesz dodawać gotowe treści do swoich szablonów. Jest to świetne rozwiązanie w przypadku tekstu zastępczego, który pokazuje współtwórcom, dokąd trafiają informacje. Szablony wielokrotnego użytku to świetny sposób na przyspieszenie i usprawnienie procesu przepływu pracy, a także na tworzenie układów stron i postów do udostępniania.

Chcemy usłyszeć od Ciebie. Stworzyłeś szablony Gutenberga? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

Polecane zdjęcie przez Nadię Snopek / shutterstock.com