Собирая сайт на конструкторе 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 я попробовал пару раз и сначала показалось интересно, но быстро уперся в ограничения, а покупать что то желания не было. Хотя структура файлов тут как оказалось была лучшей.
В итоге мой выбор пал на LazyBlocks в базе, и чуть чуть смекалки чтобы получить структуру файлов как у GCB.
Есть папка blocks — и там создаются все блоки, которые нужны для работы сайта.
Каждый блок = 1 папка. И там в базе 3 файла: block.php, block.css, block.js. Плюс иногда можно добавить волшебный config.php и расширить логику блока как угодно. Любые фантазии в рамках бюджета.
Этот паттерн называется SFC (Single Folder Component), очень часто применятся в современных SPA ReactJS, хотя там ребята уже пошли дальше и часто делают Single File Component — это когда HTML, JS & CSS — не просто в 1 папке, а сразу в 1 файле.
Но так как тут так нельзя или сложно, то класть просто все файлы в 1 папочку — тоже очень удобно и гораздо эффективней чем по старинке — раскидать все по разным папкам и ходи ищи свищи что где менять.
А как это работает?
Выше я привел теоретическую базу, ключевую структуру блочных проектов.
На практике это выглядит очень просто и можно рассмотреть 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
Там просто моя коллекция блоков, которая применяется для быстрой сборки сайтов агрегаторов, ревьюшников и т. д.
Блоки там разные, но можно в целом увидеть по коду как это работает.
