Używanie nowego ograniczonego układu w motywach blokowych WordPress

Jednym z głównych celów edytora witryny WordPress (i tak, jest to teraz "oficjalne imię) służy do przesunięcia podstawowej stylizacji bloku od CSS do ustrukturyzowanego JSON. Pliki JSON są czytelne dla maszyn, dzięki czemu mogą być używane przez edytor witryn oparty na JavaScript do konfigurowania globalnych stylów motywu bezpośrednio w WordPress.

To jeszcze nie wszystko! Jeśli spojrzymy na domyślny motyw Twenty Twenty-Two (TT2), były dwa główne nierozwiązane problemy: interakcje stylizacyjne (lubić :hover, :active, :focus), A marginesy i wypełnienie kontenerów układu. Możesz zobaczyć, jak zostały one tymczasowo naprawione w TT2 style.css plik, zamiast umieszczać go w theme.json plik.

WordPress 6.1 naprawiłem te problemy, a to, co chcę zrobić, to przyjrzeć się konkretnie temu drugiemu. Teraz, gdy mamy style JSON dla marginesów i dopełnienia kontenerów układu, otwiera nas to bardziej elastyczne i solidne sposoby definiowania odstępów w naszych układach tematycznych.

O jakim odstępie mówimy?

Po pierwsze, już mamy wypełnienie na poziomie korzenia co jest fantazyjnym sposobem opisywania wyściółki na element. To miłe, ponieważ zapewnia spójne odstępy w elemencie, który jest udostępniany na wszystkich stronach i postach.

Ale to coś więcej, ponieważ teraz mamy sposób, aby bloki ominęły to wypełnienie i wyrównały się na pełnej szerokości. To dzięki wyrównania uwzględniające wypełnienie która jest nową funkcją zgody w theme.json. Tak więc, nawet jeśli masz dopełnienie na poziomie głównym, nadal możesz pozwolić, powiedzmy, obrazowi (lub innemu blokowi) na wyrwanie się i przejście na pełną szerokość.

To prowadzi nas do kolejnej rzeczy, którą otrzymujemy: ograniczone układy. Chodzi o to, aby wszelkie bloki zagnieżdżone w układzie respektowały szerokość zawartości układu — która jest ustawieniem globalnym — i nie wypływały poza nią. Możemy zastąpić to zachowanie blok po bloku za pomocą wyrównań, ale do tego dojdziemy.

Zacznijmy…

Wyściółka na poziomie korzenia

Ponownie, to nie jest nowe. Mieliśmy możliwość ustawienia dopełnienia na element w theme.json od czasu eksperymentu Wtyczka Gutenberg wprowadził go w wersji 11.7. Ustawiliśmy go na styles.spacing obiekt, w którym mamy margin i padding obiekty, aby zdefiniować górny, prawy, dolny i lewy odstęp na korpusie:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

To jest ustawienie globalne. Tak więc, gdybyśmy otworzyli DevTools i sprawdzili plik element, zobaczylibyśmy te style CSS:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

Chłodny. Ale tu leży problem, w jaki sposób możemy pozwolić niektórym blokom wyrwać się z tego odstępu, aby wypełnić cały ekran, od krawędzi do krawędzi. Dlatego jest tam odstęp, prawda? Pomaga temu zapobiec!

Ale rzeczywiście istnieje wiele przypadków, w których możesz chcieć wyrwać się z tego odstępu w jednorazowej instancji podczas pracy w Edytorze bloków. Powiedzmy, że umieszczamy blok obrazu na stronie i chcemy, aby był on pełny, podczas gdy reszta treści przestrzega dopełnienia na poziomie głównym?

Wchodzić…

Wyrównania uwzględniające wypełnienie

Podczas próby stworzenia pierwszego domyślnego motywu WordPress, który definiuje wszystkie style w theme.json główny projektant Kjell Reigstad ilustruje w nim trudne aspekty wyłamywania się z dopełnienia na poziomie głównym Problem z GitHubem.

Nowe funkcje w WordPress 6.1 zostały stworzone, aby rozwiązać ten problem. Zagłębmy się w te następne.

useRootPaddingAwareAlignments

nowa useRootPaddingAwareAlignments właściwość została utworzona w celu rozwiązania problemu. Został po raz pierwszy wprowadzony we wtyczce Gutenberg v13.8. The oryginalne żądanie ściągnięcia to niezły wstęp do tego, jak to działa.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Od samego początku zauważ, że jest to funkcja, na którą musimy się zdecydować. Właściwość jest ustawiona na false domyślnie i musimy to jawnie ustawić true aby to umożliwić. Zauważ też, że mamy appearanceTools Ustawić true , jak również. To wybiera nas do kontrolek interfejsu użytkownika w Edytorze witryny, aby stylizować obramowania, kolory łączy, typografię i, tak, odstępy, w tym margines i dopełnienie.

Oprawa appearanceTools Ustawić true automatycznie wybiera bloki do marginesu i dopełnienia bez konieczności ustawiania settings.spacing.padding or setting.spacing.margin do true.

Kiedy włączymy useRootPaddingAwareAlignments, mamy niestandardowe właściwości z wartościami dopełnienia głównego, które są ustawione w pliku element z przodu. Co ciekawe, dotyczy to również dopełnienia .editor-styles-wrapper class, aby odstępy były wyświetlane podczas pracy w zapleczu Edytora bloków. Całkiem fajne!

Udało mi się potwierdzić te niestandardowe właściwości CSS w DevTools podczas kopania.

Włączanie useRootPaddingAwareAlignments stosuje również lewe i prawe dopełnienie do dowolnego bloku, który obsługuje wartości szerokości „zawartości” i „szerokości” na powyższym obrazie stylów globalnych. Możemy również zdefiniować te wartości w theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

Jeśli ustawienia stylów globalnych są inne niż zdefiniowane w theme.json, wówczas pierwszeństwo mają style globalne. Możesz dowiedzieć się wszystkiego o zarządzaniu stylami motywów blokowych w moim ostatnim artykule.

• contentSize jest domyślną szerokością bloków.
• wideSize zapewnia „szeroką” opcję układu i ustanawia szerszą kolumnę dla bloków do rozciągnięcia.

Tak więc ten ostatni przykład kodu da nam następujący CSS:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] wskazuje unikalny numer automatycznie generowany przez WordPress.

Ale zgadnijcie, co jeszcze dostaniemy? Pełne wyrównanie również!

.wp-container-[id] .alignfull {
  max-width: none;
}

Zobaczyć, że? Umożliwiając useRootPaddingAwareAlignments i definiowanie contentSize i wideSize, otrzymujemy również klasę CSS pełnego wyrównania dla łącznie trzech konfiguracji kontenerów do kontrolowania szerokości bloków dodawanych do stron i postów.

Dotyczy to następujących bloków specyficznych dla układu: Kolumny, Grupa, Treść wpisu i Pętla zapytań.

Sterowanie układem bloków

Załóżmy, że dodajemy do strony dowolny z wyżej wymienionych bloków specyficznych dla układu. Kiedy wybieramy blok, interfejs użytkownika ustawień bloku oferuje nam nowe ustawienia układu oparte na settings.layout wartości, które zdefiniowaliśmy w theme.json (lub interfejs globalnych stylów).

Mamy tu do czynienia z bardzo specyficznymi blokami — takimi, w których mogą być zagnieżdżone inne bloki. Tak więc te ustawienia układu dotyczą tak naprawdę kontrolowania szerokości i wyrównania tych zagnieżdżonych bloków. Ustawienie „Wewnętrzne bloki używają szerokości zawartości” jest domyślnie włączone. Jeśli go wyłączymy, nie mamy max-width na pojemniku, a znajdujące się w nim klocki stykają się od krawędzi do krawędzi.

Jeśli zostawimy przełącznik włączony, zagnieżdżone bloki będą przylegać do contentWidth or wideWidth wartości (więcej o tym za chwilę). Lub możemy użyć danych numerycznych do zdefiniowania niestandardowego contentWidth i wideWidth wartości w tym wyjątkowym przypadku. To wielka elastyczność!

Szerokie bloki

Ustawienia, które właśnie sprawdziliśmy, są ustawione w bloku nadrzędnym. Po zagnieżdżeniu bloku w środku i wybraniu go mamy dodatkowe opcje w tym bloku do użycia contentWidth, wideWidthlub przejdź na pełną szerokość.

Zwróć uwagę, jak WordPress mnoży niestandardowe właściwości CSS wypełnienia na poziomie głównym przez -1 aby utworzyć ujemne marginesy po wybraniu opcji „Pełna szerokość”.

Korzystanie z ograniczonego układu

Właśnie omówiliśmy nowe odstępy i wyrównania, które otrzymujemy w WordPress 6.1. Są one specyficzne dla bloków i wszelkich bloków zagnieżdżonych w blokach. Ale WordPress 6.1 wprowadza również nowe funkcje układu, zapewniające jeszcze większą elastyczność i spójność szablonów motywów.

Przykład: WordPress całkowicie zrestrukturyzował swoje typy układów Flex i Flow i dał nam ograniczony układ type, który ułatwia wyrównywanie układów bloków w motywach przy użyciu ustawień szerokości zawartości w interfejsie użytkownika stylów globalnych Edytora witryny.

Układy elastyczne, przepływowe i ograniczone

Różnica między tymi trzema typami układów polega na stylach, które generują. Isabel Brison ma doskonałe pisanie który ładnie zarysowuje różnice, ale sparafrazujmy je tutaj w celach informacyjnych:

• Układ przepływu: Dodaje pionowe odstępy między zagnieżdżonymi blokami w pliku margin-block kierunek. Te zagnieżdżone bloki można również wyrównać do lewej, prawej lub do środka.
• Ograniczony układ: Taka sama dokładna umowa jak układ Flow, ale z ograniczeniami szerokości zagnieżdżonych bloków, które są oparte na contentWidth i wideWidth ustawienia (w theme.json lub style globalne).
• Elastyczny układ: Nie zmieniło się to w WordPress 6.1. To używa Flexbox CSS , aby utworzyć układ, który domyślnie przepływa poziomo (w rzędzie), ale może również przepływać pionowo, więc bloki układają się jeden na drugim. Odstępy są stosowane za pomocą CSS gap własność.

Ta nowa lista typów układów tworzy semantyczne nazwy klas dla każdego układu:

Klasa układu semantycznego	Typ układu	Obsługiwane bloki
.is-layout-flow	Układ przepływu	Kolumny, grupa, treść postu i pętla zapytań.
.is-layout-constrained	Ograniczony układ	Kolumny, grupa, treść postu i pętla zapytań.
.is-layout-flex	Układ elastyczny	Kolumny, przyciski, ikony społecznościowe

Justin Tadlock ma obszerny opis na temat różne typy układu i klasy semantyczne, w tym przypadków użycia i przykładów.

Aktualizowanie motywu w celu obsługi ograniczonych układów

Jeśli już używasz własnego motywu blokowego, będziesz chciał zaktualizuj go, aby obsługiwał ograniczone układy. Wystarczy wymienić parę rzeczy theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

Są to niedawno wydane motywy blokowe, w których włączono ustawienia odstępów useRootPaddingAwareAlignments i mieć zaktualizowany theme.json plik definiujący ograniczony układ:

Wyłączanie stylów układu

Podstawowe style układu są domyślnymi funkcjami dostarczanymi w WordPress 6.1 Core. Innymi słowy, są włączane od razu po wyjęciu z pudełka. Ale możemy je wyłączyć, jeśli zajdzie taka potrzeba, z tym małym fragmentem functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Duże ostrzeżenie tutaj: wyłączenie obsługi domyślnych typów układów również usuwa wszystkie podstawowe style dla tych układów. Oznacza to, że będziesz musiał zastosować własne style odstępów, wyrównania i wszystkiego innego potrzebnego do wyświetlania treści w różnych kontekstach szablonów i bloków.

Zamykając

Jako wielki fan obrazów o pełnej szerokości, nowy układ WordPress 6.1 i funkcje wyrównywania uwzględniające wypełnienie to dwie z moich ulubionych dotychczas. W połączeniu z innymi narzędziami, w tym lepszą kontrolą marginesów i dopełnień, płynna typografia, oraz między innymi zaktualizowane bloki list i cytatów są solidnym dowodem na to, że WordPress zmierza w kierunku lepszego tworzenia treści.

Teraz musimy poczekać i przyjrzeć się, jak wyobraźnia i kreatywność zwykłych projektantów i twórców treści wykorzystuje te niesamowite narzędzia i przenosi je na nowy poziom.

Ze względu na trwające iteracje rozwoju edytora witryny zawsze powinniśmy przewidywać trudną ścieżkę. Jednak jako optymista z niecierpliwością czekam na to, co wydarzy się w nadchodzącej wersji WordPressa 6.2. Niektóre z rzeczy, na które mam oko, to np rozważane cechy za włączenie, wsparcie dla lepkie pozycjonowanie, nowe nazwy klas układu do wewnętrznych owijarek blokowych, zaktualizowane opcje wyrównania stopki, dodawanie opcji układu ograniczonego i przepływu do bloków Cover.

To zdjęcie Problemy z GitHubem #44720 zawiera listę dyskusji związanych z układem przeznaczone dla WordPressa 6.2.

Dodatkowe zasoby

Podczas zagłębiania się w to wszystko konsultowałem się i odwoływałem do wielu źródeł. Oto długa, stara lista rzeczy, które okazały się pomocne i myślę, że Tobie również mogą się spodobać.

Poradniki

Posty WordPress

Żądania ściągnięcia i problemy z GitHub