Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design Tools: Add block instance elements color support for buttons and headings #5164

Closed
wants to merge 5 commits into from
Closed

Design Tools: Add block instance elements color support for buttons and headings #5164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
331def8
Account for button and heading elements when registering color support
aaronrobertshaw Sep 6, 2023
0daa13a
Add block instance rendering of button and heading element styles
aaronrobertshaw Sep 6, 2023
3c23b60
Add css config for background/gradient in style engine
aaronrobertshaw Sep 6, 2023
8c2fb1d
Add unit tests for applying classname for buttons and headings
aaronrobertshaw Sep 7, 2023
404aebe
Address review feedback
aaronrobertshaw Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/wp-includes/block-supports/colors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,14 @@ function wp_register_colors_support( $block_type ) {
$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
$has_gradients_support = _wp_array_get( $color_support, array( 'gradients' ), false );
$has_link_colors_support = _wp_array_get( $color_support, array( 'link' ), false );
$has_button_colors_support = _wp_array_get( $color_support, array( 'button' ), false );
$has_heading_colors_support = _wp_array_get( $color_support, array( 'heading' ), false );
$has_color_support = $has_text_colors_support ||
$has_background_colors_support ||
$has_gradients_support ||
$has_link_colors_support;
$has_link_colors_support ||
$has_button_colors_support ||
$has_heading_colors_support;

if ( ! $block_type->attributes ) {
$block_type->attributes = array();
Expand Down
177 changes: 137 additions & 40 deletions src/wp-includes/block-supports/elements.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,41 +23,87 @@ function wp_get_elements_class_name( $block ) {
* Updates the block content with elements class names.
*
* @since 5.8.0
* @since 6.4.0 Added support for button and heading element styling.
* @access private
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @return string Filtered block content.
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
*/
function wp_render_elements_support( $block_content, $block ) {
if ( ! $block_content ) {
if ( ! $block_content || empty( $block['attrs'] ) ) {
return $block_content;
}

$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );

$element_color_properties = array(
'button' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
'paths' => array(
'style.elements.button.color.text',
'style.elements.button.color.background',
'style.elements.button.color.gradient',
),
),
'link' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
'paths' => array(
'style.elements.link.color.text',
'style.elements.link.:hover.color.text',
),
),
'heading' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
'paths' => array(
'style.elements.heading.color.text',
'style.elements.heading.color.background',
'style.elements.heading.color.gradient',
'style.elements.h1.color.text',
'style.elements.h1.color.background',
'style.elements.h1.color.gradient',
'style.elements.h2.color.text',
'style.elements.h2.color.background',
'style.elements.h2.color.gradient',
'style.elements.h3.color.text',
'style.elements.h3.color.background',
'style.elements.h3.color.gradient',
'style.elements.h4.color.text',
'style.elements.h4.color.background',
'style.elements.h4.color.gradient',
'style.elements.h5.color.text',
'style.elements.h5.color.background',
'style.elements.h5.color.gradient',
'style.elements.h6.color.text',
'style.elements.h6.color.background',
'style.elements.h6.color.gradient',
),
),
);

$skip_all_element_color_serialization = $element_color_properties['button']['skip'] &&
$element_color_properties['link']['skip'] &&
$element_color_properties['heading']['skip'];

if ( $skip_link_color_serialization ) {
if ( $skip_all_element_color_serialization ) {
return $block_content;
}

$link_color = null;
if ( ! empty( $block['attrs'] ) ) {
$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
}
$element_colors_set = 0;

foreach ( $element_color_properties as $element_config ) {
if ( $element_config['skip'] ) {
continue;
}

$hover_link_color = null;
if ( ! empty( $block['attrs'] ) ) {
$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
foreach ( $element_config['paths'] as $path ) {
if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
$element_colors_set++;
}
}
}

/*
* For now we only care about link colors.
* This code in the future when we have a public API
* should take advantage of WP_Theme_JSON::compute_style_properties
* and work for any element and style.
*/
if ( null === $link_color && null === $hover_link_color ) {
if ( ! $element_colors_set ) {
return $block_content;
}

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

/*
* For now we only care about link color.
*/
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
if ( ! $element_block_styles ) {
return null;
}

if ( $skip_link_color_serialization ) {
$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
$skip_heading_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
$skip_button_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
$skips_all_element_color_serialization = $skip_link_color_serialization &&
$skip_heading_color_serialization &&
$skip_button_color_serialization;

if ( $skips_all_element_color_serialization ) {
return null;
}
$class_name = wp_get_elements_class_name( $block );
$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;

wp_style_engine_get_styles(
$link_block_styles,
array(
'selector' => ".$class_name a",
'context' => 'block-supports',
)

$class_name = wp_get_elements_class_name( $block );

$element_types = array(
'button' => array(
'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
'skip' => $skip_button_color_serialization,
),
'link' => array(
'selector' => ".$class_name a",
'hover_selector' => ".$class_name a:hover",
'skip' => $skip_link_color_serialization,
),
'heading' => array(
'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
'skip' => $skip_heading_color_serialization,
'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
),
);

if ( isset( $link_block_styles[':hover'] ) ) {
wp_style_engine_get_styles(
$link_block_styles[':hover'],
array(
'selector' => ".$class_name a:hover",
'context' => 'block-supports',
)
);
foreach ( $element_types as $element_type => $element_config ) {
if ( $element_config['skip'] ) {
continue;
}

$element_style_object = _wp_array_get( $element_block_styles, array( $element_type ), null );

// Process primary element type styles.
if ( $element_style_object ) {
wp_style_engine_get_styles(
$element_style_object,
array(
'selector' => $element_config['selector'],
'context' => 'block-supports',
)
);

if ( isset( $element_style_object[':hover'] ) ) {
wp_style_engine_get_styles(
$element_style_object[':hover'],
array(
'selector' => $element_config['hover_selector'],
'context' => 'block-supports',
)
);
}
}

// Process related elements e.g. h1-h6 for headings.
if ( isset( $element_config['elements'] ) ) {
foreach ( $element_config['elements'] as $element ) {
$element_style_object = _wp_array_get( $element_block_styles, array( $element ), null );

if ( $element_style_object ) {
wp_style_engine_get_styles(
$element_style_object,
array(
'selector' => ".$class_name $element",
'context' => 'block-supports',
)
);
}
}
}
}

return null;
Expand Down
6 changes: 6 additions & 0 deletions src/wp-includes/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ final class WP_Style_Engine {
'default' => 'background-color',
),
'path' => array( 'color', 'background' ),
'css_vars' => array(
'color' => '--wp--preset--color--$slug',
),
'classnames' => array(
'has-background' => true,
'has-$slug-background-color' => 'color',
Expand All @@ -80,6 +83,9 @@ final class WP_Style_Engine {
'default' => 'background',
),
'path' => array( 'color', 'gradient' ),
'css_vars' => array(
'gradient' => '--wp--preset--gradient--$slug',
),
'classnames' => array(
'has-background' => true,
'has-$slug-gradient-background' => 'gradient',
Expand Down
64 changes: 64 additions & 0 deletions tests/phpunit/tests/block-supports/elements.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,68 @@ public function test_anchor_paragraph_link_color() {
'<p class="wp-elements-1" id="anchor">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>'
);
}

/**
* Test wp_render_elements_support() with a group block that has a button
* element color set.
*
* @ticket 59309
*/
public function test_group_with_button_element_style() {
$result = self::make_unique_id_one(
wp_render_elements_support(
'<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>',
array(
'blockName' => 'core/group',
'attrs' => array(
'style' => array(
'elements' => array(
'button' => array(
'color' => array(
'text' => 'var:preset|color|vivid-red',
),
),
),
),
),
)
)
);
$this->assertSame(
$result,
'<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>'
);
}

/**
* Test wp_render_elements_support() with a group block that has a heading
* element color set.
*
* @ticket 59309
*/
public function test_group_with_heading_element_style() {
$result = self::make_unique_id_one(
wp_render_elements_support(
'<div class="wp-block-group"><h2 class="wp-block-heading">Test</h2></div>',
array(
'blockName' => 'core/group',
'attrs' => array(
'style' => array(
'elements' => array(
'heading' => array(
'color' => array(
'text' => 'var:preset|color|vivid-red',
),
),
),
),
),
)
)
);
$this->assertSame(
$result,
'<div class="wp-block-group wp-elements-1"><h2 class="wp-block-heading">Test</h2></div>'
);
}
}
Loading