Собирая сайт на конструкторе Gutenberg, бывает нужно создать свой блок, который отсутствует в базовой комплектации. И тут бывают нюансы…

В общем и целом у нас есть 2 основных подхода создания блоков:

• в базе конечно же используется ReactJS, JSX & NPM
• однако для 99% проектов и задач проще использовать специальные PHP билдеры типа LazyBlocks

Когда эффективно брать базовый подход с ReactJS?

Тот API который идет в ядре WordPress эффективен в ситуации когда вам нужно сделать блок без зависимостей.

Обычно таких ситуаций две:

• вы пишете какой то свой плагин для экосистемы, под продажу, и предполагается что его будет ставить от 100+ сайтов, нужна автономность и отсутствие лишних зависимостей
• у вас чешутся руки, зудит пружина в попе, нечем заняться, очень много свободного времени, и нужно его как то убить

Вот если у вас одна из ситуаций выше – есть смысл делать блоки через ReactJS.

Во всех остальных случаях проще использовать PHP билдеры…

PHP билдеры блоков типа LazyBlocks, ACF или GCB

Создание блока через простой PHP шаблон сильно проще и привычней для 99% проектов и для 99% разработчиков. Однако в Гутенберг из коробки такой возможности нет и нужно ставить плагины.

Топ 3 плагина это: LazyBlocks, ACF & Genesis Custom Blocks (GCB)

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

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

А как это работает?

Выше я привел теоретическую базу, ключевую структуру блочных проектов.

На практике это выглядит очень просто и можно рассмотреть 2 основных сценария:

Первый сценарий – мне надо сделать свой блок, который имеет какой то свой контент

• я иду в админку LazyBlocks, добавляю блок, набрасываю нужные поля, примерно как у ACF
• далее иду в тему, создаю папочку блока и шаблон типа так: theme-name/blocks/lazyblock-my-custom-super-block/block.php
• в этом шаблоне пишу как этот блок должен выглядеть и работать
• если мне нужен css – создают block.css, иногда сразу block.scss если стилей много
• если мне нужен js – создаю block.js
• а если мне нужно что то очень сложное и хитрое – добавляю config.php – и там пишу любые свои фантазии

Такой подход очень гибок, очень прост в работе и позволяет собирать свой блоки буквально за 5 минут.

Второй сценарий – мне надо только покрасить что то где то

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

В старые времена я шел в style.css и туда что то писал – но потом открывал этот файл и плакал – там было уже сложно что то разобрать.

Сейчас я иду все в ту же папку blocks, создаю там папку с именем блока типа product-listing-page и внутрь кладу block.css – там пишу нужные мне стили только для страницы продуктового листинга. И вуаля! Стили начинают работать.

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

Итого и код

Я наверное не буду расписывать конкретные варианты того как пишутся такие блоки, так как это долго. Но могу поделиться ссылкой на пример таких блоков…

Вот тут: https://github.com/uptimizt/re-agg

Там просто моя коллекция блоков, которая применяется для быстрой сборки сайтов агрегаторов, ревьюшников и т. д.

Блоки там разные, но можно в целом увидеть по коду как это работает.