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

[Search Block]: Add color support to search button #32416

Merged
merged 15 commits into from
Jul 27, 2021
Merged

[Search Block]: Add color support to search button #32416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bd53352
Add color support to search block in editor
stacimc May 18, 2021
3ff86a0
Apply color classes and styles on frontend
stacimc May 18, 2021
86cbfb7
Apply colors set in theme to button
stacimc Jun 2, 2021
31fd43b
Decrease specificity for color CSS to allow themes to override
stacimc Jun 2, 2021
07644ca
Remove unused variable, add doc comment for function
stacimc Jun 2, 2021
7873b26
Revert changes to support setting colors in theme.json
stacimc Jun 3, 2021
6861cc1
Use variable to clarify conditional logic for preset vs custom colors
stacimc Jun 3, 2021
76fec5e
Safely check for presence of attribute when index undefined
stacimc Jun 3, 2021
3cafc96
Fix bad merge appending px to border-radius unnecessarily
stacimc Jun 7, 2021
96976ce
Clean up button styles
stacimc Jul 21, 2021
7ad36b5
Fix shared border styles after rebase
stacimc Jul 21, 2021
7b53b63
Fix color on frontend for icon-only buttons
stacimc Jul 21, 2021
ab22a29
Add support for gradient backgrounds
stacimc Jul 26, 2021
7f832dd
Apply border color to button only when positioned outside
stacimc Jul 26, 2021
1430243
Linting fixes
stacimc Jul 26, 2021
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
4 changes: 4 additions & 0 deletions packages/block-library/src/search/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@
},
"supports": {
"align": [ "left", "center", "right" ],
"color": {
"gradients": true,
"__experimentalSkipSerialization": true
},
"__experimentalBorder": {
"color": true,
"radius": true,
Expand Down
12 changes: 9 additions & 3 deletions packages/block-library/src/search/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
RichText,
__experimentalUseBorderProps as useBorderProps,
__experimentalUnitControl as UnitControl,
__experimentalUseColorProps as useColorProps,
} from '@wordpress/block-editor';
import {
ToolbarDropdownMenu,
Expand Down Expand Up @@ -82,6 +83,7 @@ export default function SearchEdit( {
borderProps.style.borderRadius = `${ borderRadius }px`;
}

const colorProps = useColorProps( attributes );
const unitControlInstanceId = useInstanceId( UnitControl );
const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
const isButtonPositionInside = 'button-inside' === buttonPosition;
Expand Down Expand Up @@ -208,11 +210,15 @@ export default function SearchEdit( {
// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.
const buttonClasses = classnames(
'wp-block-search__button',
colorProps.className,
isButtonPositionInside ? undefined : borderProps.className
);
const buttonStyles = isButtonPositionInside
? { borderRadius }
: borderProps.style;
const buttonStyles = {
...colorProps.style,
...( isButtonPositionInside
? { borderRadius }
: borderProps.style ),
};

return (
<>
Expand Down
86 changes: 78 additions & 8 deletions packages/block-library/src/search/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ function render_block_core_search( $attributes ) {
$input_markup = '';
$button_markup = '';
$inline_styles = styles_for_block_core_search( $attributes );
$color_classes = get_color_classes_for_block_core_search( $attributes );
$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
'button-inside' === $attributes['buttonPosition'];
// Border color classes need to be applied to the elements that have a border color.
Expand Down Expand Up @@ -66,14 +67,17 @@ function render_block_core_search( $attributes ) {
$input_classes,
esc_attr( get_search_query() ),
esc_attr( $attributes['placeholder'] ),
$inline_styles['shared']
$inline_styles['input']
);
}

if ( $show_button ) {
$button_internal_markup = '';
$button_classes = ! $is_button_inside ? $border_color_classes : '';
$button_classes = $color_classes;

if ( ! $is_button_inside ) {
$button_classes .= $border_color_classes;
}
if ( ! $use_icon_button ) {
if ( ! empty( $attributes['buttonText'] ) ) {
$button_internal_markup = $attributes['buttonText'];
Expand All @@ -89,7 +93,7 @@ function render_block_core_search( $attributes ) {
$button_markup = sprintf(
'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
$button_classes,
$inline_styles['shared'],
$inline_styles['button'],
$button_internal_markup
);
}
Expand Down Expand Up @@ -177,8 +181,9 @@ function classnames_for_block_core_search( $attributes ) {
* @return array Style HTML attribute.
*/
function styles_for_block_core_search( $attributes ) {
$shared_styles = array();
$wrapper_styles = array();
$button_styles = array();
$input_styles = array();

// Add width styles.
$has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
Expand Down Expand Up @@ -210,11 +215,13 @@ function styles_for_block_core_search( $attributes ) {
$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );

// Add shared styles for individual border radii for input & button.
$shared_styles[] = sprintf(
$border_style = sprintf(
'border-%s-radius: %s;',
esc_attr( $name ),
esc_attr( $value )
);
$input_styles[] = $border_style;
$button_styles[] = $border_style;

// Add adjusted border radius styles for the wrapper element
// if button is positioned inside.
Expand All @@ -231,7 +238,9 @@ function styles_for_block_core_search( $attributes ) {
} else {
// Numeric check is for backwards compatibility purposes.
$border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
$shared_styles[] = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
$border_style = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
$input_styles[] = $border_style;
$button_styles[] = $border_style;

if ( $is_button_inside && intval( $border_radius ) !== 0 ) {
// Adjust wrapper border radii to maintain visual consistency
Expand All @@ -257,12 +266,30 @@ function styles_for_block_core_search( $attributes ) {
if ( $is_button_inside ) {
$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
} else {
$shared_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
$button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
$input_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
}
}

// Add color styles.
$has_text_color = ! empty( $attributes['style']['color']['text'] );
if ( $has_text_color ) {
$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
}

$has_background_color = ! empty( $attributes['style']['color']['background'] );
if ( $has_background_color ) {
$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
}

$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
if ( $has_custom_gradient ) {
$button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
}

return array(
'shared' => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', implode( ' ', $input_styles ) ) : '',
'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', implode( ' ', $button_styles ) ) : '',
'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
);
}
Expand All @@ -283,3 +310,46 @@ function get_border_color_classes_for_block_core_search( $attributes ) {
}
return $border_color_classes;
}

/**
* Returns color classnames depending on whether there are named or custom text and background colors.
*
* @param array $attributes The block attributes.
*
* @return string The color classnames to be applied to the block elements.
*/
function get_color_classes_for_block_core_search( $attributes ) {
stacimc marked this conversation as resolved.
Show resolved Hide resolved
$classnames = array();

// Text color.
$has_named_text_color = ! empty( $attributes['textColor'] );
$has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
if ( $has_named_text_color ) {
$classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
} elseif ( $has_custom_text_color ) {
// If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
$classnames[] = 'has-text-color';
}

// Background color.
$has_named_background_color = ! empty( $attributes['backgroundColor'] );
$has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
$has_named_gradient = ! empty( $attributes['gradient'] );
$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
if (
$has_named_background_color ||
$has_custom_background_color ||
$has_named_gradient ||
$has_custom_gradient
) {
$classnames[] = 'has-background';
}
if ( $has_named_background_color ) {
$classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
}
if ( $has_named_gradient ) {
$classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
}

return implode( ' ', $classnames );
}
1 change: 1 addition & 0 deletions packages/block-library/src/search/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
svg {
min-width: 1.5em;
min-height: 1.5em;
fill: currentColor;
}
}

Expand Down