Как настроить ширину контента в Гутенберг
По умолчанию ширина контента для редактора блоков (гутенберг) при редактировании записи всего 610px. И это может выглядеть нормально и удобно, пожалуй только на планшетах.
В темах с поддержкой Гутенберга такой проблемы как правило нет, потому что там стили прописаны для каждого блока и редактора в целом. Однако при работе в редакторе блоков на большом экране с темой без поддержки гутенберга или при создании своей темы сразу же хочется увеличить максимальную ширину блоков. Давайте разберемся как это делается - это просто.
Исправляем ширину
C WP 5.8
Это можно сделать через файль theme.json. Создайте файл theme.json в вашей теме и поместите в него такой код:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "1040px",
"wideSize": "1100px"
}
}
}
До WP 5.8
Для этого нужно включить поддержку произвольных стилей для редактора блоков.
Добавляем следующий код в файл темы functions.php:
add_action( 'after_setup_theme', 'gutenberg_setup_theme' );
function gutenberg_setup_theme(){
// подключение кастомных стилей для гутенберга
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
}
Теперь создаем файл editor-style.css в корне темы и добавляем туда нужные стили: ширину колонки:
.wp-block {
max-width: 960px;
}
Подробнее про все эти манипуляции со стилями читайте в описании функции add_editor_style() и в описании функции темы add_theme_support( 'editor-styles' ).
Файл editor-style.css можно создать как в родительской так и в дочерней теме, а можно и там и там, все они будут подключены.
Можно указать другой путь файла стилей в параметре функции add_editor_style(). Например разместим его в папке темы css:
add_editor_style( 'css/editor-style.css' );
Какую ширину выставлять?
Тут все просто, выбирайте комфортные для вашего монитора значения. В идеале, нужно настроить все стили также как на сайте и ширину контента поставить как на фронтэнде. Так вы сразу будите видеть как выглядит ваша текст.