Block Responsive – Make Editor Blocks Responsive Easily

Плагин WordPress для создания мобильных и адаптивных сайтов с помощью блоков Gutenberg. Этот комплексный инструмент адаптивного дизайна дает полный контроль над тем, как ваш контент отображается на всех устройствах, и позволяет легко собирать адаптивные макеты без знаний кода.

Идеально подходит для создания мобильных адаптивных сайтов: плагин автоматически добавляет адаптивные брейкпоинты и параметры стилизации для каждого базового блока WordPress. Оптимизируете ли вы сайт под мобильное SEO, улучшаете опыт на планшетах или тонко настраиваете отображение на десктопе - Block Responsive дает все нужные инструменты адаптивного веб-дизайна.

Автор:

  • Sheikh Ashrafuzzman - GitHub

Возможности

📱 Управление отображением

  • Скрывать/показывать блоки на конкретных устройствах (мобильные, планшеты, десктоп)
  • Простые переключатели с иконками для каждого устройства
  • Визуальная индикация скрытых блоков

🎨 Адаптивные настройки стилей

  • Управление выравниванием: настройки выравнивания блока для разных размеров экрана
  • Управление цветами: цвет текста, фон и цвет ссылок с настройками для каждого устройства
  • Управление фоновым изображением: адаптивные настройки фонового изображения
  • Управление типографикой: размер шрифта, высота строки, межбуквенное расстояние и преобразование текста для каждого устройства
  • Управление размерами: отступы (padding), поля (margin), ширина и высота для адаптивных макетов
  • Управление границами и тенью: радиус скругления, толщина границы и эффекты тени для каждого устройства

Как это работает

  • Интеграция в инспектор блока: адаптивные настройки появляются в панели инспектора блока
  • Настройки для конкретных устройств: задавайте разные стили для мобильных, планшетов и десктопа
  • Предпросмотр в реальном времени: изменения видны сразу в редакторе
  • Рендеринг на фронтенде: автоматически генерирует и применяет адаптивный CSS

FAQ

Как получить доступ к адаптивным настройкам?

После активации плагина откройте любую запись или страницу в редакторе Gutenberg. Выберите любой блок и найдите панель Block Responsive в инспекторе блока (правая боковая панель). Там вы увидите различные адаптивные настройки, сгруппированные по категориям.

Какие блоки поддерживают адаптивные настройки?

Плагин работает со всеми базовыми блоками Gutenberg (блоки, которые начинаются с core/) и блоками WooCommerce (блоки, которые начинаются с woocommerce/). Это включает абзацы, заголовки, изображения, кнопки, колонки, сетки товаров, блоки корзины, блоки оформления заказа и многое другое.

Влияет ли это на мой существующий контент?

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

Есть ли влияние на производительность?

Плагин оптимизирован для производительности. Он загружает только необходимые скрипты и стили в редакторе и генерирует минимальный CSS для фронтенда.

Можно ли отключить адаптивные настройки для конкретных блоков?

Сейчас адаптивные настройки доступны для всех базовых блоков. В будущих версиях могут появиться опции для отключения настроек для отдельных блоков.

Что будет, если деактивировать плагин?

Ваш контент останется без изменений, но любые адаптивные стили, примененные через плагин, перестанут отображаться. Блоки будут показываться со стилями по умолчанию.

Предложения

Напишите мне на hello@ashrafuzzaman.com - буду рад вашим идеям!