Co nowego w WordPress 5.9 — pełna edycja witryny, globalne style, bloki, wzorce, interfejsy API, ulepszenia interfejsu użytkownika i wiele więcej

WordPress 5.9 Josephine jest tutaj! Pierwsza wersja WordPressa tego roku została pierwotnie zaplanowana na 14 grudnia 2021 r. Z powodu kilku otwartych problemów i nierozwiązanych błędów ostateczna wersja została opóźniona i została ostatecznie wydana 25 stycznia 2022 r.

Jeśli zastanawiasz się, co nowego w WordPress 5.9, krótką odpowiedzią jest pełna edycja witryny (FSE).

I rzeczywiście, wiele funkcji 5.9 jest dostępnych tylko wtedy, gdy używasz motywu obsługującego pełną edycję witryny, takiego jak zupełnie nowy domyślny motyw, Twenty Twenty-Two.

Dzięki WordPress 5.9 dochodzimy do sedna drugiej fazy mapy drogowej Gutenberga: fazy dostosowywania , która koncentruje się głównie na edycji całej witryny, wzorcach blokowych, katalogach bloków i motywach opartych na blokach.

Z wersją 5.9, która ukaże się w przyszłym miesiącu, jesteśmy — powiedziałbym — na MVP, minimalnej wartości produktu w tej fazie dostosowywania Gutenberga.

Te słowa Matta Mullenwega z State of the Word 2021 najlepiej podsumowują kluczowe cechy nowego wydania WordPressa.

To powiedziawszy, co nowego w pierwszym wydaniu WordPressa w 2022 roku?

Dowiedzmy Się!

Style globalne: interfejs graficzny dla theme.json

Wraz z wydaniem WordPress 5.8 w 2021 r. manipulowanie plikiem theme.json stało się standardowym sposobem dostosowywania ustawień i stylów edytora przez twórców motywów.

WordPress 5.9 przenosi rzeczy na wyższy poziom, wprowadzając interfejs graficzny, który pozwala użytkownikom dostosowywać ustawienia stylów dla swoich witryn, globalnie lub na poziomie bloków, bez pisania ani jednej linii kodu.

Mechanizm stylów globalnych powinien znacząco zmienić sposób, w jaki przywykłeś do dostosowywania wyglądu swoich witryn, ponieważ style globalne wpływają na kilka aspektów projektowania witryn WordPress.

Po pierwsze, interfejs Global Styles zastępuje Customizer i jest teraz jedynym sposobem dostosowywania ustawień i stylów za pomocą motywów blokowych. Podobnie złożone strony administracyjne opcji motywu nie będą już potrzebne. Zapewnia to nowy standardowy sposób konfigurowania ustawień i stylów motywu, a jednocześnie powinien usprawnić przepływ pracy przy opracowywaniu motywu.

Dzięki globalnym stylom użytkownicy WordPressa zyskują większą kontrolę nad prezentacją swoich witryn, zarówno globalnie, jak i według typu bloku, poza kontekstem poszczególnych stron lub postów.

W edytorze witryny jest teraz dostępny nowy pasek boczny, na górze którego znajduje się mały panel podglądu i cztery komponenty w następującej kolejności:

• Typografia
• Zabarwienie
• Układ
• Bloki

Z czasem możemy spodziewać się dodawania nowych komponentów.

Przyjrzyjmy się bliżej nowemu interfejsowi.

To tu! Wszystko, co musisz wiedzieć o WordPressie 5.9, wszystko w jednym mega poście Kliknij, aby tweetować
[CTA]

Podgląd stylu

Pierwszym elementem na pasku bocznym stylów globalnych jest panel podglądu. Ten panel umożliwia sprawdzenie wyników dostosowań i jest szczególnie przydatny, gdy zmiany dotyczą elementów niewidocznych na kanwie edytora witryny.

Poniższy obraz przedstawia porównanie trzech różnych kombinacji stylów:

Typografia

Panel Typografia to miejsce, w którym kontrolujesz typografię swojej witryny. Oczywiście kontrolki dostępne w tym panelu zależą od ustawień theme.json .

Na przykład motyw Dwadzieścia dwadzieścia jeden bloków (bloków TT1) deklaruje następujące właściwości typografii:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

Następny obraz przedstawia wynikowe ustawienia typografii na pasku bocznym stylów globalnych:

Zanurzmy się nieco głębiej i zobaczmy, jak motyw TT1 Blocks deklaruje fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Możesz sprawdzić te rodziny czcionek w panelu podglądu Style globalne:

Zabarwienie

W sekcji Kolory można przeglądać i edytować palety kolorów oraz dostosowywać kolory kilku elementów witryny.

Klikając te elementy, uzyskasz dostęp do nowego panelu, w którym możesz wybrać kolory z trzech palet kolorów: Core, Theme i Custom (więcej informacji znajdziesz w Default Colors, Theme Colors i Custom Colors).

W tym panelu będziesz mógł ustawić i zmienić kolor dla bieżącego elementu.

Układ

Ostatnia grupa narzędzi przeznaczona jest do dostosowywania układu. W kontekście globalnym ogranicza się to do kontenera witryny.

Bloki

Dzięki wdrożeniu mechanizmu stylów globalnych można teraz również zmienić wygląd określonych bloków, takich jak Akapit (typografia i kolory), Przyciski (układ) i Kolumna (kolory i układ).

Należy zauważyć, że style bloków można dostosować z poziomu interfejsu stylów globalnych tylko wtedy, gdy blok deklaruje obsługę określonej funkcji w odpowiednim pliku block.json . Na przykład blok core/post-title obsługuje obecnie następujące style:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Ponieważ blok core/post-title obsługuje kolory, odstępy i typografię, odpowiednie wpisy znajdziesz w ustawieniach globalnych stylów bloku tytułowego posta.

Poniższy obraz przedstawia ustawienia typografii, które możesz łatwo porównać z powyższym kodem:

Warto zauważyć, że WordPress 5.9 dostarcza tylko pierwszą implementację interfejsu Global Styles. Jak wskazuje Matias Ventura, możemy rozsądnie oczekiwać dalszego rozwoju nowej funkcji sterowania stylem:

W przyszłości w system zostaną wbudowane przepływy umożliwiające przejście od stylów lokalnych do globalnych — na przykład wprowadzanie dostosowań do bloku przycisków i decydowanie się na zastosowanie ich globalnych zmian we wszystkich przyciskach tego typu.

Dlatego wkrótce możemy zobaczyć znaczną poprawę. Poniższy obrazek to tylko przykład tego, czego możemy się spodziewać:

Dodatkowe ulepszenia mogą obejmować możliwość zapewniania przez motywy alternatywnych palet kolorów i wielu globalnych odmian stylów.

W zeszłym tygodniu stworzyłem kilka wariantów kolorów i czcionek Twenty Twenty-Two w bardzo proste motywy potomne. Są naprawdę lekkie i podoba mi się pomysł oferowania ludziom drastycznie innej witryny za pomocą jednego kliknięcia.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) 15 listopada 2021 r

Deweloperzy mogą zagłębić się w globalny mechanizm stylizacji w artykule pomocy Global Settings & Styles (theme.json). Dodatkowe przykłady znajdziesz w naszym wprowadzeniu do domyślnego motywu Twenty Twenty-Two.

Blok nawigacyjny

Blok nawigacji został nazwany „jednym z najbardziej wpływowych bloków tematycznych” i nie boimy się powiedzieć, że się zgadzamy.

Blok był od jakiegoś czasu w fazie embrionalnej (patrz także Problem śledzenia bloku nawigacyjnego i Problem śledzenia i2). Mimo to, teraz, gdy wszystkie nierozstrzygnięte problemy i blokady wymienione jako niezbędne do WordPressa 5.9 zostały naprawione, możemy wreszcie zacząć korzystać z jednej z najpotężniejszych funkcji połączonych z rdzeniem WordPressa 5.9.
[CTA]

Szybki przegląd interfejsu bloku nawigacyjnego

Korzystanie z nowego bloku może na początku być nieco mylące, ale kiedy już go opanujesz, docenisz jego pełny potencjał.

Gdy po raz pierwszy dodajesz blok nawigacji, symbol zastępczy bloku udostępnia trzy opcje wyboru istniejącego menu opartego na blokach, tworzenia menu ze wszystkimi stronami lub rozpoczynania od nowa z pustym menu.

Nowe menu Nawigacja umożliwia również importowanie menu utworzonych za pomocą ekranu Wygląd menu, który jest dostępny w klasycznych motywach.

Oznacza to, że jeśli przechodzisz z motywu klasycznego do motywu blokowego, nie będziesz musiał przebudowywać istniejących menu. Wystarczy wybrać jedno z aktualnie dostępnych "Klasycznych menu", a zostanie ono automatycznie przekształcone w menu nawigacyjne oparte na blokach.

Możesz dodać blok nawigacji w dowolnym miejscu na swoich stronach. Na przykład w długich artykułach przydatne może być utworzenie spisu treści, umożliwiającego użytkownikom przechodzenie do określonych sekcji treści.

Nowe łącza nawigacyjne są natychmiast dodawane do bloku nawigacyjnego, klikając ikonę plus ( + ) po prawej stronie (patrz także informacje o wersji Gutenberg 11.7), chyba że do menu zostały już dodane inne typy bloków.

Kliknięcie przycisku Edytuj na pasku narzędzi bloku Łącza nawigacyjnego konwertuje element menu na łącze niestandardowe. Umożliwia to indywidualne dodawanie, edytowanie, zmienianie kolejności i usuwanie elementów.

Możesz także przekształcić łącza w bloki, klikając przycisk Przekształć na pasku narzędzi bloku. Pozwala to na dodawanie określonych bloków bezpośrednio do menu nawigacyjnego.

Bloki niestandardowego łącza, odstępnika, logo witryny, łącza głównego, ikon społecznościowych i wyszukiwania są teraz widoczne dla użytkowników podczas dodawania bloków do menu nawigacji.

Na pasku bocznym Ustawienia znajdziesz obszerny zestaw opcji do kontrolowania kilku aspektów menu nawigacyjnych.

Panel Układ zawiera kontrolki do justowania, orientacji i zawijania.

Blok nawigacji zawiera również ulepszony panel ustawień wyświetlania z opcją zawsze aktywnego menu z burgerami.

Możesz także dostosować kolory tekstu i tła dla swoich menu i podmenu.

Innym pomocnym dodatkiem niedawno dodanym do bloku nawigacyjnego jest obsługa Block Gap, która dodaje użytkownikom możliwość kontrolowania odległości między pozycjami menu.

Panel Typografia udostępnia zestaw elementów sterujących rodziny czcionek, wyglądem, wysokością linii, dekoracją i wielkością liter. Wszystkie te elementy sterujące można włączać i wyłączać z menu rozwijanego, które pojawia się po kliknięciu ikony wielokropka po prawej stronie.

Blok nawigacyjny: pod maską

Dane bloku nawigacyjnego są przechowywane w bazie danych przy użyciu dedykowanego typu postu wp_navigation .

Dlaczego jest to interesujące dla użytkowników WordPressa i jak to działa?

Załóżmy, że utworzyłeś menu nawigacyjne składające się z dwóch niestandardowych linków i pola wyszukiwania. Po zainstalowaniu motywu Twenty Twenty-Two menu może wyglądać tak, jak pokazano na poniższym obrazku:

Powyższy blok nawigacji jest przechowywany w bazie danych jako typ postu wp_navigation w następujący sposób:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Przechowywanie zawartości bloku nawigacyjnego w bazie danych umożliwia użytkownikom korzystanie z tych samych menu nawigacyjnych w różnych motywach bloków. Jeśli menu nie jest od razu widoczne, wystarczy wybrać żądane menu nawigacyjne w selektorze menu (patrz również wydania #36087 i PR #36178).

Poniższy obraz przedstawia powyższe menu z motywem Twenty Twenty-One Blocks:

Blok nawigacji przeszedł kilka iteracji. Możesz głębiej zagłębić się w każdą implementację w informacjach o wydaniu Gutenberg 11.7, 11.8 i 11.9.

Więcej informacji na temat bloku nawigacyjnego można znaleźć w artykule Nowa notatka dewelopera dotycząca bloku nawigacyjnego oraz w artykule pomocy dotyczącym bloku nawigacyjnego.
[CTA]

Galerie obrazów, polecane obrazy i ikony witryn

Dążąc do tego, aby obrazy zachowywały się bardziej spójnie w różnych kontekstach, WordPress 5.9 zapewnia nowe funkcje i ulepszenia kilku bloków. Blok galerii został całkowicie zmieniony, a różne zmiany w blokach polecanego obrazu i ikony witryny zapewniają użytkownikom bardziej szczegółową kontrolę nad odpowiednimi obrazami.

Zrefaktoryzowany blok galerii

W WordPressie 5.8 możliwość dostosowania wyglądu obrazów w galeriach była nieco ograniczona. Nie było możliwości zmiany stylu obrazu ani zastosowania filtra bichromii.

Ponadto w obrazach galerii brakowało ważnych funkcji, takich jak dodawanie niestandardowych linków do poszczególnych obrazów w galerii.

Aby lepiej zrozumieć przyczynę tej asymetrii między obrazami w dwóch różnych kontekstach pojedynczego obrazu i obrazu w galerii, spójrzmy na blok Galeria w widoku Kod w WordPress 5.8:

Zwróć uwagę, że szczegóły obrazu są przechowywane tylko w ograniczniku bloku Galeria (zobacz także Co to jest blok Gutenberga?).

To sprawiło, że poszczególne obrazy zachowywały się inaczej niż obrazy w galeriach.

Aby obrazy zachowywały się spójnie w dwóch różnych kontekstach, WordPress 5.9 wprowadza całkowicie zrefaktoryzowany blok Galerii, który teraz zachowuje się jak pojemnik na kolekcję elementów figur zamiast nieuporządkowanej listy obrazów.

W WordPressie 5.9 obrazy galerii są zagnieżdżane przy użyciu podstawowych interfejsów API innerBlocks , a każdy obraz przechowuje własny zestaw szczegółów, dokładnie tak jak poszczególne obrazy.

To wspaniałe ulepszenie, ponieważ blokowe obrazy galerii obsługują teraz te same funkcje, które są dostępne w podstawowych blokach obrazów , takie jak wymiary obrazu i filtry bichromii, a także standardowe funkcje blokowe, takie jak przeciąganie i upuszczanie, kopiowanie, duplikowanie i usuwanie funkcji .

Dzięki nowemu blokowi Galeria będziesz mógł indywidualnie stylizować obrazy. Daje to szeroki wachlarz możliwości dostosowywania.

Poniższy obraz przedstawia wiele zdjęć w galerii, każde z inaczej zaokrąglonymi rogami:

Możesz także użyć różnych filtrów bichromii na różnych obrazach w tej samej galerii.

I oczywiście możesz przypisać konkretną klasę CSS do każdego obrazu, co daje dodatkowe supermoce do dodawania wszelkich potrzebnych dostosowań do obrazów w galerii.

Aby uzyskać bliższy widok nowego bloku galerii, zobacz także uwagi dewelopera dotyczące refaktoryzacji bloku galerii, nadchodzące ulepszenia bloku galerii i informacje o wersji Gutenberg 11.4.

Polecane ulepszenia obrazu

Kilka ulepszeń zostało również wprowadzonych do bloku wyróżnionych obrazów.

Podstawowe sterowanie wymiarami

Blok Polecany obraz zawiera teraz nowy panel ustawień Wymiary, który umożliwia sterowanie wysokością, szerokością i skalą.

Kontrola wymiarów dotyczy również polecanych obrazów w blokach Query Loop, jak pokazano na poniższej ilustracji:

Filtry bichromii w polecanych obrazach

Wspomnieliśmy powyżej, że możemy teraz zastosować filtr bichromii w obrazach opakowanych w nowy zrefaktoryzowany blok Galerii.

Teraz, począwszy od WordPress 5.9, filtry bichromii są również dostępne w blokach wyróżnionych obrazów w dowolnym kontekście, od szablonów postów i stron po bloki pętli zapytań.

Ta funkcja otwiera drzwi do kreatywnych i spójnych kombinacji kolorów w całej witrynie.

Przycinanie obrazu w logo witryny

Przed WordPress 5.9 (i Gutenberg 11.6) obrazy logo można było edytować tylko przed przesłaniem. Dzięki WordPress 5.9 możesz przycinać, powiększać i obracać obrazy używane w bloku Logo witryny bezpośrednio z paska narzędzi bloku.

Nowe narzędzia projektowe, bloki i ulepszenia interfejsu użytkownika

Jedenaście wersji Gutenberga łączy się z rdzeniem WordPressa 5.9, dostarczając tak wiele funkcji, ulepszeń i poprawek, że nie byłoby możliwe opisanie ich wszystkich w jednym artykule.

Wybraliśmy więc niektóre z tych, które uznaliśmy za najbardziej godne uwagi. Aby uzyskać głębszy przegląd tych funkcji i ulepszeń, możesz również sprawdzić posty o wydaniu dla Gutenberga 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 i 11.9.

Mając to na uwadze, ta sekcja obejmie następujące zmiany:

Granica obsługuje interfejs użytkownika

Począwszy od WordPress 5.9, kiedy theme.json deklaruje ustawienia border , a blok deklaruje obsługę obramowania za pośrednictwem interfejsu API obsługi bloków, nowy panel ustawień zapewni kontrolę promienia obramowania, szerokości, stylu, koloru i jednostek (patrz także Gutenberg 11.1) .

Podstawowy blok grupy jest dobrym przykładem tego przydatnego ulepszenia interfejsu użytkownika. Plik block.json bloku Group zawiera teraz następujące deklaracje supports :

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Ta funkcja pozwala użytkownikom tworzyć niesamowite efekty graficzne na swoich stronach internetowych przy minimalnym wysiłku. Możesz to zobaczyć w akcji dzięki nowemu motywowi Twenty Twenty-Two.

W nowym poście lub na stronie utwórz nowy blok grupy i wybierz go. Zobaczysz panel obramowania na pasku bocznym ustawień bloku. Zmień szerokość i styl obramowania według potrzeb i ciesz się rezultatem.

Jeśli jesteś programistą motywów i chcesz dodać tę funkcję do swoich motywów, otwórz plik theme.json i zadeklaruj obsługę granic, jak pokazano w poniższym kodzie:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Zapisz plik i wróć do pulpitu WordPress. W nowym poście lub na stronie utwórz nowy blok grupy i wybierz go. Powinieneś teraz zobaczyć panel Border na pasku bocznym ustawień bloku (zobacz także ten eksperymentalny theme.json).

Ulepszenia widoku listy

W WordPress 5.9 widok listy został ulepszony i zawiera teraz funkcje przeciągania i upuszczania, zwijalne sekcje i kotwice HTML.

Przeciągnij i upuść w widoku listy

Jak wspomniano w żądaniu ściągnięcia #33320, przeciąganie i upuszczanie zostało zaimplementowane w widoku listy, ale zostało wyłączone z powodu problemów z wydajnością.

Począwszy od WordPress 5.9, przeciąganie i upuszczanie w widoku listy zostało ponownie zaimplementowane. Możesz ponownie przeciągać i upuszczać bloki i grupy bloków w dowolnym miejscu w widoku listy. Jest to duże ulepszenie użyteczności edytora, ponieważ pozwala szybko i łatwo przenosić bloki i grupy bloków po stronach. Jest instrumentalny w długich artykułach i stronach oraz w zarządzaniu złożonymi strukturami zagnieżdżonych bloków.

Zwijalne sekcje widoku listy

Innym znaczącym ulepszeniem widoku listy jest możliwość rozwijania/zwijania sekcji zagnieżdżonych bloków. Pozwala to na łatwą nawigację w złożonych strukturach bloków, rozszerzanie pojedynczych grup bloków, pozostawiając całą resztę zwiniętą.

Możesz także rozwijać i zwijać sekcje widoku listy za pomocą strzałek w lewo i w prawo.

Kotwice HTML w elementach widoku listy

Kolejnym przydatnym ulepszeniem jest możliwość dodawania kotwic HTML do bloków w widoku listy i szybkiego przeglądania.

Kontrola odstępów między blokami

Po raz pierwszy wprowadzona w Gutenberg 11.4, a teraz połączona z rdzeniem z WordPress 5.9, nowa kontrola odstępów między blokami pozwala ustawić niestandardową odległość między elementami w bloku. Poniżej możesz zobaczyć podgląd z różnymi wartościami odstępów między blokami w bloku Kolumny z domyślnym motywem Dwadzieścia dwadzieścia dwa:

Odstępy odstępów są początkowo dostępne dla określonych bloków, w tym przycisków, obrazów, kolumn, tytułów i nawigacji, ale w przyszłości obsługa powinna zostać rozszerzona na więcej bloków.

Motywy powinny włączać odstępy między przerwami w theme.json przy użyciu nowej właściwości lookTools . Możesz przeczytać więcej o narzędziach wyglądu w naszym głębokim zanurzeniu w Dwadzieścia Dwadzieścia Dwa. Zobacz także żądania ściągnięcia #33991 i #34630.

Podgląd sformatowanego adresu URL do kontroli linków

Korzystając z nowego punktu końcowego szczegółów adresu URL REST, formant Link zapewnia teraz podgląd sformatowanego adresu URL, pokazujący szczegóły dotyczące zasobu docelowego łącza.

W swojej pierwszej implementacji ta funkcja była dostępna tylko w komponencie richtext edytora postów. W chwili pisania tego tekstu jest on również dostępny w Edytorze witryny, ale nie w edytorach nawigacji i widżetów.

Twórz strony z wyskakującego linku

WordPress 5.9 zawiera również ulepszony interfejs linków wbudowanych, pokazujący zupełnie nowy przycisk do tworzenia nowych stron bezpośrednio z wyskakującego okienka linków. Ta funkcja jest dostępna tylko w edytorze postów.

Ulepszenia bloku wyszukiwania

Blok wyszukiwania pokazuje teraz przycisk i ustawienia kolorów obramowania.

Możesz teraz dostosować kolor tła i tekstu oraz kolor i promień obramowania.

Nowe sterowanie wymiarami bloków

Nowy panel ustawień Wymiary jest teraz dostępny dla użytkowników, aby kontrolować miejsce zajmowane przez blok na stronie. Panel powinien zawierać kontrolki wysokości, szerokości, dopełnienia, marginesu i ewentualnie wyrównania, ale nie wszystkie atrybuty będą dostępne dla każdego bloku.

Deweloperzy bloków znajdą składnik <DimensionControl /> udokumentowany na GitHub, ale pamiętaj, że nadal jest oznaczony jako funkcja eksperymentalna i może podlegać istotnym zmianom w momencie pisania tego tekstu.

Nowy blok grupy widżetów dodany do ekranu widżetów

W edytorze widżetów opartych na blokach jest teraz dostępny nowy blok Widget Group. Najnowszy blok umożliwia dodanie grupy bloków do widżetu z tytułem w Edytorze widżetów klasycznych motywów i narzędziu Customizer.

Więcej informacji na temat edytora widżetów można znaleźć w Edytorze widżetów opartych na blokach i Widżety blokowe w programie Customizer.

Układ elastyczny i nowy blok wierszy

Pierwotnie wprowadzony jako funkcja eksperymentalna w Gutenberg 11.2, elastyczny układ został rozszerzony do kilku bloków, w tym do łączy społecznościowych i bloków grup.

Niektóre bloki, takie jak blok Linki społecznościowe, zapewniają teraz zestaw kontrolek paska narzędzi i ustawień paska bocznego, które pozwalają dostosować układ flex.

Ta sama funkcja jest dostępna w bloku nawigacji i bloku wiersza, nowej odmianie bloku grupy wprowadzonej w Gutenberg 11.5.

Poniższy obraz przedstawia blok wiersza z kontrolkami układu na pasku bocznym ustawień:

Poniżej możesz zobaczyć ten sam blok Row na interfejsie użytkownika i w narzędziu inspektora Chrome.

Udoskonalenia wzoru bloków

Po raz pierwszy wprowadzone w WordPress 5.5, wzorce blokowe pozwalają użytkownikom WordPressa na włączanie do treści złożonych, gotowych do użycia struktur zagnieżdżonych bloków za pomocą zaledwie kilku kliknięć.

Teraz WordPress 5.9 robi krok naprzód w kierunku demokratyzacji projektowania i wzmocnienia pozycji użytkowników, wprowadzając kilka ulepszeń do systemu wzorców blokowych.

A więc, co nowego we wzorcach blokowych w WordPress 5.9?

Polecane wzory z katalogu wzorów

Wstawiacz bloków wyświetla teraz Polecane wzorce bloków dynamicznie pobierane z Katalogu wzorców, zapewniając użytkownikom szybki i łatwy sposób znajdowania popularnych wzorców do wykorzystania w ich treści.

Z tego samego powodu, w miarę jak wzorce trafiają bezpośrednio do pulpitu WordPress, programiści WordPress powinni być zachęcani do tworzenia i publikowania coraz większej liczby wzorców z biegiem czasu, co skutkuje coraz bardziej zaawansowanymi możliwościami projektowania dla użytkowników.

Nowy pełnoekranowy Eksplorator wzorów

Ponieważ liczba wzorców blokowych dostępnych w Katalogu wzorców stale rośnie i korzysta z nich coraz więcej motywów, WordPress 5.9 wprowadza nowy interfejs nawigacji po wzorcach blokowych: Eksplorator wzorców.

Nowy przycisk Eksploruj otwiera teraz tryb pełnoekranowy, który umożliwia użytkownikom przeglądanie, wyszukiwanie i wstawianie wzorców blokowych za pomocą zaledwie kilku kliknięć. Rezultatem jest lepsze wrażenia użytkownika.

W naszym głębokim zanurzeniu się w motyw WordPress Twenty Twenty-Two znajdziesz również dodatkowe uwagi i kilka przykładów wzorów blokowych.

Jeśli jesteś zainteresowany i chcesz dowiedzieć się więcej, posłuchaj podcastu Josepha Haden Chomphosy, odcinek 16 i 21, i obejrzyj film na YouTube poświęcony eksploracji WordPressa 5.9 od Anne McCarthy.

Motyw Twenty Twenty-Two i motywy blokowe WordPress

Dzięki WordPress 5.9 nie musisz już instalować wtyczki Gutenberg, aby włączyć pełną edycję witryny w swojej witrynie WordPress. Wystarczy zezwolić motywowi blokowemu na wykorzystanie wszystkich funkcji FSE.

Ponadto WordPress 5.9 został dołączony do zupełnie nowego domyślnego motywu, Twenty Twenty-Two, który zmienia zasady gry, ponieważ Twenty Twenty-Two jest pierwszym domyślnym motywem blokowym w historii.

Twenty Twenty-Two to bardzo elastyczny i konfigurowalny motyw. Zapewnia idealną piaskownicę do wypróbowania nowego przepływu edycji szablonów, nowych bloków, ulepszeń interfejsu i wszystkich funkcji edycji witryny dodanych do rdzenia, począwszy od WordPressa 5.9.

Jak wspomniano powyżej, wystarczy zainstalować i aktywować motyw blokowy, taki jak Twenty Twenty-Two. Gdy motyw jest aktywny, w menu administratora pulpitu WordPress pojawi się nowy element menu Edytor (beta) .

Interfejs edytora witryny zawiera teraz zmodernizowany proces edycji witryny. Z poziomu interfejsu edycji będziesz mógł wizualnie edytować stronę główną witryny, szablony i części szablonów, a także uzyskać dostęp do interfejsu stylów globalnych.

Kiedy aktywujesz motyw blokowy, nie znajdziesz Customizer. Dzieje się tak, ponieważ Customizer nie obsługuje motywów blokowych, które korzystają tylko z Edytora witryny. Jest to również powód, dla którego nie możesz wyświetlić podglądu nieaktywnych motywów blokowych .

Tak więc, od wersji WordPress 5.9, punkt dostępu do Customizer nie jest już dostępny w menu administratora, gdy aktywny jest motyw blokowy (chyba że używasz wtyczki, która z niego korzysta).

Jeśli nadal jesteś przywiązany do tradycyjnych motywów i martwisz się o kompatybilność wsteczną, nie przejmuj się: możesz nadal używać swojego motywu.

Obecnie masz do wyboru cztery różne kategorie motywów:

• Blokuj motywy : motywy zaprojektowane dla FSE
• Motywy uniwersalne : motywy, które działają zarówno w programie Customizer, jak i w edytorze witryny
• Motywy hybrydowe : klasyczne motywy obsługujące funkcje FSE, takie jak theme.json
• Motywy klasyczne : Motywy z szablonami PHP, functions.php itp.

Ze względu na wpływ, jaki motywy blokowe prawdopodobnie będą miały na ekosystem WordPress, mamy cały artykuł dotyczący dwudziestu dwudziestu dwóch i motywów blokowych WordPress. Koniecznie sprawdź to, aby uzyskać bardziej szczegółowy przegląd.

Ulepszenia w wydajności

W Kinsta mamy obsesję na punkcie szybkości witryny. Dlatego jesteśmy podekscytowani ulepszeniami wydajności, które pojawią się w WordPressie 5.9.

Te ulepszenia wpłyną na kilka obszarów CMS, od edytora bloków po motywy blokowe, leniwe ładowanie i nie tylko. Zanurzmy się.

Udoskonalenia wstawiania bloków

Od wersji WordPress 5.9 typy bloków, wzory i kategorie są leniwie renderowane w module wstawiania bloków. Przeglądarka najpierw ładuje zawartość o wyższym priorytecie, zapewniając użytkownikowi płynniejszą edycję i lepszą wydajność.

Dalsze znaczące ulepszenia wydajności w kontekście edytora bloków dotyczą bloków wielokrotnego użytku i widoku listy.

Mniej załadowanych CSS

Jeśli chodzi o frontend, WordPress 5.9 drastycznie zmniejszył ilość CSS ładowanego przez motywy blokowe, co prowadzi do znacznie szybszego ładowania stron.

Głównym ulepszeniem, na które należy zwrócić uwagę w tym kontekście, jest wprowadzenie mechanizmu ustawień i stylów theme.json , który uniemożliwia motywom używanie masywnych arkuszy stylów, w tym setek deklaracji CSS. Ilość kodu CSS używanego przez motyw została teraz zmniejszona do kilku niestandardowych właściwości CSS, które każdy typ bloku może ponownie wykorzystać.

Ulepszenia wydajności leniwego ładowania

Lazy loading obrazu został po raz pierwszy wprowadzony w WordPress 5.5. Począwszy od WordPressa 5.7, funkcja leniwego ładowania została rozszerzona do ramek iframe, umożliwiając właścicielom witryn tworzenie szybszych stron internetowych i ulepszanie ich SEO.

W każdym razie po analizie największej zawartości treści (LCP) okazało się, że przypisanie atrybutu loading="lazy" do wszystkich obrazów i ramek iframe na stronie powoduje lekkie pogorszenie wydajności.

Samo pominięcie atrybutu loading="lazy" nie było rozwiązaniem, ponieważ prowadziłoby to do utraty wyraźnych zalet leniwego ładowania.

Optymalnym rozwiązaniem byłoby pominięcie atrybutu load loading="lazy" tylko na obrazach pojawiających się w części strony widocznej na ekranie. Jednak ponieważ atrybut loading="lazy" jest przypisany po stronie serwera, WordPress nie może określić, które obrazy są dokładnie wyświetlane w części strony widocznej na ekranie. Jest to coś, co w większości zależy od aktywnego motywu.

Teraz, jako rozwiązanie kompromisowe, począwszy od WordPressa 5.9, atrybut loading="lazy" nie jest stosowany do pierwszego obrazu treści lub elementu iframe. Analiza przeprowadzona na 50 popularnych motywach WordPress wykazała, że ​​to rozwiązanie prowadzi do znacznej poprawy wydajności i szybszego ładowania stron nawet o 30%.

Felix Arntz wyjaśnia, jak to działa:

… aby poprawić wydajność bez konieczności dostosowywania zachowania przez programistę, WordPress pominie teraz leniwe ładowanie pierwszego „obrazu treści lub ramki iframe” na stronie. Termin „obraz treści lub element iframe” oznacza tutaj dowolny obraz lub element iframe znajdujący się w treści dowolnego posta w bieżącej głównej pętli zapytań, a także dowolny polecany obraz takiego posta. Dotyczy to zarówno treści „pojedynczych”, jak i „archiwalnych”: w kontekście „pojedynczym” pierwszy obraz lub ramka iframe (jedynego) postu nie jest ładowany z opóźnieniem, podczas gdy w kontekście „archiwalnym” pierwszy obraz lub ramka iframe pierwszy post w zapytaniu nie jest ładowany leniwie.

Twórcy motywów mogą teraz używać nowego filtra wp_omit_loading_attr_threshold , aby zmienić liczbę obrazów/ramek iframe, które mają zostać pominięte podczas leniwego ładowania.

Wiele arkuszy stylów na blok

Twórcy bloków i motywów mogą zarejestrować wiele arkuszy stylów w każdym bloku i w razie potrzeby załadować style z innych bloków. Umożliwia to ładowanie arkuszy stylów w zależności od zawartości strony, zapobiegając ładowaniu przez motywy ogromnych arkuszy stylów na każdej stronie.

Według Ariego Stathopoulosa:

Bloki będą teraz mogły rejestrować wiele arkuszy stylów i w razie potrzeby ładować style z innych bloków. Motywy będą mogły dodawać style na podstawie bloku, zamiast wczytywać monolityczne arkusze stylów, które są wczytywane w dowolnym miejscu. Ma to większy wpływ na motywy blokowe, w których ładowanie arkuszy stylów jest zoptymalizowane na podstawie zawartości strony i układu, ale może być również używane w klasycznych motywach.

Dodatkowe funkcje dla programistów

Oprócz wielu omówionych dotychczas funkcji i ulepszeń interfejsu, WordPress 5.9 wprowadza również kilka funkcji dla programistów.

Nowy atrybut blokowania bloków

Deweloperzy bloków mogą teraz uniemożliwić użytkownikom przenoszenie lub usuwanie pojedynczych bloków, dodając atrybut lock w ustawieniach bloku:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Po włączeniu tej funkcji użytkownicy mogą edytować zawartość bloku, ale nie mogą przesuwać bloku po stronie ani usuwać go z kanwy edytora. Poniższa ilustracja przedstawia niestandardowy blok ze standardowym zestawem elementów sterujących paska narzędzi:

Zdefiniowanie atrybutu lock , jak widać w powyższym kodzie, powoduje ukrycie elementów do przenoszenia bloków oraz kontrolek Przenieś do i Usuń z paska narzędzi bloku. Poniższy obrazek pokazuje końcowy wynik na ekranie:

Możesz także zablokować określony blok w szyku blokowym. Na przykład zobacz także Blokowanie bloków w WordPress 5.9.

Nowy interfejs API umożliwiający dostęp do globalnych ustawień i stylów

WordPress 5.9 wprowadza nowe publiczne API PHP do odczytu danych z theme.json .

Czytanie ustawień i stylów z theme.json

Pojawiły się dwie nowe funkcje do odczytu danych z sekcji settings i styles zadeklarowanych w pliku theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path to tablica zawierająca ścieżkę do określonego ustawienia
• $context to tablica ustawiająca kontekst dla tych danych. Deweloperzy mogą czytać z określonej sekcji ustawień bloku — na przykład array( 'block_name' => 'core/paragraph' ) . Zestaw kluczy orygin do base umożliwia ignorowanie niestandardowych danych zapisanych przez użytkownika.

Poniższy przykładowy kod zwróci wartość ustawienia contentSize . W Twenty Twenty-Two byłoby to 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Ustawiając kontekst, możesz pobrać style dla określonych bloków. Poniższy kod pokazuje, jak pobrać wartość promienia obramowania dla bloku core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

Powyższa funkcja zwraca wymaganą wartość właściwości, biorąc pod uwagę ustawienia domyślne, ustawienia motywu i dane użytkownika. Wartość niestandardowa zostanie podana, jeśli użytkownik skonfiguruje promień obramowania przycisku w interfejsie stylów globalnych.

Aby zignorować dane użytkownika, użyjesz następującego kodu:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Pobieranie wygenerowanego arkusza stylów

WordPress 5.9 wprowadza również nową funkcję pozwalającą na pobranie arkusza stylów wynikającego ze stylów domyślnych, tematycznych i niestandardowych:

 wp_get_global_stylesheet( $types = array() );

$types to lista stylów do wygenerowania.

Więcej informacji o nowym interfejsie API można znaleźć w artykule Nowy interfejs API, aby uzyskać dostęp do globalnych ustawień i stylów.

Więcej funkcji dla programistów

Dodatkowe zmiany WordPress 5.9 dla programistów, o których możesz chcieć wiedzieć, obejmują:

• Blokuj motywy, nowy sposób tworzenia motywów w WordPress 5.9
• Aktualizacje ustawień, stylów i theme.json
• Zmiany i filtry tematyczne w WordPressie 5.9
• Nowe zapytania dotyczące możliwości w WordPressie 5.9
• Różne podstawowe zmiany w WordPressie 5.9
• Różne zmiany edytora bloków w WordPress 5.9
• Przejmij większą kontrolę nad wewnętrznymi obszarami bloków (jako programista bloków)

Twój najlepszy przewodnik po WordPressie 5.9: od ulepszeń interfejsu użytkownika po globalne style (i nie tylko!) Kliknij, aby tweetować

Streszczenie

Zakończymy ten artykuł krótką notatką na temat udziału w rynku WordPress. WordPress obsługuje obecnie ponad 65% wszystkich stron internetowych, których system zarządzania treścią jest znany i znajduje się na północ od 43% wszystkich stron internetowych .

Liczby te są imponujące, zwłaszcza w porównaniu z najbliższymi konkurentami z mniej niż 5% udziałem w rynku, takimi jak Shopify.

A to oznacza również, że nie można przeoczyć ewolucji WP CMS. Każda nowa wersja WordPressa zawiera nowe funkcje, ulepszenia interfejsu, ulepszenia wydajności, a WordPress 5.9 nie jest wyjątkiem. Wszystko, czego potrzebujesz, aby przetestować nowe funkcje, to motyw blokowy, taki jak nowy domyślny motyw Twenty Twenty-Two, i będziesz gotowy do pracy.

Przejdź do ciebie, teraz! Czy jesteś gotowy, aby przejść na blokowanie motywów i FSE? A jakie są twoje ulubione zmiany, które wprowadza WordPress 5.9?