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

Edytor WordPress Gutenberg pojawił się wraz z WordPressem 5.0 w grudniu 2018 r. Nowa funkcja, powszechnie znana jako „edytor blokowy”, zmienia tworzenie stron i wpisów z prostego, pudełkowego projektu z poprzednich wersji na środowisko bardziej przypominające kreator stron.

Gutenberg blocks teraz dostarczają modułowe podejście do tworzenia treści. Zamiast używać kodu, aby dodać inny element na stronę, możesz zamiast tego zamienić blok. Na przykład możesz zamienić blok tekstu na blok wideo lub tabelę, podobnie jak zrobiłbyś to podczas tworzenia strony w Beaver Builder lub Elementor. To ewolucja, na którą długo czekaliśmy, ale teraz jest już tutaj. Szybko się zastanowisz, jak kiedykolwiek tworzyłeś strony bez niego!

{automatycznie}

Gutenberg blocks

Jeśli zaktualizujesz WordPressa do wersji 5.0 lub nowszej, a powinieneś już to zrobić, zauważysz, że interfejs użytkownika trochę się zmienił. Nadal będziesz widzieć tradycyjne menu boczne po lewej stronie i menu treści po prawej, ale w centrum wszystko się zmieniło.

Przed aktualizacją widziałeś puste pole tytułu i treści, w którym tworzyłeś swoją stronę lub post. Teraz zobaczysz pustą sekcję w środku z blokiem tytułu i blokiem tekstu już wypełnionymi. Prawe menu będzie się dynamicznie zmieniać w zależności od tego, co robisz. Na początku pokazuje tradycyjne opcje kategorii, tagu i obrazu wyróżnionego, jak poprzednio, ale teraz wprowadza kartę Blok.

Karta Block pozwala edytować poszczególne bloki, podobnie jak kreatory stron, oferujące dużą swobodę w zakresie projektowania. To, co widzisz na karcie Block, zależy od danego bloku, ale wszystkie będą miały opcję dodawania niestandardowego 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

Najlepsze w nowym projekcie WordPressa jest to, że jest on wystarczająco podobny do tego, jak wszystko działało wcześniej, dzięki czemu interfejs użytkownika jest nadal znajomy. Nawet jeśli nie zapoznałeś się z nowymi blokami, nadal możesz dodać tytuł strony, dodać swoją treść, dodać kody i widżety oraz opublikować jak poprzednio. Może wyglądać trochę inaczej, ale działa tak samo.

Jest to idealne rozwiązanie dla okazjonalnych blogerów lub osób, które dopiero zaczynają przygodę z WordPressem. Ponieważ jednym z kluczowych elementów CMS jest łatwość obsługi, twórcy jakoś zdołali dodać bardziej zaawansowane funkcje, nie utrudniając przy tym korzystania z całego systemu.

Nadal możesz utworzyć stronę w ciągu kilku minut, korzystając z domyślnych opcji, ale teraz możesz zagłębić się w szczegóły, nie musząc uczyć się ani jednej linijki kodu ani nawet wiedzieć, 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 wpisu oznacza, że ​​nadal możesz wstępnie sformatować zawartość strony w innym miejscu i po prostu skopiować i wkleić ją na stronę. Wklej tytuł do bloku tytułowego, a zawartość strony do bloku tekstowego. Jeśli to wszystko, czego potrzebujesz, proces tworzenia jest tak prosty jak wcześniej. Jeśli chcesz pójść dalej, możesz.

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

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

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

To jest coś Elementor (i podobne do niego kreatory stron, np. Divi) robią od lat z wielkim skutkiem. Teraz możesz zrobić prawie to samo w WordPressie.

Więcej informacji znajdziesz tutaj: Divi w naszych recenzjach Elegant Themes.

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

1. Wybierz opcję Nowa strona lub Nowy wpis z menu bocznego WordPress.
2. Wpisz lub wklej tytuł swojej strony w bloku tytułowym.
3. Napisz lub wklej swoją treść w bloku tekstowym.
4. Aby dodać nowy blok, wybierz ikonę „+” po prawej stronie bloku.
5. Wybierz najbardziej odpowiedni blok z okna podręcznego.
6. Uzupełnij główne elementy bloku w środkowym panelu.
7. Aby zmienić lub dostosować projekt, wybierz ikonę z trzema kropkami znajdującą się u góry dodanego bloku.
8. Aby dodać niestandardowy kod CSS, wybierz opcję Zaawansowane z menu po prawej stronie.
9. Aby opublikować, kliknij dwukrotnie przycisk Publikuj.

Chociaż korzystanie z edytora bloków jest bardzo proste, możesz zagłębić się o wiele bardziej, 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 blok, wstawiać inne bloki przed lub po, zmieniać atrybuty HTML, grupować bloki i wiele więcej, w zależności od dostępnych opcji.

Co więcej, oprócz standardowych bloków, które są dołączone do WordPressa, deweloperzy mogą również tworzyć własne wtyczki bloków. Biorąc pod uwagę ogromną bazę użytkowników i talent deweloperów WordPressa, jest już wiele dostępnych wtyczek bloków po zaledwie roku użytkowania.

Często używane bloki

WordPress zawiera szereg bloków obejmujących tworzenie podstawowych stron. Każdy z nich ułatwia dodawanie różnych elementów strony, a jednocześnie umożliwia niestandardowe funkcje projektowania dla samego bloku. To potężna opcja edycji, która może być używana z doskonałym skutkiem.

Średnia Gutenberg blocks w WordPressie znajdują się:

• Blok tekstowy – Tradycyjny blok treści, w którym możesz pracować dokładnie tak jak dotychczas i modyfikować go za pomocą kodu HTML lub krótkich kodów.
• Nagłówek – Bloki nagłówków ze standardowymi ustawieniami H1, H2, H3, H4.
• Lista – Osobny blok, którego możesz użyć do tworzenia wyróżniających się list, uporządkowanych lub nieuporządkowanych.
• Galeria - Blok galerii umożliwiający niestandardowe formatowanie obrazów w celu dopasowania ich do zawartości strony.
• Wizerunek - Konkretny blok obrazów, który działa podobnie do galerii, ale dotyczy pojedynczych obrazów.
• Cytat - Wyróżniający się blok umożliwiający wyróżnienie cytatów lub recenzji na stronie.
• Audio - Specjalny blok umożliwiający kliknięcie w celu odtworzenia klipów audio w treści strony.
• Pokrywa - Nowy blok umożliwiający umieszczenie obrazu głównego strony lub wpisu, który może uzupełniać obraz wyróżniony.
• Wideo - Blok wideo działający jak dźwięk, który ułatwia prezentowanie filmów na stronie lub w poście.

Wszystko, co możesz zrobić z Gutenberg blocks można było to zrobić za pomocą 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 stron w logiczny i liniowy sposób.

Najlepsze wtyczki blokowe Gutenberga

Standardowy WordPress Gutenberg blocks obejmują większość tego, czego prawdopodobnie będziesz potrzebować od swojego CMS-a. Jednak wspomnieliśmy wcześniej, że programiści zaczęli również produkować własne wtyczki blokowe Gutenberga, 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. Zaawansowany Gutenberg Blocks
5. Stosowalne Gutenberg Blocks
6. Bloki atomowe
7. Bloki wydry
8. Bloki przez Templatic
9. Bloki Kadence

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

Każda z nich zainstaluje się w ten sam sposób, w jaki instalujesz każdą inną wtyczkę WordPress. Wybierz ją z WordPress.org i zainstaluj, aktywuj lub pobierz pliki na swój komputer i prześlij je do instalacji WordPress. Po zainstalowaniu powinieneś zobaczyć nowe opcje blokowania, które pojawią się ze standardowym blokowaniem, gdy wybierzesz „+” na stronie.

1. Bloki zestawu narzędzi

Bloki zestawu narzędzi jest jedną z naszych ulubionych wtyczek edytora bloków dla WordPressa. Jest to wtyczka premium, która udowadnia, że ​​chociaż można dostać dobre rzeczy za darmo, czasami warto zapłacić trochę więcej za moc i wygodę. Wtyczka instaluje się w ten sam sposób, co 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 darmowej wtyczce, dlatego wyróżniliśmy bloki Toolset.

Jedną z najlepszych funkcji Toolset jest możliwość tworzenia dynamicznie generowanej zawartości BEZ konieczności pisania niestandardowego kodu PHP. Toolset integruje się bezpośrednio z edytorem bloków WordPress i umożliwia pobieranie dynamicznej zawartości z dowolnego miejsca.

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

• Utwórz nagłówki na podstawie tytułów
• Ustaw teksty przycisków i wezwania do działania z pól niestandardowych
• Ustaw źródła obrazów dla pól lub pól niestandardowych
• itd.

Poniższy film doskonale wyjaśnia możliwości bloków Toolset:

https://www.youtube.com/watch?v=yPExGHvf_mI

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

Czasami cena za darmo nie jest najlepsza i to jest właśnie jeden z takich przypadków.

2. Ostateczne bloki

Ostateczne bloki jest skierowany do blogerów, ale równie dobrze sprawdzi się na każdej stronie WordPress. Wtyczka jest darmowa 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 jego treść się wyróżniała.

Bloki obejmują recenzje, spis treści, wezwania do działania, przełączniki treści, suwak obrazów, filtry treści, referencje, udostępnianie w mediach społecznościowych, liczniki czasu, paski postępu, siatki postów i oceny gwiazdkowe. Deweloper twierdzi, że ma ich więcej w drodze.

Ultimate Blocks ma jeszcze jedną sztuczkę w swoim menedżerze bloków. Prosty interfejs, który pomaga włączać i wyłączać bloki, aby uprościć tworzenie stron. Oznacza to, że możesz pobrać kolekcję i włączać 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 deweloperów co superb 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 Astra, co jest świetne, jeśli używasz tego motywu.

Bloki obejmują infoboksy, przyciski, zaawansowane nagłówki, bloki zespołowe, ceny, udostępnienia w mediach społecznościowych, 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łych kolumn i nagłówków do bardziej zaawansowanych bloków. Są dobrze zaprojektowane z minimalnym interfejsem, który nadal oferuje wszystkie opcje dostosowywania, których prawdopodobnie będziesz 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 linkowanie w mediach społecznościowych, 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ł kolejnym wczesnym dodatkiem do aktualizacji i wydał kilka bardzo przydatnych bloków niestandardowych dla edytora WordPress. Większość bloków Stackable jest bezpłatna, ale deweloper oferuje również kilka bloków premium, które odnoszą się do konkretnych zastosowań, jeśli ich potrzebujesz.

Darmowe bloki obejmują bloki postów, siatkę funkcji, akordeon, wezwanie do działania, kartę, nagłówek, wyskakujące okienko wideo, blok cenowy, blok powiadomień, odstępnik, separator, listę funkcji i inne. Łącznie jest 23 darmowych bloków.

Dodatkową korzyścią jest to, że Stackable jest systemem modułowym, dzięki czemu możesz dodawać bloki, których prawdopodobnie będziesz potrzebować, a pomijać inne. Może to mieć niewielką korzyść w zakresie pamięci masowej i szybkości strony, w zależności od tego, jak skonfigurowana jest Twoja witryna. Tak czy inaczej, jest to miła dodatkowa funkcja, która może utrzymać rzeczy szczupłymi w zapleczu.

6. Bloki atomowe

Bloki atomowe była jedną z pierwszych wtyczek na scenie i teraz oferuje 15 darmowych bloków i kilka motywów WordPress, aby uzupełnić tę nową swobodę projektowania. Bloki obejmują referencje, ceny, newsletter, 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 bloków nowej strony lub wpisu. Poszukaj AB Post Grid itp., aby zidentyfikować funkcje Atomic Block.

Podobnie jak w przypadku tych innych wtyczek bloków edytora, możesz dostosować ich wygląd i działanie w menu zaawansowanym. Masz podobne opcje pod względem krycia, koloru, pozycjonowania itd. z dodatkową korzyścią w postaci dodatkowych wyborów, jeśli używasz motywu Atomic Block. To niewielka dodatkowa funkcja, ale jest!

7. Gutenberg Blocks i biblioteka szablonów firmy Otter

Gutenberg Blocks i biblioteka szablonów firmy Otter jest nazwą o wiele bardziej strawną pod względem funkcji. Jest to darmowa, lekka wtyczka, która zawiera kilka dobrze zaprojektowanych bloków, które bazują na tych dostarczanych przez WordPress, ale z większą liczbą opcji projektowych.

Bloki obejmują sekcje, zaawansowane nagłówki, przyciski, ceny, referencje, Mapy Google, bloki biografii autora, siatkę postów, Font Awesome, udostępnianie i blok karty. Wszystkie są zoptymalizowane pod kątem szybkości strony, a także funkcji i chociaż mają mało tych funkcji, są doskonałym uzupełnieniem domyślnych bloków.

Istnieją dodatkowe dostosowania i pewne opcje biblioteki dla każdego bloku. Możesz dostosować każdy blok do swoich konkretnych potrzeb lub użyć opcji biblioteki, aby wziąć gotowy projekt i użyć go w bloku. Jest to szybkie i bardzo proste.

8. Bloki według 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 obejmują biografię autora, alerty, udostępnianie w mediach społecznościowych, separatory, obraz okładki, opcje nagłówków, mapę, ceny, przyciski i blok Tweet. Każdy z nich ma podstawowe funkcje na pierwszym planie, a dostosowania są dostępne w menu. Są bardzo proste w użyciu i pojawią się obok wszystkich domyślnych bloków na ekranie nowej strony lub posta.

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 na potrzeby tego artykułu, 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. Jest też trzecia opcja, za 99 USD rocznie możesz uzyskać dostęp do wszystkich bloków edycji premium, a także do wszystkich motywów i produktów Kadence.

Bloki obejmują bloki układu strony, pola informacyjne, zaawansowane galerie, referencje, bloki wideo, akordeon, przyciski, zakładki, ikony, zaawansowane nagłówki i obrazy. Wersja premium dodaje bloki siatki i karuzeli, karuzele produktów, bloki modeli, nakładki obrazów, dzieloną zawartość 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 ramach, możesz z łatwością zaimplementować bloki do tego projektu za pomocą edytora.

Podsumowanie Gutenberg blocks i ich wtyczki

Gutenberg blocks są doskonałą ewolucją WordPressa. Biorą wszystko, co wiemy i kochamy w szybkim tworzeniu stron lub postów i pchają to do przodu. WordPress nadal oferuje swoją charakterystyczną łatwość użytkowania i niską barierę wejścia dla początkujących, jednocześnie oferując 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 prezentujemy na tej liście. Darmowe wtyczki oferują niemal wszystko, czego potrzebujesz od tworzenia stron. Możliwość rozbicia strony lub wpisu na pojedyncze komponenty i stylizowania każdego z nich z osobna, aż będą po prostu idealne.

Nawet te wtyczki premium są warte swojej ceny. Zazwyczaj oferują wyższe standardy pod względem wzornictwa i użyteczności, a także niektóre bloki niedostępne gdzie indziej. Choć premium, Toolset Blocks wyróżnia się tym, że oferuje szereg bloków, których nie znajdziesz w żadnej darmowej wtyczce, takich jak wyszukiwanie, kontrola dostępu, WooCommerce i niestandardowe posty oraz niestandardowe pola.

Masz ulubioną wtyczkę blokową Gutenberga? Lubisz taką, której tu nie wymieniliśmy? Opowiedz nam o nich poniżej, jeśli masz!