Jak stworzyć prostą wtyczkę blokową Gutenberga?

Czy nie wszyscy kochamy WordPressa? Platforma odniosła ogromny sukces od samego początku, a programiści stale dodawali nowe funkcje. Jedną z najbardziej godnych uwagi funkcji w ostatnim czasie jest edytor bloków WordPress o nazwie kodowej Gutenberg .

Gutenberg oferuje użytkownikom WordPressa nowy, ekscytujący sposób publikowania treści i dostosowywania witryny. Jest niezwykle łatwy w użyciu, co jest świetną wiadomością zarówno dla początkujących, jak i programistów. Jeśli korzystasz z najnowszej wersji WordPressa, jesteś już rodziną z edytorem bloków i koncepcją bloków.

Domyślnie edytor bloków WordPress zawiera kilka bloków, które umożliwiają dodawanie tekstu, obrazów, cytatów, dźwięku, filmów, osadzania i tak dalej. Ponadto istnieje mnóstwo dodatków Gutenberga, które pozwalają rozszerzyć edytor bez przerywania potu.

Mimo to możesz mieć konkretną potrzebę, która skłania Cię do tworzenia własnych niestandardowych bloków. Oto, gdzie pojawia się dzisiejszy post. W kilku akapitach dowiesz się dokładnie, jak tworzyć niestandardowe bloki Gutenberga, aby odpowiadały Twoim konkretnym potrzebom.

Bez zbędnych ceregieli zacznijmy, bo trzeba się wiele nauczyć.

Czym właściwie są bloki?

Jeśli jesteś idealnym początkującym, prawdopodobnie zastanawiasz się, o co chodzi w tym biznesie Gutenberga. Wiem, byłem dość zdezorientowany, kiedy Gutenberg został przedstawiony. Ale nikt nie jest winien, wszyscy byliśmy przyzwyczajeni do klasycznego edytora, że ​​zmiana była początkowo niewygodna.

Mimo to edytor bloków WordPress jest tutaj, aby pozostać, czy nam się to podoba, czy nie. Właśnie dlatego powinieneś dowiedzieć się jak najwięcej o Gutenbergu (i wszystkim, co się z nim wiąże), aby jak najlepiej go wykorzystać.

Bloki traktują akapity, nagłówki, multimedia i osadzone jako komponenty, które połączone razem tworzą treść przechowywaną w bazie danych WordPress, zastępując tradycyjną koncepcję dowolnego tekstu osadzonymi mediami i skrótami. – Podręcznik edytora bloków

W przeszłości użytkownicy WordPressa do dodawania treści wykorzystywali dowolny tekst i skróty. Gutenberg używa bloków . Nowy edytor pozwala używać jednostek bloków do tworzenia bogatych i elastycznych układów, które są łatwe w zarządzaniu. Obecnie możesz używać edytora bloków dla postów i stron, ale istnieją aktywne plany, aby w przyszłości wspierać edycję całej witryny.

Edytor Gutenberga pokazujący kilka bloków

Praca z blokami sprawia, że ​​tworzenie treści w WordPressie jest dość odświeżające. Ponadto wiele istniejących wtyczek obsługuje nowy edytor i zawiera gotowe do użycia bloki, dzięki którym dodawanie treści z tych wtyczek jest dziecinnie proste. Edytor umożliwia przeciąganie i upuszczanie bloków na stronę, dzięki czemu możesz szybciej nacisnąć przycisk publikowania.

Podobnie jak kreator stron wbudowany bezpośrednio w WordPress.

Jeśli znasz wizualne narzędzia do tworzenia stron, takie jak Elementor, prawdopodobnie znasz koncepcję budowania stron metodą „przeciągnij i upuść”. Gutenberg to próba pełnego włączenia tworzenia witryn metodą „przeciągnij i upuść” do rdzenia WordPressa. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem krok po kroku po kreatorze Gutenberg dla WordPress.

Pomijając to, przejdźmy do najlepszej części dzisiejszego postu. Nauczmy się tworzyć prosty blok. Możesz to zrobić ręcznie lub za pomocą wtyczek, takich jak Genesis Custom Blocks (dawniej BlockLab), Lazy Blocks, czy ACF. Tworzenie niestandardowych bloków jest trochę techniczne, więc na potrzeby dzisiejszego postu użyjemy wtyczki.

Jak utworzyć niestandardowy blok (przy użyciu niestandardowych bloków Genesis)

Podążanie ścieżką wtyczki jest łatwiejsze, ponieważ tworzenie niestandardowych bloków Gutenberga od podstaw wymaga dobrej znajomości HTML, CSS, PHP i, co ważniejsze, JavaScript. Będziesz także musiał zrozumieć React, który rzuca początkującym podkręconą piłkę.

W następnej sekcji użyjemy niestandardowych bloków Genesis, które są dostarczane między innymi przez StudioPress i WPEngine. Darmowa wersja Genesis Custom Blocks jest dostępna w oficjalnym repozytorium WordPressa, co oznacza, że ​​możemy ją zainstalować w panelu administratora WordPress.

Zainstaluj niestandardowe bloki Genesis

Zaloguj się do pulpitu administracyjnego WordPress i przejdź do Wtyczki > Dodaj nowy , jak pokazano poniżej.

Następnie wpisz „Genesis Custom Blocks” w polu wyszukiwania słów kluczowych i naciśnij przycisk Zainstaluj teraz :

Następnie aktywuj wtyczkę, aby rozpocząć imprezę.

Świetnie ci idzie

Następnie utwórzmy nowy niestandardowy blok. W celach ilustracyjnych utwórzmy niestandardowe wezwanie do działania (CTA), które dodamy na końcu każdego publikowanego posta. Najlepsze jest to, że możesz ponownie używać bloków, aby zaoszczędzić kłopotu z tworzeniem tych samych bloków w kółko.

Z menu administracyjnego WordPressa przejdź do Bloki niestandardowe > Dodaj nowy , jak podkreśliliśmy poniżej.

Spowoduje to przejście do następującej strony, na której znajdziesz wszystkie opcje tworzenia naszego niestandardowego bloku (w naszym przypadku CTA):

Oto kilka słów, aby wyjaśnić, co widzisz na powyższym zrzucie ekranu. Zaczynając od góry, masz.

Główny obszar edycji:

• Konstruktor – prawdopodobnie spędzisz tutaj dużo czasu, projektując swój niestandardowy blok. Konstruktor umożliwia dodanie tytułu, pól, informacji, słów kluczowych, kategorii i podglądu niestandardowego bloku. Dowiesz się, jak dodawać pola.
• Edytor szablonów – Po zaprojektowaniu własnego bloku (tj. dodaniu różnych pól), będziesz musiał utworzyć szablon bloku (przeczytać, dodać trochę kodu) w Edytorze szablonów . Więcej dowiemy się, gdy zaprojektujemy CTA.
• Podgląd edytora — umożliwia podgląd niestandardowego bloku w edytorze bloków WordPress.
• Podgląd frontonu — tutaj możesz podejrzeć, jak niestandardowy blok wygląda w Twojej witrynie.
• Pola edytora – wyświetlają pola w głównym obszarze edycji postu lub strony (wiesz, tak jak widzisz swoje zwykłe posty w edytorze WordPress)
• Pola inspektora — wyświetla pole na prawym pasku bocznym pod inspektorem bloku.

Opcje paska bocznego

• Ślimak — Ślimak jest automatycznie wypełniany na podstawie tytułu, który nadałeś swojemu blokowi niestandardowemu. Jest to ważne podczas tworzenia szablonu bloku.
• Ikona — ta opcja umożliwia dodanie ikony do niestandardowego bloku.
• Kategoria — umożliwia przypisanie kategorii do bloku niestandardowego. Możesz skategoryzować swój niestandardowy blok za pomocą jednej z wbudowanych kategorii lub możesz utworzyć zupełnie nową kategorię.
• Słowa kluczowe – dodaj maksymalnie trzy słowa kluczowe związane z Twoim niestandardowym blokiem, aby ludzie mogli go łatwo znaleźć w selektorze bloków.
• Otwieraj pola blokowe w trybie modalnym zamiast renderowania w miejscu — włącz, jeśli chcesz otwierać pola w trybie modalnym. Jest to przydatne, jeśli masz niestandardowy blok z wieloma polami.
• Typy postów — zaznacz pole (pola), aby umożliwić wyświetlanie niestandardowego bloku przy każdym typie postu. Na przykład, jeśli odznaczysz Posty, blok nie pojawi się w ogóle w żadnym poście.

Tworzenie niestandardowego bloku

Teraz, gdy lepiej rozumiesz interfejs użytkownika i co robi każda część, zakasamy rękawy i przystąpimy do pracy.

W Konstruktorze nadaj własnemu blokowi odpowiedni tytuł. Idę z CTA do tego, jak pokazano poniżej.

Przed dodaniem nowych pól dodajmy ikonę, słowa kluczowe i wybierz kategorię dla bloku niestandardowego, jak pokazano poniżej.

Ten zestaw, dodajmy kilka pól do naszego niestandardowego bloku. W naszym przykładowym bloku CTA dodamy tylko trzy pola w następującej kolejności: obraz, trochę tekstu i pole pliku, które pozwala ludziom pobrać wyimaginowany e-book

Dodawanie pól bloku

W sekcji Pola edytora kliknij ikonę Plus (+) , aby dodać pierwsze pole, jak pokazano poniżej.

Następnie dodajmy pole obrazu. Na pasku bocznym ustaw Typ pola na Obraz i zdefiniuj inne opcje. Zwróć też uwagę na ślimak (ja ustawiłem na image-field ), ponieważ użyjemy go podczas tworzenia szablonu bloku. Zobacz obrazek poniżej.

Następnie w podobny sposób dodaj pola tekstowe i plikowe.

Nie świętuj jeszcze, jest jeszcze jeden krok do zrobienia. Przejdź do Edytora szablonów > Znaczniki:

Mój ma już jakiś kod, ale twój będzie pusty

Tutaj zaprojektujemy, jak Twój niestandardowy blok będzie wyglądał w Twojej witrynie. Edytor szablonów akceptuje HTML, CSS i slugi pól (które musisz ująć w 2 nawiasy). Jeśli potrzebujesz użyć PHP, możesz utworzyć szablon za pomocą metody szablonów PHP.

Nie martw się, to proste.

W Edytorze szablonów , na karcie Znaczniki (patrz powyższy obrazek), dodaj następujący fragment znacznika HTML (kod):

 <div class="cta-block">
<div class="cta-image">
<img src ="{{pole-obrazu}}">
</div>
<div class="text-upload">
<h2>{{pole tekstowe}}</h2>
<a href="{{pole-pliku}}">
<button type="button" class="dwnld">Pobierz</button></a>
</div>
</div>

Podczas pisania znaczników HTML zauważysz, że Edytor szablonów automatycznie uzupełnia informacje o polu (np. {{image-field}} ) za Ciebie

Następnie przejdź do sekcji CSS , aby dodać kilka prostych stylów.

Możesz dodać pożądane style, ale pracuję z tym:

 .cta-blok {
wyrównanie tekstu:środek;
kolor tła:pomarańczowy;
szerokość:100%;
wysokość:auto;
obramowanie: 2px stałe pomarańczowe;
}

.dwnld {
kolor tła: czarny;
obramowanie: 2px jednolita czerń;
Zielony kolor;
dopełnienie: 5px 10px;
wyrównanie tekstu: środek;
wyświetlacz: inline-block;
rozmiar czcionki: 20px;
margines: 10px 30px;
kursor: wskaźnik;
promień obramowania:2px;

}

I wszystko gotowe! Kliknij Opublikuj :

Aby zobaczyć nowy niestandardowy blok w akcji, wróć do pulpitu administracyjnego WordPress i przejdź do Wpisy > Dodaj nowy (działa również ze stronami):

Utwórz post w normalny sposób, kliknij Plus (+) , aby dodać nowy blok, i wybierz nowy błyszczący niestandardowy blok, jak podkreśliliśmy poniżej.

Następnie wypełnij swój niestandardowy blok zgodnie z potrzebami i opublikuj swój post:

Teraz, jeśli sprawdzę mój nowy niestandardowy blok CTA w interfejsie, widzę to:

Moje niestandardowe CTA jest właśnie tam! Proszę nie zwracać uwagi na moje możliwości projektowe – oczywiście w prawdziwym scenariuszu zechcesz poświęcić trochę więcej czasu na stylizację swojego bloku. Ale mam nadzieję, że dzisiaj czegoś się tutaj nauczyłeś.

Budowanie niestandardowych bloków nie musi być trudnym zadaniem dzięki takim narzędziom, jak między innymi Genesis Custom Blocks i Lazy Blocks. To dodatkowo możesz sprawić, że niestandardowe bloki będą złożone lub proste w zależności od potrzeb. Jeśli musisz tworzyć niestandardowe bloki ręcznie, skorzystaj z lekcji JavaScript. To pomoże

Masz jakieś przemyślenia lub pytania? Daj nam znać w komentarzach poniżej.