Одна з головних цілей редактора сайтів WordPress (і, так, зараз це «офіційна» назва) для переміщення базового стилю блоку від CSS у структурований JSON. Файли JSON є машиночитаними, тому їх можна використовувати редактором сайту на основі JavaScript для налаштування глобальних стилів теми безпосередньо в WordPress.
Це ще не весь шлях! Якщо ми подивимося на тему за замовчуванням Twenty Twenty-Two (TT2), то виявимо дві основні невирішені проблеми: взаємодії стилів (люблю :hover, :active, :focus), А також поля та доповнення контейнерів макета. Ви можете побачити, як це було тимчасово виправлено в TT2 style.css файл, а не вносити його в theme.json файлу.
WordPress 6.1 вирішив ці проблеми, і я хочу звернути увагу на останню. Тепер, коли у нас є JSON-стилі для полів і відступів контейнерів макета, це відкриває нам доступ до більш гнучкі та надійні способи визначення інтервалів у наших макетах тем.
Про який інтервал ми говоримо?
По-перше, ми вже маємо заповнення кореневого рівня який є химерним способом опису відступу на <body> елемент. Це добре, тому що це забезпечує послідовний інтервал в елементі, який є спільним для всіх сторінок і публікацій.
Але це ще більше, тому що тепер у нас є спосіб для блоків обходити це відступ і вирівнювати себе на всю ширину. Це завдяки вирівнювання з урахуванням відступів яка є новою функцією підключення theme.json. Таким чином, навіть якщо у вас є доповнення на кореневому рівні, ви все одно можете дозволити, скажімо, зображенню (або якомусь іншому блоку) вийти на всю ширину.
Це підводить нас до іншої речі, яку ми отримуємо: обмежені макети. Ідея тут полягає в тому, що будь-які блоки, вкладені в макет, поважають ширину вмісту макета — що є глобальним параметром — і не виходять за його межі. Ми можемо перевизначати цю поведінку блок за блоком за допомогою вирівнювання, але ми дійдемо до цього.
Почнемо з…
Заповнення кореневого рівня
Знову ж таки, це не нове. У нас була можливість встановити відступи на <body> елемент у theme.json оскільки експериментальний Плагін Гутенберга представив його у версії 11.7. Ми встановили його на styles.spacing об'єкт, де маємо margin та padding об’єкти для визначення верхнього, правого, нижнього та лівого інтервалів на тілі:
{ "version": 2, "styles": { "spacing": { "margin": { "top": "60px", "right": "30px", "bottom": "60px", "left": "30px" }, "padding": { "top": "30px", "right": "30px", "bottom": "30px", "left": "30px" } } }
}Це глобальне налаштування. Отже, якби ми зламали DevTools і перевірили <body> елемент, ми побачимо такі стилі 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;
}круто Але в цьому полягає питання про те, як взагалі ми можемо дозволити деяким блокам вийти за межі цього інтервалу, щоб заповнити весь екран, від краю до краю. Ось чому є інтервал, чи не так? Це допомагає запобігти цьому!
Але справді є багато випадків, коли ви можете вирватися з цього інтервалу одноразово під час роботи в редакторі блоків. Скажімо, ми розміщуємо блок зображення на сторінці й хочемо, щоб він був на всю ширину, а решта вмісту дотримувалася відступів кореневого рівня?
Введіть…
Вирівнювання з урахуванням відступів
Під час спроби створити першу тему WordPress за замовчуванням, яка визначає всі стилі в theme.json файл, провідний дизайнер Келл Рейгстад ілюструє складні аспекти виходу з доповнення кореневого рівня в цьому Випуск GitHub.
Нові функції в WordPress 6.1 були створені для вирішення цієї проблеми. Давайте розберемося в наступних.
useRootPaddingAwareAlignments
Новий useRootPaddingAwareAlignments властивість була створена для вирішення проблеми. Насправді вперше він був представлений у плагіні Gutenberg v13.8. The оригінальний запит на отримання є гарним прикладом того, як це працює.
{ "version": 2, "settings": { "appearanceTools": true, "useRootPaddingAwareAlignments": true, // etc. },Відразу зауважте, що цю функцію ми маємо ввімкнути. Властивість налаштована на false за замовчуванням, і ми повинні явно встановити це значення true щоб увімкнути його. Також зауважте, що ми маємо appearanceTools встановлений в true а. Це дозволяє нам використовувати елементи керування інтерфейсом користувача у редакторі сайту для оформлення меж, кольорів посилань, типографіки та, так, інтервалів, які включають поля та відступи.
Установка appearanceTools встановлений в true автоматично вибирає поля та відступи для блоків без необхідності налаштування settings.spacing.padding or setting.spacing.margin до true.
Коли ми вмикаємо useRootPaddingAwareAlignments, ми надаємо спеціальні властивості зі значеннями кореневих доповнень, які встановлено на <body> елемент на передній частині. Цікаво, що він також застосовує доповнення до .editor-styles-wrapper таким чином інтервали відображаються під час роботи у внутрішньому редакторі блоків. Дуже здорово!
Я зміг підтвердити ці спеціальні властивості CSS у DevTools, копаючись.
включення useRootPaddingAwareAlignments також застосовує відступи зліва та справа до будь-якого блоку, який підтримує значення ширини «вмісту» та «широки» на зображенні Global Styles вище. Ми також можемо визначити ці значення в theme.json:
{ "version": 2, "settings": { "layout": { "contentSize": "640px", "wideSize": "1000px" } }
}Якщо параметри глобальних стилів відрізняються від тих, що визначені в theme.json, то глобальні стилі мають пріоритет. Ви можете дізнатися все про керування стилями тем блоків у моїй останній статті.
contentSizeширина за замовчуванням для блоків.wideSizeзабезпечує «широкий» варіант макета та встановлює ширший стовпець для розтягування блоків.
Отже, останній приклад коду дасть нам наступний 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] позначає унікальний номер, автоматично згенерований WordPress.
Але вгадайте, що ще ми отримуємо? Також повне вирівнювання!
.wp-container-[id] .alignfull { max-width: none;
}Бачиш це? Увімкнувши useRootPaddingAwareAlignments та визначальний contentSize та wideSize, ми також отримуємо клас CSS повного вирівнювання для загалом трьох конфігурацій контейнерів для керування шириною блоків, які додаються до сторінок і публікацій.
Це стосується наступних блоків, специфічних для макета: Стовпці, Група, Вміст публікації та Цикл запиту.
Елементи керування макетом блоку
Скажімо, ми додаємо на сторінку будь-який із згаданих вище блоків, що стосуються макета. Коли ми вибираємо блок, інтерфейс налаштувань блоку пропонує нам нові налаштування макета на основі settings.layout значення, які ми визначили в theme.json (або інтерфейс глобального стилю).
Тут ми маємо справу з дуже специфічними блоками — такими, усередині яких можуть бути вкладені інші блоки. Отже, ці параметри макета насправді стосуються контролю ширини та вирівнювання цих вкладених блоків. Параметр «Внутрішні блоки використовують ширину вмісту» ввімкнено за умовчанням. Якщо ми вимкнемо це, то у нас немає max-width на контейнері, а блоки всередині нього йдуть від краю до краю.
Якщо залишити перемикач увімкненим, то вкладені блоки будуть відповідати будь-якому contentWidth or wideWidth значення (про це трохи пізніше). Або ми можемо використати числові дані для визначення настроюваного contentWidth та wideWidth значення в цьому одноразовому випадку. Це чудова гнучкість!
Широкі блоки
Параметри, які ми щойно розглянули, встановлені в батьківському блоці. Після того, як ми вклали блок і вибрали його, ми маємо додаткові параметри в цьому блоці для використання contentWidth, wideWidth, або перейдіть на всю ширину.
contentWidth з позначкою «Немає» в контекстному меню, але також можна встановити значення wideWidth (з позначкою «Широка ширина») або «Повна ширина».Зверніть увагу, як WordPress помножує настроювані властивості CSS доповнення кореневого рівня на -1 для створення від’ємних полів під час вибору опції «На всю ширину».
.alignfull клас встановлює від’ємні поля для вкладеного блоку, щоб гарантувати, що він займає повну ширину вікна перегляду без конфлікту з налаштуваннями відступів кореневого рівня.Використання обмеженого макета
Ми щойно розглянули нові інтервали та вирівнювання, які ми отримуємо з WordPress 6.1. Вони стосуються блоків і будь-яких вкладених блоків усередині блоків. Але WordPress 6.1 також представляє нові функції макета для ще більшої гнучкості та послідовності в шаблонах теми.
Показовий приклад: WordPress повністю реструктурував свої типи макетів Flex і Flow і надав нам обмежений розташування тип, який полегшує вирівнювання макетів блоків у темах за допомогою налаштувань ширини вмісту в інтерфейсі користувача Global Styles редактора сайту.
Макети Flex, Flow і Constrained
Різниця між цими трьома типами макетів полягає в стилях, які вони виводять. Ізабель Брайсон має чудовий опис це гарно окреслює відмінності, але давайте перефразуємо їх тут для довідки:
- Схема потоку: Додає вертикальний інтервал між вкладеними блоками в
margin-blockнапрямок. Ці вкладені блоки також можна вирівняти ліворуч, праворуч або по центру. - Обмежений макет: Така сама угода, як і макет Flow, але з обмеженнями ширини вкладених блоків, які базуються на
contentWidthтаwideWidthналаштування (або вtheme.jsonабо глобальні стилі). - Гнучка розкладка: Це не змінилося в WordPress 6.1. Це використовує CSS Flexbox щоб створити макет, який за замовчуванням розміщується горизонтально (у рядку), але також може розташовуватися вертикально, щоб блоки складалися один на інший. Інтервали застосовуються за допомогою CSS
gapвласність
Цей новий список типів макетів створює семантичні назви класів для кожного макета:
| Клас семантичного компонування | Тип макета | Підтримувані блоки |
|---|---|---|
.is-layout-flow |
Схема потоку | Стовпці, групи, вміст публікації та цикл запитів. |
.is-layout-constrained |
Обмежений макет | Стовпці, групи, вміст публікації та цикл запитів. |
.is-layout-flex |
Гнучка розкладка | Стовпці, кнопки, соціальні іконки |
Джастін Тедлок має великий опис різні типи компонування та семантичні класи, включаючи випадки використання та приклади.
Оновлення вашої теми для підтримки обмежених макетів
Якщо ви вже використовуєте тему блоку, створену власноруч, вам це захочеться оновіть його для підтримки обмежених макетів. Все, що потрібно, це замінити пару речей theme.json:
{ "version": 2, "settings": { "layout": { "type": "constrained", // replaces `"inherit": true` "type": "default", // replaces `"inherit": false` } }
}Це нещодавно випущені блокові теми, які ввімкнули налаштування інтервалів useRootPaddingAwareAlignments і мати оновлений theme.json файл, який визначає обмежений макет:
Відключення стилів макета
Базові стилі макета є функціями за замовчуванням, які постачаються в WordPress 6.1 Core. Іншими словами, вони активовані прямо з коробки. Але ми можемо вимкнути їх, якщо нам це потрібно, за допомогою цього маленького фрагмента functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Велике попередження: вимкнення підтримки типових макетів також видаляє всі базові стилі для цих макетів. Це означає, що вам потрібно буде використовувати власні стилі для інтервалів, вирівнювання та всього іншого, необхідного для відображення вмісту в різних контекстах шаблонів і блоків.
Підводячи підсумок
Як великий шанувальник повношироких зображень, новий макет WordPress 6.1 і функції вирівнювання з урахуванням відступів є двома з моїх найулюбленіших. У поєднанні з іншими інструментами, включаючи кращий контроль полів і відступів, рідка типографіка, а також оновлені блоки List і Quote, серед іншого, є переконливим доказом того, що WordPress рухається до кращого досвіду створення вмісту.
Тепер ми маємо почекати та подивитися, як уява та креативність звичайних дизайнерів і творців контенту використовують ці неймовірні інструменти та виводять їх на новий рівень.
Через ітерації розробки редактора сайту ми завжди повинні передбачити важкий шлях попереду. Однак, як оптиміст, я з нетерпінням чекаю, що станеться в майбутній версії WordPress 6.2. Деякі речі, за якими я пильно стежу, це такі речі особливості, що розглядаються для включення, підтримки для липке позиціонування, нові назви класів компонування для обгорток внутрішнього блоку, оновлені параметри вирівнювання нижнього колонтитула та додавання параметрів макета обмеження та потоку до блоків Cover.
це Проблеми GitHub №44720 містить список обговорень, пов'язаних з макетом планується для WordPress 6.2.
Додаткові ресурси
Я консультувався та посилався на багато джерел, копаючись у всьому цьому. Ось великий список речей, які я вважаю корисними, і думаю, вам також може сподобатися.
Підручники
Дописи на WordPress
Запити та проблеми з GitHub
- Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.Натисніть тут
- Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
- джерело: https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/
