Skip to content

Commit

Permalink
Update Search block for individual border support
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Feb 3, 2022
1 parent f006a9d commit 6325458
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 42 deletions.
23 changes: 14 additions & 9 deletions packages/block-library/src/search/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,6 @@ export default function SearchEdit( {
} );
}, [ insertedInNavigationBlock ] );
const borderRadius = style?.border?.radius;
const borderColor = style?.border?.color;
const borderWidth = style?.border?.width;
const borderProps = useBorderProps( attributes );

// Check for old deprecated numerical border radius. Done as a separate
Expand Down Expand Up @@ -387,12 +385,19 @@ export default function SearchEdit( {
radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;

const getWrapperStyles = () => {
const styles = {
borderColor,
borderWidth: isButtonPositionInside ? borderWidth : undefined,
};

const isNonZeroBorderRadius = parseInt( borderRadius, 10 ) !== 0;
const styles = isButtonPositionInside
? borderProps.style
: {
...borderProps.style,
borderWidth: undefined,
borderTopWidth: undefined,
borderRightWidth: undefined,
borderBottomWidth: undefined,
borderLeftWidth: undefined,
};

const isNonZeroBorderRadius =
borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;

if ( isButtonPositionInside && isNonZeroBorderRadius ) {
// We have button inside wrapper and a border radius value to apply.
Expand All @@ -411,11 +416,11 @@ export default function SearchEdit( {
} = borderRadius;

return {
...styles,
borderTopLeftRadius: padBorderRadius( topLeft ),
borderTopRightRadius: padBorderRadius( topRight ),
borderBottomLeftRadius: padBorderRadius( bottomLeft ),
borderBottomRightRadius: padBorderRadius( bottomRight ),
...styles,
};
}

Expand Down
138 changes: 105 additions & 33 deletions packages/block-library/src/search/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,67 @@ function classnames_for_block_core_search( $attributes ) {
return implode( ' ', $classnames );
}

/**
* This generates a CSS rule for the given border property and side if provided.
* Based on whether the Search block is configured to display the button inside
* or not, the generated rule is injected into the appropriate collection of
* styles for later application in the block's markup.
*
* @param array $attributes The block attributes.
* @param string $property Border property to generate rule for e.g. width or color.
* @param string $side Optional side border. The dictates the value retrieved and final CSS property.
* @param array $wrapper_styles Current collection of wrapper styles.
* @param array $button_styles Current collection of button styles.
* @param array $input_styles Current collection of input styles.
*
* @return void
*/
function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
$is_button_inside = 'button-inside' === _wp_array_get( $attributes, array( 'buttonPosition' ), false );

$path = array( 'style', 'border', $property );

if ( $side ) {
array_splice( $path, 2, 0, $side );
}

$value = _wp_array_get( $attributes, $path, false );

if ( empty( $value ) ) {
return;
}

$property_suffix = $side ? sprintf( '%s-%s', $side, $property ) : $property;

if ( $is_button_inside ) {
$wrapper_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
} else {
$button_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
$input_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
}
}

/**
* This adds CSS rules for a given border property e.g. width or color. It
* injects rules into the provided wrapper, button and input style arrays for
* uniform "flat" borders or those with individual sides configured.
*
* @param array $attributes The block attributes.
* @param string $property Border property to generate rule for e.g. width or color.
* @param array $wrapper_styles Current collection of wrapper styles.
* @param array $button_styles Current collection of button styles.
* @param array $input_styles Current collection of input styles.
*
* @return void
*/
function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );
apply_block_core_search_border_style( $attributes, $property, 'top', $wrapper_styles, $button_styles, $input_styles );
apply_block_core_search_border_style( $attributes, $property, 'right', $wrapper_styles, $button_styles, $input_styles );
apply_block_core_search_border_style( $attributes, $property, 'bottom', $wrapper_styles, $button_styles, $input_styles );
apply_block_core_search_border_style( $attributes, $property, 'left', $wrapper_styles, $button_styles, $input_styles );
}

/**
* Builds an array of inline styles for the search block.
*
Expand Down Expand Up @@ -195,19 +256,9 @@ function styles_for_block_core_search( $attributes ) {
);
}

// Add border width styles.
$has_border_width = ! empty( $attributes['style']['border']['width'] );

if ( $has_border_width ) {
$border_width = $attributes['style']['border']['width'];

if ( $is_button_inside ) {
$wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
} else {
$button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
$input_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
}
}
// Add border width and color styles.
apply_block_core_search_border_styles( $attributes, 'width', $wrapper_styles, $button_styles, $input_styles );
apply_block_core_search_border_styles( $attributes, 'color', $wrapper_styles, $button_styles, $input_styles );

// Add border radius styles.
$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
Expand Down Expand Up @@ -263,21 +314,6 @@ function styles_for_block_core_search( $attributes ) {
}
}

// Add border color styles.
$has_border_color = ! empty( $attributes['style']['border']['color'] );

if ( $has_border_color ) {
$border_color = $attributes['style']['border']['color'];

// Apply wrapper border color if button placed inside.
if ( $is_button_inside ) {
$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
} else {
$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 ) {
Expand Down Expand Up @@ -309,13 +345,49 @@ function styles_for_block_core_search( $attributes ) {
* @return string The border color classnames to be applied to the block elements.
*/
function get_border_color_classes_for_block_core_search( $attributes ) {
$border_color_classes = array();
$has_custom_border_color = ! empty( $attributes['style']['border']['color'] );
$border_color_classes = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : '';
// If there's a border color style and no `borderColor` text string, we still want to add the generic `has-border-color` class name to the element.
if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) {
$border_color_classes = 'has-border-color';
$has_named_border_color = ! empty( $attributes['borderColor'] );

if ( $has_custom_border_color || $has_named_border_color ) {
$border_color_classes[] = 'has-border-color';
}

if ( $has_named_border_color ) {
$border_color_classes[] = sprintf( 'has-%s-border-color', esc_attr( $attributes['borderColor'] ) );
}

$border_color_classes[] = get_side_border_color_classes_for_block_core_search( $attributes, 'top' );
$border_color_classes[] = get_side_border_color_classes_for_block_core_search( $attributes, 'right' );
$border_color_classes[] = get_side_border_color_classes_for_block_core_search( $attributes, 'bottom' );
$border_color_classes[] = get_side_border_color_classes_for_block_core_search( $attributes, 'left' );

return implode( ' ', $border_color_classes );
}

/**
* Generates required CSS classes for individual border side color selections.
*
* @param array $attributes The block attributes.
* @param string $side Border side i.e. `top`, `right`, `bottom`, or `left`.
*
* @return string
*/
function get_side_border_color_classes_for_block_core_search( $attributes, $side ) {
$classes = array();

$has_custom_border_color = ! empty( $attributes['style']['border'][ $side ]['color'] );
$has_named_border_color = ! empty( $attributes['sideBorderColors'][ $side ] );

if ( $has_custom_border_color || $has_named_border_color ) {
$classes[] = sprintf( 'has-border-%s-color', esc_attr( $side ) );
}
return $border_color_classes;

if ( $has_named_border_color ) {
$classes[] = sprintf( 'has-%s-border-%s-color', esc_attr( $attributes['sideBorderColors'][ $side ] ), esc_attr( $side ) );
}

return implode( ' ', $classes );
}

/**
Expand Down

0 comments on commit 6325458

Please sign in to comment.