Skip to content

Commit ac8db41

Browse files
tellthemachinestellthemachines
committed
Editor: add block instance element color support for buttons and headings.
Adds support for buttons and headings to the colors and elements block supports, allowing button and heading element colors to be changed on individual blocks. Props aaronrobertshaw. Fixes #59309. git-svn-id: https://develop.svn.wordpress.org/trunk@56604 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 4bcf32a commit ac8db41

4 files changed

Lines changed: 212 additions & 41 deletions

File tree

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,14 @@ function wp_register_colors_support( $block_type ) {
2121
$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
2222
$has_gradients_support = _wp_array_get( $color_support, array( 'gradients' ), false );
2323
$has_link_colors_support = _wp_array_get( $color_support, array( 'link' ), false );
24+
$has_button_colors_support = _wp_array_get( $color_support, array( 'button' ), false );
25+
$has_heading_colors_support = _wp_array_get( $color_support, array( 'heading' ), false );
2426
$has_color_support = $has_text_colors_support ||
2527
$has_background_colors_support ||
2628
$has_gradients_support ||
27-
$has_link_colors_support;
29+
$has_link_colors_support ||
30+
$has_button_colors_support ||
31+
$has_heading_colors_support;
2832

2933
if ( ! $block_type->attributes ) {
3034
$block_type->attributes = array();

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

Lines changed: 137 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,87 @@ function wp_get_elements_class_name( $block ) {
2323
* Updates the block content with elements class names.
2424
*
2525
* @since 5.8.0
26+
* @since 6.4.0 Added support for button and heading element styling.
2627
* @access private
2728
*
2829
* @param string $block_content Rendered block content.
2930
* @param array $block Block object.
3031
* @return string Filtered block content.
3132
*/
3233
function wp_render_elements_support( $block_content, $block ) {
33-
if ( ! $block_content ) {
34+
if ( ! $block_content || empty( $block['attrs'] ) ) {
3435
return $block_content;
3536
}
3637

37-
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
38-
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
38+
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
39+
40+
$element_color_properties = array(
41+
'button' => array(
42+
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
43+
'paths' => array(
44+
'style.elements.button.color.text',
45+
'style.elements.button.color.background',
46+
'style.elements.button.color.gradient',
47+
),
48+
),
49+
'link' => array(
50+
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
51+
'paths' => array(
52+
'style.elements.link.color.text',
53+
'style.elements.link.:hover.color.text',
54+
),
55+
),
56+
'heading' => array(
57+
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
58+
'paths' => array(
59+
'style.elements.heading.color.text',
60+
'style.elements.heading.color.background',
61+
'style.elements.heading.color.gradient',
62+
'style.elements.h1.color.text',
63+
'style.elements.h1.color.background',
64+
'style.elements.h1.color.gradient',
65+
'style.elements.h2.color.text',
66+
'style.elements.h2.color.background',
67+
'style.elements.h2.color.gradient',
68+
'style.elements.h3.color.text',
69+
'style.elements.h3.color.background',
70+
'style.elements.h3.color.gradient',
71+
'style.elements.h4.color.text',
72+
'style.elements.h4.color.background',
73+
'style.elements.h4.color.gradient',
74+
'style.elements.h5.color.text',
75+
'style.elements.h5.color.background',
76+
'style.elements.h5.color.gradient',
77+
'style.elements.h6.color.text',
78+
'style.elements.h6.color.background',
79+
'style.elements.h6.color.gradient',
80+
),
81+
),
82+
);
83+
84+
$skip_all_element_color_serialization = $element_color_properties['button']['skip'] &&
85+
$element_color_properties['link']['skip'] &&
86+
$element_color_properties['heading']['skip'];
3987

40-
if ( $skip_link_color_serialization ) {
88+
if ( $skip_all_element_color_serialization ) {
4189
return $block_content;
4290
}
4391

44-
$link_color = null;
45-
if ( ! empty( $block['attrs'] ) ) {
46-
$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
47-
}
92+
$element_colors_set = 0;
93+
94+
foreach ( $element_color_properties as $element_config ) {
95+
if ( $element_config['skip'] ) {
96+
continue;
97+
}
4898

49-
$hover_link_color = null;
50-
if ( ! empty( $block['attrs'] ) ) {
51-
$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
99+
foreach ( $element_config['paths'] as $path ) {
100+
if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
101+
$element_colors_set++;
102+
}
103+
}
52104
}
53105

54-
/*
55-
* For now we only care about link colors.
56-
* This code in the future when we have a public API
57-
* should take advantage of WP_Theme_JSON::compute_style_properties
58-
* and work for any element and style.
59-
*/
60-
if ( null === $link_color && null === $hover_link_color ) {
106+
if ( ! $element_colors_set ) {
61107
return $block_content;
62108
}
63109

@@ -90,33 +136,84 @@ function wp_render_elements_support_styles( $pre_render, $block ) {
90136
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
91137
$element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
92138

93-
/*
94-
* For now we only care about link color.
95-
*/
96-
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
139+
if ( ! $element_block_styles ) {
140+
return null;
141+
}
97142

98-
if ( $skip_link_color_serialization ) {
143+
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
144+
$skip_heading_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
145+
$skip_button_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
146+
$skips_all_element_color_serialization = $skip_link_color_serialization &&
147+
$skip_heading_color_serialization &&
148+
$skip_button_color_serialization;
149+
150+
if ( $skips_all_element_color_serialization ) {
99151
return null;
100152
}
101-
$class_name = wp_get_elements_class_name( $block );
102-
$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
103-
104-
wp_style_engine_get_styles(
105-
$link_block_styles,
106-
array(
107-
'selector' => ".$class_name a",
108-
'context' => 'block-supports',
109-
)
153+
154+
$class_name = wp_get_elements_class_name( $block );
155+
156+
$element_types = array(
157+
'button' => array(
158+
'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
159+
'skip' => $skip_button_color_serialization,
160+
),
161+
'link' => array(
162+
'selector' => ".$class_name a",
163+
'hover_selector' => ".$class_name a:hover",
164+
'skip' => $skip_link_color_serialization,
165+
),
166+
'heading' => array(
167+
'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
168+
'skip' => $skip_heading_color_serialization,
169+
'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
170+
),
110171
);
111172

112-
if ( isset( $link_block_styles[':hover'] ) ) {
113-
wp_style_engine_get_styles(
114-
$link_block_styles[':hover'],
115-
array(
116-
'selector' => ".$class_name a:hover",
117-
'context' => 'block-supports',
118-
)
119-
);
173+
foreach ( $element_types as $element_type => $element_config ) {
174+
if ( $element_config['skip'] ) {
175+
continue;
176+
}
177+
178+
$element_style_object = _wp_array_get( $element_block_styles, array( $element_type ), null );
179+
180+
// Process primary element type styles.
181+
if ( $element_style_object ) {
182+
wp_style_engine_get_styles(
183+
$element_style_object,
184+
array(
185+
'selector' => $element_config['selector'],
186+
'context' => 'block-supports',
187+
)
188+
);
189+
190+
if ( isset( $element_style_object[':hover'] ) ) {
191+
wp_style_engine_get_styles(
192+
$element_style_object[':hover'],
193+
array(
194+
'selector' => $element_config['hover_selector'],
195+
'context' => 'block-supports',
196+
)
197+
);
198+
}
199+
}
200+
201+
// Process related elements e.g. h1-h6 for headings.
202+
if ( isset( $element_config['elements'] ) ) {
203+
foreach ( $element_config['elements'] as $element ) {
204+
$element_style_object = _wp_array_get( $element_block_styles, array( $element ), null );
205+
206+
if ( $element_style_object ) {
207+
wp_style_engine_get_styles(
208+
$element_style_object,
209+
array(
210+
'selector' => ".$class_name $element",
211+
'context' => 'block-supports',
212+
)
213+
);
214+
}
215+
}
216+
}
120217
}
121218

122219
return null;

‎src/wp-includes/style-engine/class-wp-style-engine.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ final class WP_Style_Engine {
7070
'default' => 'background-color',
7171
),
7272
'path' => array( 'color', 'background' ),
73+
'css_vars' => array(
74+
'color' => '--wp--preset--color--$slug',
75+
),
7376
'classnames' => array(
7477
'has-background' => true,
7578
'has-$slug-background-color' => 'color',
@@ -80,6 +83,9 @@ final class WP_Style_Engine {
8083
'default' => 'background',
8184
),
8285
'path' => array( 'color', 'gradient' ),
86+
'css_vars' => array(
87+
'gradient' => '--wp--preset--gradient--$slug',
88+
),
8389
'classnames' => array(
8490
'has-background' => true,
8591
'has-$slug-gradient-background' => 'gradient',

‎tests/phpunit/tests/block-supports/elements.php‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,68 @@ public function test_anchor_paragraph_link_color() {
106106
'<p class="wp-elements-1" id="anchor">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>'
107107
);
108108
}
109+
110+
/**
111+
* Test wp_render_elements_support() with a group block that has a button
112+
* element color set.
113+
*
114+
* @ticket 59309
115+
*/
116+
public function test_group_with_button_element_style() {
117+
$result = self::make_unique_id_one(
118+
wp_render_elements_support(
119+
'<div class="wp-block-group"><div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"><div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div></div></div>',
120+
array(
121+
'blockName' => 'core/group',
122+
'attrs' => array(
123+
'style' => array(
124+
'elements' => array(
125+
'button' => array(
126+
'color' => array(
127+
'text' => 'var:preset|color|vivid-red',
128+
),
129+
),
130+
),
131+
),
132+
),
133+
)
134+
)
135+
);
136+
$this->assertSame(
137+
$result,
138+
'<div class="wp-block-group wp-elements-1"><div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"><div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div></div></div>'
139+
);
140+
}
141+
142+
/**
143+
* Test wp_render_elements_support() with a group block that has a heading
144+
* element color set.
145+
*
146+
* @ticket 59309
147+
*/
148+
public function test_group_with_heading_element_style() {
149+
$result = self::make_unique_id_one(
150+
wp_render_elements_support(
151+
'<div class="wp-block-group"><h2 class="wp-block-heading">Test</h2></div>',
152+
array(
153+
'blockName' => 'core/group',
154+
'attrs' => array(
155+
'style' => array(
156+
'elements' => array(
157+
'heading' => array(
158+
'color' => array(
159+
'text' => 'var:preset|color|vivid-red',
160+
),
161+
),
162+
),
163+
),
164+
),
165+
)
166+
)
167+
);
168+
$this->assertSame(
169+
$result,
170+
'<div class="wp-block-group wp-elements-1"><h2 class="wp-block-heading">Test</h2></div>'
171+
);
172+
}
109173
}

0 commit comments

Comments
 (0)