Вопрос или проблема
До блоков Гутенберга мы добавляли стили редактора, используя
add_editor_style( array( 'path/to/editor-style.css', 'whatever.css' ) );
Сейчас у нас есть редактор Гутенберг, чей файл стилей также загружается с использованием той же функции.
Что делать, если мы хотим сохранить стили для обоих? Спрашиваю, потому что есть плагины, которые позволяют пользователям отключать Гутенберг. Очевидно, что невозможно сделать что-то вроде:
add_editor_style( array( 'editor-style-mce.css', 'editor-style-gutenberg.css' ) );
Чтобы усложнить жизнь разработчикам, есть возможность использовать классический редактор как блок Гутенберга. Похоже, мы должны проверять доступность Гутенберга в действии after_setup_theme и соответственно загружать правильный файл стилей редактора, но мы мало что можем сделать, когда классический редактор используется как блок Гутенберга.
Есть ли кто-то, кто может предложить какое-либо решение?
Вам нужно вызвать add_theme_support( 'editor-styles' ) в хуке after_setup_theme.
Ответ или решение
В начале важно понять, что с появлением редактора Gutenberg в WordPress подход к добавлению пользовательских стилей претерпел значительные изменения. Ранее мы использовали функцию add_editor_style(), чтобы добавить CSS-стили к старому редактору TinyMCE, но с введением Gutenberg требования изменились.
Теория
Исторически функция add_editor_style() использовалась для подключения пользовательского CSS к TinyMCE в классическом редакторе WordPress. Она принимала массив путей к файлам стилей, которые вы хотели загрузить в редактор. Однако, с переходом на Gutenberg, более комплексный блоковый редактор, необходимо управлять стилями по-другому. Gutenberg требует подключения стилей, чтобы обеспечить единообразный вид и ощущение как в редакторе, так и в пользовательской части сайта.
Для того чтобы ваш сайт был готов к различным сценариям работы с контентом — будь то с помощью Gutenberg, классического редактора или даже в случае, когда классический редактор используется как блок Gutenberg — необходимо включить поддержку стилей для редактора, правильно загрузив соответствующие файлы стилей. Gutenberg использует add_theme_support('editor-styles') вместе с add_editor_style(), чтобы обеспечить поддержку блоков.
Пример
В реальной практике это может выглядеть следующим образом:
-
В файле функций темы (
functions.php) добавьте поддержку стилей редактора для Gutenberg, используяadd_theme_support('editor-styles'). -
Затем определите два разных файла стилей: один для TinyMCE (
editor-style-mce.css), а другой для Gutenberg (editor-style-gutenberg.css). -
Вам нужно будет создать условия для их выбора в зависимости от того, какой редактор используется в данный момент. Однако, помните, что Gutenberg может использоваться совместно с классическим редактором в виде блока, что делает определение условия сложнее.
function my_theme_setup() {
add_theme_support('editor-styles');
add_editor_style(array('editor-style-mce.css', 'editor-style-gutenberg.css'));
// Подключаем стили для Gutenberg
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_style('theme-gutenberg-editor-styles', get_template_directory_uri() . '/editor-style-gutenberg.css');
});
}
add_action('after_setup_theme', 'my_theme_setup');Применение
Проблемы, возникающие с использованием нескольких редакторов, решаются путем индивидуального подхода к настройке стилей для каждого редактора. Это достигается с помощью wp_enqueue_style() и специфических условий загрузки стилей.
Если пользователь вашего сайта отключит Gutenberg или использует плагин, возвращающий классический редактор, стили для TinyMCE по-прежнему будут применяться через add_editor_style(). Для Gutenberg стили будут автоматом применяться через хук enqueue_block_editor_assets. Это позволяет сохранить одинаковый дизайн в редакторе и на фронтальной части сайта независимо от предпочтений пользователя или установленных плагинов.
Однако важным моментом остается применение кастомных стилей. Разработчикам нужно учитывать, что стили должны поддерживать не только верстку контента, но и взаимодействие пользователя с различными блоками, будь то базовые текстовые блоки или сложные мультимедийные элементы. Ваши CSS-стили должны быть адаптированы для работы в различных условиях. Это может включать использование CSS custom properties и flexbox/grid для лучшего управления макетом.
Подобный подход обеспечивает уверенность в том, что вне зависимости от выбранного редактора пользователем или от комбинации редакторов, ваш сайт и контент останутся визуально привлекательными и функциональными.