Вопрос или проблема
До блоков Гутенберга мы добавляли стили редактора, используя
add_editor_style( array( 'path/to/editor-style.css', 'whatever.css' ) );
Теперь у нас есть редактор Гутенберга, ч stylesheet также загружается с помощью той же функции.
Что если мы хотим сохранить стили для обоих? Я спрашиваю, потому что есть плагины, которые позволяют пользователям отключать Гутенберг. Очевидно, что невозможно сделать что-то вроде:
add_editor_style( array( 'editor-style-mce.css', 'editor-style-gutenberg.css' ) );
Чтобы сделать все более сложным для разработчиков, есть возможность использовать классический редактор как блок Гутенберга.
Похоже, нам нужно проверять доступность Гутенберга в действии after_setup_theme и загружать соответствующий стиль редактора, но мы не можем сделать много, когда классический редактор используется как блок Гутенберга.
Есть ли кто-нибудь, кто может предложить какое-то решение?
Вам нужно вызвать add_theme_support( 'editor-styles' ) в хуке after_setup_theme.
Ответ или решение
Когда речь идет о добавлении стилей редактора для обоих редакторов WordPress — TinyMCE и Gutenberg — необходимо учитывать несколько особенностей платформы. В этой статье мы подробно разберем, как корректно внедрить стили, чтобы они были доступны как в классовом редакторе, так и в Gutenberg, обеспечив совместимость и адаптивность.
1. Использование add_theme_support('editor-styles')
Первый шаг — это активировать поддержку стилей редактора для вашей темы. Это можно сделать, добавив следующий код в файл functions.php вашей темы:
function theme_setup() {
add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'theme_setup');Этот код активирует возможность добавления стилей в редактор.
2. Регистрация стилей
Чтобы добавить разные стили для TinyMCE и Gutenberg, используйте функцию add_editor_style(). Введите следующее:
function my_custom_editor_styles() {
// Подключение стилей для Gutenberg
if (has_block_editor()) {
add_theme_support('editor-styles');
add_editor_style('path/to/editor-style-gutenberg.css');
} else {
// Подключение стилей для классического редактора
add_editor_style('path/to/editor-style-mce.css');
}
}
add_action('enqueue_block_editor_assets', 'my_custom_editor_styles');3. Условия для выбора стилей
Как было упомянуто, необходимо учитывать ситуацию, когда классический редактор используется как блок Gutenberg. Это может создать некоторые сложности, но можно использовать is_admin() и дополнительные условия для более точного контроля. Вот обновленный вариант кода:
function my_custom_editor_styles() {
// Проверяем, используется ли Gutenberg
if (is_admin() && isset($_GET['editor'])) {
// Если это Gutenberg редактор
add_editor_style('path/to/editor-style-gutenberg.css');
} else {
// Если это классический редактор
add_editor_style('path/to/editor-style-mce.css');
}
}
add_action('enqueue_block_editor_assets', 'my_custom_editor_styles');
add_action('admin_init', 'my_custom_editor_styles');4. Дополнительные рекомендации
- Кэширование: После внесения изменений в стили следует очищать кэш, чтобы избежать проблем с загрузкой устаревших данных.
- Тестирование на совместимость: Убедитесь, что ваши стили корректно отображаются как в классическом редакторе, так и в Gutenberg. Используйте разные браузеры и устройства для проверки.
- Использование плагинов: Если у вас есть возможность использования плагина, который отключает Gutenberg, убедитесь, что пользователи смогут выбрать желаемый способ редактирования и ваши стили корректно применяются в обоих случаях.
Заключение
Интеграция стилей редактора для обоих редакторов может быть сложной задачей, однако, следуя вышеописанным шагам, вы сможете обеспечить правильное отображение ваших стилей в TinyMCE и Gutenberg. Этот подход даст вам возможность адаптировать вашу тему под пользователей с разными предпочтениями, сохраняя эстетику и функциональность.