Размеры шрифтов в редакторе Gutenberg

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

Этот пост – про создание темы с поддержкой Gutenberg, если же вы хотели бы научиться создавать блоки для редактора Gutenberg, то рекомендую мой видеокурс.

По умолчанию, если вы создали пустую тему для Gutenberg, то там будет доступен подобный набор шрифтов:

Gutenberg размеры шрифтов по умолчанию

Как видите на скриншоте, у нас по сути есть три выбора – либо выбрать предопределённый зарегистрированный размер шрифта из выпадающего списка, либо указать произвольный размер в поле рядом, либо не выбирать ничего.

Если мы выбираем зарегистрированный размер, то это будет так выглядеть в HTML:

<p class="has-large-font-size">Добро пожаловать в WordPress. Это ваша первая запись.</p>

Если указываем произвольный размер, то он будет вписываться в инлайн-стили:

<p style="font-size:24px">Добро пожаловать в WordPress. Это ваша первая запись.</p>

Теперь давайте попробуем что-нибудь сделать с этими размерами.

Отключаем произвольный выбор размера шрифта

Допустим вы не любите инлайн стили, либо же не хотите давать возможность клиенту указать 150px размер шрифта и сломать сайт, тогда поле произвольного выбора размера шрифта можно отключить всего лишь одной строчкой кода:

add_theme_support( 'disable-custom-font-sizes' );
  • И снова мы делаем что-то для Gutenberg функцией add_theme_support(), можете ещё вставить её внутрь хука after_setup_theme.
  • Если не знаете, куда в принципе вставлять код, читайте это.

Результат:

Как отключить произвольный выбор размера шрифта Gutenberg

Регистрируем собственные размеры шрифтов

Регистрация и предустановка собственных размеров шрифтов очень полезна, потому что стили будут предопределены в вашем CSS-файле сайта и сразу же могут содержать стили адаптивной вёрстки.

add_theme_support( 'editor-font-sizes', array(
	array(
		'name'      => 'Маленький',
		'size'      => 12, // в пикселях
		'slug'      => 'true-small'
	),
	array(
		'name'      => 'Большой',
		'size'      => 20, // в пикселях
		'slug'      => 'true-large'
	)
) );

Чтобы вам было нагляднее понять, как изменяется HTML блока при изменении размера шрифта, сделал такой скриншот:

Регистрируем произвольные размеры шрифтов в Gutenberg

Теперь мы можем использовать CSS, чтобы стилизовать размеры шрифтов для блоков с классами .has-true-small-font-size и .has-true-large-font-size, или другими словами .has-{НАЗВАНИЕ РАЗМЕРА}-font-size.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!