Бинды data-op-bind

Вставка onpress/… добавляет кусок разметки в поток. Но часто нужно подставить значение внутрь тега: href ссылки на главную, src логотипа, заголовок страницы в h1, поле элемента списка. Для этого тег помечается атрибутом data-op-bind с картой «куда → что».

<a class="logo" data-op-bind='{"href":"site.home_url"}'>
  <img data-op-bind='{"src":"site.logo_url","alt":"site.name"}'>
</a>
<h1 data-op-bind='{"text":"page.title"}'></h1>

После сборки:

<a class="logo" data-op-bind="{&quot;href&quot;:&quot;site.home_url&quot;}" href="https://example.onpress.pro/">
  <img data-op-bind="…" src="https://example.onpress.pro/wp-content/uploads/…/logo.png" alt="Example">
</a>
<h1 data-op-bind="…">Тарифы</h1>

Сам атрибут data-op-bind в результате остаётся — браузеру он безразличен, а по нему видно, что было подставлено. Сборка всегда идёт из исходника, так что подстановки не накапливаются.

Синтаксис

Значение атрибута — JSON-объект: ключ — куда писать, значение — токен.
Атрибут пишется в одинарных кавычках, JSON внутри — в двойных. В двойных кавычках атрибут оборвётся на первой же кавычке JSON и пропадёт целиком; загрузка фрейма предупредит об этом.
Ключ text — заменить содержимое элемента текстом (экранируется). Ключ html — заменить содержимое HTML-строкой как есть. Любой другой ключ — имя атрибута, который будет выставлен (href, src, alt, title, content, datetime, aria-label, data-что-угодно).
В одном data-op-bind можно сколько угодно пар.
Токен без значения (например page.parent_title у страницы верхнего уровня) ничего не выставляет: атрибут или содержимое остаются как в исходнике. Такие токены перечислены в отчёте сборки полем unresolved.
Пустое значение — пустая строка: атрибут будет выставлен пустым.

Подстановка идёт потоковым HTML-процессором ядра, без регулярных выражений: чужая разметка вокруг не меняется.

Токены

site.* — сайт

Токен	Значение
`site.home_url`, `site.url`	адрес главной со слешем на конце
`site.site_url`	адрес WordPress
`site.name`	название сайта
`site.description`	описание сайта
`site.logo_url`	логотип: логотип темы, иначе картинка шапки, иначе иконка сайта
`site.host`	домен без схемы
`site.lang`	слаг текущего языка
`site.year`	текущий год
`site.charset`	кодировка
`site.login_url`, `site.logout_url`, `site.admin_url`	адреса входа, выхода и админки WordPress
`site.blog_id`	внутренний номер блога — не выводите его в публичную разметку

page.* — собираемая страница

Токен	Значение
`page.id`	id страницы
`page.url`	полный адрес страницы
`page.title`	заголовок
`page.slug`, `page.status`, `page.type`	слаг, статус, тип записи
`page.parent_id`, `page.parent_title`, `page.parent_url`	родитель; только если он есть
`page.excerpt`	выдержка; если пустая — первые слова текста
`page.description`	выдержка без автогенерации: пустая выдержка — пустая строка
`page.date`, `page.date_iso`	дата публикации в формате сайта и в ISO 8601
`page.date_modified`, `page.date_modified_iso`	дата изменения
`page.thumbnail_id`, `page.thumbnail_url`, `page.thumbnail_alt`	изображение записи (`_thumbnail_id`); только если есть
`page.author_id`, `page.author_name`	автор и его отображаемое имя
`page.author_url`	архив автора; только если его адрес не раскрывает логин учётной записи
`page.author_avatar`	аватар; только если он локальный, а не Gravatar с хешем почты
`page.categories`, `page.tags`	термины через запятую (у записей с рубриками)
`page.category_name`, `page.category_slug`, `page.category_url`	первая рубрика
`page.paged`	номер страницы разбивки из адреса (`?blog_page=N`), без параметра — `1`
`page.lang`	слаг языка страницы

Любой токен page.* в data-op-bind делает фрейм зависимым от страницы: он собирается на каждом запросе и не даёт статической копии.

page.data.* — значения из frontmatter

page.data.<ключ> — значение своего ключа из frontmatter страницы; page.meta.<ключ> — его алиас. Работает в data-op-bind, в match повторителя, во вставке onpress/value и в параметрах вызова фрейма.

---
name: "Canva"
data.rating: 5
---

<div class="rating" data-op-bind='{"data-rating":"page.data.rating"}'></div>

Отдаются только ключи, пришедшие из frontmatter публикацией; служебная мета с _ в начале наружу не уходит, произвольную мету страницы так не прочитать. Три формы записи во frontmatter — rating: 5, data.rating: 5 и вложенная под data: — равноправны и читаются одинаково: page.data.rating. Подробно — frontmatter.

item.* — элемент повторителя

Внутри onpress/repeat — поля текущего элемента списка. Вложенность через точку, индекс массива — числом:

<!-- onpress/repeat {"source":"pages.children"} -->
<a data-op-bind='{"href":"item.url","text":"item.title"}'></a>
<!-- /onpress/repeat -->

<!-- onpress/repeat {"source":"team"} -->
<img data-op-bind='{"src":"item.photo.url","alt":"item.name"}'>
<a data-op-bind='{"href":"item.links.0.url"}'>Профиль</a>
<!-- /onpress/repeat -->

Логическое true становится "1", false — пустой строкой; объект или массив не подставляется. Во вложенном повторителе item.* — элемент ближайшего повторителя. Вне повторителя item.* не трогается.

option.* — опция сайта

option.<имя> — скалярная опция WordPress текущего сайта: option.blogname, option.admin_email. Несуществующая опция — пустая строка; массив — не подставляется. Токен считается только при сборке страницы, POST /data/resolve его не вычисляет.

frame.* — параметры вызова

Внутри фрейма, вызванного с параметрами, frame.<ключ> — значение атрибута вызова. Вызов  — и во фрейме:

<div id="ai-assistant-mount" data-op-bind='{"data-agent":"frame.agent"}'></div>

Параметра нет — бинд ничего не выставляет. Тот же токен работает в атрибутах вставок внутри фрейма: значение атрибута, целиком равное frame.<ключ> или page.<поле>, заменяется значением, а без значения атрибут снимается и вставка берёт свой дефолт. Подробно — параметры вызова.

raw: — константа

raw:<значение> подставляет значение как есть. Нужен в match повторителя ({"frame.slug":"raw:docs"}), иногда в бинде, когда значение — константа фрейма, и в атрибуте вставки, когда литерал только похож на токен.

header. и footer. — поля старой шапки и подвала

Значения из служебных записей «Header» и «Footer» темы первой версии — для сайтов, перенесённых с v1 с сохранением настроек шапки и подвала.

Токен	Значение
`header.button_title`, `header.button_url`, `header.button_target`, `header.button_icon`	кнопка шапки
`header.show_button`, `header.show_logo`	`1` или пусто
`footer.description`, `footer.copyright`	текст подвала и копирайт
`footer.cta`, `footer.cta_head`, `footer.cta_subhead`	блок призыва
`footer.cta_button_title`, `footer.cta_button_url`, `footer.cta_button_target`, `footer.cta_button_icon`	кнопка призыва
`footer.show_logo`, `footer.just_copyrights`	`1` или пусто

В API v2 эти поля не правятся. На новых сайтах держите такие значения прямо в разметке фрейма или в наборе данных.

Устаревшие frame.id, frame.type, frame.url

Остались от прежней модели фреймов и для новой разметки не нужны. Параметры вызова с такими именами не заводите.

Где бинды работают

Во фреймах и в теле страницы (внутри блока core/html или любой разметки). Где тега-носителя нет — например, внутри <script>, — значение выводит вставка onpress/value с тем же токеном. Внутри повторителя бинды каждой копии подставляются со своим элементом — внешний проход не перепишет заголовок вложенного элемента заголовком внешнего.

Примеры

Шапка с кнопкой из набора данных:

<!-- onpress/repeat {"source":"header-cta","limit":1} -->
<a class="site-header__cta" data-op-bind='{"href":"item.url","text":"item.title","target":"item.target"}'></a>
<!-- /onpress/repeat -->

Карточка статьи с датой в машиночитаемом виде:

<time data-op-bind='{"datetime":"page.date_iso","text":"page.date"}'></time>

Хлебная крошка родителя, которая исчезает у верхнего уровня: элемент без значения остаётся пустым — поставьте ему стиль :empty { display:none } в CSS сайта.

<a class="eyebrow" data-op-bind='{"text":"page.parent_title","href":"page.parent_url"}'></a>

Когда бинд не сработал

Атрибут в двойных кавычках — предупреждение при загрузке фрейма.
Битый JSON в атрибуте — в отчёте сборки предупреждение битый JSON в data-op-bind.
Токен без значения — в отчёте сборки unresolved. Отчёт возвращается в ответе записи фрейма (bake.response.unresolved).
Токен написан с ошибкой — тоже unresolved: словарь закрытый, неизвестное имя значения не имеет.