Co nowego w WordPressie 5.8

Opublikowany: 2021-06-24

Po obejrzeniu prezentacji na WordCamp Europe 2021, a zwłaszcza rozmowie między Mattem Mullenwegem i Matiasem Ventura, która zawierała film o nowych funkcjach, które pojawiły się w edytorze bloków, chciałem wypróbować tę nową wersję WordPressa 5.8, który ma zostać wydany w połowie lipca.

Zainstalowałem więc wersję WordPress 5.8-beta2, aby móc poinformować Cię o nadchodzących nowych funkcjach. Pamiętaj, że testowałem tę wersję z motywem Twenty Twenty-one z WordPress.org i może się zdarzyć, że niektóre z wymienionych funkcji, w zależności od motywu, który zainstalowałeś na swojej stronie, mogą być niedostępne.

Zagnieżdżone bloki i wzory bloków

Wraz z pojawieniem się WordPress 5.5 edytor bloków zawierał koncepcję wzorców blokowych. Idea wzorca blokowego jest bardzo prosta: są to predefiniowane sekcje lub fragmenty składające się z grupy bloków, które można wykorzystać do tworzenia stron i postów. Wzorce blokowe mogą być czymś tak prostym, jak sekcja wyświetlająca dwa przyciski lub sekcja cenowa z przyciągającymi wzrok i złożonymi układami, a nawet układem całej strony.

Wiele pracy jest wykonywanej, aby ułatwić i wygodniej edytować bloki i wzory bloków. A w szczególności przyspieszyć ich wstawianie i przenoszenie. Na początek możemy teraz z listy bloków i wzorów, które są widoczne w lewym pasku menu, wybrać je i przeciągnąć w obszar strony, aby je wstawić.

Zrzut ekranu wyboru i wstawiania wzoru w Gutenberg
Z listy bloków i wzorów możesz wybrać i przeciągnąć blok lub wzór, który chcesz wstawić bezpośrednio na swoją stronę.

Niedawno dodano również ikonę przeciągania (ikona z 6 kropkami), dzięki czemu możemy przesunąć dowolny blok w kontenerze, w którym się znajduje.

Możliwość przeciągnięcia bloku w edytorze Gutenberg
Klikając ikonę przeciągania, możesz przesunąć blok okładki znajdujący się wewnątrz bloku typu kolumny.

Będąc w bloku, naciśnij klawisz Esc , aby przejść do trybu zaznaczania i naciśnij klawisz Enter , aby powrócić do trybu edycji.

Tryb zaznaczania w edytorze Gutenberg
W edytorze Gutenberg możesz przełączyć się z trybu wyboru do trybu edycji za pomocą klawiszy Enter i Esc.

W trybie zaznaczania (pamiętaj, aby nacisnąć Esc ), nawigacja pomiędzy strukturą bloku jest zoptymalizowana. Przesuwając mysz w obrębie bloku możemy zobaczyć granice każdego z zawartych w nim bloków. W ten sposób łatwiej jest zrozumieć strukturę i przeciągać bloki w bloku nadrzędnym.

Zrzut ekranu wyboru zagnieżdżonego bloku w edytorze bloków
W trybie zaznaczania, poruszając myszą w bloku okładki, możemy zobaczyć granice każdego z zawartych w nim bloków.

A teraz, w nowej wersji, po przełączeniu w tryb edycji (naciśnięcie klawisza Enter ), podczas przesuwania bloku wyświetlane są również granice jego kontenera, dzięki czemu proces zaznaczania, przeciągania i upuszczania jest znacznie łatwiejszy i bardziej intuicyjny.

Możliwość przeciągnięcia bloku w edytorze WordPress 5.8
Zrzut ekranu przedstawiający opcję przeciągania bloku w edytorze WordPress 5.8.

Edycja obrazu

Kontynuując ideę ulepszenia edycji bloku, krytycznym blokiem jest blok typu obrazu. Widzieliśmy już, że możemy teraz wstawiać obrazy, przeciągając je do bloków typu obrazu, tekstu i mediów lub do dowolnego bloku typu kontenera, takiego jak kolumna.

Ale wielką nowością jest to, że możemy edytować i modyfikować wstawione obrazy w samym edytorze, bez konieczności przechodzenia do Biblioteki mediów .

Opcje edycji obrazu w edytorze bloków
Opcje edycji obrazu w edytorze bloku.

Oprócz ikon do wyśrodkowania i dodania linku do obrazu , w WordPress 5.8 mamy trzy nowe ikony: Przytnij , Dodaj tekst i Duotone Filters .

Przytnij zdjęcie

Klikając ikonę przycinania, pojawiają się trzy dodatkowe opcje menu: powiększanie , zmiana proporcji i obracanie obrazu .

Zrzut ekranu edycji obrazu w edytorze bloków
Po wybraniu opcji przycinania wprowadź żądane modyfikacje powiększenia, proporcji i obrotu, a następnie zastosuj zmiany.

Jak widać, nie musisz już iść do biblioteki multimediów, aby obraz wyglądał tak, jak tego potrzebujesz.

Filtry bichromii

Kolejną nową funkcją, która jest dostępna w WordPress 5.8, jest możliwość filtrowania dowolnego obrazu w bichromii. Wybierz dwa kolory filtra, które chcesz zastosować do obrazu i to wszystko, obraz będzie miał tylko dwa tony.

Zrzut ekranu opcji bichromii obrazu w WordPress
Wyświetlaj obraz w zaledwie dwóch tonach dzięki opcji bichromii obrazu.

Dodaj tekst

Ta nowa ikona, ta, która dodaje tekst do obrazu, jest odpowiednikiem przekształcenia obrazu w blok typu okładki. I oczywiście po tej zmianie możesz dodać tekst, który chcesz, do bloku okładki, tak jak robiłeś to w przeszłości.

Zrzut ekranu edycji bloku tła w Gutenberg
Zrzut ekranu edycji bloku okładki w Gutenbergu.

Ponadto, jak widać we właściwościach bloku, możesz teraz również modyfikować odstępy i dodawać dopełnienie do tekstu, aby tekst znajdował się dokładnie tam, gdzie chcesz, aby był na obrazie. Dopełnienie może być takie samo lub różne dla każdej z 4 stron tekstu.

Osobiście uważam za świetne, że możesz dodawać i wykonywać wszystkie te przekształcenia bezpośrednio w edytorze bez wchodzenia do biblioteki multimediów. Mimo to, jeśli chcesz zoptymalizować swoje obrazy pod kątem SEO, obawiam się, że nadal będziesz musiał przejść do biblioteki.

Przekształcenia blokowe

Tak jak widzieliśmy, jak przekształcić blok z typu obrazu na typ okładki, edytor bloków zawiera teraz inne typy przekształceń. Na przykład, możesz zaznaczyć trzy akapity i przekształcić je w nagłówki, kolumny, listę itp. A przed wykonaniem przekształcenia wyświetlany jest podgląd nowego wyglądu przekształcenia.

Podobnie możesz zmienić zestaw bloków typu obrazu na blok typu galerii obrazów, a nawet zestaw przycisków itp.

Blok okładki

Dzięki tym wszystkim nowym funkcjom zawartym w samym edytorze blok okładki pozwala nam tworzyć projekty bardzo różne od tych, które mieliśmy do tej pory. Na przykład teraz możemy mieć dwa zagnieżdżone bloki okładki (z dopełnieniem między dzieckiem a rodzicem) i każdy z własnym kolorem, tekstem i fokusem.

Obraz przedstawiający dwa bloki tła zagnieżdżone w Gutenberg
Obraz przedstawiający dwa zagnieżdżone bloki okładki.

Blok nawigacyjny

Kolejną świetną nową funkcją podglądu edytora bloków w filmie prezentowanym na WordCamp jest nowy blok nawigacyjny. Widzimy, że ten blok nie jest zawarty w zainstalowanej wersji beta, ale znajdziesz go w najnowszej wersji 10.8.1 wtyczki Gutenberg.

Blok nawigacyjny Gutenberga
Blok nawigacyjny Gutenberga.

Ten blok umożliwia dodanie na dowolnej stronie menu linków, aby odwiedzający mogli przejść do dowolnej innej strony. Nie ma on zastępować menu nawigacyjnych, które znamy już z WordPressa, ale jest alternatywą, gdy chcesz wstawić dodatkowe menu na stronie.

Oprócz wskazania, czy chcesz menu poziome, czy pionowe, masz kilka opcji podczas tworzenia menu:

Utwórz menu nawigacyjne w Gutenberg
Opcje tworzenia menu nawigacyjnego w edytorze bloków.
  • Utwórz je z istniejącego menu: możesz wybrać wyświetlanie menu, które już utworzyłeś w swojej witrynie.
  • Utwórz puste: spowoduje to utworzenie pustego menu, w którym możesz ręcznie dodać każdy link, który chcesz wyświetlić w nawigacji.
  • Utwórz go ze wszystkich stron najwyższego poziomu — spowoduje to automatyczne dodanie każdej istniejącej strony w Twojej witrynie jako łącza, które możesz następnie edytować i zmieniać. Tutaj dodawane są tylko strony najwyższego poziomu.

Aby dodać nowy link do nawigacji, musisz kliknąć ikonę + , która pozwala wybrać między:

Dodaj element w menu nawigacyjnym
  • Link do strony: strona w Twojej witrynie.
  • Link do posta: post w Twojej witrynie.
  • Link do kategorii: wszystkie posty z określoną kategorią.
  • Link do tagu: wszystkie posty z określonym tagiem.
  • Link niestandardowy: zewnętrzny adres URL.
  • Ikony społecznościowe: ikony sieci społecznościowych.
  • Szukaj: pole wyszukiwania dla odwiedzających, aby przeszukiwać Twoje treści.

Po utworzeniu dowolnego menu masz również możliwość zmiany jego stylu (czcionki, czcionki i koloru tła), dodania podmenu, przenoszenia elementów itp.

Właściwości menu nawigacyjnego
Właściwości menu nawigacyjnego.

Dzięki temu blokowi możesz bardzo łatwo tworzyć projekty menu.

Menu utworzone za pomocą bloku nawigacyjnego
Menu utworzone za pomocą bloku nawigacyjnego.

Jak widać, ten nowy rodzaj bloku da o wiele więcej możliwości w projektowaniu naszych stron i postów.

Projekt szablonu

Kolejną dużą zmianą, która pojawia się w tej nowej wersji edytora WordPress, jest to, że projekt szablonu jest w pełni zintegrowany z edytorem bloków. W ten sposób możesz utworzyć szablon z utworzonej strony, a także dodaje opcję, że w lewym pasku bocznym możesz wyświetlić jego strukturę.

Projektowanie szablonu w WordPress
Projekt szablonu w WordPressie. Po lewej stronie widzimy strukturę szablonu.

Możemy poruszać się po strukturze szablonu, a każdy element jest podświetlany w edytorze, dzięki czemu bardzo łatwo jest wprowadzać zmiany tam, gdzie to konieczne, i masz szybki podgląd wszystkich elementów zagnieżdżonych w każdym bloku kontenera.

I jest więcej…

I na koniec, w filmie prezentowanym na WordCamp Europe, pokazano nam również opcję bezpośredniego definiowania globalnych stylów motywu w edytorze bloków, aby zmienić paletę kolorów, typografię itp. Jeśli nadal masz jakiekolwiek wątpliwości, z tym nowym Wersja WordPress 5.8 jest coraz bliżej celu, aby nie potrzebować żadnego innego kreatora stron do tworzenia stron internetowych.

Polecany obraz XPS na Unsplash .