Як отримати доступ і розібрати блоки Гутенберга за допомогою PHP

У цій публікації ми розглянемо, як проаналізувати блоки Гутенберга публікації та витягти певні блоки, щоб створити щось інше. Ми розглянемо PHP-функції WordPress для аналізу, вилучення та візуалізації вибраних блоків.

Однією з переваг нового редактора Gutenberg у WordPress є більш структуровані дані для вмісту публікації. У минулі часи все зберігалося як HTML, і не було можливості витягти певні частини вмісту без деяких дуже складних регулярних виразів. Але з Гутенбергом кожна частина вмісту, будь то абзац, заголовок, зображення, відео, кнопка чи стовпець, який містить інші блоки всередині, зберігається з інформацією, яка повідомляє нам, що це за частина вмісту.

За допомогою вбудованих функцій WordPress дуже легко отримати всі блоки у вмісті публікації в масиві з усією інформацією. Це відкриває безліч корисних функцій для розробників тем. Згадайте лише кілька ідей:

• Динамічно генеруйте зміст, вибираючи всі заголовки (підручник нижче).
• Отримайте всі відео, зображення чи цитати, які використовуються в усіх публікаціях, щоб зібрати їх і викласти на іншій сторінці.
• Витягніть перший абзац публікації та використовуйте його як уривок в архівах (підручник нижче).
• Отримайте огляд використання конкретних блоків та їх положення. Наприклад, у вас є спеціальний рекламний блок, і вам потрібно знати, як часто він використовується у ваших публікаціях і як далеко у вмісті вони з’являються.
• Відображати блоки публікації, але виключати певні типи блоків.
• Перевірте, чи вміст публікації починається з відео, і використовуйте це відео замість представленого зображення в архівах.
• Якщо ви використовуєте спеціальний блок, який містить технічні характеристики продуктів, ви можете легко створити сторінку, яка відображає та порівнює технічні характеристики в публікаціях про продукт.
• Динамічно збирайте всі окремі зображення, які використовуються в публікації, і створюйте їх галерею в кінці або в іншому місці.

Давайте просто стрибнемо прямо в це!

Проаналізуйте блоки публікації

Для аналізу блоків ми використовуємо функцію WordPress [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Як параметр вам потрібно надати рядок вмісту публікації. Якщо ви перебуваєте всередині циклу або маєте доступ до пост-об’єкта, просто вкажіть $post->post_contentяк параметр функції.

Повернення з parse_blocks()— це масив, де кожен елемент масиву є блоком. Для кожного елемента блоку ви маєте таку інформацію, як тип блоку (ключ ‘ blockName‘), атрибути блоку (ключ ‘ attrs‘), внутрішні блоки для вкладених блоків, наприклад Стовпці (ключ ‘ innerBlocks‘), і два елементи для фактичного вмісту блоку (ключі ‘ innerHTML‘ і ‘ innerContent‘). Елемент innerHTMLє рядком вмісту HTML, а innerContentце масив рядків HTML.

І це все! Перегляньте отриманий масив parse_blocks(), щоб зробити свою справу. Ми розглянемо більше прикладів цього коду нижче в цій публікації.

Примітка щодо класичних (не Гутенбергових) повідомлень

Можливо, ви працюєте на старішому сайті WordPress, який створював дописи до оновлення до Gutenberg (або використовував плагін Disable Gutenberg). У цьому випадку ці публікації не матимуть структурованого вмісту публікації, а скоріше весь вміст публікації знаходиться в блоці «Класичний редактор».

Масив, повернений функцією parse_blocks(), для таких повідомлень повертатиме один елемент масиву блоків зі blockNameзначенням null. Повний HTML-вміст публікації міститься в innerHTMLрядку цього елемента.

Ми можемо з упевненістю припустити, що якщо повернення публікації parse_blocks()містить один елемент і blockNameце null, ми маємо справу з публікацією «до Гутенберга». Інакше blockNameзавжди буде заселено. Пам’ятайте про це під час написання коду для аналізу блоків дописів і хочете обробляти старіший вміст WordPress.

Відобразити блок

WordPress також пропонує функцію візуалізації певного блоку за допомогою [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Як параметр вам потрібно надати масив для блоку, як один із тих, що повертаються parse_blocks()зверху. Функція повертає рядок відтвореного HTML, який ви можете просто повторити.

Наведений вище код відтворить усі блоки допису, як це було б зазвичай під час відтворення вмісту допису. Найцікавіше настає, коли ми починаємо додавати код, щоб виключити або включити певні блоки, які нас цікавлять.

Наприклад, наведений нижче код роздрукує лише блоки абзаців публікації:

foreach ($blocks as $block) {
    if ($block['blockName'] == 'core/paragraph') {
        echo render_block($block);
    }
}

І це відобразить усі блоки, але виключить усі блоки шорткоду:

foreach ($blocks as $block) {
    if ($block['blockName'] != 'core/shortcode') {
        echo render_block($block);
    }
}

Імена блоків

Під час аналізу блоків публікації вам, швидше за все, потрібно буде перевірити тип блоку. Їх досить просто вгадати. Наприклад, блок абзацу, як ви вже здогадалися, це paragraph. Однак майте на увазі, що всі блоки Гутенберга в WordPress мають префікс простору імен. Для основних блоків WordPress (за замовчуванням) усі вони мають префікс «core/». Виняток становлять блоки Embed, які мають префікс «core-embed/». Так, наприклад, блок абзацу матиме назву блоку core/paragraph.

Щоб уникнути здогадок, ось огляд блоків за замовчуванням, наданих WordPress (на момент написання цього):

Загальні блоки

• Абзац:core/paragraph
• зображення:core/image
• Рубрика:core/heading
• Галерея:core/gallery
• Список:core/list
• Цитата:core/quote
• Аудіо:core/audio
• Обкладинка:core/cover
• Файл:core/file
• Відео:core/video

Форматування

• Попередньо відформатований:core/preformatted
• код:core/code
• Класичний: core/freeform
  (але для дописів не від Гутенберга це буде null, див. примітку про дописи не від Гутенберга)
• Спеціальний HTML:core/html
• Pullquote:core/pullquote
• Таблиця:core/table
• Стих:core/verse

Макет

• кнопка:core/button
• Стовпці:core/columns
• більше:core/more
• Розрив сторінки:core/nextpage
• роздільник:core/separator
• Прокладка:core/spacer
• Медіа та текст:core/media-text

Віджети

• Шорткод:core/shortcode
• Архів:core/archives
• Категорії:core/categories
• Останні коментарі:core/latest-omments
• Останні дописи:core/latest-posts

Вбудовує

• Вставити:core/embed

• Twitter:core-embed/twitter

• YouTube:core-embed/youtube

• Facebook:core-embed/facebook

• Instagram:core-embed/instagram

• WordPress:core-embed/wordpress

• SoundCloud:core-embed/soundcloud

• Spotify:core-embed/spotify

• Flickr:core-embed/flickr

• Vimeo:core-embed/vimeo

• Анімото:core-embed/animoto

• Cloudup:core-embed/cloudup

• Crowdsignal:core-embed/crowdsignal

• Dailymotion:core-embed/dailymotion

• Hulu:core-embed/hulu

• Imgur:core-embed/imgur

• Проблема:core-embed/issuu

• Kickstarter:core-embed/kickstarter

• Meetup.com:core-embed/meetup-com

• Mixcloud:core-embed/mixcloud

• Reddit:core-embed/reddit

• ReverbNation:core-embed/reverbnation

• Скрінкаст:core-embed/screencast

• Scribd:core-embed/scribd

• Поділитися слайдами:core-embed/slideshare

• SmugMug:core-embed/smugmug

• Акустична панель:core-embed/speaker

• TED:core-embed/ted

• Tumblr:core-embed/tumblr

• VideoPress:core-embed/videopress

• WordPress.tv:core-embed/wordpress-tv

• Amazon Kindle:core-embed/amazon-kindle

Приклад коду: отримати перший абзац публікації як уривок

Добре написана публікація повинна починатися з абзацу, який представляє, про що йдеться, і спокушає людей продовжувати читати. Вони ідеально підходять для використання як уривків замість того, щоб покладатися на автоматичну функцію витягів у WordPress!

Це функція, яку ви можете додати до своєї теми functions.php, яка повертатиме перший абзац публікації. Якщо повідомлення не було надано, воно посилатиметься на глобальний об’єкт повідомлення. Він також вміщує дописи, які не належать Гутенбергу, повертаючи для них фактичний уривок WordPress.

Після parse_blocks()виклику функції ми перевіряємо, чи допис містить недійсні дані блоку (допис було створено до Гутенберга), і повертаємо уривок допису, якщо це так. В іншому випадку ми переглядаємо блоки публікації, знаходимо перший блок абзацу та повертаємо його innerHTML. У самому кінці ми повертаємо рядок із (це необов’язково) <div>навколо нього.

Щоб скористатися цією функцією, все, що вам потрібно зробити, це зателефонувати:

echo awp_get_excerpt();

Припустимо, що виклик функції розміщено десь, де є глобальний $postоб’єкт, наприклад, усередині циклу. Якщо ви хочете вказати публікацію, надайте об’єкт публікації як параметр для виклику функції:

$post_id = 1;
$post = get_post($post_id);
echo awp_get_excerpt($post);

Приклад: створіть зміст із заголовків публікації

Ви можете автоматично та динамічно генерувати зміст на основі блоків заголовків публікації. Процес досить простий; розібрати блоки публікації та знайти всі блоки типу core/heading. Але ми можемо зробити ще один крок далі та включити рівні; наприклад, розміщення h3як підзаголовок під h2і так далі.

Блок заголовка містить інформацію про свій рівень в елементі масиву атрибутів (ключ ‘ attrs‘). Усередині attrsмасиву це буде елемент масиву з ключем «level» і цілим числом, що позначає рівень. A h3матиме «level» значення 3, a h4матиме «level» 4і так далі.

Однак зверніть увагу, що attrsблоки заголовків можуть бути порожніми! Це трапляється, якщо автор не змінив тип заголовка на стандартний у налаштуваннях блоку. Щоб обійти це, нам потрібно зробити деякі припущення. За замовчуванням будуть заголовки h2(якщо ви не змінили це у своїй темі). Тож ми можемо припустити, що якщо блок заголовка не має атрибута рівня, це h2. В іншому випадку ми отримуємо інформацію про рівень з атрибутів.

Якщо ви дійсно готові до цього виклику, я запрошую вас покращити наведений нижче код. Проблема створення правильно структурованого olсписку полягає в тому, що ми не можемо контролювати, як автор структурує свої заголовки. Вони цілком можуть збожеволіти і почати з h4заголовка, а потім одразу перейти до h2заголовка. І раптом вони змішують h1посередині. Тому моє рішення передбачає створення плоского olсписку та надання інформації про рівень у класах елементів списку. Тоді за допомогою розумного CSS ви можете зробити відповідний відступ для елементів списку з деяким лівим відступом.

Код

Ось функція змісту:

Функція починається з обробки повідомлення та аналізу його блоків. На лінії #9ми пристосовуємося до повідомлень не Гутенберга. Функція продовжує прокручувати всі блоки, і щоразу, коли вона знаходить блок заголовка, він додається до нашого $headingsмасиву. Ми використовуємо [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)()для видалення тегів HTML із заголовків. Ми також додаємо інформацію про рівень до нашого масиву, де за замовчуванням встановлено значення, 2якщо атрибути порожні.

Після блокового циклу $headingsмасив має містити всі заголовки дописів по порядку. Потім ми можемо просто створити рядок HTML і вивести його вміст. Як згадувалося, я генерую назву класу для кожного елемента з інформацією про рівень заголовка, щоб ми могли створити ілюзію структурованого списку за допомогою CSS.

Як і у випадку з функцією витягу вище, ми можемо викликати цю функцію, коли ми знаходимося всередині циклу так:

echo awp_table_of_contents();

Або якщо ми поза циклом або хочемо вказати пост;

$post_id = 1;
$post = get_post($post_id);
echo awp_table_of_contents($post);

Це створить список, який виглядає приблизно так:

Висновок

Як ми бачили завдяки структурованому насиченому вмісту дописів, який став можливим завдяки Gutenberg, ми можемо дуже легко знаходити та витягувати певні частини вмісту дописів. Поверніться до списку прикладів, які я згадав на початку публікації. Немає обмежень на те, що ви можете зробити як розробник теми. Це просто залежить від того, у чому потребує ваша тема або сайт WordPress (або що просто буде круто).