Modal & Offcanvas – это два таких популярных паттерна организации контента на сайтах и в веб приложениях, которые часто используются в современных компаниях типа Amazon, GitHub, Notion etc. Решил сделать аналог для WordPress и Gutenberg.

примеры

процесс

За основу решил взять компоненты Bootstrap CSS – Modal & Offcanvas. Они хорошо проработаны и достаточно легко интегрируются в WordPress.

Далее встал вопрос как и чем собирать фронтенд? В последнее время все чаще мелькал новый билдер – ViteJS. Пришлось чуть поразбираться, но в итоге удалось хорошо интегрировать Bootstrap & WordPress, таким образом чтобы все было современно, и в систему попадал не весь тяжелый фреймворк, а только нужные составляющие, чтобы получить минимальный CSS & JS на выходе.

• конфиг Vite https://github.com/uptimizt/modaler/blob/main/vite.config.js
• конфиг main.js и чуть чуть логики https://github.com/uptimizt/modaler/blob/main/main.js
• подключение только нужных SCSS https://github.com/uptimizt/modaler/blob/main/style.scss

Надо сказать что опыт с ViteJS оказался позитивным. До этого опыта мне не удавалось так системно и атомарно пилить Bootstrap под задачу и оптимизировать вес фронта. Тут же это получилось достаточно быстро и элегантно.

результат

Пока первая версия позволяет собирать блоки, модалки, вылетающие сайдбары на базе Гутенберга.

• Затем рендер выводится через шорткод и по умолчанию как положено скрыт
• Далее через hash можно добавить открытие к любой ссылке по инструкции
• После чего нажимая на соответствующую кнопку или ссылку – открывается модал или выезжающий сайдбар

Еще стили чуть едут, но это первая версия. Далее надеюсь будут кейсы где все это обкатается, отпалируется и можно будет публиковать.