diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index d57ba7fd9c3900..7d94a640f7ef73 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -34,6 +34,9 @@ }, "supports": { "align": [ "left", "center", "right" ], - "html": false + "html": false, + "__experimentalBorder": { + "radius": true + } } } diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index c82086f2e5ff33..ebb566c18583f0 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -53,6 +53,12 @@ const CSS_UNITS = [ { value: 'px', label: 'px', default: PX_WIDTH_DEFAULT }, ]; +// Used to calculate adjustment to inner button border radius. +const DEFAULT_INPUT_PADDING = 4; + +// Minimum inner radius of 1px as having none when there is an outer radius jars. +const MIN_INNER_RADIUS = 1; + export default function SearchEdit( { className, attributes, @@ -70,8 +76,10 @@ export default function SearchEdit( { buttonText, buttonPosition, buttonUseIcon, + style, } = attributes; + const borderRadius = style?.border?.radius; const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; @@ -123,10 +131,33 @@ export default function SearchEdit( { }; }; + const getInnerBorderRadiusStyle = () => { + if ( ! borderRadius ) { + return undefined; + } + + if ( 'button-inside' === buttonPosition ) { + const radius = Math.max( + borderRadius - DEFAULT_INPUT_PADDING, + MIN_INNER_RADIUS + ); + return radius ? `${ radius }px` : undefined; + } + + return `${ borderRadius }px`; + }; + + const sharedStyles = { + borderRadius: getInnerBorderRadiusStyle(), + }; + const renderTextField = () => { + const textFieldStyles = { ...sharedStyles }; + return ( { + const buttonStyles = { ...sharedStyles }; + return ( <> { buttonUseIcon && ( ', + '', + $button_classes, + $button_styles, $button_internal_markup ); } + $field_styles = ( array_key_exists( 'buttonPosition', $attributes ) && 'button-inside' === $attributes['buttonPosition'] ) + ? $border_radius_css['wrapper_style'] + : ''; + if ( ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ) ) { if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) { - $width_styles = ' style="width: ' . $attributes['width'] . $attributes['widthUnit'] . ';"'; + $field_styles .= ' width: ' . $attributes['width'] . $attributes['widthUnit'] . ';"'; } } - $field_markup = sprintf( + $field_markup = sprintf( '
%s
', - $width_styles, + ( ! empty( $field_styles ) ) ? sprintf( ' style="%s"', esc_attr( $field_styles ) ) : '', $input_markup . $button_markup ); + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); return sprintf( @@ -119,6 +135,39 @@ function register_block_core_search() { } add_action( 'init', 'register_block_core_search' ); +/** + * Build an array with inline styles defining the border radius + * which will be applied to the inner elements and wrapper of the search block + * on the frontend. + * + * @param array $attributes Search block attributes. + * @return array Border radius inline styles. + */ +function block_core_search_build_css_border_radius( $attributes ) { + $padding = 4; + $border_radius = array( + 'style' => '', + 'wrapper_style' => '', + ); + + $has_border_radius = isset( $attributes['style']['border']['radius'] ); + if ( ! $has_border_radius ) { + return $border_radius; + } + + $radius_value = $attributes['style']['border']['radius']; + $button_inside = array_key_exists( 'buttonPosition', $attributes ) + && 'button-inside' === $attributes['buttonPosition']; + + // Uses min value of 1 as having no radius when the outer does is jarring. + $radius = $button_inside ? max( $radius_value - $padding, 1 ) : $radius_value; + + $border_radius['style'] = sprintf( 'border-radius: %spx;', esc_attr( $radius ) ); + $border_radius['wrapper_style'] = sprintf( 'border-radius: %spx;', esc_attr( $radius_value ) ); + + return $border_radius; +} + /** * Builds the correct top level classnames for the 'core/search' block. *