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 && (
) }
{ ! buttonUseIcon && (
{
+ const wrapperStyles =
+ 'button-inside' === buttonPosition
+ ? {
+ borderRadius: borderRadius
+ ? `${ borderRadius }px`
+ : undefined,
+ }
+ : {};
+
+ return (
+ {
+ setAttributes( {
+ width: parseInt( elt.offsetWidth, 10 ),
+ widthUnit: 'px',
+ } );
+ toggleSelection( false );
+ } }
+ onResizeStop={ ( event, direction, elt, delta ) => {
+ setAttributes( {
+ width: parseInt( width + delta.width, 10 ),
+ } );
+ toggleSelection( true );
+ } }
+ showHandle={ isSelected }
+ >
+ { ( 'button-inside' === buttonPosition ||
+ 'button-outside' === buttonPosition ) && (
+ <>
+ { renderTextField() }
+ { renderButton() }
+ >
+ ) }
+
+ { 'button-only' === buttonPosition && renderButton() }
+ { 'no-button' === buttonPosition && renderTextField() }
+
+ );
+ };
+
const controls = (
<>
@@ -243,7 +324,7 @@ export default function SearchEdit( {
-
+
) }
- {
- setAttributes( {
- width: parseInt( elt.offsetWidth, 10 ),
- widthUnit: 'px',
- } );
- toggleSelection( false );
- } }
- onResizeStop={ ( event, direction, elt, delta ) => {
- setAttributes( {
- width: parseInt( width + delta.width, 10 ),
- } );
- toggleSelection( true );
- } }
- showHandle={ isSelected }
- >
- { ( 'button-inside' === buttonPosition ||
- 'button-outside' === buttonPosition ) && (
- <>
- { renderTextField() }
- { renderButton() }
- >
- ) }
-
- { 'button-only' === buttonPosition && renderButton() }
- { 'no-button' === buttonPosition && renderTextField() }
-
+ { renderInputs() }
);
}
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 36607188ff44a3..5c2bdd5e1bcc18 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -36,7 +36,8 @@ function render_block_core_search( $attributes ) {
$label_markup = '';
$input_markup = '';
$button_markup = '';
- $width_styles = '';
+
+ $border_radius_css = block_core_search_build_css_border_radius( $attributes );
if ( $show_label ) {
if ( ! empty( $attributes['label'] ) ) {
@@ -55,9 +56,14 @@ function render_block_core_search( $attributes ) {
}
if ( $show_input ) {
+ $input_styles = ! empty( $border_radius_css['style'] )
+ ? sprintf( ' style="%s"', esc_attr( $border_radius_css['style'] ) )
+ : '';
+
$input_markup = sprintf(
- '',
+ '',
$input_id,
+ $input_styles,
esc_attr( get_search_query() ),
esc_attr( $attributes['placeholder'] )
);
@@ -66,6 +72,9 @@ function render_block_core_search( $attributes ) {
if ( $show_button ) {
$button_internal_markup = '';
$button_classes = '';
+ $button_styles = ! empty( $border_radius_css['style'] )
+ ? sprintf( ' style="%s"', esc_attr( $border_radius_css['style'] ) )
+ : '';
if ( ! $use_icon_button ) {
if ( ! empty( $attributes['buttonText'] ) ) {
@@ -80,22 +89,29 @@ function render_block_core_search( $attributes ) {
}
$button_markup = sprintf(
- '',
+ '',
+ $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.
*