From ce2fb8bfc33e60172a480ce23afe81815073d43d Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 19 Aug 2020 14:13:41 -0700 Subject: [PATCH 01/22] Add support in the editor for button position, and changing the button to an icon. --- packages/block-library/src/search/block.json | 15 +- packages/block-library/src/search/edit.js | 203 ++++++++++++++++-- packages/block-library/src/search/editor.scss | 20 +- packages/block-library/src/search/style.scss | 7 +- 4 files changed, 221 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 0a2f217aca34b..2cd20e1bea330 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -5,16 +5,29 @@ "label": { "type": "string" }, + "showLabel": { + "type": "bool", + "default": false + }, "placeholder": { "type": "string", "default": "" }, "buttonText": { "type": "string" + }, + "buttonPosition": { + "type": "string", + "default": "button-outside" + }, + "buttonUseIcon": { + "type": "bool", + "default": false } }, "supports": { "align": true, - "html": false + "html": false, + "lightBlockWrapper": true } } diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 5de591fb867ae..f7ebcd37029bc 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -1,22 +1,63 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { + __experimentalBlock as Block, + BlockControls, + RichText, +} from '@wordpress/block-editor'; +import { + DropdownMenu, + MenuGroup, + MenuItem, + ToolbarGroup, + Button, + ToolbarButton, +} from '@wordpress/components'; +import { button } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; export default function SearchEdit( { className, attributes, setAttributes } ) { - const { label, placeholder, buttonText } = attributes; + const { + label, + showLabel, + placeholder, + buttonText, + buttonPosition, + buttonUseIcon, + } = attributes; - return ( -
- setAttributes( { label: html } ) } - /> + const getBlockClassNames = () => { + return classnames( + className, + 'button-inside' === buttonPosition + ? 'wp-block-search__button-inside' + : undefined, + 'button-outside' === buttonPosition + ? 'wp-block-search__button-outside' + : undefined, + 'no-button' === buttonPosition + ? 'wp-block-search__no-button' + : undefined, + 'button-only' === buttonPosition + ? 'wp-block-search__button-only' + : undefined, + buttonUseIcon && 'no-button' !== buttonPosition + ? 'wp-block-search__text-button' + : undefined, + ! buttonUseIcon && 'no-button' !== buttonPosition + ? 'wp-block-search__icon-button' + : undefined + ); + }; + + const renderTextField = () => { + return ( - setAttributes( { buttonText: html } ) } - /> -
+ ); + }; + + const renderButton = () => { + return ( + <> + { buttonUseIcon && ( + ', @@ -59,10 +65,22 @@ function render_block_core_search( $attributes ) { ); } + if ( ! empty( $attributes['width'] ) ) { + if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) { + $width_styles = ' style="width: ' . $attributes['width'] . 'px;"'; + } + } + + $field_markup = sprintf( + '
%s
', + $width_styles, + $input_markup . $button_markup + ); + return sprintf( '
%s
', esc_url( home_url( '/' ) ), - $label_markup . $input_markup . $button_markup + $label_markup . $field_markup ); } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 1b5714ee2de3c..297fc41ec5349 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -1,4 +1,10 @@ .wp-block-search { + .wp-block-search__inside-wrapper { + display: flex; + flex: auto; + flex-wrap: nowrap; + } + .wp-block-search__label { width: 100%; } From 45b51dd764445afa50dfa6a9b2ddbbbb93b499f9 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 24 Aug 2020 14:02:29 -0700 Subject: [PATCH 07/22] Add front end rendering support for new attribute classnames, and icon button. --- packages/block-library/src/search/index.php | 68 ++++++++++++++++++-- packages/block-library/src/search/style.scss | 5 ++ 2 files changed, 68 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 756a71806748e..57a8e22d36b2c 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -28,12 +28,19 @@ function render_block_core_search( $attributes ) { ); $input_id = 'wp-block-search__input-' . ++$instance_id; + $classnames = classnames_for_block_core_search( $attributes ); + + $show_label = ( isset( $attributes['showLabel'] ) && ! $attributes['showLabel'] ) ? false : true; + $show_input = ( isset( $attributes['buttonPosition'] ) && 'button-only' == $attributes['buttonPosition'] ) ? false : true; + $show_button = ( isset( $attributes['buttonPosition'] ) && 'no-button' == $attributes['buttonPosition'] ) ? false : true; + $use_icon_button = ( isset( $attributes['buttonUseIcon'] ) && ! $attributes['buttonUseIcon'] ) ? false : true; + $label_markup = ''; $input_markup = ''; $button_markup = ''; $width_styles = ''; - if ( ! empty( $attributes['showLabel'] ) ) { + if ( $show_label ) { if ( ! empty( $attributes['label'] ) ) { $label_markup = sprintf( '', @@ -49,7 +56,7 @@ function render_block_core_search( $attributes ) { } } - if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) { + if ( $show_input ) { $input_markup = sprintf( '', $input_id, @@ -58,10 +65,23 @@ function render_block_core_search( $attributes ) { ); } - if ( ! empty( $attributes['buttonText'] ) ) { + if ( $show_button ) { + $button_internal_markup = ''; + + if ( ! $use_icon_button ) { + if ( ! empty( $attributes['buttonText'] ) ) { + $button_internal_markup = $attributes['buttonText']; + } + } else { + $button_internal_markup = + ' + + '; + } + $button_markup = sprintf( '', - $attributes['buttonText'] + $button_internal_markup ); } @@ -78,8 +98,9 @@ function render_block_core_search( $attributes ) { ); return sprintf( - '
%s
', + '', esc_url( home_url( '/' ) ), + $classnames, $label_markup . $field_markup ); } @@ -96,3 +117,40 @@ function register_block_core_search() { ); } add_action( 'init', 'register_block_core_search' ); + +/** + * Builds the correct top level classnames for the 'core/search' block. + */ +function classnames_for_block_core_search( $attributes ) { + $classnames = []; + + if ( ! empty( $attributes['buttonPosition'] ) ) { + if ( 'button-inside' == $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__button-inside'; + } + + if ( 'button-outside' == $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__button-outside'; + } + + if ( 'no-button' == $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__no-button'; + } + + if ( 'button-only' == $attributes['buttonPosition'] ) { + $classnames[] = 'wp-block-search__button-only'; + } + } + + if ( isset( $attributes['buttonUseIcon'] ) ) { + if ( ! empty( $attributes['buttonPosition'] ) && 'no-button' !== $attributes['buttonPosition'] ) { + if ( $attributes['buttonUseIcon'] ) { + $classnames[] = 'wp-block-search__icon-button'; + } else { + $classnames[] = 'wp-block-search__text-button'; + } + } + } + + return implode( ' ', $classnames ); +} diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 297fc41ec5349..66f7891e75bf3 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -16,6 +16,11 @@ .wp-block-search__button { margin-left: 0.625em; + + svg { + width: 25px; + height: 25px; + } } &.wp-block-search__button-only { From f3f1632e43c5388e490fdffcb10c6d9e28fd3e4f Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 25 Aug 2020 11:42:29 -0700 Subject: [PATCH 08/22] Add styles for button inside selection on front end. --- packages/block-library/src/search/editor.scss | 4 +-- packages/block-library/src/search/style.scss | 26 +++++++++++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 8b56fe928a958..f5a1eeb188c61 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -1,5 +1,5 @@ .wp-block-search { - &__input, + .wp-block-search__input, &.wp-block-search__button-inside .wp-block-search__inside-wrapper { border-radius: $radius-block-ui; border: 1px solid $dark-gray-200; @@ -14,7 +14,7 @@ } } - &__button { + .wp-block-search__button { background: #f7f7f7; border-radius: $radius-block-ui; border: 1px solid #ccc; diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 66f7891e75bf3..475e7b7b72669 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -12,14 +12,16 @@ .wp-block-search__input { flex-grow: 1; min-width: 50px; + border: 1px solid $dark-gray-200; } .wp-block-search__button { margin-left: 0.625em; + word-break: normal; svg { - width: 25px; - height: 25px; + min-width: 25px; + min-height: 25px; } } @@ -28,4 +30,24 @@ margin-left: 0; } } + + &.wp-block-search__button-inside .wp-block-search__inside-wrapper { + padding: $grid-unit-05; + border: 1px solid $dark-gray-200; + + .wp-block-search__input { + border-radius: 0; + border: none; + padding: 0 0 0 4px; + + &:focus { + outline: none; + } + } + + .wp-block-search__button { + padding: 2px 8px; + } + } } + From c4dddad2e53ca2ba3aa836deee178b9f01ac2b41 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 25 Aug 2020 11:50:40 -0700 Subject: [PATCH 09/22] Remove duplicated editor styles --- packages/block-library/src/search/editor.scss | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index f5a1eeb188c61..042ec51177c61 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -1,4 +1,12 @@ .wp-block-search { + .wp-block-search__input { + padding: $grid-unit-10; + } + + &.wp-block-search__button-inside .wp-block-search__inside-wrapper { + padding: $grid-unit-05; + } + .wp-block-search__input, &.wp-block-search__button-inside .wp-block-search__inside-wrapper { border-radius: $radius-block-ui; @@ -6,7 +14,6 @@ color: $dark-gray-placeholder; font-family: $default-font; font-size: $default-font-size; - padding: $grid-unit-10; background-color: $white; &:focus { @@ -24,18 +31,4 @@ padding: 6px 10px; color: $dark-gray-700; } - - &.wp-block-search__button-inside .wp-block-search__inside-wrapper { - padding: $grid-unit-05; - - .wp-block-search__input { - border-radius: 0; - border: none; - padding: 0 0 0 4px; - } - - .wp-block-search__button { - padding: 2px 8px; - } - } } From eaa56a8af7eab9d51cd317d490c57484fb535c6d Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 25 Aug 2020 14:13:06 -0700 Subject: [PATCH 10/22] Better preservation of visuals when moving from the previous version of the block. --- packages/block-library/src/search/block.json | 4 ++-- packages/block-library/src/search/index.php | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index ad60d90d06734..6288380a79b41 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -7,7 +7,7 @@ }, "showLabel": { "type": "bool", - "default": false + "default": true }, "placeholder": { "type": "string", @@ -15,7 +15,7 @@ }, "width": { "type": "number", - "default": 250 + "default": 460 }, "buttonText": { "type": "string" diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 57a8e22d36b2c..27e7040ad8aaf 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -30,10 +30,10 @@ function render_block_core_search( $attributes ) { $input_id = 'wp-block-search__input-' . ++$instance_id; $classnames = classnames_for_block_core_search( $attributes ); - $show_label = ( isset( $attributes['showLabel'] ) && ! $attributes['showLabel'] ) ? false : true; - $show_input = ( isset( $attributes['buttonPosition'] ) && 'button-only' == $attributes['buttonPosition'] ) ? false : true; - $show_button = ( isset( $attributes['buttonPosition'] ) && 'no-button' == $attributes['buttonPosition'] ) ? false : true; - $use_icon_button = ( isset( $attributes['buttonUseIcon'] ) && ! $attributes['buttonUseIcon'] ) ? false : true; + $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; + $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; + $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' == $attributes['buttonPosition'] ) ? false : true; + $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' == $attributes['buttonPosition'] ) ? false : true; $label_markup = ''; $input_markup = ''; From 47ba4e6c8cfdd0908a24973f2cdb8a77074a74fa Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 25 Aug 2020 14:39:54 -0700 Subject: [PATCH 11/22] Do not show the drag handle when the block is not selected. --- packages/block-library/src/search/edit.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index efec113d6ec67..56a073269518a 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -45,6 +45,7 @@ export default function SearchEdit( { attributes, setAttributes, toggleSelection, + isSelected, } ) { const { label, @@ -286,15 +287,16 @@ export default function SearchEdit( { minWidth={ MIN_WIDTH } bounds={ align === undefined ? 'parent' : 'window' } enable={ getResizableSides() } + onResizeStart={ () => { + toggleSelection( false ); + } } onResizeStop={ ( event, direction, elt, delta ) => { setAttributes( { width: parseInt( width + delta.width, 10 ), } ); toggleSelection( true ); } } - onResizeStart={ () => { - toggleSelection( false ); - } } + showHandle={ isSelected } > { ( 'button-inside' === buttonPosition || 'button-outside' === buttonPosition ) && ( From 4c4390c7b9c72de472f8d6eb3a1a6ffbbf89c643 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 25 Aug 2020 14:46:58 -0700 Subject: [PATCH 12/22] Remove bounds restriction on resize as this breaks when the parent is a dynamic width. --- packages/block-library/src/search/edit.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 56a073269518a..40a56c4f6f5a7 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -58,7 +58,7 @@ export default function SearchEdit( { buttonUseIcon, } = attributes; - const MIN_WIDTH = 120; + const MIN_WIDTH = 220; const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; @@ -285,7 +285,6 @@ export default function SearchEdit( { } } className="wp-block-search__inside-wrapper" minWidth={ MIN_WIDTH } - bounds={ align === undefined ? 'parent' : 'window' } enable={ getResizableSides() } onResizeStart={ () => { toggleSelection( false ); From 08c474d7f05c5d66890167af708352885f1f569f Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 26 Aug 2020 12:55:31 -0700 Subject: [PATCH 13/22] Group all button options in the block toolbar together. --- packages/block-library/src/search/edit.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 40a56c4f6f5a7..dd0191a2a9fa7 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -169,9 +169,6 @@ export default function SearchEdit( { } } className={ showLabel ? 'is-pressed' : undefined } /> - - - Date: Thu, 27 Aug 2020 14:14:54 -0700 Subject: [PATCH 14/22] Add support for setting percentage widths. --- packages/block-library/src/search/block.json | 3 +- packages/block-library/src/search/edit.js | 73 +++++++++++++++++-- packages/block-library/src/search/editor.scss | 4 + 3 files changed, 70 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 6288380a79b41..df00da29b3783 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -14,8 +14,7 @@ "default": "" }, "width": { - "type": "number", - "default": 460 + "type": "string" }, "buttonText": { "type": "string" diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index dd0191a2a9fa7..bb7d666ca17fd 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -19,6 +19,7 @@ import { MenuItem, ToolbarGroup, Button, + ButtonGroup, ToolbarButton, ResizableBox, PanelBody, @@ -40,6 +41,18 @@ import { toggleLabel, } from './icons'; +/** + * Constants + */ +const MIN_WIDTH = 220; +const MIN_WIDTH_UNIT = 'px'; +const PC_WIDTH_DEFAULT = 50; +const PX_WIDTH_DEFAULT = 350; +const CSS_UNITS = [ + { value: '%', label: '%', default: PC_WIDTH_DEFAULT }, + { value: 'px', label: 'px', default: PX_WIDTH_DEFAULT }, +]; + export default function SearchEdit( { className, attributes, @@ -52,13 +65,13 @@ export default function SearchEdit( { showLabel, placeholder, width, + widthUnit, align, buttonText, buttonPosition, buttonUseIcon, } = attributes; - const MIN_WIDTH = 220; const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; @@ -248,13 +261,52 @@ export default function SearchEdit( { > - setAttributes( { width: newWidth } ) - } + min={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` } + onChange={ ( newWidth ) => { + setAttributes( { + width: parseInt( newWidth, 10 ), + } ); + } } + onUnitChange={ ( newUnit ) => { + setAttributes( { + width: + '%' === newUnit + ? PC_WIDTH_DEFAULT + : PX_WIDTH_DEFAULT, + widthUnit: newUnit, + } ); + } } style={ { maxWidth: 80 } } - value={ width } + value={ `${ width }${ widthUnit }` } + unit={ widthUnit } + units={ CSS_UNITS } /> + + + { [ 25, 50, 75, 100 ].map( ( widthValue ) => { + return ( + + ); + } ) } + @@ -278,12 +330,17 @@ export default function SearchEdit( { { + onResizeStart={ ( event, direction, elt ) => { + setAttributes( { + width: parseInt( elt.offsetWidth, 10 ), + widthUnit: 'px', + } ); toggleSelection( false ); } } onResizeStop={ ( event, direction, elt, delta ) => { diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 042ec51177c61..bc2cd0dfe6e38 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -31,4 +31,8 @@ padding: 6px 10px; color: $dark-gray-700; } + + &__components-button-group { + margin-top: 10px; + } } From 1b6dd6cd18b9098c8f19cb127c92c1f2e1bfb1db Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 27 Aug 2020 14:20:51 -0700 Subject: [PATCH 15/22] Add missing widthUnit attribute. --- packages/block-library/src/search/block.json | 3 +++ packages/block-library/src/search/index.php | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index df00da29b3783..92de1d6f028b3 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -14,6 +14,9 @@ "default": "" }, "width": { + "type": "number" + }, + "widthUnit": { "type": "string" }, "buttonText": { diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 27e7040ad8aaf..7464488e8ba92 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -85,9 +85,9 @@ function render_block_core_search( $attributes ) { ); } - if ( ! empty( $attributes['width'] ) ) { + if ( ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ) ) { if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) { - $width_styles = ' style="width: ' . $attributes['width'] . 'px;"'; + $width_styles = ' style="width: ' . $attributes['width'] . $attributes['widthUnit'] . ';"'; } } From c167723298c11cd0061d45b8695048906e6f2bf6 Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 2 Sep 2020 10:05:05 -0700 Subject: [PATCH 16/22] Make sure that the search block cannot be resized beyond the width of its parent. --- packages/block-library/src/search/edit.js | 8 +++++++- packages/block-library/src/search/style.scss | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index bb7d666ca17fd..9aaef60385462 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -263,8 +263,14 @@ export default function SearchEdit( { id={ unitControlInputId } min={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` } onChange={ ( newWidth ) => { + const filteredWidth = + widthUnit === '%' && + parseInt( newWidth, 10 ) > 100 + ? 100 + : newWidth; + setAttributes( { - width: parseInt( newWidth, 10 ), + width: parseInt( filteredWidth, 10 ), } ); } } onUnitChange={ ( newUnit ) => { diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 475e7b7b72669..0d92a834918d2 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -3,6 +3,7 @@ display: flex; flex: auto; flex-wrap: nowrap; + max-width: 100%; } .wp-block-search__label { From 453d33895ec9cc366cb02a535c947b163a331dcb Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 2 Sep 2020 11:16:23 -0700 Subject: [PATCH 17/22] Fix e2e tests for search block. --- packages/e2e-tests/fixtures/blocks/core__search.json | 5 ++++- .../e2e-tests/fixtures/blocks/core__search__custom-text.json | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__search.json b/packages/e2e-tests/fixtures/blocks/core__search.json index e52d38cd79ca2..9bfe776f2127f 100644 --- a/packages/e2e-tests/fixtures/blocks/core__search.json +++ b/packages/e2e-tests/fixtures/blocks/core__search.json @@ -4,7 +4,10 @@ "name": "core/search", "isValid": true, "attributes": { - "placeholder": "" + "buttonPosition": "button-outside", + "buttonUseIcon": false, + "placeholder": "", + "showLabel": true }, "innerBlocks": [], "originalContent": "" diff --git a/packages/e2e-tests/fixtures/blocks/core__search__custom-text.json b/packages/e2e-tests/fixtures/blocks/core__search__custom-text.json index fb91161919c83..5d2c86a18d590 100644 --- a/packages/e2e-tests/fixtures/blocks/core__search__custom-text.json +++ b/packages/e2e-tests/fixtures/blocks/core__search__custom-text.json @@ -4,9 +4,12 @@ "name": "core/search", "isValid": true, "attributes": { + "buttonPosition": "button-outside", "label": "Custom label", "placeholder": "Custom placeholder", - "buttonText": "Custom button text" + "buttonText": "Custom button text", + "buttonUseIcon": false, + "showLabel": true }, "innerBlocks": [], "originalContent": "" From b2b0932192b42795e76d46b561159d93e21a6dc1 Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 2 Sep 2020 12:20:04 -0700 Subject: [PATCH 18/22] Update button labels to sentence case to match other core blocks. --- packages/block-library/src/search/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 9aaef60385462..3665c8cdac047 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -173,7 +173,7 @@ export default function SearchEdit( { { setAttributes( { @@ -184,7 +184,7 @@ export default function SearchEdit( { /> { ( { onClose } ) => ( @@ -238,7 +238,7 @@ export default function SearchEdit( { { 'no-button' !== buttonPosition && ( { setAttributes( { From ba33fda30b6764a44b1a32bc65b7eef2949175c3 Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 3 Sep 2020 09:47:20 -0700 Subject: [PATCH 19/22] Convert px usage to em. --- packages/block-library/src/search/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 0d92a834918d2..c0a411966d6a2 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -12,7 +12,7 @@ .wp-block-search__input { flex-grow: 1; - min-width: 50px; + min-width: 3em; border: 1px solid $dark-gray-200; } @@ -21,8 +21,8 @@ word-break: normal; svg { - min-width: 25px; - min-height: 25px; + min-width: 1.5em; + min-height: 1.5em; } } @@ -47,7 +47,7 @@ } .wp-block-search__button { - padding: 2px 8px; + padding: 0.125em 0.5em; } } } From 4b426ba4445b40160f930a66be93a73ba302daef Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 3 Sep 2020 09:53:41 -0700 Subject: [PATCH 20/22] Fix missed px to em converts --- packages/block-library/src/search/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index c0a411966d6a2..2c8b03cafb275 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -39,7 +39,7 @@ .wp-block-search__input { border-radius: 0; border: none; - padding: 0 0 0 4px; + padding: 0 0 0 0.25em; &:focus { outline: none; From 34c30825fd7d66d3d722e6f23a55075e58f4773f Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 3 Sep 2020 10:22:35 -0700 Subject: [PATCH 21/22] Fix PHP lint issues. --- packages/block-library/src/search/index.php | 32 +++++++++++---------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 7464488e8ba92..6b8586641efef 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -27,18 +27,16 @@ function render_block_core_search( $attributes ) { ) ); - $input_id = 'wp-block-search__input-' . ++$instance_id; - $classnames = classnames_for_block_core_search( $attributes ); - + $input_id = 'wp-block-search__input-' . ++$instance_id; + $classnames = classnames_for_block_core_search( $attributes ); $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; - $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' == $attributes['buttonPosition'] ) ? false : true; - $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' == $attributes['buttonPosition'] ) ? false : true; - - $label_markup = ''; - $input_markup = ''; - $button_markup = ''; - $width_styles = ''; + $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; + $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; + $label_markup = ''; + $input_markup = ''; + $button_markup = ''; + $width_styles = ''; if ( $show_label ) { if ( ! empty( $attributes['label'] ) ) { @@ -120,24 +118,28 @@ function register_block_core_search() { /** * Builds the correct top level classnames for the 'core/search' block. + * + * @param array $attributes The block attributes. + * + * @return string The classnames used in the block. */ function classnames_for_block_core_search( $attributes ) { - $classnames = []; + $classnames = array(); if ( ! empty( $attributes['buttonPosition'] ) ) { - if ( 'button-inside' == $attributes['buttonPosition'] ) { + if ( 'button-inside' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-inside'; } - if ( 'button-outside' == $attributes['buttonPosition'] ) { + if ( 'button-outside' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-outside'; } - if ( 'no-button' == $attributes['buttonPosition'] ) { + if ( 'no-button' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__no-button'; } - if ( 'button-only' == $attributes['buttonPosition'] ) { + if ( 'button-only' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-only'; } } From 357998fd682f971fddad0412bd0d333359e4c6fd Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 3 Sep 2020 10:30:49 -0700 Subject: [PATCH 22/22] Replace tab with space for line alignment. --- packages/block-library/src/search/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 6b8586641efef..08c8652839835 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -29,7 +29,7 @@ function render_block_core_search( $attributes ) { $input_id = 'wp-block-search__input-' . ++$instance_id; $classnames = classnames_for_block_core_search( $attributes ); - $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; + $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;