Sposób, w jaki piszemy CSS dla motywów WordPress, jest w trakcie ogromnych zmian. Niedawno udostępniłem technikę dla dodanie obsługi typu fluid w WordPress tytułem theme.json, nowy plik, który WordPress mocno naciska stać się centralnym źródłem prawdy do definiowania stylów w motywach WordPress, które obsługują funkcje edycji całej witryny (FSE).

Czekaj nie style.css plik? Nadal to mamy. Faktycznie, style.css is wciąż wymagany plik w motywach blokowych, choć jego rola jest znacznie zredukowana do metainformacji wykorzystywanych do rejestracji motywu. To powiedziawszy, faktem jest, że theme.json jest wciąż w fazie rozwoju, co oznacza, że ​​znajdujemy się w okresie przejściowym, w którym możesz znaleźć zdefiniowane tam style, w styles.css a nawet na poziomie bloku.

Jak więc właściwie wygląda stylizacja w tych czasach WordPress FSE? To właśnie chcę omówić w tym artykule. Brakuje dokumentacji do stylizacji motywów blokowych w Podręcznik dla programistów motywów WordPress, więc wszystko, co tutaj omawiamy, jest tym, co zebrałem na temat obecnego stanu rzeczy, a także dyskusji na temat przyszłości motywów WordPress.

Ewolucja stylów WordPress

Nowe funkcje rozwojowe zawarte w WordPress 6.1 przybliżyć nam system stylów, które są całkowicie zdefiniowane w theme.json, ale jest jeszcze wiele do zrobienia, zanim będziemy mogli w pełni się na nim oprzeć. Jednym ze sposobów, w jaki możemy zorientować się, co nadchodzi w przyszłych wydaniach, jest użycie Wtyczka Gutenberg. W tym miejscu funkcje eksperymentalne są często testowane na sucho.

Innym sposobem, w jaki możemy zorientować się, gdzie jesteśmy, jest przyglądanie się ewolucji domyślne motywy WordPress. Do tej pory istnieją trzy domyślne motywy, które obsługują edycję całej witryny:

Ale nie zaczynaj handlować CSS w style.css dla par właściwość-wartość JSON w theme.json jeszcze. Nadal istnieją reguły stylów CSS, które muszą być obsługiwane w theme.json zanim pomyślimy o tym. Pozostałe istotne kwestie są obecnie omawiane w celu pełnego przeniesienia wszystkich reguł stylu CSS do theme.json i skonsoliduj różne źródła theme.json w Interfejs użytkownika do ustawiania stylów globalnych bezpośrednio w Edytor witryny WordPress.

To stawia nas w stosunkowo trudnej sytuacji. Nie tylko tam jest brak jasnej ścieżki do nadpisywania stylów tematycznych, ale nie jest jasne, skąd w ogóle pochodzi źródło tych stylów — czy to z różnych warstw theme.json plików, style.css, wtyczka Gutenberga, czy gdzie indziej?

Czemu theme.json zamiast style.css?

Być może zastanawiasz się, dlaczego WordPress zmierza w kierunku definicji stylów opartej na JSON zamiast tradycyjnego pliku CSS. Ben Dwyer z zespołu programistów Gutenberga wymownie wyjaśnia, dlaczego theme.json podejście to korzyść dla twórców motywów.

Warto przeczytać post Bena, ale mięso jest w tym cytacie:

Zastępowanie stylów CSS, niezależnie od tego, czy są to style layoutu, ustawień predefiniowanych czy blokowych, stanowi przeszkodę w integracji i interoperacyjności: wizualna parzystość między interfejsem a edytorem staje się trudniejsza do utrzymania, aktualizacje wewnętrznych elementów bloku mogą kolidować z nadpisaniami. Niestandardowy CSS jest ponadto mniej przenośny w przypadku innych motywów blokowych.

Zachęcając autorów motywów do korzystania theme.json API tam, gdzie to możliwe, hierarchia stylów zdefiniowanych przez „podstawa > motyw > użytkownik” może zostać poprawnie rozwiązana.

Jedną z głównych zalet przeniesienia CSS do JSON jest to, że JSON jest formatem do odczytu maszynowego, co oznacza, że ​​można go ujawnić w interfejsie użytkownika WordPress Site Editor poprzez pobranie interfejsu API, co pozwala użytkownikom modyfikować wartości domyślne i dostosowywać wygląd witryny bez pisanie dowolnego CSS w ogóle. Zapewnia również sposób spójnego stylizowania bloków, zapewniając jednocześnie strukturę, która tworzy warstwy specyficzności, tak aby ustawienia użytkownika miały najwyższy priorytet nad ustawieniami zdefiniowanymi w theme.json. Ta wzajemna zależność między stylami na poziomie tematycznym w theme.json a style zdefiniowane przez użytkownika w interfejsie Global Styles UI sprawiają, że podejście JSON jest tak atrakcyjne.

Deweloperzy zachowują spójność w JSON, a użytkownicy zyskują elastyczność dzięki dostosowaniom bez kodu. To korzystne dla obu stron.

Na pewno są inne korzyści i Mike McAlister z WP Engine wymienia kilka w tym wątku na Twitterze. W tym znajdziesz jeszcze więcej korzyści dogłębna dyskusja na blogu Make WordPress Core. A kiedy już to przeczytasz, porównaj zalety podejścia JSON z dostępne sposoby definiowania i zastępowania stylów w klasycznych motywach.

Definiowanie stylów za pomocą elementów JSON

Widzieliśmy już duży postęp, jeśli chodzi o części tematu theme.json jest zdolny do stylizacji. Przed wprowadzeniem WordPressa 6.1 wszystko, co mogliśmy zrobić, to stylizować nagłówki i linki. Teraz, dzięki WordPress 6.1, możemy dodawać przyciski, podpisy, cytaty i nagłówki do miksu.

I robimy to, definiując Elementy JSON. Pomyśl o elementach jako o poszczególnych komponentach, które żyją w bloku WordPress. Załóżmy, że mamy blok zawierający nagłówek, akapit i przycisk. Te poszczególne elementy są elementami i jest elements obiekt w theme.json gdzie definiujemy ich style:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

Lepszym sposobem opisania elementów JSON są komponenty niskiego poziomu dla motywów i bloków, które nie wymagają złożoności bloków. Są reprezentacjami prymitywów HTML które nie są zdefiniowane w bloku, ale mogą być używane w różnych blokach. Sposób ich obsługi w WordPressie (i wtyczce Gutenberga) opisano w Podręcznik edytora bloków i to Pełny samouczek dotyczący edycji witryny autorstwa Karoliny Nymark.

Na przykład linki są stylizowane w elements obiekt, ale same w sobie nie są blokiem. Ale link może być użyty w bloku i odziedziczy style zdefiniowane na elements.link obiekt w theme.json. Nie zawiera to jednak w pełni definicji elementu, ponieważ niektóre elementy są również rejestrowane jako bloki, takie jak bloki nagłówka i przycisku — ale te bloki mogą być nadal używane w innych blokach.

Oto tabela elementów, które są obecnie dostępne do stylizacji theme.json, dzięki uprzejmości Karoliny:

Jak widać, to wciąż wczesne dni i wiele jeszcze musi zostać przeniesionych z wtyczki Gutenberg do WordPress Core. Ale możesz zobaczyć, jak szybko byłoby zrobić coś takiego jak globalne stylizowanie wszystkich nagłówków w motywie bez szukania selektorów w plikach CSS lub DevTools.

Ponadto możesz również zacząć widzieć, jak struktura theme.json rodzaj form warstw specyficzności, wychodząc z elementów globalnych (np headings) na poszczególne elementy (np. h1) i style blokowe (np. h1 zawarte w bloku).

Dodatkowe informacje o elementach JSON dostępne są w to Utwórz propozycję WordPress i ten otwarty bilet w repozytorium GitHub wtyczki Gutenberg.

Specyfika JSON i CSS

Rozmawiajmy dalej o specyfice CSS. Wspomniałem wcześniej, że podejście JSON do stylizacji ustanawia hierarchię. I to prawda. Style zdefiniowane w elementach JSON w theme.json są uważane za domyślne style motywów. A wszystko, co zostanie ustawione przez użytkownika w interfejsie globalnych stylów, zastąpi wartości domyślne.

Innymi słowy: style użytkownika są bardziej szczegółowe niż domyślne style motywów. Rzućmy okiem na blok przycisku, aby poczuć, jak to działa.

używam Pusty motyw, pusty motyw WordPress bez stylów CSS. Zamierzam dodać blok przycisku na nowej stronie.

OK, wiemy, że WordPress Core jest dostarczany z lekkim stylem. Teraz przejdę do domyślnego motywu TT3 z WordPress 6.1 i aktywuję go. Jeśli odświeżę stronę przyciskiem, przycisk zmieni styl.

Możesz zobaczyć dokładnie skąd pochodzą te nowe style w TT3 theme.json plik. To mówi nam, że style elementów JSON mają pierwszeństwo przed stylami WordPress Core.

Teraz zamierzam zmodyfikować TT3, nadpisując go theme.json w motywie potomnym, gdzie domyślny kolor tła bloku przycisku jest ustawiony na czerwony.

Ale zwróć uwagę na przycisk wyszukiwania na tym ostatnim zrzucie ekranu. Powinno też być czerwone, prawda? To musi oznaczać, że jest stylizowany na innym poziomie, jeśli zmiana, którą wprowadziłem, jest na poziomie globalnym. Jeśli chcemy się zmienić obie przycisków, możemy to zrobić na poziomie użytkownika, korzystając z interfejsu Global Styles UI w edytorze witryny.

Zmieniliśmy kolor tła obu przycisków na niebieski, a także zmodyfikowaliśmy tekst za pomocą interfejsu stylów globalnych. Zauważ, że niebieski stamtąd miał pierwszeństwo przed stylami motywu!

Silnik stylu

To bardzo szybki, ale dobry pomysł na to, jak specyfika CSS jest zarządzana w motywach blokowych WordPress. Ale to nie jest pełny obraz, ponieważ wciąż jest niejasny gdzie te style są generowane. WordPress ma własne domyślne style, które skądś pochodzą, zużywa dane w theme.json aby uzyskać więcej reguł stylu i nadpisuje te, które są ustawione w stylach globalnych.

Czy te style są wbudowane? Czy są w osobnym arkuszu stylów? Może są wstrzykiwane na stronę w a ?

Oto, co nowe Silnik stylu miejmy nadzieję, że się rozwiąże. Style Engine to nowy interfejs API w WordPress 6.1, który ma zapewnić spójność w sposobie generowania stylów i ich stosowaniu. Innymi słowy, bierze wszystkie możliwe źródła stylizacji i jest pojedynczo odpowiedzialny za prawidłowe generowanie stylów blokowych. Wiem wiem. Jeszcze jedna abstrakcja na tle innych abstrakcji, aby stworzyć kilka stylów. Ale posiadanie scentralizowanego interfejsu API dla stylów jest prawdopodobnie najbardziej eleganckim rozwiązaniem, biorąc pod uwagę, że style mogą pochodzić z wielu miejsc.

Dopiero po raz pierwszy przyjrzymy się Style Engine. W rzeczywistości oto, co zostało do tej pory ukończone, zgodnie z biletem:

• Kontroluj i konsoliduj miejsca, w których kod generuje bloki obsługujące CSS w zapleczu, dzięki czemu są dostarczane z tego samego miejsca (w przeciwieństwie do wielu miejsc). Obejmuje to reguły CSS, takie jak marginesy, dopełnienie, typografia, kolory i obramowania.
• Usuń powtarzające się style charakterystyczne dla układu i wygeneruj semantyczne nazwy klas.
• Zmniejsz liczbę tagów stylu inline, które drukujemy na stronie w celu obsługi bloków, układu i elementów.

Zasadniczo jest to podstawa do ustanowienia jednego interfejsu API, który zawiera wszystkie reguły stylów CSS dla motywu, niezależnie od tego, skąd pochodzą. Oczyszcza sposób, w jaki WordPress wstrzykiwał style wbudowane przed wersją 6.1 i ustanawia system nazw klas semantycznych.

Więcej szczegółów na temat długo- i krótkoterminowych celów Style Engine można znaleźć w tym Stwórz dyskusję na temat WordPress Core. Możesz także śledzić problem ze śledzeniem i Plansza projektowa więcej aktualizacji.

Praca z elementami JSON

Rozmawialiśmy trochę o elementach JSON w theme.json plik i jak są one w zasadzie prymitywami HTML do definiowania domyślnych stylów między innymi dla takich rzeczy, jak nagłówki, przyciski i linki. Teraz spójrzmy na właściwie za pomocą element JSON i jego zachowanie w różnych kontekstach stylizacji.

Elementy JSON zazwyczaj mają dwa konteksty: poziomie globalnym oraz poziom bloku. Style na poziomie globalnym są definiowane z mniejszą precyzją niż na poziomie bloku, aby zapewnić, że style specyficzne dla bloku mają pierwszeństwo w celu zachowania spójności wszędzie tam, gdzie używane są bloki.

Globalne style dla elementów JSON

Przyjrzyjmy się nowemu domyślnemu motywowi TT3 i sprawdźmy, jak stylizowane są jego przyciski. Poniżej znajduje się skrócona kopia-wklej TT3 theme.json plik (tutaj jest pełny kod) z sekcją stylów globalnych, ale oryginalny kod można znaleźć tutaj.

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Wszystkie przyciski są stylizowane na poziomie globalnym (styles.elements.button).

Możemy to również potwierdzić w DevTools. Zauważ, że klasa o nazwie .wp-element-button jest selektorem. Ta sama klasa służy również do stylizowania stanów interaktywnych.

Znowu ta stylizacja dzieje się na poziomie globalnym, wywodząc się z theme.json. Za każdym razem, gdy użyjemy przycisku, będzie on miał to samo tło, ponieważ mają ten sam selektor i żadne inne reguły stylu go nie zastępują.

Na marginesie dodano WordPress 6.1 obsługa stylizacji stanów interaktywnych dla niektórych elementów, takich jak przyciski i linki, za pomocą pseudoklas w theme.json - włącznie z :hover, :focus, :active — lub interfejs użytkownika stylów globalnych. Inżynier automatyk Dave Smith demonstruje ta cecha w filmie na YouTube.

Możemy zmienić kolor tła przycisku albo w theme.json (najlepiej w motywie potomnym, ponieważ używamy domyślnego motywu WordPress) lub w ustawieniach globalnych stylów w edytorze witryny (nie jest potrzebny motyw potomny, ponieważ nie wymaga zmiany kodu).

Ale wtedy przyciski zmienią się wszystkie na raz. Co zrobić, jeśli chcemy nadpisać kolor tła, gdy przycisk jest częścią pewnego bloku? W tym miejscu do gry wchodzą style blokowe.

Style blokowe dla elementów

Aby zrozumieć, w jaki sposób możemy używać i dostosowywać style na poziomie bloku, zmieńmy kolor tła przycisku zawartego w bloku wyszukiwania. Pamiętaj, że istnieje blok przycisku, ale nadpisujemy kolor tła na poziomie bloku bloku wyszukiwania. W ten sposób stosujemy tam tylko nowy kolor, a nie globalnie do wszystkich przycisków.

Aby to zrobić, definiujemy style na styles.blocks obiekt w theme.json. Zgadza się, jeśli zdefiniujemy style globalne dla wszystkich przycisków włączonych styles.elements, możemy zdefiniować style specyficzne dla bloku dla elementów przycisków na styles.block, który ma podobną strukturę:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

Zobaczyć, że? ustawiam background i text właściwości włączone styles.blocks.core/search.elements.button z dwiema zmiennymi CSS, które są wstępnie ustawione w WordPress.

Wynik? Przycisk wyszukiwania jest teraz czerwony (--wp--preset--color--quaternary), a domyślny blok przycisku zachowuje swoje jasnozielone tło.

Widzimy też zmianę w DevTools.

To samo dotyczy stylizacji przycisków znajdujących się w innych blokach. A przyciski to tylko jeden przykład, więc spójrzmy na inny.

Przykład: Stylizacja nagłówków na każdym poziomie

Przenieśmy wszystkie te informacje do domu na przykładzie. Tym razem będziemy:

• Stylizuj wszystkie nagłówki globalnie
• Stylizuj wszystkie elementy z nagłówka 2
• Styl nagłówka 2 elementy w bloku Query Loop

Najpierw zacznijmy od podstawowej struktury theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Stanowi to zarys naszych stylów globalnych i blokowych.

Stylizuj wszystkie nagłówki globalnie

Dodajmy headings sprzeciwić się naszym globalnym stylom i zastosować niektóre style:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

To ustawia kolor dla wszystkich nagłówków na wstępnie ustawiony kolor bazowy w WordPress. Zmieńmy kolor i rozmiar czcionki elementów nagłówka 2 również na poziomie globalnym:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

Teraz wszystkie elementy nagłówka 2 są ustawione jako podstawowy wstępnie ustawiony kolor z płynny rozmiar czcionki. Ale może chcemy naprawić fontSize dla elementu Heading 2, gdy jest on używany w bloku Query Look:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

Teraz mamy trzy poziomy stylów dla elementów nagłówka 2: wszystkie nagłówki, wszystkie elementy nagłówka 2 i elementy nagłówka 2, które są używane w bloku Query Loop.

Istniejące przykłady motywów

Chociaż w tym artykule przyjrzeliśmy się tylko przykładom stylizacji przycisków i nagłówków, WordPress 6.1 obsługuje stylizowanie dodatkowych elementów. Jest tabela przedstawiająca je w „Definiowanie stylów za pomocą elementów JSON”

Prawdopodobnie zastanawiasz się, które elementy JSON obsługują które właściwości CSS, nie wspominając już o tym, jak je deklarować. Podczas gdy czekamy na oficjalną dokumentację, najlepszymi zasobami, jakie mamy, będą te theme.json pliki dla istniejących motywów. Zamierzam podać linki do motywów na podstawie elementów, które dostosowują, i wskażę, jakie właściwości są dostosowywane.

Pamiętaj, aby dać każdemu theme.json plik dobrze wyglądać, ponieważ te motywy zawierają doskonałe przykłady stylizacji na poziomie bloków na styles.blocks obiekt.

Zamykając

Częste zmiany w edytorze całej witryny stają się główne źródła irytacji wielu ludzi, w tym zaawansowani technicznie użytkownicy Gutenberga. Nawet bardzo proste reguły CSS, które działają dobrze z klasycznymi motywami, wydają się nie działać w przypadku motywów blokowych z powodu nowe warstwy specyfiki omówiliśmy wcześniej.

Odnośnie a Propozycja GitHub przeprojektować edytor strony w nowym trybie przeglądarki, Sara Gooding pisze w poście WP Tavern:

Łatwo się zgubić, próbując poruszać się po edytorze witryny, chyba że pracujesz dzień i noc w narzędziu. Nawigacja jest niepewna i zagmatwana, zwłaszcza podczas przechodzenia od przeglądania szablonów przez edycję szablonów do modyfikowania poszczególnych bloków.

Nawet jako zapalony początkujący jeździec w świecie edytora bloków Gutenberga i motywów blokowych, mam mnóstwo własnych frustracji. Jestem jednak optymistą i spodziewam się, że po ukończeniu edytora strony będzie rewolucyjnym narzędziem zarówno dla użytkowników, jak i doświadczonych technologicznie twórców motywów. Ten pełen nadziei tweet już to potwierdza. Tymczasem wydaje się, że powinniśmy szykować się na kolejne zmiany, a może nawet wyboistą jazdę.

Referencje

Wymieniam wszystkie zasoby, z których korzystałem podczas wyszukiwania informacji do tego artykułu.

Elementy JSON

Globalne style

Silnik stylu

Dziękuje za przeczytanie! Chciałbym usłyszeć własne przemyślenia na temat korzystania z motywów blokowych i sposobu zarządzania CSS.