Gutenberg 12.6 ulepsza bloki przekształcania, dodaje bloki biograficzne do czytania więcej i autorów postów oraz włącza etykiety ikon społecznościowych

Opublikowany: 2022-02-18

Gutenberg 12.6 wylądował wczoraj w katalogu wtyczek WordPressa. Aktualizacja zawiera kilka ulepszeń związanych z transformacją oraz nowe bloki Czytaj więcej i Biografia postu autora. Użytkownicy mogą teraz również wyświetlać widoczne etykiety za pomocą bloku ikon społecznościowych.

Wydaje się, że nic nie jest zepsute w tym wydaniu, które zawsze jest mile widziane. Gutenberg od dłuższego czasu zasadniczo nie zniszczył czegoś, na czym polegałem. Było kilka problemów, ale oprogramowanie stało się bardziej stabilne w ciągu ostatniego roku. Chciałem tylko dodać notatkę, aby pochwalić ludzi pracujących nad tym na co dzień.

Jak zwykle mam kilka drobiazgów, ale ogólnie wygląda to na kolejne solidne wydanie.

Przekształcanie bloków

Edytor WordPress otwiera się z chmurą tagów na płótnie. Lista rozwijana przekształcania jest otwarta z wybraną opcją kategorii.
Przekształcanie chmury tagów w blok kategorii.

Deweloperzy weszli all-in na transformacje blokowe w Gutenberg 12.6. Następujące bloki obsługują teraz przełączanie między sobą:

  • Archiwa kalendarza
  • Kod Akapit
  • Kategorie chmur tagów
  • Grupuj wiersz (poprzez kontrolkę Variation)

W tej wersji pojawił się również nowy mechanizm zachowywania stylów podczas transformacji. Obecnie obsługuje opcje rozmiaru i koloru czcionki. Na przykład użytkownicy mogą przełączać się między blokiem nagłówka i akapitu, co jest zwykłym przypadkiem użycia, bez utraty tych konkretnych dostosowań. Jednak inne ustawienia są tracone, nawet jeśli są współdzielone między blokami. Niewiele bym dał, aby zachować wyrównanie tekstu w tym scenariuszu.

Kotwice w bloku nagłówka są pomijane podczas przekształcania w akapit w tej wersji. Powodem tej zmiany było to, że WordPress automatycznie je generuje. Jednak ręcznie dodane kotwy są również usuwane.

Podczas przekształcania galerii w blok obrazu miejsce docelowe łącza, cel łącza i ustawienia rozmiaru obrazu zostały wcześniej utracone. Nowa łatka dodaje te brakujące atrybuty.

Etykiety ikon społecznościowych

Ikony społecznościowe blokują się w edytorze postów WordPress. Na pasku bocznym wybrana jest opcja „pokaż etykiety”.
Włączanie etykiet tekstowych ikon społecznościowych.

Jeśli jest jedna rzecz, co do której jestem szczególnie zachwycony wydaniem Gutenberg 12.6, jest to opcja wyświetlania etykiet tekstowych za pomocą bloku ikon społecznościowych. Wcześniej były one wyświetlane tylko dla czytników ekranu. Jednak użytkownicy mogą teraz je włączyć dla wszystkich.

Ten dodatek może otworzyć mnóstwo wariantów konstrukcyjnych bloku. Oczywiście umieściłem już na nim swój własny spin z ręcznie rysowanym projektem ramki, jak pokazano na powyższym zrzucie ekranu.

WP Tavern faktycznie odegrało niewielką rolę w urzeczywistnieniu tej funkcji. Omawiając podobną kontrolę z Nickiem Diego w jego bloku Social Sharing, wspomniałem o otwartym zgłoszeniu do głównego bloku Social Icons. Nie minęło dużo czasu, zanim Diego przygotował łatkę, a teraz jest w Gutenbergu.

Panel kolorów używa komponentu panelu narzędzi

Edytor WordPress otwiera się z blokiem Pullquote na kanwie treści. Po prawej stronie pasek boczny opcji bloku jest otwarty z pokazanymi wszystkimi kontrolkami koloru, typografii i obramowania.
Opcje kolorów, typografii i obramowania — wszystkie za pomocą składnika Panel narzędzi.

Najnowsze przełączniki aktualizacji blokują opcje kolorów w składniku Tools Panel. W większości scenariuszy kolory tekstu i tła są wyświetlane z kolorem linku dostępnym w menu „opcje widoku” (przycisk wielokropka).

Aby stworzyć bardziej ujednolicony i przejrzysty interfejs użytkownika, wydaje się, że dodaliśmy teraz więcej bałaganu dla kilku bloków. Jak pokazano na powyższym zrzucie ekranu dla bloku Pullquote, panele kolorów, typografii i obramowania są stale otwarte. Blok Group jest jeszcze cięższy dzięki dodaniu sekcji wymiarów. Użytkownicy nie mają możliwości ich ukrycia ani domyślnych kontrolek.

Kiedy po raz pierwszy wprowadzono składnik Panel narzędzi, miał on efekt oczyszczania, ponieważ oznaczał, że niektóre elementy sterujące zostały schowane. Jednak teraz, gdy używa go więcej paneli, ta maleńka nieruchomość na pasku bocznym opcji bloku zniknęła. Spodziewaj się przewinięcia kilku pól formularza, aby znaleźć odpowiednie ustawienie.

Czy możemy sprawić, że znów będą się składać? Albo jeszcze lepiej, czy możemy mieć kombinację kart i komponentu Panel narzędzi?

Blok biografii autora posta

Blok grupowy na kanwie treści edytora WordPress. Jest to sekcja „o autorze”, która wyświetla jego imię i nazwisko oraz informacje biograficzne.
Sekcja biografii autora posta.

Post Author Biography Blok wylądował w Gutenbergu 12.6. Jego celem jest wyświetlenie „informacji biograficznych” użytkownika, które można ustawić na stronie profilu użytkownika w panelu administracyjnym. Obejmuje większość podstawowych opcji projektowych, ale brakuje wsparcia dla granic.

To dobry początek, ale wciąż pozostaje jeden problem. Nie uruchamia wpautop() na wyjściu. Oznacza to, że treść nie jest opakowana w znacznik <p> . Z tego powodu nie uwzględnia również podziałów dwuwierszowych wprowadzanych za pomocą ekranu edycji użytkownika. WordPress nigdy nie miał standardowej funkcji do wyprowadzania i formatowania biografii użytkownika, co pozwala autorom motywów na ich obsługę. Jednak niektórzy użytkownicy mogą oczekiwać, że ich niestandardowe formatowanie będzie działać.

Zbliżamy się do pełnego zestawu bloków związanych z autorami. WordPress początkowo wysłał blok Post Author, który robił wszystko po trochu. Z tego powodu konsekwentne używanie wpisów autorów lub innych jednowierszowych obszarów metadanych w motywach jest prawie niemożliwe. Ograniczyło to również zakres projektowania sekcji „o autorze” często wyświetlanych na końcu posta.

Musimy teraz poczekać, aż blok Post Author Avatar uzupełni zestaw.

Czytaj więcej Dodano blok

Blok Query Loop pokazany w edytorze bloków WordPress z podświetlonym wewnętrznym blokiem Czytaj więcej.
Blok Czytaj więcej dodany wewnątrz Query Loop / Post Template.

Gutenberg 12.6 dodaje dedykowany blok Czytaj więcej dla autorów motywów do pracy z projektami pętli zapytań. Jest to jedynie bezpośredni link HTML do posta. Jest to oddzielone od wyjścia łącza przez blok Post Excerpt. Niestety ma wiele problemów i wymaga dalszych testów przed praktycznym użyciem.

Użytkownicy mogą dodać do niego kolor tła, ale nie kolor tekstu. Ułatwia to tworzenie nieczytelnego tekstu. Udało mi się obejść ten problem, umieszczając go w bloku Group i zmieniając stamtąd kolor linku.

Obsługuje większość opcji obramowania, ale brakuje kontroli stylu. Nie ma również opakowania HTML na poziomie bloku, więc nie ma możliwości wyrównania go w poziomie bez zawinięcia go w inny blok.

To dziwny przypadek. Nie jestem pewien, czy istnieją jakiekolwiek inne wbudowane elementy HTML (technicznie jest to ustawione jako element blokowy za pośrednictwem CSS) dla dowolnych bloków najwyższego poziomu w innym miejscu WordPress.

Inną kwestią jest możliwość dwóch linków „czytaj więcej”. Jeden przez dedykowany blok, a drugi przez blok Post Excerpt. Istnieje wersja robocza poprawki, która przełącza łącze do tego ostatniego.

Responsywna obsługa klasycznych obrazów

Dwa obrazy ptaków z motywu Twenty Twenty-Two WordPress. Pierwszy jest prawidłowo ograniczony przez swój pojemnik. Drugi wypycha się na zewnątrz.
Obrazy blokowe a obrazy klasyczne.

W przypadku postów napisanych w klasycznym edytorze z dużymi obrazami media wyleciałyby poza obszar treści podczas korzystania z motywu blokowego. Gutenberg oddzielił swoją responsywną obsługę obrazu od podstawowego bloku obrazu jako poprawkę. Ta zmiana jest oznaczona jako przeniesiona do mniejszej wersji WordPressa, więc użytkownicy nie powinni czekać na WordPress 6.0.

Chociaż stanowi to poprawkę dotyczącą obrazów, nie rozwiązuje problemu motywów blokowych, które nie obsługują klasycznej zawartości ani nie stylizują prostego kodu HTML. Jako przykład z naszej strony, ostatnio dodałem element <table> , ponieważ podstawowy blok Table nie ma pewnych funkcji. Ponieważ był to niestandardowy kod HTML, żaden kod CSS bloku nie został załadowany, pozostawiając go zasadniczo bez stylu. Ten sam problem dotyczy treści klasycznych.

Jednym z problemów jest to, że WordPress przesuwa style CSS na poziomie bloku za pośrednictwem theme.json . Jednak pozwala tylko na stylizowanie kilku elementów HTML, takich jak linki i nagłówki. Ten rodzaj projektowania opartego na komponentach działa dobrze, gdy wszystko jest opakowane w komponent (tj. blok).

Bardziej sensowne jest stylizowanie podstawowych elementów HTML niż ich reprezentatywnych bloków. W ten sposób jest to styl wspólny dla wszystkich bloków, które używają elementu, w tym wtyczek innych firm.

Usunięto styl dużego cytatu

Wreszcie ktoś usunął „duży” styl cytatu. Nie było to konieczne od czasu dodania kontrolki rozmiaru czcionki dla bloku.

Przynajmniej kilka razy zwracałem uwagę, że WordPress powinien unikać wysyłania własnych niestandardowych stylów bloków. W większości przypadków najlepiej pozostawić to w kompetentnych rękach autorów tematów. Przynajmniej należy unikać nowych stylów bloków, dopóki narzędzia projektowe nie będą bardziej wszechstronne. Wycofanie stylów blokowych tworzy stary bagaż CSS ładowany z każdą witryną WordPress.