Делаем свой блок для Gutenberg

Собирая сайт на конструкторе 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

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

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

Источник: https://wpcraft.ru/blog/custom-gutenberg-block/

%d такие блоггеры, как: