Theme Redone: новая стартовая тема на основе блоков для создания веб-сайтов WordPress и блоков Gutenberg с помощью MVC Framework

За несколько дней до Гутенберга зрелость экосистемы тем WordPress предлагала широкий выбор десятков хорошо известных стартовых тем, где разработчики могли найти ту, которая соответствовала бы их индивидуальным предпочтениям или могла быть легко изменена. Авторы тем часто спрашивали, есть ли хорошая стартовая тема для тем строительных блоков , но на данный момент их действительно всего несколько, так как эра блочных тем только начинается.

WebREDONE, веб-агентство из Сербии, открыло исходный код своей новой стартовой темы Theme Redone , которая предлагает основу для создания веб-сайтов и блоков Gutenberg с помощью MVC-фреймворка:

Мы черпали вдохновение в Laravel и других подобных проектах, которые действительно умело подошли к этому аспекту кодирования и упростили организацию и анализ кода.

В Laravel мы напишем старый добрый PHP для логики, а затем воспользуемся шаблонами Blade для уровня представления. У нас также есть файлы моделей, представлений и контроллеров, чтобы разделить задачи и организовать код логично и эффективно. Мы приняли тот же подход, но в контексте среды WordPress. Концептуально способ организации кода похож на Laravel, но с некоторыми отличиями.

Theme Redone привносит этот подход в блочные файлы Gutenberg, идентифицируя файлы model.json , controller.php и view.latte . Он использует механизм шаблонов Latte. Файл JSON содержит схемы полей с данными, переданными в controller.php, где их можно отфильтровать или изменить перед передачей в view.latte для рендеринга во внешнем интерфейсе.

Стартовая тема использует Gulp 4 и ESBuild для компиляции и просмотра задач, настроенных для поддержки React, Svelte, Vue и Petite Vue из коробки. Его страница GitHub суммирует все, что включено в структуру:

• Механизм шаблонов Latte за красивый синтаксис и более оптимизированный и управляемый рабочий процесс.
•  Задачи EsBuild/Webpack + Gulp для компиляции SCSS и JS
•  SCSS (структура папок/файлов SMACSS)
•  Javascript (поддержка ES8 и React/Svelte/Vue, благодаря EsBuild и Babel)
•  Встроенная  среда для построения блоков Гутенберга упрощенным и стандартизированным способом.
• Помощник TRB CLI для создания новых блоков Гутенберга
• Простая сеточная система, закодированная с помощью переменных Flex и CSS (около 15 строк кода)
• Вспомогательные функции для повторяющихся задач, таких как рендеринг изображений, ссылок, кода SVG и т. д.
•  Всего несколько  хорошо написанных компонентов пользовательского интерфейса для начала работы (мы не любим раздуваться в нашем коде): модальные окна, аккордеон, вкладки, меню, выпадающие списки, ползунки и простые плавные переходы «в поле зрения».
• Поддержка SVG
• Tracy Debugger   , чтобы помочь нам убедиться, что мы пишем стабильный и безошибочный код.

WebREDONE разработала быстрый способ создания новых блоков с помощью пакета NPM TRB CLI (Theme Redone Blocks) , который мгновенно создает новый блок с помощью одной команды терминала. Он включает в себя настраиваемый пользовательский интерфейс вместе с изображением предварительного просмотра блока. Пользовательский интерфейс выглядит неуместным внутри редактора блоков и несколько более ограничен с точки зрения элементов управления, доступных пользователям. Это может не иметь значения, если агентство создает сайты, которые не редактируются пользователями, но это кажется запутанным.

Создатели темы также написали 50 страниц документации в течение двух месяцев, в том числе о том, как начать работу, работать с файлами шаблонов, вспомогательными функциями темы, блочной структурой в рамках и многое другое.

Theme Redone — это самоуверенная стартовая тема. WebREDONE решил поделиться им, потому что это экономит время агентства. Это может сработать не для всех, но интересно наблюдать, как различные агентства развивают свои инструменты для более эффективного создания веб-сайтов в эпоху блокировок. Ознакомьтесь с Theme Redone на GitHub для получения подробных инструкций по установке.