Делаем свой блок для 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

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

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

комментариев 5

  1. Ну что сказать статья туфта. Сначала думаешь что подключит Реакт и напишет норм код с реализацией блока, а нет танцы с бубном, просто лажа…

    • Зачем вам Реакт и норм код? Что это такое? Зачем? Чтобы что?

      Я это пишу уже 3 года и заметил простое правило – Реакт в 10 раз дороже.
      А то что тут написано в 10 раз быстрее и эффективней.

      Что важнее? Норм код и реакт? Или чтобы было в 10 раз быстрее и эффективней?

  2. Классная статья, прям взял на вооружение) у меня сейчас именно та ситуация, нужны блоки на сайте но если использовать реакт то можно просто сойти с ума (нужны простейшие блоки которых нет из коробки) но теперь встает вопрос – а куда кидать папку blocks? в сам плагин?

  3. Прочитал трижды, но так и не понял, как заюзать твои блоки?
    Скачал, залил в папку site/wp-content/app
    А как их импортировать в админку?

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *