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

Jump to bottom

Search Block: Add border radius support using skip serialization feature #30227

Merged
merged 3 commits into from
Apr 7, 2021
Merged

Search Block: Add border radius support using skip serialization feature #30227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83c60e3
Add border radius support to the search block
aaronrobertshaw Mar 25, 2021
196555b
Simplify wrapper styles radius check
aaronrobertshaw Apr 6, 2021
d76b766
Improve readability of input markup generation
aaronrobertshaw Apr 6, 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 @@ -34,6 +34,10 @@
},
"supports": {
"align": [ "left", "center", "right" ],
"__experimentalBorder": {
"radius": true,
"__experimentalSkipSerialization": true
},
"html": false
},
"editorStyle": "wp-block-search-editor",
Expand Down
23 changes: 23 additions & 0 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 @@ -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,
Expand All @@ -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 }`;

Expand Down Expand Up @@ -122,6 +128,7 @@ export default function SearchEdit( {
return (
<input
className="wp-block-search__input"
style={ { borderRadius } }
aria-label={ __( 'Optional placeholder text' ) }
// We hide the placeholder field's placeholder when there is a value. This
// stops screen readers from reading the placeholder field's placeholder
Expand All @@ -144,12 +151,14 @@ export default function SearchEdit( {
<Button
icon={ search }
className="wp-block-search__button"
style={ { borderRadius } }
/>
) }

{ ! buttonUseIcon && (
<RichText
className="wp-block-search__button"
style={ { borderRadius } }
aria-label={ __( 'Button text' ) }
placeholder={ __( 'Add button text…' ) }
withoutInteractiveFormatting
Expand Down Expand Up @@ -303,6 +312,19 @@ export default function SearchEdit( {
</>
);

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(),
} );
Expand All @@ -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 ) => {
Expand Down
74 changes: 63 additions & 11 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 @@ -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'] ) ) {
Expand All @@ -56,10 +56,11 @@ function render_block_core_search( $attributes ) {

if ( $show_input ) {
$input_markup = sprintf(
'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" required />',
'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />',
$input_id,
esc_attr( get_search_query() ),
esc_attr( $attributes['placeholder'] )
esc_attr( $attributes['placeholder'] ),
$inline_styles['shared']
);
}

Expand All @@ -80,20 +81,16 @@ function render_block_core_search( $attributes ) {
}

$button_markup = sprintf(
'<button type="submit" class="wp-block-search__button ' . $button_classes . '">%s</button>',
'<button type="submit" class="wp-block-search__button %s"%s>%s</button>',
$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(
'<div class="wp-block-search__inside-wrapper"%s>%s</div>',
$width_styles,
$inline_styles['wrapper'],
$input_markup . $button_markup
);
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
Expand Down Expand Up @@ -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 ) ) : '',
);
}