diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index 534be0e97cb5f..d6399a0857397 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -34,6 +34,10 @@
},
"supports": {
"align": [ "left", "center", "right" ],
+ "__experimentalBorder": {
+ "radius": true,
+ "__experimentalSkipSerialization": true
+ },
"html": false
},
"editorStyle": "wp-block-search-editor",
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 91923b3a78ee7..06b2c62ad3941 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -48,6 +48,10 @@ import {
MIN_WIDTH_UNIT,
} from './utils.js';
+// Used to calculate border radius adjustment to avoid "fat" corners when
+// button is placed inside wrapper.
+const DEFAULT_INNER_PADDING = 4;
+
export default function SearchEdit( {
className,
attributes,
@@ -65,8 +69,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 }`;
@@ -122,6 +128,7 @@ export default function SearchEdit( {
return (
) }
{ ! buttonUseIcon && (
);
+ const getWrapperStyles = () => {
+ if ( 'button-inside' === buttonPosition && style?.border?.radius ) {
+ // We have button inside wrapper and a border radius value to apply.
+ // Add default padding so we don't get "fat" corners.
+ const outerRadius =
+ parseInt( style?.border?.radius, 10 ) + DEFAULT_INNER_PADDING;
+
+ return { borderRadius: `${ outerRadius }px` };
+ }
+
+ return undefined;
+ };
+
const blockProps = useBlockProps( {
className: getBlockClassNames(),
} );
@@ -327,6 +349,7 @@ export default function SearchEdit( {
width: `${ width }${ widthUnit }`,
} }
className="wp-block-search__inside-wrapper"
+ style={ getWrapperStyles() }
minWidth={ MIN_WIDTH }
enable={ getResizableSides() }
onResizeStart={ ( event, direction, elt ) => {
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index c988ae3b93e40..eba67deeecdce 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -36,7 +36,7 @@ function render_block_core_search( $attributes ) {
$label_markup = '';
$input_markup = '';
$button_markup = '';
- $width_styles = '';
+ $inline_styles = styles_for_block_core_search( $attributes );
if ( $show_label ) {
if ( ! empty( $attributes['label'] ) ) {
@@ -56,10 +56,11 @@ function render_block_core_search( $attributes ) {
if ( $show_input ) {
$input_markup = sprintf(
- '',
+ '',
$input_id,
esc_attr( get_search_query() ),
- esc_attr( $attributes['placeholder'] )
+ esc_attr( $attributes['placeholder'] ),
+ $inline_styles['shared']
);
}
@@ -80,20 +81,16 @@ function render_block_core_search( $attributes ) {
}
$button_markup = sprintf(
- '',
+ '',
+ $button_classes,
+ $inline_styles['shared'],
$button_internal_markup
);
}
- if ( ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ) ) {
- if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) {
- $width_styles = ' style="width: ' . $attributes['width'] . $attributes['widthUnit'] . ';"';
- }
- }
-
$field_markup = sprintf(
'%s
',
- $width_styles,
+ $inline_styles['wrapper'],
$input_markup . $button_markup
);
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
@@ -159,3 +156,58 @@ function classnames_for_block_core_search( $attributes ) {
return implode( ' ', $classnames );
}
+
+/**
+ * Builds an array of inline styles for the search block.
+ *
+ * The result will contain one entry for shared styles such as those for the
+ * inner input or button and a second for the inner wrapper should the block
+ * be positioning the button "inside".
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return array Style HTML attribute.
+ */
+function styles_for_block_core_search( $attributes ) {
+ $shared_styles = array();
+ $wrapper_styles = array();
+
+ // Add width styles.
+ $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
+ $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
+
+ if ( $has_width && ! $button_only ) {
+ $wrapper_styles[] = sprintf(
+ 'width: %d%s;',
+ esc_attr( $attributes['width'] ),
+ esc_attr( $attributes['widthUnit'] )
+ );
+ }
+
+ // Add border radius styles.
+ $has_border_radius = ! empty( $attributes['style']['border']['radius'] );
+
+ if ( $has_border_radius ) {
+ // Shared style for button and input radius values.
+ $border_radius = $attributes['style']['border']['radius'];
+ $shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) );
+
+ // Apply wrapper border radius if button placed inside.
+ $button_inside = ! empty( $attributes['buttonPosition'] ) &&
+ 'button-inside' === $attributes['buttonPosition'];
+
+ if ( $button_inside ) {
+ // We adjust the border radius value for the outer wrapper element
+ // to make it visually consistent with the radius applied to inner
+ // elements.
+ $default_padding = 4;
+ $adjusted_radius = $border_radius + $default_padding;
+ $wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) );
+ }
+ }
+
+ return array(
+ 'shared' => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
+ 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
+ );
+}