Gutenberg 13.0 dodaje wybór tekstu w wielu blokach, nową odmianę grupy stosów i wyróżnione bloki okładek

Opublikowany: 2022-04-15

Gutenberg 13.0 wylądował dziś wcześniej w katalogu wtyczek WordPress. Jest to jedna z cięższych wydań w ostatnim czasie, zawierająca ostatnie funkcje, które powinny być dostarczane z WordPress 6.0.

Bardziej widoczne funkcje obejmują częściowe zaznaczanie tekstu w wielu blokach, bloki okładek z wyróżnionymi obrazami, odmianę stosu dla grup i tworzenie stron na podstawie wzorców. A jest o wiele więcej do przekopania się.

W tym poście omówiłem wiele ważnych pozycji. Aby jednak zrozumieć pełną skalę wydania, sprawdź bilety połączone w ogłoszeniu o wydaniu Gutenberg 13.0.

Inne godne uwagi zalety to obsługa odstępów dla bloku kolumn, optymalizacja czcionek internetowych, duotone dla symboli zastępczych Logo witryny i Post Featured Image oraz pionowe wyrównanie bloków z elementami sterującymi flex.

Częściowy wybór tekstu

WordPress otwiera się na post z kilkoma akapitami. Tekst jest zaznaczany w dwóch różnych blokach akapitu.
Zaznaczanie tekstu w dwóch blokach.

Użytkownicy mogą teraz zaznaczać tekst w wielu blokach tekstu sformatowanego, takich jak akapit, nagłówek, lista i cytat. W przeszłości wyróżnianie częściowego tekstu automatycznie tworzyło zaznaczenie wieloblokowe, co zwykle nie było pożądane.

Zmiana obsługuje naciśnięcie klawisza Enter , aby usunąć zaznaczony tekst i utworzyć nowy blok, Backspace do usuwania i łączenia wstecznego oraz Del do usuwania i łączenia w przód. Wpisanie zastąpi zaznaczony tekst nowym wejściem.

Omówiłem tę nową funkcję w szczegółowym poście w zeszłym miesiącu.

Wariacje w stosach i grupach

Edytor postów WordPress z trzema blokami grup. Pierwsza to wartość domyślna. Druga to odmiana Row. Trzecia to skumulowana odmiana.
Blok grupowy, po którym następują odmiany Row i Stack.

Gutenberg 13.0 wprowadza nową odmianę Stack dla bloku grupowego. Zmiana tworzy łącznie trzy odmiany, licząc domyślne dane wyjściowe i wiersz.

Na pierwszy rzut oka Stack i domyślny blok Group mogą się nie różnić. W końcu oba są pojemnikami na zawartość ułożoną pionowo. Jednak odmiana Stack jest technicznie flexboxem, a nie układem przepływu. Nie jestem pewien, jak to się rozegra dla użytkowników końcowych, którzy mogą nie od razu zrozumieć rozróżnienia. Powinno to być jednak mile widziane narzędzie do budowania bardziej zaawansowanych układów w motywach.

Odmiana Stack całkowicie hermetyzuje wszystkie zagnieżdżone bloki, wyłączając ich kontrolki wyrównania (np. align right, align wide itp.). Jednak sam stos ma kontrolki wyrównywania zawartości do lewej, prawej i do środka.

Edytor postów WordPress. Blok Stos/Grupa zawiera obraz, nagłówek i akapit. Są wyrównane z prawej strony kontenera.
Stosuj odmianę z wyjustowaniem treści po prawej stronie.

Jednym z ustawień, które może wydawać się niejasne, jest kontrolka „Zezwalaj na zawijanie do wielu linii”. Istnieje co najmniej jeden potencjalny przypadek użycia. Układ piętrowy może być również poziomy, jeśli jest ustawiona wysokość. Jednak taka kontrola wysokości nie jest obecnie wyświetlana w interfejsie użytkownika.

Odmiana Row jest również znacznie ulepszona przy pierwszym wstawianiu. Jest teraz wyraźny wskaźnik, że nowo wstawiane bloki są ułożone poziomo.

Oprócz częściowego zaznaczenia tekstu użytkownicy mogą szybko umieścić wybrane bloki w grupie, rzędzie lub stosie za pomocą paska narzędzi.

Blok okładki + wyróżniony obraz

Widok pojedynczego wpisu WordPress na froncie. Strona i nagłówek posta mają za sobą obraz tła, który rozciąga się na całą stronę.
Używanie wyróżnionego obrazu w bloku okładki dla nagłówków pojedynczych postów.

Pojawił się teraz nowy przełącznik „Użyj wyróżnionego obrazu” na pasku narzędzi podczas wstawiania okładki do edytora. Włączenie go wiąże dane obrazu z blokiem.

Czasami trudno jest wybrać ulubione, gdy nowe funkcje pojawiają się tak szybko, jak można je przetestować. Jednak używanie polecanych obrazów w blokach okładki jest jedną z rzeczy, które najbardziej mnie ekscytują. Mam już mnóstwo pomysłów krążących w mojej głowie, z których kilka podzieliłem się, omawiając tę ​​funkcję w zeszłym tygodniu.

Chętnie zobaczę, co robią z nim autorzy i użytkownicy motywu. Otwiera to zupełnie nowy świat możliwości układu motywów blokowych.

Globalne wariacje stylu

Edytor witryny WordPress z otwartym panelem stylów globalnych. Sekcja „Przeglądaj style” jest zaznaczona i zawiera dwie karty, jedną jasną i jedną ciemną.
Globalne wariacje stylu jasnego i ciemnego na pasku bocznym.

Trwają prace nad dopracowaniem funkcji globalnych odmian stylów. Po raz pierwszy uruchomiony w Gutenberg 12.5, umożliwia autorom motywów dostarczanie wielu plików /styles/*.json , między którymi użytkownicy mogą się przełączać. Zasadniczo jest to selektor „skórek” specyficzny dla tematu.

Aktualizacja obsługuje nowe pole title w plikach JSON dla etykiety przyjaznej dla człowieka. W przeciwnym razie wraca do nazwy pliku bez rozszerzenia.

Gdy użytkownik najedzie kursorem na kartę stylu w interfejsie użytkownika, odwróci ją, aby odsłonić tytuł i więcej kolorów dostępnych dla odmiany. Niestety, odwrócona wersja pudełka przyciąga pierwsze cztery kolory określone przez motyw. Może to czasami skutkować ładną i przejrzystą prezentacją odmiany. Może to być również paskudztwo, które nie dostarcza użytkownikowi żadnych przydatnych informacji na temat samego stylu.

Autorzy motywów mogą to kontrolować, umieszczając definicje kolorów w plikach *.json . Ale to w najlepszym razie hack. Ponieważ ta metodologia nie jest oficjalna, nie ma gwarancji, że będzie działać w przyszłości. Ponadto jest to szybki sposób na tworzenie zdezorganizowanego kodu dla tych, którzy lubią utrzymywać porządek.

Nowe komponenty kontroli granicznej

Widok Storybook for Border Box Control. Pokazuje kontrolkę z czterema zestawami ustawień koloru i szerokości dla górnej, prawej, dolnej i lewej krawędzi.
Definiowanie poszczególnych granic bloków.

Gutenberg 13.0 wprowadził nowe komponenty BorderControl i BorderBoxControl . Jest to modernizacja poprzedniej implementacji narzędzia do projektowania granic. Ostatecznie pozwoli użytkownikom zdefiniować szerokość, styl i kolor obramowania wszystkich czterech boków dla bloków, które zdecydują się na obsługę obramowania. Ponadto autorzy motywów będą mieli ten sam poziom szczegółowej kontroli za pośrednictwem theme.json .

Chociaż nowe komponenty są już dostępne, obsługa bloków nie jest planowana do Gutenberg 13.1. Technicznie rzecz biorąc, jest już włączony do rozwojowej wersji wtyczki.

Twórz nowe strony z wzorami

WordPress dodaje nowy ekran strony. Istnieje modalna nakładka z siatką 2x2 wzorów treści z motywu.
Wzorzec modalny podczas dodawania nowej strony.

Tworzenie złożonych układów stron stało się prostsze. Podczas dodawania nowej strony na ekranie pojawia się modalny. Pozwala użytkownikom wybrać z listy wzorców „treści” do wstawienia na stronę. Może to być tak proste, jak kilka bloków do stworzenia układu informacji/profilu. Lub może to być pełnowymiarowy projekt strony głównej. Od tego momentu użytkownicy mogą dostosowywać części do swoich witryn.

Ta funkcja zależy od tego, czy autorzy motywów rejestrują niestandardowe wzorce dla typu bloku core/post-content . W przeciwnym razie użytkownicy zobaczą tylko domyślny edytor. Motywy powinny zacząć eksperymentować, jak zaprezentować tę nową funkcję, która pojawi się wraz z WordPress 6.0 w przyszłym miesiącu.

Pętla zapytań komentarzy zastępuje blok komentarzy

Edytor witryn WordPress z dostosowanym blokiem pętli zapytań komentarzy, który wyświetla komentarze do wpisu w interfejsie użytkownika.
Komentarze Blok pętli zapytań w edytorze witryny.

Istniejący blok komentarzy do posta został przestarzały i zastąpiony nowszą pętlą zapytania komentarzy i powiązanymi blokami. Będzie nadal działać, tak jak w przypadku innych przestarzałych bloków. Jednak nie pojawi się w inserterze.

Pętla komentarzy Query Loop oferuje znacznie lepsze doświadczenie projektanta i użytkownika. Jednak nie ma jeszcze parzystości funkcji z rozwiązaniem, które zastępuje, przynajmniej w Gutenberg 13.0.

Niektóre z problemów, które zauważyłem we wcześniejszym opracowaniu, takie jak brak identyfikatora komentarza i klas, zostały już rozwiązane w trunku. Jednak nie ma jeszcze rozwiązania dla tytułu „X odpowiedzi na post”. Spodziewam się, że to i pozostałe zmarszczki zostaną usunięte w najbliższych tygodniach. Jednak autorzy tematów, którzy opierają się na krwawej krawędzi, powinni pamiętać o istniejących problemach.