Сергей Мочалов

Убираем лишние CSS-переменные в теме WordPress

C появлением Gutenberg и шаблонов с его поддержкой, важным файлом для разработчиков стал theme.json

Это конфигурационный файл шаблона, блочной или гибридной темы, откуда шаблон берет глобальные настройки темы, стилей, типографики, отдельных блоков и прочее…

Так например theme.json имеет определенный набор различных цветов и градиентов, которые по идее через нее же разработчик и настраивает… для чего в файле существуют ключ с разделом "color":

Bash
{
	"version": 3,
	"settings": {
		"color": {
			"background": true,
			"custom": true,
			"customDuotone": true,
			"customGradient": true,
			"defaultDuotone": true,
			"defaultGradients": true,
			"defaultPalette": true,
			"duotone": [],
			"gradients": [],
			"link": true,
			"palette": [],
			"text": true
		}
	}
}

И вот если мы например хотим отключить все это разнообразие и не дать пользователю испортить изменять все элементы и блоки в различные цвета, мы можем задать только нужные нам и отключить лишние (дефолтные), например убрать дефолтные цвета и градиеты:

Bash
{
	"settings": {
		"color": {
			"defaultPalette": false,
			"defaultGradients": false
		}
	}
}

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

Переменные на основе данных цветов все равно присутствуют:

pale-pink
vivid-red
luminous-vivid-orange
luminous-vivid-amber
light-green-cyan
vivid-green-cyan
pale-cyan-blue
vivid-cyan-blue
vivid-purple
very-light-gray
cyan-bluish-gray
very-dark-gray

И на сегодня пока единственный вариант который я вижу это обработка через фильтр wp_theme_json_data_default

Bash
/**
 * Фильтр для дефолтных данных theme.json.
 *
 * Убирает дефолтные пресеты для цветов, градиентов и фильтров.
 * 
 *
 * @param WP_Theme_JSON_Data $theme_json Дефолтные данные из theme.json.
 *
 * @return WP_Theme_JSON_Data Модифицированные данные theme.json.
 */

add_filter( 'wp_theme_json_data_default', function( $theme_json ) {
	// Get JSON data as an array.
	$data = $theme_json->get_data();

	// Remove duotone, gradients, and palette values.
	$data['settings']['color']['duotone']['default']   = [];
	$data['settings']['color']['gradients']['default'] = [];
	$data['settings']['color']['palette']['default']   = [];

	// Update the theme JSON data.
	return $theme_json->update_with( $data );
});

—

← Предыдущая
Следующая→