Как программно прочитать содержимое блока WordPress

Чтение содержимого блоков может оказаться полезным, если вы создаете блоки, которые будут взаимодействовать с другими блоками, или, возможно, плагин, который улучшит весь опыт использования редактора блоков.

Чтобы научиться читать содержимое блока, вам не понадобится компиляция или что-то еще.

Как получить доступ к блокам?

Чтобы получить доступ к блокам в редакторе блоков WordPress, необходимо использовать глобальную переменную wp. Затем мы попадем в хранилище (data) редактора блоков и таким образом прочитаем нужные нам данные.

Честно говоря, ничего особенного в работе с этим нет. Но когда не знаешь, куда смотреть, это может показаться волшебством.

Я бы посоветовал вам, если вы много работаете с блоками, занести в закладки эту ссылку. Здесь вы сможете прочитать информацию обо всех методах, которые можно получить при работе с данными редактора блоков.

Теперь посмотрим, как получить все блоки:

wp.data.select( 'core/block-editor' ).getBlocks()

А затем для каждого блока будет получен массив объектов.

Как получить информацию о текущем выбранном блоке?

Допустим, нам нужна информация о текущем выбранном блоке, как это сделать?

Для этого существует метод:

wp.data.select( 'core/block-editor' ).getSelectedBlock()

В результате будет возвращен только один объект. Это будет объект того же формата, что и при получении всех блоков. В зависимости от типа объекта он будет иметь различные атрибуты.

Как получить содержимое предыдущего блока?

Чтобы получить содержимое предыдущего блока в редакторе блоков WordPress, нам придется использовать предыдущий метод с другим методом.

В предыдущем методе будет получена информация о текущем выбранном блоке.

Затем мы получим параметр clientId блока и используем его для получения предыдущего блока.

const clientId = wp.data.select( 'core/block-editor' ).getSelectedBlock().clientId;
const previousBlock = wp.data.select('core/block-editor').getAdjacentBlockClientId( clientId, -1 );

В метод getAdjacentBlockClientId мы передаем clientId текущего выбранного блока, а также передаем -1 для получения предыдущего блока. Если передать -2, то будет получен блок перед предыдущим блоком.

Аналогичным образом можно получить информацию и о следующем блоке. Но при этом передаются положительные числа, например 1, 2.

Заключение

Работа с блоками в редакторе блоков WordPress может быть немного странной, если вы новичок в JavaScript. Именно поэтому я решил написать несколько простых уроков, не требующих знания React, чтобы сделать их ближе к вам.

Благодаря этой информации вы сможете управлять блоками и работать с ними даже с помощью ванильного JavaScript.

Источник: How to Read WordPress Block Content Programmatically