Skip to content

Commit 2b1febd

Browse files
jorgefilipecostajorgefilipecosta
committed
Editor: Fix missing frontend section presets output.
Backports PHP changes in WordPress/gutenberg#42124 to the core. Adds the missing mechanism to output frontend styles of block level presets to the core. Props mcsf, oandregal, dmsnell, draganescu. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54305 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 8f3254d commit 2b1febd

File tree

3 files changed

+205
-13
lines changed

3 files changed

+205
-13
lines changed

‎src/wp-includes/block-supports/settings.php‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<?php
2+
/**
3+
* Block level presets support.
4+
*
5+
* @package WordPress
6+
* @since 6.1.0
7+
*/
8+
9+
/**
10+
* Get the class name used on block level presets.
11+
*
12+
* @access private
13+
*
14+
* @param array $block Block object.
15+
* @return string The unique class name.
16+
*/
17+
function _wp_get_presets_class_name( $block ) {
18+
return 'wp-settings-' . md5( serialize( $block ) );
19+
}
20+
21+
/**
22+
* Update the block content with block level presets class name.
23+
*
24+
* @access private
25+
*
26+
* @param string $block_content Rendered block content.
27+
* @param array $block Block object.
28+
* @return string Filtered block content.
29+
*/
30+
function _wp_add_block_level_presets_class( $block_content, $block ) {
31+
if ( ! $block_content ) {
32+
return $block_content;
33+
}
34+
35+
// return early if the block doesn't have support for settings.
36+
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
37+
if ( ! block_has_support( $block_type, array( '__experimentalSettings' ), false ) ) {
38+
return $block_content;
39+
}
40+
41+
// return early if no settings are found on the block attributes.
42+
$block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null );
43+
if ( empty( $block_settings ) ) {
44+
return $block_content;
45+
}
46+
47+
$class_name = _wp_get_presets_class_name( $block );
48+
49+
// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
50+
// Retrieve the opening tag of the first HTML element.
51+
$html_element_matches = array();
52+
preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
53+
$first_element = $html_element_matches[0][0];
54+
// If the first HTML element has a class attribute just add the new class
55+
// as we do on layout and duotone.
56+
if ( strpos( $first_element, 'class="' ) !== false ) {
57+
$content = preg_replace(
58+
'/' . preg_quote( 'class="', '/' ) . '/',
59+
'class="' . $class_name . ' ',
60+
$block_content,
61+
1
62+
);
63+
} else {
64+
// If the first HTML element has no class attribute we should inject the attribute before the attribute at the end.
65+
$first_element_offset = $html_element_matches[0][1];
66+
$content = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
67+
}
68+
69+
return $content;
70+
}
71+
72+
/**
73+
* Render the block level presets stylesheet.
74+
*
75+
* @access private
76+
*
77+
* @param string|null $pre_render The pre-rendered content. Default null.
78+
* @param array $block The block being rendered.
79+
*
80+
* @return null
81+
*/
82+
function _wp_add_block_level_preset_styles( $pre_render, $block ) {
83+
// Return early if the block has not support for descendent block styles.
84+
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
85+
if ( ! block_has_support( $block_type, array( '__experimentalSettings' ), false ) ) {
86+
return null;
87+
}
88+
89+
// return early if no settings are found on the block attributes.
90+
$block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null );
91+
if ( empty( $block_settings ) ) {
92+
return null;
93+
}
94+
95+
$class_name = '.' . _wp_get_presets_class_name( $block );
96+
97+
// the root selector for preset variables needs to target every possible block selector
98+
// in order for the general setting to override any bock specific setting of a parent block or
99+
// the site root.
100+
$variables_root_selector = '*,[class*="wp-block"]';
101+
$registry = WP_Block_Type_Registry::get_instance();
102+
$blocks = $registry->get_all_registered();
103+
foreach ( $blocks as $block_type ) {
104+
if (
105+
isset( $block_type->supports['__experimentalSelector'] ) &&
106+
is_string( $block_type->supports['__experimentalSelector'] )
107+
) {
108+
$variables_root_selector .= ',' . $block_type->supports['__experimentalSelector'];
109+
}
110+
}
111+
$variables_root_selector = WP_Theme_JSON::scope_selector( $class_name, $variables_root_selector );
112+
113+
// Remove any potentially unsafe styles.
114+
$theme_json_shape = WP_Theme_JSON::remove_insecure_properties(
115+
array(
116+
'version' => WP_Theme_JSON::LATEST_SCHEMA,
117+
'settings' => $block_settings,
118+
)
119+
);
120+
$theme_json_object = new WP_Theme_JSON( $theme_json_shape );
121+
122+
$styles = '';
123+
124+
// include preset css variables declaration on the stylesheet.
125+
$styles .= $theme_json_object->get_stylesheet(
126+
array( 'variables' ),
127+
null,
128+
array(
129+
'root_selector' => $variables_root_selector,
130+
'scope' => $class_name,
131+
)
132+
);
133+
134+
// include preset css classes on the the stylesheet.
135+
$styles .= $theme_json_object->get_stylesheet(
136+
array( 'presets' ),
137+
null,
138+
array(
139+
'root_selector' => $class_name . ',' . $class_name . ' *',
140+
'scope' => $class_name,
141+
)
142+
);
143+
144+
if ( ! empty( $styles ) ) {
145+
wp_enqueue_block_support_styles( $styles );
146+
}
147+
148+
return null;
149+
}
150+
151+
add_filter( 'render_block', '_wp_add_block_level_presets_class', 10, 2 );
152+
add_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10, 2 );

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 52 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -773,7 +773,7 @@ protected static function get_blocks_metadata() {
773773
static::$blocks_metadata[ $block_name ]['features'] = $features;
774774
}
775775

776-
// Assign defaults, then overwrite those that the block sets by itself.
776+
// Assign defaults, then override those that the block sets by itself.
777777
// If the block selector is compounded, will append the element to each
778778
// individual block selector.
779779
$block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
@@ -866,11 +866,13 @@ public function get_settings() {
866866
* @param array $types Types of styles to load. Will load all by default. It accepts:
867867
* - `variables`: only the CSS Custom Properties for presets & custom ones.
868868
* - `styles`: only the styles section in theme.json.
869-
* - `presets`: only the classes for the presets.
870-
* @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
869+
* - `presets`: only the classes for the presets. @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
870+
* @param array $options An array of options for now used for internal purposes only (may change without notice).
871+
* The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
872+
* and root_selector which overwrites and forces a given selector to be used on the root node.
871873
* @return string Stylesheet.
872874
*/
873-
public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null ) {
875+
public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
874876
if ( null === $origins ) {
875877
$origins = static::VALID_ORIGINS;
876878
}
@@ -891,30 +893,58 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
891893
$style_nodes = static::get_style_nodes( $this->theme_json, $blocks_metadata );
892894
$setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
893895

896+
$root_style_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
897+
$root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
898+
899+
if ( ! empty( $options['scope'] ) ) {
900+
foreach ( $setting_nodes as &$node ) {
901+
$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
902+
}
903+
foreach ( $style_nodes as &$node ) {
904+
$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
905+
}
906+
}
907+
908+
if ( ! empty( $options['root_selector'] ) ) {
909+
if ( false !== $root_settings_key ) {
910+
$setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
911+
}
912+
if ( false !== $root_style_key ) {
913+
$setting_nodes[ $root_style_key ]['selector'] = $options['root_selector'];
914+
}
915+
}
916+
894917
$stylesheet = '';
895918

896919
if ( in_array( 'variables', $types, true ) ) {
897920
$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
898921
}
899922

900923
if ( in_array( 'styles', $types, true ) ) {
901-
$root_block_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
902-
903-
if ( false !== $root_block_key ) {
904-
$stylesheet .= $this->get_root_layout_rules( static::ROOT_BLOCK_SELECTOR, $style_nodes[ $root_block_key ] );
924+
if ( false !== $root_style_key ) {
925+
$stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
905926
}
906927
$stylesheet .= $this->get_block_classes( $style_nodes );
907928
} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
929+
$root_selector = static::ROOT_BLOCK_SELECTOR;
930+
$columns_selector = '.wp-block-columns';
931+
if ( ! empty( $options['scope'] ) ) {
932+
$root_selector = static::scope_selector( $options['scope'], $root_selector );
933+
$columns_selector = static::scope_selector( $options['scope'], $columns_selector );
934+
}
935+
if ( ! empty( $options['root_selector'] ) ) {
936+
$root_selector = $options['root_selector'];
937+
}
908938
// Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
909939
// For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
910940
$base_styles_nodes = array(
911941
array(
912942
'path' => array( 'styles' ),
913-
'selector' => static::ROOT_BLOCK_SELECTOR,
943+
'selector' => $root_selector,
914944
),
915945
array(
916946
'path' => array( 'styles', 'blocks', 'core/columns' ),
917-
'selector' => '.wp-block-columns',
947+
'selector' => $columns_selector,
918948
'name' => 'core/columns',
919949
),
920950
);
@@ -1365,18 +1395,27 @@ protected static function compute_preset_classes( $settings, $selector, $origins
13651395
* @param string $selector Original selector.
13661396
* @return string Scoped selector.
13671397
*/
1368-
protected static function scope_selector( $scope, $selector ) {
1398+
public static function scope_selector( $scope, $selector ) {
13691399
$scopes = explode( ',', $scope );
13701400
$selectors = explode( ',', $selector );
13711401

13721402
$selectors_scoped = array();
13731403
foreach ( $scopes as $outer ) {
13741404
foreach ( $selectors as $inner ) {
1375-
$selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner );
1405+
$outer = trim( $outer );
1406+
$inner = trim( $inner );
1407+
if ( ! empty( $outer ) && ! empty( $inner ) ) {
1408+
$selectors_scoped[] = $outer . ' ' . $inner;
1409+
} elseif ( empty( $outer ) ) {
1410+
$selectors_scoped[] = $inner;
1411+
} elseif ( empty( $inner ) ) {
1412+
$selectors_scoped[] = $outer;
1413+
}
13761414
}
13771415
}
13781416

1379-
return implode( ', ', $selectors_scoped );
1417+
$result = implode( ', ', $selectors_scoped );
1418+
return $result;
13801419
}
13811420

13821421
/**

‎src/wp-settings.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,7 @@
322322
require ABSPATH . WPINC . '/block-patterns.php';
323323
require ABSPATH . WPINC . '/class-wp-block-supports.php';
324324
require ABSPATH . WPINC . '/block-supports/utils.php';
325+
require ABSPATH . WPINC . '/block-supports/settings.php';
325326
require ABSPATH . WPINC . '/block-supports/align.php';
326327
require ABSPATH . WPINC . '/block-supports/border.php';
327328
require ABSPATH . WPINC . '/block-supports/colors.php';

0 commit comments

Comments
 (0)