Собирая сайт на конструкторе 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
Там просто моя коллекция блоков, которая применяется для быстрой сборки сайтов агрегаторов, ревьюшников и т. д.
Блоки там разные, но можно в целом увидеть по коду как это работает.
Ну что сказать статья туфта. Сначала думаешь что подключит Реакт и напишет норм код с реализацией блока, а нет танцы с бубном, просто лажа…
Зачем вам Реакт и норм код? Что это такое? Зачем? Чтобы что?
Я это пишу уже 3 года и заметил простое правило – Реакт в 10 раз дороже.
А то что тут написано в 10 раз быстрее и эффективней.
Что важнее? Норм код и реакт? Или чтобы было в 10 раз быстрее и эффективней?
Классная статья, прям взял на вооружение) у меня сейчас именно та ситуация, нужны блоки на сайте но если использовать реакт то можно просто сойти с ума (нужны простейшие блоки которых нет из коробки) но теперь встает вопрос – а куда кидать папку blocks? в сам плагин?
я обычно кидаю в тему – wp-content/app/blocks
Прочитал трижды, но так и не понял, как заюзать твои блоки?
Скачал, залил в папку site/wp-content/app
А как их импортировать в админку?