[Czym są] WordPress Gutenberg Blocks i jak z nich dobrze korzystać

Edytor WordPress Gutenberg pojawił się wraz z WordPress 5.0 w grudniu 2018 r. Znana częściej jako „edytor bloków”, nowa funkcja przełącza tworzenie stron i postów z prostego projektu poprzednich wersji na bardziej podobne do kreatora stron.

Gutenberg blocks teraz oferują modułowe podejście do tworzenia treści. Zamiast używać kodu do dodawania innego elementu na stronie, możesz zamiast tego przełączyć blok. Na przykład możesz zamienić blok tekstowy na blok wideo lub tabelę, tak jak podczas tworzenia strony w Beaver Builder lub Elementora. To ewolucja, która nadchodziła od dawna, ale teraz szybko zaczniesz się zastanawiać, jak kiedykolwiek tworzyłeś strony bez niej!

Gutenberg blocks

Jeśli zaktualizujesz WordPress 5.0 lub nowszy, a powinieneś już teraz, zauważysz, że interfejs użytkownika nieco się zmienił. Nadal będziesz widzieć tradycyjne menu boczne po lewej stronie i menu treści po prawej, ale pośrodku wszystko się zmieniło.

Przed aktualizacją widziałeś puste pole tytułu i treści w miejscu, w którym zbudowałeś swoją stronę lub post. Teraz zobaczysz pustą sekcję pośrodku z już wypełnionymi blokami tytułowymi i tekstowymi. Prawe menu będzie się dynamicznie zmieniać w zależności od tego, co robisz. Na początku pokazuje tradycyjne opcje kategorii, tagów i obrazów funkcji, jak poprzednio, ale teraz wprowadza kartę Blokuj.

Karta Blok umożliwia edycję pojedynczego bloku, podobnie jak te kreatory stron, które oferują dużą swobodę w zakresie projektowania. To, co widzisz na karcie Blok, zależy od danego bloku, ale wszystkie będą miały opcję dodania niestandardowego kodu CSS.

Gutenberg blocks wprowadzić prawdziwie modułowe podejście do projektowania stron. Masz możliwość kontynuowania robienia rzeczy w ten sam sposób lub zagłębienia się w temat. Możesz dostosować każdy blok, aby wyglądał subtelnie lub wyraźnie inaczej, lub sprawić, aby wszystkie działały jako bezproblemowa całość. To bardzo potężny i wyrozumiały system.

Jak używać Gutenberg blocks

Wspaniałą rzeczą w przeprojektowaniu WordPressa jest to, że jest wystarczająco podobny do tego, jak działało wcześniej, że interfejs użytkownika jest nadal znajomy. Nawet jeśli nie zapoznałeś się z nowymi blokami, nadal możesz dodać tytuł swojej strony, dodać treść, dodać kody i widżety i publikować jak poprzednio. Może wyglądać trochę inaczej, ale działa bardzo podobnie.

Jest to idealne rozwiązanie dla okazjonalnych blogerów lub nowych użytkowników WordPressa. Ponieważ jednym z kluczowych elementów CMS jest jego łatwość użytkowania, programistom udało się w jakiś sposób dodać bardziej zaawansowane funkcje bez utrudniania korzystania z całego systemu.

Nadal możesz utworzyć stronę w kilka minut, korzystając z domyślnych opcji, ale teraz możesz przejść znacznie głębiej bez konieczności uczenia się linii kodu, a nawet wiedzy, jak wygląda krótki kod.

To właśnie te rzeczy sprawiają, że Gutenberg blocks tak przydatne.

Możesz użyć Gutenberg blocks lub nie.

Domyślne ustawienie strony i postu oznacza, że ​​nadal możesz wstępnie sformatować zawartość strony w innym miejscu i po prostu skopiować i wkleić ją na stronie. Wklej tytuł do bloku tytułowego, a zawartość strony do bloku tekstowego. Jeśli to wszystko, czego potrzebujesz, proces tworzenia jest tak prosty jak poprzednio. Jeśli chcesz posunąć się dalej, możesz.

Jeśli chcesz zagłębić się w działanie edytora bloków, zobaczysz kilka dodatkowych opcji:

• Wybierz małą ikonę „+” obok środkowego bloku, aby dodać nowy blok.
• Wybierz „H”, aby dodać nagłówek.
• Wybierz ikonę listy, aby dodać listę do swojego bloku.
• Wybierz ikonę obrazu, aby dodać obraz.

Wszystkie cztery z tych opcji są dostępne z menu treści, ale posiadanie ich dla każdego bloku oznacza, że ​​możesz tworzyć treści w dowolnym projekcie. Poszczególne wyróżniające się bloki można edytować i oprawiać indywidualnie, a każdy z nich zostanie odzwierciedlony na gotowej stronie.

To jest coś Elementor (i twórcy stron, tacy jak Divi) robię od lat z doskonałym efektem. Teraz możesz zrobić to samo w WordPressie.

Więcej informacji znajdziesz na naszej stronie Divi w naszych recenzjach Elegant Themes.

Tworzenie strony za pomocą edytora bloków jest proste:

1. Wybierz Nowa strona lub Nowy post z bocznego menu WordPressa.
2. Wpisz lub wklej tytuł strony do bloku tytułowego.
3. Napisz lub wklej treść do bloku tekstowego.
4. Wybierz ikonę „+” po prawej stronie bloku, aby dodać nowy blok.
5. Wybierz najbardziej odpowiedni blok z wyskakującego okienka.
6. Uzupełnij główne elementy bloku w środkowym okienku.
7. Wybierz ikonę z trzema kropkami w górnej części dodanego bloku, aby zmienić projekt lub dostosować.
8. Aby dodać niestandardowy CSS, wybierz Zaawansowane z prawego menu.
9. Wybierz Opublikuj dwukrotnie, aby rozpocząć transmisję na żywo.

Chociaż korzystanie z edytora bloków jest bardzo proste, możesz zanurkować znacznie głębiej, jeśli zajdzie taka potrzeba. Ta ikona menu z trzema kropkami przy każdym bloku otwiera mnóstwo opcji dostosowywania w zależności od bloku. Możesz duplikat bloku, wstawiaj inne bloki przed lub po, zmieniaj atrybuty HTML, grupuj bloki razem i więcej w zależności od dostępnych opcji.

Co więcej, oprócz standardowych bloków dostarczanych z WordPress, programiści mogą również tworzyć własne wtyczki blokowe. Biorąc pod uwagę ogromną bazę użytkowników i talent programistyczny WordPressa, już po roku użytkowania dostępnych jest wiele wtyczek blokowych.

Powszechnie używane bloki

WordPress zawiera szereg bloków, które obejmują tworzenie strony głównej. Każdy z nich ułatwia pracę polegającą na dodawaniu różnych elementów strony, jednocześnie umożliwiając niestandardowe funkcje projektowania tylko dla tego bloku. Jest to potężna opcja edycji, której można używać z doskonałym skutkiem.

Średnia Gutenberg blocks w ramach WordPressa obejmują:

• Blok tekstowy – Tradycyjny blok treści, w którym możesz pracować dokładnie tak jak wcześniej i modyfikować za pomocą HTML lub shortcode.
• Nagłówek – Bloki nagłówka ze standardowymi ustawieniami H1, H2, H3, H4.
• Lista – Oddzielny blok, za pomocą którego możesz tworzyć wyróżniające się listy uporządkowane lub nieuporządkowane.
• Galeria - Blok galerii, który umożliwia niestandardowe formatowanie obrazów w celu dopasowania do zawartości strony.
• Wizerunek - Określony blok obrazu, który działa podobnie do galerii, ale dla pojedynczych obrazów.
• Cytat - Wyróżniający się blok, który pozwala wyróżnić cytaty lub recenzje na stronie.
• Audio - Określony blok do funkcji kliknij, aby odtworzyć klipy audio w treści strony.
• Pokrywa - Nowy blok, który umożliwia umieszczenie obrazu okładki strony lub posta, który może uzupełnić wyróżniony obraz.
• Wideo - Blok wideo, który działa jak dźwięk i ułatwia umieszczanie wideo na stronie lub w poście.

Wszystko, z czym możesz zrobić Gutenberg blocks kiedyś można było korzystać z oryginalnego edytora, ale nie zawsze był on przyjazny dla użytkownika lub dostępny dla nowych użytkowników. Ten blokowy projekt ułatwia każdemu budowanie swoich stron w logiczny i liniowy sposób.

Najlepsze wtyczki blokowe Gutenberg

Standardowy WordPress Gutenberg blocks obejmują większość tego, czego prawdopodobnie potrzebujesz od swojego CMS. Wspomnieliśmy jednak wcześniej, że programiści zaczęli również tworzyć własne wtyczki blokowe Gutenberg, aby dodać jeszcze więcej funkcji. Istnieją dziesiątki wtyczek blokowych o różnej jakości i zebraliśmy tutaj niektóre z naszych ulubionych.

Przyjrzyjmy się teraz niektórym z nich.

Przyjrzymy się:

1. Bloki zestawu narzędzi
2. Ostateczne bloki
3. Ultimate Addons dla Gutenberga
4. Zaawansowane Gutenberg Blocks
5. Stosowalne Gutenberg Blocks
6. Bloki atomowe
7. Bloki wydry
8. Bloki Templatic
9. Bloki Kadence

Wiele z tych wtyczek blokowych Gutenberga jest całkowicie darmowych, podczas gdy inne oferują bezpłatne bloki z opcją uaktualnienia do bardziej zaawansowanych bloków premium. W każdym opisie wymieniliśmy te, które są bezpłatne i gdzie są opcje premium.

Każdy zainstaluje się w taki sam sposób, w jaki instalujesz każdą inną wtyczkę WordPress. Wybierz go z WordPress.org i zainstaluj i aktywuj lub pobierz pliki na swój komputer i prześlij je do swojej instalacji WordPress. Po zainstalowaniu powinieneś zobaczyć nowe opcje blokowania ze standardowym zablokowanym po wybraniu „+” na stronie.

1. Bloki zestawu narzędzi

Bloki zestawu narzędzi to jedna z naszych ulubionych wtyczek edytora bloków dla WordPress. Jest to wtyczka premium, która udowadnia, że ​​chociaż dobre rzeczy można dostać za darmo, czasami warto zapłacić trochę więcej za moc i wygodę. Wtyczka instaluje się w taki sam sposób jak inne wtyczki i doda nowe bloki do istniejącego menu.

Bloki obejmują niestandardowe typy postów, niestandardową taksonomię, niestandardowe pola, szablony, widoki, paginację, nieskończone przewijanie, bloki Ajax, WooCommerce, Mapy Google, formularze, płatności, a nawet kontrolę dostępu. Niektórych z tych bloków nie znajdziesz w żadnej bezpłatnej wtyczce, dlatego podświetliliśmy bloki zestawu narzędzi.

Jedną z najlepszych cech zestawu narzędzi jest możliwość tworzenia dynamicznie generowanych treści BEZ konieczności wykonywania niestandardowego kodu PHP. Zestaw narzędzi integruje się bezpośrednio z edytorem bloków WordPress i umożliwia pobieranie dynamicznej zawartości z dowolnego miejsca.

Jako kilka przykładów, co możesz zrobić: 

• Twórz nagłówki na podstawie tytułów
• Ustaw teksty przycisków i CTA z niestandardowych pól
• Ustaw źródła obrazów dla pól lub pól niestandardowych
• itd.

Poniższy film jest doskonałym wyjaśnieniem możliwości bloków zestawu narzędzi:

Większość z nas wie, jak potężne mogą być pola niestandardowe i typy postów, a możliwość zaimplementowania tego na stronie jest znakomita. Oprócz formularzy, układów, widoków, kontroli dostępu i innych zaawansowanych funkcji niezwykle łatwo jest polecić tę wtyczkę, mimo że jest to produkt premium.

Czasami za darmo nie jest najlepszą ceną i to jest jeden z tych czasów.

2. Ostateczne bloki

Ostateczne bloki jest oferowany blogerom, ale działa równie dobrze na każdej witrynie WordPress. Wtyczka jest bezpłatna i zawiera wybór promocyjnych i bardzo przydatnych bloków edycyjnych, które są idealne dla blogerów, ale mogą również okazać się przydatne dla marketerów, witryn eCommerce, małych firm i każdego, kto chce, aby ich treść się wyróżniała.

Bloki obejmują recenzje, spis treści, wezwania do działania, przełączanie treści, suwak obrazu, filtry treści, referencje, udostępnianie społecznościowe, liczniki czasu, paski postępu, siatki postów i oceny w postaci gwiazdek. Deweloper twierdzi, że mają też więcej w drodze.

Ultimate Blocks ma jeszcze jednego asa w rękawie w swoim menedżerze bloków. Prosty interfejs, który pomaga włączać i wyłączać bloki, aby tworzenie stron było proste. Oznacza to, że możesz pobrać kolekcję i włączyć tylko te bloki, których prawdopodobnie użyjesz, dzięki czemu strona będzie wolna od bałaganu podczas tworzenia.

3. Gutenberg Blocks – Ultimate Addons dla Gutenberga

Gutenberg Blocks – Ultimate Addons dla Gutenberga pochodzi od tych samych programistów co super Motyw WordPress Astra. Bezpłatna wtyczka dodaje szereg bloków do codziennego użytku, które są proste w użyciu i oferują szeroki zakres opcji dostosowywania. Wszystkie będą działać również z Astrą, co jest świetne, jeśli użyjesz tego motywu.

Bloki obejmują infoboksy, przyciski, zaawansowane nagłówki, bloki zespołów, ceny, udostępnienia społecznościowe, referencje, listy ikon, bloki Gravity Form, bloki marketingowe, cytaty, wezwania do działania, bloki Contact Form 7, Mapy Google i wiele innych.

Twórcy twierdzą, że te bloki zostały zoptymalizowane pod kątem szybkości strony, oferując jednocześnie bezproblemową integrację z motywem Astra i w ramach dowolnego innego motywu. Masz podobne opcje dostosowywania do tych innych wtyczek, aby wsuwać bloki do istniejących stron. Już samo to sprawia, że ​​warto sprawdzić tę wtyczkę.

4. Zaawansowany Gutenberg

Zaawansowany Gutenberg od Joom United dodaje ponad dwadzieścia bloków edytora jako darmową wtyczkę WordPress. Jest tu przyzwoity zakres opcji, od zwykłej kolumny i nagłówka po bardziej zaawansowane bloki. Są dobrze zaprojektowane z minimalnym interfejsem, który nadal oferuje wszystkie opcje dostosowywania, których możesz potrzebować.

Bloki obejmują profile autorów, niestandardowe bloki CCS, WooCommerce, zaawansowane przyciski, formularze kontaktowe, zaawansowane listy, mapy, referencje, liczniki, bloki logowania i rejestracji, bloki wideo i obrazów, udostępnianie i łączenie społecznościowe, podsumowania postów, blok Lightbox i wiele więcej .

Każdy z nich płynnie integruje się ze stroną i jest kompletny z zaawansowaną opcją dostosowywania za pomocą menu z trzema kropkami. Dokładne opcje różnią się w zależności od danego bloku, ale obejmują najczęstsze sytuacje, kolor, rozmiar, wcięcie, wyrównanie itd.

5. Możliwość układania w stosy Gutenberg Blocks

Stosowalne Gutenberg Blocks było kolejnym wczesnym pojawieniem się aktualizacji i wydało kilka bardzo przydatnych niestandardowych bloków dla edytora WordPress. Większość bloków do układania w stos jest bezpłatna, ale programista oferuje również kilka bloków premium, które dotyczą konkretnych zastosowań, jeśli ich potrzebujesz.

Bezpłatne bloki obejmują bloki postów, siatkę funkcji, akordeon, wezwanie do działania, kartkę, nagłówek, wyskakujące okienko wideo, blok cenowy, blok powiadomień, odstępnik, rozdzielacz, listę funkcji i inne. W sumie są 23 wolne bloki.

Dodatkową korzyścią jest to, że Stackable to system modułowy, dzięki czemu możesz dodawać bloki, których prawdopodobnie będziesz potrzebować, pozostawiając inne. W zależności od konfiguracji witryny może to przynieść niewielką korzyść w zakresie pamięci masowej i szybkości strony. Tak czy inaczej, jest to fajna dodatkowa funkcja, która może utrzymać szczupłą sylwetkę z tyłu.

6. Bloki atomowe

Bloki atomowe była kolejną z pierwszych wtyczek na scenie, a teraz oferuje 15 darmowych bloków i niektóre motywy WordPress, które uzupełniają tę nową swobodę projektowania. Bloki obejmują referencje, ceny, biuletyn, siatkę postów, zaawansowane kolumny, ikony udostępniania, wezwanie do działania, profil autora i inne przydatne bloki.

Wtyczka jest darmowa, podobnie jak większość motywów. Po zainstalowaniu zobaczysz nową serię bloków w sekcji bloku nowej strony lub posta. Poszukaj AB Post Grid itp., aby zidentyfikować funkcje Atomic Block.

Podobnie jak w przypadku innych wtyczek blokujących edytor, możesz dostosować ich wygląd w menu zaawansowanym. Masz podobne opcje pod względem krycia, koloru, pozycjonowania itd. Z dodatkową korzyścią dodatkowych opcji, jeśli używasz motywu Atomic Block. To niewielka dodatkowa funkcja, ale jest!

7. Gutenberg Blocks i biblioteka szablonów autorstwa Otter

Gutenberg Blocks i biblioteka szablonów autorstwa Otter to kęs nazwy o wiele bardziej przyswajalnej pod względem cech. Jest to darmowa, lekka wtyczka, która zawiera kilka dobrze zaprojektowanych bloków, które opierają się na tych dostarczonych przez WordPress, tylko z większą liczbą opcji projektowych.

Bloki obejmują sekcje, zaawansowane nagłówki, przyciski, ceny, referencje, Mapy Google, bloki biografii autorów, siatkę postów, Font Awesome, udostępnianie i blokadę kart. Wszystkie są zoptymalizowane pod kątem szybkości strony, a także funkcji, a chociaż są one lekkie, stanowią doskonałe uzupełnienie domyślnych bloków.

Dla każdego bloku dostępne są dodatkowe dostosowania i kilka opcji bibliotecznych. Możesz dostosować każdy blok do swoich konkretnych potrzeb lub skorzystać z opcji biblioteki, aby pobrać gotowy projekt i użyć go w bloku. To szybkie i bardzo proste.

8. Bloki Templatic

Bloki autorstwa developera Templatic to kolejny solidny wpis na naszej liście znakomitych wtyczek blokowych Gutenberga. Mamy wielki szacunek dla motywów Templatic, a te bloki będą działać z jednym z ich motywów lub bez niego. Jeśli używasz motywu Templatic, te bloki wślizgują się od razu i są gotowe do użycia. Jeśli nie używasz motywu Templatic, te bloki nadal będą płynnie integrować się z Twoim projektem.

Bloki są bezpłatne i zawierają biografię autora, alerty, udostępnianie w mediach społecznościowych, separatory, zdjęcie okładki, opcje nagłówków, mapę, ceny, przyciski i blok Tweet. Każdy z nich ma podstawowe funkcje z przodu i na środku z możliwością dostosowania poprzez menu. Są bardzo proste w użyciu i pojawią się obok wszystkich domyślnych bloków na nowej stronie lub ekranie postu.

Jest tu kilka dobrych bloków, ale wtyczka nie była aktualizowana od prawie roku. Działają z obecną wersją WordPressa, ponieważ testowaliśmy je na czas przed tym artykułem, ale nie wiemy, kiedy pojawią się nowe bloki.

9. Bloki kadencji

Bloki Kadence ma zarówno darmowe, jak i premium opcje, które wzmacniają domyślne bloki w WordPressie. Darmowa wersja ma dwanaście bloków i wbudowany edytor, podczas gdy wersja premium za 59 USD rocznie dodaje siedem bloków premium, unikalne opcje animacji i wsparcie. Istnieje również trzecia opcja, za 99 USD rocznie można uzyskać dostęp do wszystkich bloków edycji premium oraz wszystkich motywów i produktów Kadence.

Bloki obejmują bloki układu strony, pola informacyjne, zaawansowane galerie, referencje, bloki wideo, akordeon, przyciski, karty, ikony, zaawansowane nagłówki i obrazy. Wersja premium dodaje bloki siatki i karuzeli, karuzele produktów, bloki modeli, nakładki obrazów, podzielone treści i wyskakujące okienka wideo.

Każdy blok ma niestandardową sekcję edycji, w której możesz zmienić pozycję, kontur, kolor, rozmiar obrazu, krycie i szereg innych czynników. Jeśli pracujesz w określonym projekcie lub strukturze, możesz z łatwością zaimplementować bloki w tym projekcie za pomocą edytora.

Podsumowanie Gutenberg blocks i ich wtyczki

Gutenberg blocks to doskonała ewolucja WordPressa. Biorą wszystko, co wiemy i kochamy w szybkim tworzeniu stron lub postów, i popychają to do przodu. WordPress nadal oferuje swoją charakterystyczną łatwość użytkowania i niską barierę wejścia dla początkujących, oferując jednocześnie bardziej doświadczonym lub zorientowanym na projektowanie użytkownikom możliwość wyróżnienia się. Ta równowaga między formą a funkcją jest warta świętowania.

Podobnie jak wtyczki blokowe Gutenberga, które znajdują się na tej liście. Darmowe wtyczki oferują prawie wszystko, czego potrzebujesz od tworzenia strony. Możliwość podzielenia strony lub posta na poszczególne elementy i stylizacji każdego z osobna, aż będzie po prostu idealny.

Nawet te wtyczki premium są warte swojej ceny. Mają tendencję do oferowania wyższych standardów w zakresie projektowania i użyteczności, a także niektórych bloków niedostępnych gdzie indziej. Choć premium, Toolset Blocks wyróżnia się oferowaniem szeregu bloków, których nie znajdziesz w żadnej bezpłatnej wtyczce, takiej jak wyszukiwanie, kontrola dostępu, WooCommerce i posty niestandardowe oraz pola niestandardowe.

Czy masz ulubioną wtyczkę blokową Gutenberga? Kochasz kogoś, o którym tu nie wspomnieliśmy? Opowiedz nam o nich poniżej, jeśli tak!

O autorze

Autor: Jamiego KavanaghaStrona internetowa: https://www.coastalcontent.co.ukE-mail: jamie @collectiveray.com

Jamie, inżynier z wykształcenia, jest naszym głównym pisarzem technicznym i badaczem. Jamie prowadzi również Coastal Content, firmę zajmującą się marketingiem treści, copywritingiem i projektowaniem stron internetowych z siedzibą w Kornwalii w Wielkiej Brytanii.