WP_Theme_JSON::get_block_classes() WordPress Method
The WP_Theme_JSON::get_block_classes() method is used to retrieve an array of class names for the blocks in a theme.
WP_Theme_JSON::get_block_classes( array $style_nodes ) #
Converts each style section into a list of rulesets containing the block styles to be appended to the stylesheet.
Description
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; }
Parameters
- $style_nodes
(array)(Required)Nodes with styles.
Return
(string) The new stylesheet.
Source
File: wp-includes/class-wp-theme-json.php
protected function get_block_classes( $style_nodes ) {
$block_rules = '';
foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
$declarations = static::compute_style_properties( $node, $settings );
// 1. Separate the ones who use the general selector
// and the ones who use the duotone selector.
$declarations_duotone = array();
foreach ( $declarations as $index => $declaration ) {
if ( 'filter' === $declaration['name'] ) {
unset( $declarations[ $index ] );
$declarations_duotone[] = $declaration;
}
}
/*
* Reset default browser margin on the root body element.
* This is set on the root selector **before** generating the ruleset
* from the `theme.json`. This is to ensure that if the `theme.json` declares
* `margin` in its `spacing` declaration for the `body` element then these
* user-generated values take precedence in the CSS cascade.
* @link https://github.com/WordPress/gutenberg/issues/36147.
*/
if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= 'body { margin: 0; }';
}
// 2. Generate the rules that use the general selector.
$block_rules .= static::to_ruleset( $selector, $declarations );
// 3. Generate the rules that use the duotone selector.
if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
$selector_duotone = static::scope_selector( $metadata['selector'], $metadata['duotone'] );
$block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone );
}
if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
if ( $has_block_gap_support ) {
$block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
$block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
}
}
}
return $block_rules;
}
Expand full source codeCollapse full source codeView on TracView on GitHub
Changelog
| Version | Description |
|---|---|
| 5.9.0 | Renamed from get_block_styles() to get_block_classes() and no longer returns preset classes. Removed the $setting_nodes parameter. |
| 5.8.0 | Introduced. |