WP_Theme_JSON::get_block_styles( array $style_nodes, array $setting_nodes ): string

In this article

This function’s access is marked private. This means it is not intended for use by plugin or theme developers, only in other core functions. It is listed here for completeness.

Converts each style section into a list of rulesets containing the block styles to be appended to the stylesheet.


See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax

For each section this creates a new ruleset such as:

block-selector { style-property-one: value; }

Additionally, it’ll also create new rulesets as classes for each preset value such as:

.has-value-color {
  color: value;

.has-value-background-color {
  background-color: value;

.has-value-font-size {
  font-size: value;

.has-value-gradient-background {
  background: value;

p.has-value-gradient-background {
  background: value;


Nodes with styles.
Nodes with settings.


string The new stylesheet.


	'heading' => 'h1, h2, h3, h4, h5, h6',
	'h1'      => 'h1',
	'h2'      => 'h2',
	'h3'      => 'h3',
	'h4'      => 'h4',
	'h5'      => 'h5',
	'h6'      => 'h6',
	// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
	'button'  => '.wp-element-button, .wp-block-button__link',
	// The block classes are necessary to target older content that won't use the new class names.
	'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
	'cite'    => 'cite',

	'button'  => 'wp-element-button',
	'caption' => 'wp-element-caption',

 * List of block support features that can have their related styles
 * generated under their own feature level selector rather than the block's.
 * @since 6.1.0
 * @var string[]



User Contributed Notes

You must log in before being able to contribute a note or feedback.