Вопрос или проблема
Я создаю блок, который имеет разные макеты для мобильных и настольных устройств. Насколько я понимаю, медиазапросы CSS работают, когда размер области просмотра меняется.
Функция предварительного просмотра в Gutenberg на самом деле не изменяет размер области просмотра, она просто уменьшает ширину контейнера, содержащего блоки.
Я заметил, что основной блок Gutenberg “Галерея” меняет свой макет при переключении между настольными и мобильными режимами предварительного просмотра. Мне было интересно, как это работает? Я проверил исходный код и даже проверил инструменты разработчика, чтобы обнаружить добавление/удаление CSS классов, но не нашёл никаких.
Может кто-нибудь прояснить ситуацию, пожалуйста?
Я исследовал состояния, установленные с помощью инструментов разработчика React, и нашёл, что режимы предварительного просмотра устанавливаются под ключом deviceType. Просмотрел исходный код Gutenberg и наткнулся на функцию __experimentalGetPreviewDeviceType.
/**
* Возвращает текущий deviceType.
*/
const { deviceType } = useSelect( select => {
const { __experimentalGetPreviewDeviceType } = select( 'core/edit-post' );
return {
deviceType: __experimentalGetPreviewDeviceType(),
}
}, [] );
Я использую это для условной установки CSS классов. Это сработало для меня, и я надеюсь, что блок Галерея работает так же.
Для тех, кто смотрит на этот вопрос с WordPress 6.3 или новее, Gutenberg переходит на новый редактор с IFRAME, который помещает редактируемое содержимое в IFRAME, так что медиазапросы теперь должны работать правильно. Однако новый редактор работает только если все зарегистрированные блоки используют API v3, поэтому вам нужно проверить ваши плагины на предмет старых блоков, если вы хотите воспользоваться этим новым режимом.
Ответ или решение
Вопрос: Как работает предварительный просмотр мобильных, планшетных и десктопных версий в Gutenberg с учетом медиа-запросов?
Во-первых, важно отметить, что в Gutenberg действительно реализована возможность предварительного просмотра блоков с разными раскладками для мобильных и десктопных устройств. В общей практике мы привыкли, что медиа-запросы в CSS активируются при изменении размеров вьюпорта. Однако в Gutenberg это работает немного иначе. Вместо изменения размера самого вьюпорта, Gutenberg уменьшает ширину контейнера, в котором находятся блоки. Это приводит к тому, что блоки автоматически адаптируются к новому размеру, как если бы вьюпорт был изменен, но фактически сам браузер остается неизменным.
Как вы уже заметили, некоторые блоки, такие как блок "Галерея", изменяют свое отображение при переключении между режимами предварительного просмотра. Это происходит благодаря использованию функции __experimentalGetPreviewDeviceType, которая возвращает текущее состояние deviceType. Эта функция позволяет разработчикам определять, какой тип устройства отображается в данный момент (мобильный или десктопный) и соответственно применять различные CSS-классы.
Пример кода с использованием React Dev Tools показывает, как можно получить текущее значение deviceType:
const { deviceType } = useSelect(select => {
const { __experimentalGetPreviewDeviceType } = select('core/edit-post');
return {
deviceType: __experimentalGetPreviewDeviceType(),
};
}, []);Эта логика позволяет условно задавать CSS-классы в зависимости от текущего типа устройства. Таким образом, при переключении в режиме предварительного просмотра выбор класса осуществляется не автоматически, а программно на основании состояния приложения, что позволяет добиться необходимой реактивности компонентов без использования дополнительных медиа-запросов.
Важно также отметить, что начиная с версии WordPress 6.3, Gutenberg переходит на новую редакторскую среду с использованием IFRAME. Этот переход подразумевает, что все редактируемые материалы помещаются в IFRAME, что приводит к более точному применению медиа-запросов. Тем не менее, чтобы воспользоваться новой функцией, все зарегистрированные блоки должны использовать версию API v3, поэтому разработчикам следует проверить свои плагины на наличие устаревших блоков.
Таким образом, система предварительного просмотра в Gutenberg адаптирована под нужды разработчиков и пользователей, и хотя она может показаться несколько нестандартной, ее применение позволяет добиться высокой степени адаптивности без дополнительных накладных расходов.
Для более подробной информации, пожалуйста, ознакомьтесь с официальной документацией о изменениях в редакторе WordPress 6.3.
Это современное решение, позволяющее разработчикам более эффективно управлять стилями и макетом, обеспечивая при этом удобный интерфейс для пользователей.