WordPress как на ладони

Как настроить ширину контента в Гутенберг

По умолчанию ширина контента для редактора блоков (гутенберг) при редактировании записи всего 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' );

Какую ширину выставлять?

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

9 комментариев
    Войти