Głębokie zanurzenie w dwudziestu dwudziestu dwóch i motywach blokowych WordPress

Chociaż nieco później niż pierwotnie planowano, otrzymujemy nowy domyślny motyw WordPress. Nazywa się Dwadzieścia Dwadzieścia Dwa!

Nowy domyślny motyw WordPress jest dostępny w nadchodzącej wersji WordPress 5.9. Chcieliśmy dowiedzieć się więcej o nowym motywie, więc zainstalowaliśmy i przetestowaliśmy Twenty Twenty-Two na lokalnym środowisku programistycznym z systemem WordPress 5.9.

Pokażemy Ci nasze wyniki przed podsumowaniem naszych przemyśleń, aby przedstawić dogłębny przegląd tajników nowego motywu WordPress.

Twenty Twenty-Two został zaprojektowany jako najbardziej elastyczny, lekki i konfigurowalny domyślny motyw w historii. Zapewnia świetny plac zabaw do testowania bloków, wzorów i szablonów.

Będąc motywem blokowym, pomoże Ci lepiej poznać pełną edycję witryny, style globalne, bloki nawigacji i nowe galerie obrazów, które są najbardziej oczekiwanymi funkcjami WordPress 5.9.

Musimy od razu powiedzieć, że Twenty Twenty-Two to pierwszy domyślny motyw blokowy !

Jednym z najbardziej ambitnych celów nowego motywu jest wzmocnienie pozycji użytkowników . Przy tak wielu dostępnych wzorach i szablonach użytkownicy mogą tworzyć złożone układy za pomocą zaledwie kilku kliknięć. Reszta to tylko dostosowanie stylu.

Z technicznego punktu widzenia pisanie o Twenty Twenty-Two nie różni się zbytnio od pisania o najnowszych i najpotężniejszych funkcjach dostępnych w WordPressie 5.9. Jednak Twenty Twenty-Two zapewnia nam lupę, dzięki której możemy lepiej docenić nowe funkcje edycji witryny i lepiej zorientować się w przyszłości platformy.

Więc tutaj mamy przedstawić wam nowy motyw.

Najpierw przyjrzymy się nowemu przepływowi edycji witryny, który użytkownicy będą mieli do czynienia z WordPress 5.9 i Twenty Twenty-Two.

Następnie zagłębimy się w główne funkcje motywu blokowego zaimplementowane w Twenty Twenty-Two. Poznasz globalne style , wzory bloków , szablony i części szablonów .

Ale jest o wiele więcej do powiedzenia na temat Twenty Twenty-Two i motywów blokowych WordPress. Jako dodatkowy rozdział przedstawimy krótki przegląd możliwości rozszerzenia funkcji Twenty Twenty-Two poprzez wykorzystanie pliku theme.json .

Oto pierwsze spojrzenie na następny domyślny motyw WordPress! Cieszę się, że współprowadzę go razem z @jffng i oboje mamy nadzieję, że wniesiecie do niego swój wkład i/lub po prostu będziecie się nim cieszyć! https://t.co/covjrpgFIO

— kjellr (@kjellr) 6 października 2021

Zabierzmy się do pracy i zanurzmy się w zupełnie nowym domyślnym motywie WordPressa Twenty Twenty-Two.

Dwadzieścia dwadzieścia dwa wprowadza nowy przepływ edycji witryny

Kilka funkcji pełnej edycji witryny wchodzi w skład WordPressa 5.9. Właściciele witryn korzystający z najnowszej wersji WordPressa z zainstalowanym motywem blokowym, takim jak Twenty Twenty-Two, wkrótce będą mogli:

• Twórz i edytuj posty i strony, używając większej liczby bloków i wzorców
• Dostosuj ustawienia i style zdefiniowane w pliku theme.json za pomocą interfejsu stylów globalnych
• Twórz i edytuj szablony stron i postów
• Twórz i edytuj części szablonu dla nagłówka, stopki i innych obszarów szablonów

Po połączeniu wszystkich tych funkcji, główni współtwórcy WordPressa omawiali ewolucję architektury informacji i przeprojektowali cały proces edycji witryny.

Pierwszą rzeczą, którą możesz zauważyć po aktywacji dwudziestu dwudziestu dwóch, jest to, że punkt wejścia do edytora witryny nie znajduje się już w głównym menu pulpitu WordPress, ale został przeniesiony do menu Wygląd .

Umieszczenie funkcji edycji szablonu i stylu w tym samym menu Wygląd powinno usprawnić edycję. Powinno to ułatwić zrozumienie, że funkcje, do których uzyskujesz dostęp, dotyczą prezentacji Twoich stron.

Element menu Edytor otwiera szablon strony głównej witryny. W zależności od ustawień czytania może to być strona z najnowszymi postami lub strona statyczna.

Teraz kliknięcie ikony WordPress w lewym górnym rogu wyświetla nowe menu nawigacyjne edytora witryny, zawierające trzy pozycje menu: Witryna , Szablony i Części szablonów .

Przyjrzyjmy się bliżej.

Opcja Witryna otwiera szablon strony głównej (najnowsze artykuły na blogu lub statyczna strona główna).

Z pozycji menu Szablony otrzymasz listę dostępnych szablonów. Możesz kliknąć dowolny szablon na liście, aby uruchomić go w edytorze.

W chwili pisania tego tekstu Twenty Twenty-Two zawiera 11 szablonów.

Kliknięcie ikony wielokropka ( ︙ ) po prawej stronie umożliwia usunięcie dostosowań.

W przeciwieństwie do szablonów motywów, szablony niestandardowe można zmieniać lub usuwać tylko (ale możesz edytować szablony niestandardowe w edytorze postów).

Pozycja menu Części szablonów zawiera listę dostępnych części szablonów, które można otworzyć w edytorze w celu dostosowania.

Znajdziesz cztery części szablonu dodane domyślnie do Twenty Twenty-Two. Najechanie kursorem na zmodyfikowany szablon wyświetla etykietkę informującą o dostosowaniu szablonu.

Możesz wyczyścić te dostosowania, klikając ikonę wielokropka ( ︙ ) po prawej stronie.

Edycja szablonów i części szablonów

Edytor zapewnia interfejs umożliwiający dostosowanie struktury szablonów i części szablonów.

Tutaj możesz łatwo dodawać lub edytować bloki i wzory, a Twoje zmiany zostaną automatycznie zastosowane do każdej strony korzystającej z tego szablonu.

Poniższy obrazek pokazuje szablon strony 404 w edytorze. To dość prosty szablon, zawierający tylko nagłówek, akapit i pole wyszukiwania. Mimo to daje nam dobre zrozumienie, jak działa interfejs użytkownika.

Tutaj możesz wprowadzać zmiany i dostosowywać szablony do swoich potrzeb. Na przykład możesz chcieć dodać wzór siatki postów z obrazami , aby zwiększyć zaangażowanie odwiedzających i zaprosić ich do przeglądania zawartości Twojej witryny.

Lista rozwijana nagłówka w górnej części edytora szablonów wyświetla listę dostępnych obszarów szablonów . Ta sama lista pojawia się na karcie Szablon na pasku bocznym Ustawienia .

Klikając na dowolny obszar szablonu (np. Nagłówek), zostaniesz bezpośrednio przeniesiony do części szablonu, którą chcesz edytować.

Jeśli klikniesz ikonę wielokropka po prawej stronie, uzyskasz dostęp do edytora izolowanych części szablonu .

Edytor części szablonu zapewnia również parę uchwytów do przeciągania, co pozwala sprawdzić, jak szablon zachowuje się przy różnych rozdzielczościach ekranu.

Gdy będziesz zadowolony ze zmian, zapisz zmiany i wróć do głównego edytora szablonów, aby sprawdzić efekt końcowy.

Jeśli chcesz zagłębić się w nową architekturę informacji, możesz zapoznać się z następującymi artykułami:

• Koncepcje IA dotyczące edycji witryny: jak wydobyć i uzyskać dostęp do nowych funkcji
• Koncepcje edycji witryny iA – część 2

Dwadzieścia dwadzieścia dwa u podstaw: szybki przegląd pliku theme.json

Aby w pełni zrozumieć, jak działają Twenty Twenty-Two i motywy blokowe (takie jak Bricksy), rzućmy okiem na nową konfigurację motywów i mechanizm stylizacji oparty na pliku theme.json .

Wprowadzony wraz z WordPress 5.8, ten nowy mechanizm pozwala twórcom motywów konfigurować edytor i dodawać obsługę funkcji z centralnego punktu konfiguracji.

W Twenty Twenty-Two plik theme.json ma następującą strukturę:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Rzućmy okiem na każdą sekcję.

Wersja

Pole version opisuje wersję specyfikacji, która obecnie wynosi 2 .

Ustawienia

Sekcja settings definiuje ustawienia na poziomie globalnym lub blokowym. Ustawienia zdefiniowane na najwyższym poziomie wpływają na wszystkie bloki, ale bloki mogą indywidualnie zastępować ustawienia globalne. W Twenty Twenty-Two znajdziesz następujące ustawienia:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Domyślne ustawienia są nazywane ustawieniami wstępnymi i służą do generowania niestandardowych właściwości CSS i nazw klas na podstawie określonej konwencji nazewnictwa:

• Niestandardowa właściwość CSS: --wp--preset--{preset-category}--{preset-slug}
• Nazwa klasy CSS: .has-{preset-slug}-{preset-category}

Po zdefiniowaniu przez motyw ustawień predefiniowanych odpowiednie niestandardowe właściwości CSS mogą być używane do stylizowania bloków i elementów w sekcji styles .

Style

Sekcja styles to miejsce, w którym motywy definiują domyślne style bloków i elementów. Zobacz na przykład następujące Dwadzieścia dwadzieścia dwa style dla podstawowego bloku przycisku:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Zauważysz niestandardowe właściwości CSS używane w deklaracjach właściwości.

Szablony niestandardowe

Sekcja customTemplates to miejsce, w którym motyw deklaruje swoje szablony niestandardowe. Pola name i title są wymagane. Motywy mogą również deklarować, jaki typ posta może korzystać z szablonu, ustawiając właściwość postTypes .

Twenty Twenty-Two udostępnia cztery niestandardowe szablony:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

Odpowiednie pliki .html znajdziesz w folderze block-templates .

Części szablonu

Sekcja templateParts zawiera definicje części szablonu:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

Pola name i title są wymagane. Tematy mogą również deklarować termin area , w którym w edytorze zostanie wyrenderowana część szablonu.

Pliki .html części szablonu znajdują się w folderze template-parts .

Teraz, gdy wiesz więcej o pliku theme.json w Twenty Twenty-Two , możemy dokładniej zbadać funkcje motywu i nowy interfejs edycji.

Zanurzmy się w globalnych stylach dwudziestu dwudziestu dwóch .

Globalne style w dwudziestu dwudziestu dwóch

Jeśli spojrzysz na Twenty Twenty-Two' style.css, możesz być zaskoczony, że zawiera minimalną liczbę deklaracji CSS. Powodem jest to, że style są deklarowane w pliku theme.json w motywach blokowych .

WordPress 5.9 idzie o krok dalej, wprowadzając nową funkcję, która umożliwia użytkownikom motywów blokowych dostosowywanie wyglądu elementów witryny z poziomu interfejsu użytkownika o nazwie Style globalne.

Dostęp do globalnego interfejsu stylów można uzyskać za pomocą nowej ikony stylów umieszczonej w prawym górnym rogu edytora (zobacz także Globalny interfejs stylów).

Kliknięcie tej ikony powoduje wyświetlenie nowego paska bocznego Style , zawierającego trzy oddzielne panele:

• Panel podglądu , pokazujący podgląd twoich dostosowań
• Panel globalnych stylów zapewniający dostęp do określonych grup elementów sterujących typografią , kolorami i układem
• Element Bloki zapewniający dostęp do ustawień stylu na poziomie bloku

Dwadzieścia dwadzieścia dwa kolory palety

Panel Kolory może pomóc w edycji dostępnych palet oraz przypisaniu lub zmianie kolorów tła , tekstu lub łączy .

W panelu Paleta możesz dostosować palety Motyw lub Domyślne , a nawet utworzyć własną paletę niestandardową.

Znalazłeś już kod, który generuje kontrolki kolorów?

Jeśli nie, otwórz plik theme.json Twenty Twenty-Two w swoim ulubionym edytorze kodu. Znajdziesz następujące deklaracje palet kolorów:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

Poniższy obrazek pokazuje, w jaki sposób powyższy kod pasuje do palety kolorów dwudziestu dwudziestu dwóch.

Załóżmy teraz, że chcesz zmienić domyślny kolor tła dla konkretnego bloku. Wybranie innego koloru tła bloku po prostu przypisze inną zmienną CSS do właściwości background-color elementu. Poniższy obrazek przedstawia tego przykład:

I to wszystko! Nie musisz dodawać ani jednego wiersza niestandardowego kodu CSS do Customizer ani tworzyć w tym celu motywu podrzędnego.

Ale kontynuujmy eksplorację Global Styles Dwadzieścia Dwadzieścia Dwa z kilkoma dodatkowymi przykładami.

Ustawienia typografii

Panel Typografia umożliwia dostosowanie stylów typografii dla elementów Tekst i Łącza witryny na poziomie globalnym.

Każdy element zapewnia dostęp do grupy elementów sterujących umożliwiających dostosowanie rodziny czcionek, rozmiaru i wysokości linii.

Zastanawiasz się, jaki kod generuje te kontrolki?

Otwórz Twenty Twenty-Two theme.json i znajdź sekcję typography . Zobaczysz następujące ustawienia:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Możesz spodziewać się, że z powyższego kodu zobaczysz dwie rodziny czcionek i pięć rozmiarów czcionek. I byś dobrze odgadł.

Oto jak powyższy kod przekłada się na ustawienia typografii stylów globalnych:

Możesz zgadnąć, jakie ustawienie generuje kontrolę wysokości linii . W Twenty Twenty-Two nie znajdziesz konkretnego ustawienia, ponieważ jest ono włączane przez właściwość appearanceTools , która jest skrótem do kilku deklaracji ustawień (patrz następna sekcja).

Narzędzia układu i wyglądu

Ostatnim elementem na pasku bocznym Global Styles jest Layout . W chwili pisania tego tekstu zawiera tylko kontrolkę padding .

W Twenty Twenty-Two panel Układ jest włączany przez właściwość ustawienia appearanceTools , wartość logiczną, której można użyć do włączenia kilku ustawień jednocześnie:

 { "settings": { "appearanceTools": true } }

"appearanceTools": true po prostu zastępuje następujący blok deklaracji:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK — mam nadzieję, że teraz rozumiesz, w jaki sposób ustawienia zadeklarowane w pliku theme.json pasują do odpowiednich kontrolek stylów globalnych.

Wciąż brakuje jednego elementu naszej układanki, aby uzyskać pełny obraz nowego domyślnego motywu WordPress: wzorce blokowe .

Dwadzieścia dwadzieścia dwa wzory blokowe

Można powiedzieć, że Twenty Twenty-Two to głównie zbiór wzorów — i tak jest. W Twenty Twenty-Two znajdziesz mnóstwo gotowych do użycia wzorów bloków, z których możesz wybierać, aby budować niesamowite i nieprzewidywalne struktury zagnieżdżonych bloków dla swoich stron internetowych.

Kluczowym terminem jest tutaj upodmiotowienie użytkownika . A to pasuje, ponieważ dzięki wzorom blokowym możesz budować różne rzeczy, od atrakcyjnego portfolio po jednostronicową witrynę promocyjną, nawet jeśli nie masz żadnej wiedzy na temat HTML lub CSS!

A WordPress 5.9 wprowadza znaczące ulepszenia do systemu wzorców dzięki nowemu Eksploratorowi wzorców, narzędziu, które umożliwia przeglądanie wzorców w trybie pełnoekranowym.

Nowe narzędzie umożliwia również szybkie i łatwe importowanie wzorców blokowych bezpośrednio z Katalogu wzorców. Otwiera to nowe możliwości zarówno użytkownikom, jak i programistom WordPressa, więc jego użycie prawdopodobnie znacznie wzrośnie w przyszłości.

Twenty Twenty-Two zawiera mnóstwo wzorów (ponad 65) w pięciu kategoriach.

Ten solidny zestaw wzorów doskonale łączy się z szablonami i częściami szablonów dostępnymi w nowym domyślnym motywie, zapewniając naprawdę niesamowite wrażenia podczas edycji.

Jeśli nie miałeś jeszcze okazji eksperymentować z wzorcami blokowymi, na prostym przykładzie pokażemy Ci, dlaczego są uważane za tak potężne narzędzia.

Załóżmy, że chcesz usunąć domyślną stopkę z szablonów Index i Single Post i zastąpić ją innym wzorem blokowym Dwadzieścia dwadzieścia dwa.

Uruchom Edytor witryny z menu Wygląd lub przycisku paska narzędzi interfejsu WordPress, aby dostosować szablon indeksu.

Kliknij przycisk Indeks , aby wyświetlić menu rozwijane nagłówka z listą obszarów szablonów dostępnych na stronie. Kliknij przycisk z wielokropkiem obok Stopki, a następnie Edytuj stopkę .

Jak wspomniano powyżej, uruchomi to izolowany edytor części szablonu.

Teraz otwórz narzędzie do wstawiania bloków i kliknij Wzory .

Uruchom nowe narzędzie Eksplorator wzorców , wybierz kategorię Dwadzieścia dwadzieścia dwie stopki i wybierz wybraną stopkę.

Teraz dodawaj i edytuj bloki zgodnie z własnymi potrzebami.

Zapisz nagłówek i ponownie sprawdź swoją witrynę, gdy będziesz zadowolony ze zmian.

Poniższy obraz porównuje trzy szablony (Indeks, Pojedynczy post i Pojedynczy post bez separatorów) z różnymi dostosowaniami nagłówka i stopki:

Rozszerzenie dwudziestu dwudziestu dwóch o motyw potomny

Tworzenie motywu potomnego dla motywu blokowego jest zupełnie inne niż tworzenie motywu potomnego dla motywu klasycznego.

Ale gdy już dobrze zrozumiesz strukturę motywu blokowego, nie będzie trudno utworzyć motyw potomny dla Dwudziestu dwudziestu dwóch lub dowolnego innego motywu blokowego.

Zastanówmy się więc, jak dostosować wygląd swojej witryny opartej na Twenty Twenty-Two.

1. Konfigurowanie motywu potomnego dla dwudziestu dwudziestu dwóch

W katalogu /wp-content/themes utwórz nowy folder i nazwij go, jak chcesz (zgodnie ze standardami tworzenia motywów). W tym przykładzie nazwaliśmy folder motywu potomnego dwadzieściadwadzieścia-dziecko .

Teraz potrzebujesz pliku style.css . Otwórz swój ulubiony edytor kodu i utwórz następujący arkusz stylów:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Jak zawsze możesz edytować pola według własnych potrzeb.

Twój motyw podrzędny jest teraz dostępny do podglądu. Możesz go aktywować na ekranie administratora Wygląd > Motywy .

2. Dostosowywanie ustawień globalnych

Od wersji WordPress 5.9 motywy potomne z plikiem theme.json dziedziczą ustawienia motywu nadrzędnego. Jeśli plik theme.json dziecka definiuje zestaw stylów, wówczas te style mają zastosowanie do stylów rodzica.

Możemy więc utworzyć plik theme.json , który zawiera tylko mały niestandardowy blok definicji ustawień i stylów, zamiast przedefiniowywać wszystkie nasze oryginalne wybory.

Jak zadeklarować niestandardową paletę kolorów?

Podczas budowania motywu potomnego dla Twenty Twenty-Two najłatwiejszym zadaniem jest zastąpienie palety kolorów. Wszystko, co musisz zrobić, to zdefiniować nową paletę kolorów w pliku theme.json Twojego dziecka, jak pokazano poniżej:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Zapisz plik i wróć do edytora witryny. Zdefiniowana powyżej paleta kolorów powinna zastąpić domyślną paletę kolorów dwudziestu dwudziestu dwóch.

Kolory zostaną pokazane w kolejności na samej palecie, a ich nazwy powinny być zgodne z najlepszymi praktykami i konwencjami nazewnictwa omówionymi na Github.

Możesz przeczytać znacznie więcej o opcjach kolorów theme.json w tym szczegółowym przeglądzie autorstwa Carolina Nymark.

Jak zadeklarować niestandardowe filtry bichromii?

Możesz także zastąpić domyślne kolory bichromii własnym zestawem filtrów.

Aby to zrobić, po prostu dodaj następujący kod do ustawień theme.json Twojego dziecka na tym samym poziomie, co właściwość palette :

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Zapisz plik i sprawdź wynik w edytorze bloków. Powinieneś zobaczyć tylko jeden filtr bichromii.

3. Dostosowywanie stylów bloków

Jak wspomnieliśmy wcześniej, dzięki WordPress 5.9 możesz teraz dostosować ustawienia i style theme.json z interfejsu Global Styles.

Style bloków można dostosowywać z interfejsu Global Styles tylko wtedy, gdy blok deklaruje obsługę określonej funkcji w odpowiednim pliku block.json . Możesz jednak zastąpić domyślne ustawienia blokowania w pliku theme.json motywu podrzędnego.

Załóżmy teraz, że chcesz nadpisać style bloku tytułu i grupy. Wszystko, co musisz zrobić, to zdefiniować style, które chcesz dodać lub zastąpić, jak pokazano poniżej:

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

W powyższym przykładzie zmieniliśmy rodzinę czcionek, kolor tła i wartości dopełnienia dla core/post-title , a także górne i dolne marginesy dla core/group .

Poniższy obrazek pokazuje wynik tak, jak wyglądałby na publicznej stronie:

I to tyle, jeśli chodzi o recenzję!

Na razie nie będziemy zagłębiać się w motywy potomne, ponieważ wykraczałoby to poza zakres tego postu. W międzyczasie znajdziesz więcej przykładów dwudziestu dwudziestu dwóch motywów potomnych na Github.

Streszczenie

Przyglądając się bliżej nowemu domyślnemu motywowi WordPressa Twenty Twenty-Two i jego funkcjom (które czynią go najbardziej elastycznym domyślnym motywem, jaki kiedykolwiek został wydany), przedstawiliśmy nową architekturę informacji wprowadzoną w WordPressie 5.9. Rzuciliśmy nawet okiem na nowy interfejs stylów globalnych.

W przygotowaniu jest wiele ekscytujących nowych funkcji i wydaje się jasne, że nowe środowisko edycji staje się z czasem bardziej niezawodne, niezawodne i funkcjonalne.

Podczas gdy wiele nowych funkcji WordPressa jest w przygotowaniu, inne znikają lub tracą na znaczeniu. Wielu użytkowników zastanawia się, co stanie się z Customizer i jak najlepiej zachować wsteczną kompatybilność z istniejącymi motywami.

Nie należy jednak oczekiwać, że nagle przeskoczysz z tradycyjnych motywów, aby zablokować motywy w jednym skoku. Obecnie mamy do wyboru cztery różne rodzaje 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.

Nie obawiaj się więc na razie — nadal istnieje wiele rozwiązań do wyboru, jeśli nie czujesz się jeszcze gotowy, aby przejść do blokowania motywów.

A teraz to zależy od Ciebie! Czy jesteś gotowy, aby zrobić wielki krok i zacząć używać motywów blokowych już teraz? Podziel się z nami swoimi przemyśleniami w komentarzach poniżej.