Tworzenie niestandardowych bloków Gutenberga dla WordPress

Tworzenie niestandardowych bloków Gutenberga dla WordPressa nie musi być trudne. W rzeczywistości za pomocą odrobiny kodu możesz tworzyć własne niestandardowe bloki bez konieczności używania wtyczki. Gutenberg to nowy edytor dla WordPressa, który pozwala tworzyć niestandardowe bloki dla treści. Bloki to elementy składowe Twoich treści w Gutenbergu. Można ich używać do dodawania tekstu, obrazów, filmów i nie tylko. Aby utworzyć blok niestandardowy , musisz użyć edytora tekstu, takiego jak Edytor kodu WordPress, lub wtyczki, takiej jak Block Lab. Gdy masz już edytor tekstu, możesz utworzyć nowy plik w katalogu motywów lub wtyczek. Pierwszą rzeczą, którą musisz zrobić, to utworzyć typ bloku. Typ bloku to zbiór ustawień definiujących zachowanie bloku. Aby to zrobić, musisz użyć funkcji register_block_type. Gdy masz już typ bloku, możesz go zarejestrować w WordPress. Ta funkcja przyjmie dwa argumenty: nazwę typu twojego bloku i obiekt, który zawiera ustawienia twojego bloku. Po zarejestrowaniu typu bloku możesz zacząć dodawać do niego pola. Pola to ustawienia, które kontrolują wygląd i zachowanie bloku. Aby dodać pole do typu bloku, musisz użyć funkcji add_field. Po dodaniu wszystkich pól, które chcesz dodać do typu bloku, możesz zarejestrować go w WordPress. I to wszystko! Utworzyłeś teraz niestandardowy blok Gutenberga dla WordPress.

Edytor bloków Gutenberga był jednym z ulepszeń WordPress 5.0. Edytor Gutenberga dzieli zawartość na bloki, które są łatwo przearanżowanymi sekcjami. Większość programistów nie byłaby w stanie stworzyć natywnie zaprojektowanych bloków, ponieważ brakuje im umiejętności React. Społeczność programistów WordPressa odpowiedziała, opracowując narzędzia, które mogą spełnić wymagania React/JavaScript. Bloki w Block Lab są tworzone w trzech etapach: dodawanie ich w ramach administratora, kopiowanie i wklejanie, a następnie eksportowanie. Interfejs API może być również używany do tworzenia niestandardowych kontrolek dla twojego bloku. To może nie być zbyt wiele, ale da ci wyobrażenie o tym, co możesz zrobić z niestandardowym blokiem Gutenberga.

Aby utworzyć blok, musimy utworzyć nowy plik o nazwie block-notification-bar.php, który zawiera tytuł (Pasek powiadomień) i trzy pola. W odpowiedzi na ten plik pojawi się powiadomienie z prośbą o umieszczenie naszego niestandardowego szablonu bloku w naszym motywie. Przed przesłaniem pliku upewnij się, że jest on zapisany i przesłany na Twój serwer WWW. Stworzono dla nas blok niestandardowy. Liczy się tylko to, że osiągniesz ten cel. Mamy wiele opcji, jeśli chcemy rozszerzyć to, co już stworzyliśmy. Ikony, przyciski i możliwość łączenia się z innym postem lub stroną to tylko niektóre z funkcji, które można dodać. Wszystkie te umiejętności można osiągnąć za pomocą Block Lab, a także innych wymienionych powyżej wtyczek.

Wtyczka niestandardowych bloków WordPress

Istnieje wiele świetnych wtyczek niestandardowych bloków dostępnych dla WordPress. Każda wtyczka oferuje inny zestaw funkcji i opcji. Niektóre wtyczki bloków niestandardowych umożliwiają tworzenie niestandardowych bloków dla Twoich postów i stron, podczas gdy inne zapewniają zestaw wstępnie zaprojektowanych bloków, których możesz użyć.

Możesz łatwo tworzyć posty i strony za pomocą WordPress, dodając treść i elementy układu jako bloki. WordPress oferuje szeroką gamę bloków w swojej domyślnej konfiguracji. Możesz jednak chcieć utworzyć niestandardowy blok, aby wykonać określone zadanie. Ten samouczek przeprowadzi Cię przez kolejne etapy tworzenia całkowicie unikalnego bloku. Pierwszym krokiem jest wstawienie trzech pól do bloku referencji. Kliknij przycisk Dodaj pole, aby rozpocząć wypełnianie pierwszego pola. Drugim krokiem jest stworzenie szablonu bloku, który dokładnie określi sposób wyświetlania danych.

Trzecim krokiem jest stylizowanie znaczników wyjściowych bloku, klikając kartę CSS. Przesyłając szablony ręcznie, możesz stworzyć swój własny blok. W tym przypadku PHP jest najlepszym sposobem na interakcję z niestandardowymi polami blokowymi. Po prostu prześlij szablon edytora do swojego motywu za pomocą metody przesyłania. Aby rozpocząć, wyświetl podgląd własnego bloku. Zanim będziesz mógł wyświetlić podgląd HTML/CSS, musisz podać pewne dane testowe. Utwórz witrynę WordPress, która jest zbudowana na zamówienie z blokiem Gutenberga.

Aby wyszukać blok, wpisz jego nazwę lub słowa kluczowe w polu, które pojawi się po kliknięciu przycisku dodawania nowego bloku. Możesz wyświetlić podgląd bloku, zapisując i edytując swój post i stronę. Na naszej stronie testowej możesz zobaczyć, jak wygląda blok referencji.

Utwórz reakcję blokową Gutenberga

Istnieje kilka sposobów na utworzenie bloku Gutenberga w React. Pierwszym sposobem jest użycie narzędzia CLI do tworzenia guten-block. To zbuduje dla ciebie nowy blok Gutenberga. Aby skorzystać z tej metody, musisz mieć zainstalowane Node.js i npm na swoim komputerze. Po zainstalowaniu tych zależności możesz utworzyć nowy blok Gutenberga, uruchamiając następujące polecenie: create-guten-block my-block Spowoduje to utworzenie nowego katalogu o nazwie my-block ze wszystkimi niezbędnymi plikami dla bloku Gutenberga. Drugim sposobem utworzenia bloku Gutenberga w React jest użycie pakietu @wordpress/block-editor. Ten pakiet zawiera funkcję pomocniczą o nazwie createBlock, której można użyć do tworzenia bloków Gutenberga. Aby skorzystać z tej metody, musisz zainstalować pakiet @wordpress/block-editor w swoim projekcie. Po zainstalowaniu pakietu możesz utworzyć nowy blok Gutenberga, uruchamiając następujący kod: import { createBlock } z '@wordpress/block-editor'; createBlock( 'mój-blok/mój-blok', { title: 'Mój blok', kategoria: 'wspólne', } ); Spowoduje to utworzenie nowego bloku o nazwie my-block we wspólnej kategorii. Trzecim sposobem utworzenia bloku Gutenberga w React jest użycie funkcji wp.blocks.createBlock . Ta funkcja jest częścią WordPress API JavaScript i może być używana do tworzenia bloków Gutenberga. Aby skorzystać z tej metody, musisz dołączyć do swojego projektu pakiet wp-api-request. Po zainstalowaniu pakietu możesz utworzyć nowy blok Gutenberga, uruchamiając następujący kod: import { wp } from 'wp'; wp.blocks.createBlock( 'mój-blok/mój-blok', { title: 'Mój blok', kategoria: 'wspólne', } ); Spowoduje to utworzenie nowego bloku o nazwie my-block we wspólnej kategorii.

Dowiedz się, jak tworzyć niestandardowe bloki w tym samouczku dla edytora Gutenberg. Do wykonania zadania użyjesz stworzonej przez siebie wtyczki. Chociaż dostępny jest jeden z domyślnych motywów do tworzenia niestandardowego bloku Gutenberga, musimy przyznać, że jest to możliwe. W tym samouczku omówimy, jak utworzyć nowy niestandardowy blok za pomocą Gutenberga. Ponadto dostosujemy wygląd frontendu i edytora w oparciu o podane przez nas preferencje projektowe. Jeśli nie chcesz spędzać dużo czasu na tworzeniu bloków, możesz po prostu dodać jeden, a następnie dostosować je do swoich wymagań.

React jest łatwy w użyciu w niestandardowych motywach

React to doskonała biblioteka do tworzenia interfejsów użytkownika za pomocą JavaScript. WordPress używa go do obsługi nowego edytora Gutenberg , a także ekranu administratora widżetu i ostatnich aktualizacji możliwości edycji treści witryny. Ponieważ React jest już osadzony w WordPressie, jest prosty w użyciu w niestandardowych motywach.

Gutenberg Utwórz niestandardowy blok przycisków

Gutenberg tworzy niestandardowy blok przycisków to bardzo przydatne narzędzie do tworzenia niestandardowych przycisków dla Twojej witryny. Za pomocą tego narzędzia możesz łatwo tworzyć przyciski, które są zarówno przyciągające wzrok, jak i funkcjonalne. To świetny sposób, aby nadać swojej witrynie osobisty charakter i wyróżnić ją na tle innych.

W tym samouczku dowiesz się, jak zrobić swój pierwszy prosty blok w popularnej aplikacji. Nasza aplikacja @create-block WordPress to oficjalne narzędzie, które pozwala nam szybko generować kod JavaScript/PHP/CSS. W trybie interaktywnym możesz skonfigurować swój blok w szeregu kroków. Kiedy dopiero uczysz się o Gutenbergu, może to być niezwykle przydatne. Jeśli już zbudowałeś szkielet bloku, możesz teraz uzyskać dostęp do nowo utworzonego katalogu za pomocą edytora kodu. Struktura wtyczki blokowej jest taka, jaka jest obecnie (w momencie pisania tego samouczka). W tym module omówimy szczegóły każdego pliku i jego zastosowanie.

Flaga wiersza polecenia jest powszechną metodą określania opcji dla programów wiersza polecenia. Przed użyciem flag, zastąp wartości w katalogu flag tymi, których chcesz użyć. Arkusz stylów, który zostanie umieszczony w kolejce lub zastosowany w edytorze. Podstawowe szczegóły wtyczki zostały szczegółowo omówione. WordPress domyślnie wyświetla informacje o wtyczkach. Aby poinformować Git, które pliki zignorować podczas tworzenia projektu z kontrolą wersji, należy dołączyć plik Gitignore A.. Repozytorium zawiera informacje. Config pozwala programistom zachować spójny styl kodowania w wielu projektach.

Tworzenie wtyczek WordPress Gutenberg

Wtyczka WordPress Gutenberg to projekt open source, który jest rozwijany przez społeczność wolontariuszy. Każdy może przyczynić się do projektu i pomóc go ulepszyć. Wtyczka jest stale aktualizowana i ulepszana. Jeśli jesteś programistą, możesz przyczynić się do rozwoju projektu, opracowując nowe funkcje lub naprawiając błędy.

Prawdopodobnie słyszałeś o Gutenbergu (edytorze bloków WordPress), ale jak zacząć tworzyć własną wtyczkę? Bloki tworzy się za pomocą prostego skryptu WordPress. Utworzony tutaj rodzaj wtyczki WordPress jest zazwyczaj blokiem, ale stanowi dobry punkt wyjścia dla innych w procesie. Skrypt tworzenia bloku może być używany jako szablon do tworzenia własnej wtyczki. Możesz łatwo zobaczyć blok w przedniej części WordPressa, ale ma on inny wygląd, aby pomóc Ci się do niego przyzwyczaić na zapleczu. Ten plik należy wygenerować w trybie deweloperskim dopiero po skompilowaniu zasobów. /node_modules – Jest to folder, z którego przechowywane są wszystkie parametry zależne od JavaScriptu Twojej wtyczki.

W tym pliku można znaleźć wstępnie ustawione pliki zawierające przydatne środowiska Visual Studio Code (VDC). Musisz upewnić się, że jesteś w folderze wtyczek WordPress, jeśli chcesz utworzyć wtyczkę. W rezultacie będziesz mógł zobaczyć etapy rozwoju i produkcji wtyczki. Otwórz /src/save.js w swoim edytorze, aby zastąpić funkcję zapisywania następującą: BlockText można w ten sposób wyprowadzić jako ciąg znaków. Poniższy kod należy dodać do katalogu głównego wtyczki, aby wyświetlać bloki w niestandardowej kategorii bloków. Funkcja registerBlockType.js zwraca listę kategorii bloków, które można następnie ponownie skompilować za pomocą funkcji registerBlockType.js wtyczki.

Redakcja treści Gutenberga

Użytkownicy WordPressa mogą tworzyć, edytować i usuwać treści za pomocą aplikacji jednostronicowej (SPA) opartej na React. W przeciwieństwie do tradycyjnego edytora treści, ten zapewnia bardziej płynny i przyjazny dla użytkownika interfejs. Jeśli potrzebujesz mocniejszego edytora treści, aplikacja Gutenberg nie jest dla Ciebie. Jeśli wolisz bardziej wyluzowany wygląd, możesz polegać na Gutenbergu.

Edytor niestandardowego bloku WordPress

Możesz użyć tego bloku w dowolnym poście lub na stronie, którą chcesz. Na ekranie Dodaj nowy blok użyj pola wyszukiwania, aby wyszukać swój blok, wpisując jego nazwę lub słowa kluczowe. Po wstawieniu bloku do obszaru zawartości zobaczysz pola bloku utworzone dla tego bloku niestandardowego.

Ten samouczek przeprowadzi Cię przez proces tworzenia w pełni funkcjonalnej, niestandardowej instancji edytora bloków w WordPress. Ten edytor zostanie zbudowany w całości na niestandardowej stronie administratora WP o nazwie Edytor bloku (w najbardziej kreatywny sposób). W naszym WordPress Plug-A-Thon stworzymy edytor. Musimy teraz wygenerować trochę kodu HTML na naszej niestandardowej stronie za pomocą komponentu React edytora bloków. Jako trzeci argument używamy wiersza zależności skryptu ($script_asset['dependencies']). Zapewni to, że skrypty związane z WordPress nie będą zawarte w zbudowanym pakiecie. Aby z nich korzystać, musimy również zarejestrować nasze niestandardowe style CSS i domyślną bibliotekę formatowania WordPress.

Dzięki temu możemy użyć JavaScript do wygenerowania edytora bloków w kodzie HTML strony. Magia dzieje się, gdy komponent do tego nazywa się BlockEditor. Możliwe jest renderowanie edytora z PHP bez tworzenia globalnego JS. Układ edytora opiera się na rusztowaniu, jak widać tutaj, oprócz kilku wyspecjalizowanych dostawców kontekstu. Block EditorProvider jest najważniejszym składnikiem pakietu edytora bloków WordPress. Jak wyjaśniliśmy wcześniej, zapewnia to nowy kontekst dla zupełnie nowego edytora bloków w kontekście edycji bloku. Osiąga to poprzez zasubskrybowanie dostarczonego rejestru (za pośrednictwem HOC dostawcy zRegistry), nasłuchiwanie zdarzeń zmiany bloku, określenie, czy zmiana bloku pozostała trwała i wywołanie procedury obsługi wejścia onChange, gdy jest to konieczne.

Najbardziej intrygującym komponentem jest komponent BlockList, który dodaje do edytora listę bloków. Warto szczegółowo przestudiować te komponenty, ponieważ są one jednymi z najbardziej skomplikowanych i zaangażowanych. Aby dowiedzieć się więcej o naszym niestandardowym komponencie EditorBlock, zapoznaj się z następującym artykułem. Slot/fill jest implementowany za pomocą naszego komponentu Blockeditor (patrz powyżej), aby odsłonić w nim Fill (pasek boczny. InspectorFill), który następnie importujemy i renderujemy do implementacji. W rezultacie React pozwala nam zachować komponent kontroli w jego DOM, jednocześnie renderując go do znaczników w osobnej lokalizacji (na przykład na pasku bocznym). Bloki można również znaleźć w LocalStorage pod kluczem getdavesbeBlocks.

Dane te są serializowane do formatu gramatyki blokowej, co oznacza, że ​​mogą być przechowywane w ciągu. GitHub skompilował cały kod dla niestandardowego działającego edytora bloków. Program można pobrać i wypróbować za darmo.