Bloki Gutenberga: ostateczny podręcznik użytkownika z podstawowymi rozważaniami na rok 2022

Wraz z nową wersją 6 grudnia 2018 r. WordPress 5.0 Kirk wprowadził domyślny edytor bloków, czyli Gutenberg. Ten nowy edytor treści pomaga tworzyć treści w zupełnie innym podejściu. Zastąpił edytor WordPress TinyMCE i zapewnia bardziej wizualny sposób tworzenia treści w postaci bloków.

Edytor Gutenberg zapewnia bogatą bibliotekę gotowych elementów lub bloków. Możesz z nich korzystać podczas pracy w witrynie WordPress. Tam każdy element treści jest blokiem, który można przeciągać. A te bloki są blokami edytora, które są używane do tworzenia układów treści.

Niezależnie od tego, czy zaktualizowałeś już swoją witrynę do WordPress 5.0, powinieneś dowiedzieć się, jak używać Gutenberg Block do przyszłych postępów. Tutaj otrzymasz kompleksowy pomysł i listę wszystkich bloków Gutenberga WordPress wraz z popularnymi blokami trzydziestoosobowymi.

WordPress Gutenberg Blocks: Twój najlepszy towarzysz na przyszłość

Bloki Gutenberga zdecydowanie sprawiają, że proces tworzenia treści jest bardziej zoptymalizowany i inteligentny. Gdy przyzwyczaisz się do tego edytora, znacznie skróci to czas tworzenia witryny.

Krótko mówiąc, Gutenberg to nowy edytor blokowy dla platformy WordPress. Stopniowo zmienił sposób, w jaki tworzysz posty, strony, produkty i prawie wszystko w Twojej witrynie.

W rzeczywistości z Gutenbergiem możesz obsługiwać wszystkie rodzaje komponentów w bardziej zorganizowany sposób. Takich jak tekst, obraz, wideo, tabela i inne. Jeśli jesteś nowy w edytorze Gutenberg, zapoznaj się z tym przewodnikiem dla początkujących, aby uzyskać przydatne wskazówki i porady.

Uwaga: widok frontendowy bloków w dużej mierze zależy od motywu, którego używasz w swojej witrynie.

Domyślne bloki Gutenberga w WordPress

Aby być przygotowanym na przyszłość, musisz wiedzieć o domyślnych nazwach bloków Gutenberga i ich zastosowaniach. Jako użytkownik WordPressa prawdopodobnie prędzej czy później będziesz musiał zapoznać się z tymi blokami.

Zasadniczo bloki Gutenberga są zorganizowane według następujących kategorii:

• Najbardziej używane
• Wspólne bloki
• Formatowanie
• Układ
• Widżety
• Osadzenia
• Wielokrotnego użytku

Klikając ikonę „+” plus, możesz dodać nowy blok na swojej stronie. Na górze listy znajdziesz najczęściej używane bloki. Tutaj pojawią się te bloki, których częściej używasz w swojej witrynie.

Poniżej bloki są pogrupowane według kategorii. Kliknij tytuł, aby odsłonić bloki.

Co więcej, z prawego panelu edycyjnego możesz ustawić rozmiar czcionki, inicjał, zmienić kolory tekstu i tła dla konkretnego bloku.

Zobaczmy, jak faktycznie działają!

Wspólne bloki - regularnie używane w każdym poście

Oto najczęstsze bloki, których każdy potrzebuje do swoich postów, w tym tekst i obraz. Potrzebujesz tych podstawowych elementów, aby dostosować stronę lub post w swojej witrynie.

1. Akapit: Prosty blok tekstowy do dodawania pojedynczego akapitu treści.
2. Obraz : wstaw pojedynczy obraz w dowolnym miejscu w poście
3. Nagłówek : Dodaj tag nagłówka
4. Galeria : wyświetla grupę obrazów w stylu galerii
5. Lista : Dodaj listy punktowane lub numerowane
6. Cytat : Dołącz cytat w 2 różnych stylach
7. Audio : przesyłanie pliku audio do Twojej witryny
8. Okładka : Wstaw plik wideo lub audio z nakładką tekstową
9. Plik : Dodaj łącze do pliku do pobrania
10. Wideo : prześlij plik wideo i odtwarzaj go bezpośrednio w swojej witrynie

Formatowanie — dodatkowe opcje dostosowywania

Te bloki służą do dodawania dodatkowych opcji formatowania treści, takich jak kod, werset i inne rodzaje tekstu, które wymagają specjalnego formatowania.

1. Kod: z łatwością pisz dowolny kod techniczny
2. Klasyczny: zapewnia narzędzia do edycji klasycznego edytora WordPress
3. Niestandardowy HTML: wstaw niestandardowy kod HTML i wyświetl go bezpośrednio w edytorze WordPress
4. Wstępnie sformatowany: dodaj tekst z zachowaniem odstępów i tabulatorów
5. Pullquote: Dodaj szczególny wizualny nacisk do cytatu z tekstu
6. Tabela: Użyj tabeli do wyświetlania danych tabelarycznych
7. Zwrotka: Napisz poezję i inne wyrażenia literackie, w tym wszystkie spacje i łamanie wiersza

Elementy układu — popraw styl projektowania

Blok ten pomaga w atrakcyjnym reprezentowaniu zawartości witryny. Sprawia, że ​​Twoja witryna jest bardziej atrakcyjna dla odwiedzających.

1. Przycisk: Utwórz przycisk i wstaw link z innym tłem i kolorem tekstu
2. Kolumny: Twórz układy wielokolumnowe, a w każdej kolumnie możesz uwzględnić inne typy bloków
3. Media i tekst: Wstaw tekst i plik multimedialny obok siebie w jednym bloku; różne kolumny
4. Więcej: Podziel treść na 2 części, w tym blok „Czytaj więcej”
5. Podział strony: dzieli zawartość witryny na wiele stron
6. Separator: dodaj krótką poziomą linię w swoim poście
7. Spacer: umieść dużą prostokątną pustą przestrzeń między dwoma blokami w swoim poście
8. Kolumny tekstowe: Dodaj tekst i wyświetl go w dwóch do czterech kolumnach, jak gazeta.

Widżety — dodaj kilka widżetów do dowolnej strony lub postu

Te bloki umożliwiają dodawanie widżetów WordPress do treści. Częściej są używane w pasku bocznym i stopce.

1. Shortcode: wstawiaj niestandardowe treści, takie jak formularze, za pomocą skrótu WordPress
2. archiwa: Pokazuje comiesięczne archiwum Twoich postów
3. kalendarz: Wyświetlaj miesięczny kalendarz swoich postów
4. kategorie: Lista wszystkich Twoich kategorii postów
5. ostatnie-komentarze: Przebłysk ostatnich 5 komentarzy (Nie pełny komentarz)
6. najnowsze posty: Lista Twoich ostatnich postów
7. RSS: Dodaj kanał RSS do dowolnej strony lub postu
8. Szukaj: Dodaj wyszukiwanie WordPress do dowolnej strony lub postu
9. Chmura tagów: lista tagów postów w chmurze

Osadzenia — wstawiaj zawartość z innych źródeł

Bloki osadzania umożliwiają osadzanie obrazów, filmów, tweetów, audio, postów na Facebooku i innych treści ze źródeł zewnętrznych.

• Youtube
• Świergot
• Facebook
• Instagram
• Vimeo
• SoundCloud
• Spotify
• Flickr
• Animo
• Chmura
• KolegiumHumor
• Ruch dzienny
• Śmieszne lub umrzeć
• Hulu
• Imgur
• Issuu
• Kickstarter
• Meetup.com
• Mixcloud
• Photobucket
• Polldaddy
• Reddit
• ReverbNation
• Prezentacja ekranu
• Scribd
• Udostępnianie slajdów
• Kubek
• Głośnik
• PRZETRZĄSAĆ
• Tumblr
• WideoPress
• WordPress
• WordPress.tv

Bloki wielokrotnego użytku:

Po naciśnięciu „Dodaj do bloków wielokrotnego użytku” blok staje się wielokrotnego użytku do dalszego użytku. Być może znajdziesz go w sekcji wspólnego menu.

Wtyczki innych firm rozszerzające zarówno listy blokowania, jak i funkcje

Możesz zainstalować inne niezbędne wtyczki, aby rozszerzyć swoje listy blokowania o zaawansowane i potężne atrybuty. Wybierając bogatą w funkcje wtyczkę, dodanie nowych bloków do edytora może być łatwe. I możesz wykonać wiele zaawansowanych czynności funkcjonalnych, które nie są możliwe przy domyślnych elementach blokowych.

Na przykład niektóre wtyczki galerii umożliwiają dodanie galerii z wieloma zaawansowanymi efektami za pomocą bloków.

Poza tym znajdziesz również wiele wtyczek, które koncentrują się wyłącznie na dodawaniu nowych bloków. Tutaj wymieniliśmy niektóre z najlepszych wtyczek WordPress, których możesz użyć do dodawania nowych bloków wraz z domyślnymi.

1. Ultimate Addons dla Gutenberga – darmowa wtyczka z ponad 15 blokami Gutenberga
2. CoBlocks – Kreator Stron Gutenberg Blocks
3. Możliwość układania w stos – bloczki Gutenberg
4. Ultimate Blocks – niestandardowe bloki Gutenberg
5. Advanced Gutenberg – 20+ nowych bloków dla Gutenberga
6. Blok Kadence – zestaw narzędzi do tworzenia stron Gutenberg
7. Envira Gallery – Blok WordPress dla galerii zdjęć
8. Atomowe bloki – kolekcja Gutenberg Block

Ultimate Addons dla Gutenberga – darmowa wtyczka z ponad 15 blokami Gutenberga

Jest to jeden z popularnych dodatków wśród wielu użytkowników Gutenberga. Ultimate Addons dla Gutenberga to kompletny pakiet unikalnych i kreatywnych bloków. Dlatego możesz doładować swój edytor, aby tworzyć piękne strony i posty za pomocą tej wtyczki.

Obejmuje ponad 15 bloków Gutenberga, w tym:

• Multi Buttons: Dodaj wiele konfigurowalnych przycisków w jednym responsywnym bloku.
• Zaawansowany nagłówek: dołącz modne i atrakcyjne nagłówki i podtytuły z separatorem
• Pole informacyjne: Wstaw obraz lub ikonę z nagłówkiem i opisem
• Cennik: Z łatwością utwórz cennik, taki jak menu restauracji
• Opinia: Dodaj opinię klienta za pomocą tego bloku

Co najbardziej zdumiewające, ta wtyczka ma wbudowaną obsługę motywu Astra. Astra jest w pełni kompatybilna z Gutenbergiem.

CoBlocks – Kreator Stron Gutenberg Blocks

CoBlocks ma kreatywną grupę stron budujących bloki WordPress dla nowego edytora Gutenberg. Poprawi to Twoje wrażenia z tworzenia stron z Gutenbergiem. Ta lekka wtyczka WordPress pomoże Ci tworzyć piękne strony internetowe.

Obsługuje teraz ponad 20 interaktywnych bloków:

• Blok akordeonowy
• Blok alertów
• Blok profilu autora
• Blok przycisków
• Blok galerii karuzeli
• Kliknij, aby zablokować tweet
• Blok galerii kolaży
• Dynamiczny blok separatora
• Blok wydarzeń (nowość!)
• Blok funkcji
• Blok żywności i napojów
• Blok formularza
• Blok gif
• GitHub Gist Block

i inni.

Możesz zbudować całą witrynę za pomocą funkcji CoBlocks. Poza tym umożliwia projektowanie stron internetowych z urzekającymi elementami typograficznymi.

Możliwość układania w stos – bloczki Gutenberg

Stackable jest specjalnie zaprojektowany dla nowego edytora bloków WordPress. Obsługuje 23 wysokiej jakości bloki konstrukcyjne stron dla układów Gutenberg i ponad 50 bloków oraz wstępnie ustawione projekty sekcji/bloków. Zapewnia zaawansowane i elastyczne opcje projektowania stron internetowych, aby Twoja podróż do tworzenia stron internetowych była płynna.

Niektóre popularne bloki do układania w stos są następujące:

• Blok kontenerowy
• Blok siatki funkcji
• Blokowanie kart
• Blok nagłówka
• Odliczanie bloku
• Blok członków zespołu
• Blok powiadomień

Zwiększ możliwości projektowania dzięki tym konfigurowalnym i różnorodnym układom projektowym.

Ultimate Blocks- Niestandardowe bloki Gutenberg

Ta wtyczka blokowa Gutenberga jest specjalnie zaprojektowana dla blogerów i marketerów. Dzięki temu możesz bez wysiłku tworzyć lepsze i angażujące treści za pomocą Gutenberga.

W tej chwili Ultimate Blocks obsługuje około 20 bloków, aby Twoja podróż programistyczna była bardziej ekscytująca. Niektóre godne uwagi funkcje podano poniżej:

• Filtr zawartości
• Odliczanie
• Suwak obrazu
• Zawartość na kartach
• Stylizowane pudełko
• Przełącznik treści

Możesz dołączyć do ich interaktywnej grupy na Facebooku, aby uzyskać dalszą pomoc.

Advanced Gutenberg – 20+ nowych bloków dla Gutenberga

Advanced Gutenberg sprawia, że ​​domyślny edytor Gutenberg jest bardziej wydajny, aby tworzyć profesjonalne strony internetowe niezwykle łatwe. Zapewnia ponad 20 nowych bloków i opcji, aby płynnie dostosować witrynę WordPress.

Tutaj otrzymasz unikalne bloki, takie jak:

• Menedżer kolumny
• Suwak ostatniego posta
• Blokowanie kart
• Blok ikon
• Zaawansowany blok obrazu
• Blokada zgody na e-mail
• I wiele więcej

Niemniej jednak mają dopracowaną dokumentację i spersonalizowane forum, aby zapewnić wsparcie swoim użytkownikom.

Kadence Block — zestaw narzędzi do tworzenia stron Gutenberg

Dzięki tej wtyczce możesz dodawać niestandardowe bloki i opcje do swojego edytora Gutenberg. Być może może to rozszerzyć możliwości edycji Gutenberga, dzięki czemu możesz tworzyć niestandardowe układy i bardziej angażującą treść.

Kadence rzeczywiście obsługuje następujące bloki:

• Układ wierszy
• Galeria zaawansowana
• Formularz
• Zaawansowany kurs
• Przycisk Zaawansowane
• Karty
• Akordeon
• Referencje
• Ikona
• Przekładka/dzielnik
• Skrzynka informacyjna
• Lista ikon

Poza tym ułatwia łatwe budowanie dowolnego rodzaju układów. Jest to możliwe tylko w przypadku popularnych wtyczek WordPress Page Builder.

Envira Gallery – najlepszy blok WordPress dla galerii zdjęć

Envira to w pełni zoptymalizowana i potężna wtyczka do wstawiania galerii w witrynie WordPress bez uszczerbku dla szybkości witryny. Dzięki tej wtyczce galerii możesz dołączyć albumy, tagi, integrację z mediami społecznościowymi, szablony galerii / układy galerii, głębokie linki, paginację, e-commerce, sprawdzanie obrazu i wiele innych.

Po aktywacji tej wtyczki znajdziesz nową opcję w Common Blocks. Stamtąd możesz wyszukiwać różne rodzaje stylu galerii zgodnie ze swoimi potrzebami. Ta wtyczka jest całkowicie kompatybilna z wtyczką WooCommecre, dzięki czemu możesz z łatwością używać jej w dowolnej witrynie fotograficznej do sprzedaży zdjęć.

Bloki atomowe – kolekcja bloków Gutenberga

Atomic Blocks to zestaw nowych i klasycznych klocków Gutenberga. Ten sam utalentowany zespół Array Themes również pracuje nad tą modną kolekcją bloków.

Obecnie Atomic Blocks ma 15 bloków Gutenberga, a kolejne są w drodze:

• Blok sekcji i układu
• Zaawansowany blok kolumn
• Blok biuletynu
• Blok cenowy
• Blok słupka siatki
• Blok kontenerowy
• Blok referencji
• Wbudowany blok powiadomień
• Blok akordeonowy
• Udostępnij Ikony Blokuj
• Blok wezwania do działania
• Konfigurowalny blok przycisków
• Blok dystansowy i rozdzielający
• Blok profilu autora
• Upuść blokadę

Po zainstalowaniu wtyczki otrzymasz nową sekcję Bloki atomowe w interfejsie Gutenberga. Możesz sprawdzić na żywo wersje demonstracyjne wszystkich bloków, zanim użyjesz ich na swojej stronie internetowej. Tworzenie stron za pomocą edytora bloków i Atomic Blocks zapewnia pełną kontrolę nad szybkim projektowaniem i uruchamianiem dowolnej witryny!

Możesz jednak znaleźć bardziej przydatne wtyczki ze świetnymi blokami do tworzenia pięknych treści w zoptymalizowany sposób. Nie zapomnij podzielić się z nami swoimi przemyśleniami!

Gutenberg Blocks rozpoczyna nową erę projektowania witryn

Edytor Gutenberga opiera się głównie na koncepcji bloków. Bloki te wprowadziły zupełnie nowy sposób edycji postów i zawartości stron w edytorze WordPress. Dzięki tym blokom możesz łatwo dodawać różne rodzaje treści do swoich postów i stron.

Na tym blogu staraliśmy się podzielić wszystkimi informacjami dotyczącymi bloków Gutenberga. Możesz więc łatwo zaktualizować się dzięki rewolucyjnemu układowi projektowemu nowego edytora WordPress.

Możesz również opowiedzieć nam swoją historię i zadać wszelkie pytania związane z WordPressem w sekcji komentarzy poniżej.