wp_get_global_stylesheet() │ WP 5.9.0

Получает готовый CSS-код из смерженных данных theme.json, вариаций стилей и кастомных настроек пользователя.

Функция собирает пресеты (палитры, масштабы, границы и т. д.), переменные и другие объявления из theme.json, учитывает кастомные правки в панели «Глобальные стили», а затем превращает их в CSS строку.

// add wp_get_global_stylesheet( [ 'variables' ] )
add_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_css_custom_properties' );

Хуков нет.

Возвращает

string. CSS-строку глобальных стилей темы.

Использование

wp_get_global_stylesheet( $types );

$types(array)

Массив сегментов, которые нужно включить в вывод. Передавая нужные сегменты, можно сократить объём стилей, если требуется только часть.

Возможные сегменты:

• variables — только CSS-переменные (Custom Properties) для пресетов и пользовательских значений.
• styles — только содержимое секции styles в theme.json.
• presets — только CSS-классы для пресетов.
• base-layout-styles — только базовые стили раскладки.
• custom-css — только пользовательский CSS.

Если указать пустой массив (по-умолчанию), то будут получены следующие сегменты:

• Для тем без theme.json: variables, presets, base-layout-styles.
• Для тем с theme.json: variables, presets, styles.

Допустимые значения совпадают с первым аргументом метода WP_Theme_JSON::get_stylesheet().

По умолчанию: []

Примеры

#1 Демо

Результат зависит от параметров theme.json и настроект стилей.

variables:

echo wp_get_global_stylesheet( [ 'variables' ] );

:root {
	--wp--preset--aspect-ratio--square: 1;
	--wp--preset--aspect-ratio--4-3: 4/3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	//...
}

presets:

echo wp_get_global_stylesheet( [ 'presets' ] );

.has-black-color {
	color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
	color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

//...

styles:

echo wp_get_global_stylesheet( [ 'styles' ] );

:root {
	--wp--style--global--content-size: var(--layout-content-width);
	--wp--style--global--wide-size: var(--layout-wide-content-width);
}

:where(body) {
	margin: 0;
}

:root :where(.is-layout-flex) {
	gap: var(--space-lg);
}

:root :where(.is-layout-grid) {
	gap: var(--space-lg);
}

.wp-site-blocks {
	padding-top: var(--wp--style--root--padding-top);
	padding-bottom: var(--wp--style--root--padding-bottom);
}

.is-layout-flow > .alignleft {
	float: left;
	margin-inline-start: 0;
	margin-inline-end: 2em;
}

.is-layout-flow > .alignright {
	float: right;
	margin-inline-start: 2em;
	margin-inline-end: 0;
}

.is-layout-flow > .aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > .alignleft {
	float: left;
	margin-inline-start: 0;
	margin-inline-end: 2em;
}

.is-layout-constrained > .alignright {
	float: right;
	margin-inline-start: 2em;
	margin-inline-end: 0;
}

.is-layout-constrained > .aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

body .is-layout-flex {
	display: flex;
}

.is-layout-flex {
	flex-wrap: wrap;
	align-items: center;
}

.is-layout-flex > :is(*, div) {
	margin: 0;
}

body .is-layout-grid {
	display: grid;
}

.is-layout-grid > :is(*, div) {
	margin: 0;
}

body {
	background-color: var(--color-surface-primary);
	color: var(--color-content-primary);
	font-family: var(--font-family-basic);
	font-size: var(--font-size-lg);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-normal);
	--wp--style--root--padding-top: 0px;
	--wp--style--root--padding-right: var(--space-2xl);
	--wp--style--root--padding-bottom: 0px;
	--wp--style--root--padding-left: var(--space-2xl);
}

a:where(:not(.wp-element-button)) {
	color: currentColor;
	text-decoration: underline;
}

:root :where(a:where(:not(.wp-element-button)):hover) {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headers);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
}

h1 {
	font-size: var(--font-size-7xl);
}

:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: #32373c;
	border-width: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

// ...