From ae41e8ce7174758c4a0d7d054907c1556b63debf Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 11 May 2021 10:44:13 -0700 Subject: [PATCH 01/36] Reinstate the icon only option in the UI. --- packages/block-library/src/search/edit.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index ec794a60e44ac..af81153b28930 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -230,6 +230,17 @@ export default function SearchEdit( { > { __( 'Button Inside' ) } + { + setAttributes( { + buttonPosition: 'button-only', + } ); + onClose(); + } } + > + { __( 'Button Only' ) } + ) } From 52572f29ce2a9dd1d6a1f75841db5de4ec209231 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 11 May 2021 11:52:15 -0700 Subject: [PATCH 02/36] Add basic select control to set button behavior. --- packages/block-library/src/search/block.json | 3 +++ packages/block-library/src/search/edit.js | 27 ++++++++++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index b96f14f53c778..d2d8a9017e8ce 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -37,6 +37,9 @@ "buttonUseIcon": { "type": "boolean", "default": false + }, + "buttonBehavior": { + "type": "string" } }, "supports": { diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index af81153b28930..9fa1e37710c15 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -25,6 +25,7 @@ import { PanelBody, BaseControl, __experimentalUseCustomUnits as useCustomUnits, + SelectControl, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { search } from '@wordpress/icons'; @@ -69,6 +70,7 @@ export default function SearchEdit( { buttonText, buttonPosition, buttonUseIcon, + buttonBehavior, style, } = attributes; @@ -264,6 +266,27 @@ export default function SearchEdit( { + { 'button-only' === buttonPosition && ( + + setAttributes( { buttonBehavior: behavior } ) + } + options={ [ + { + value: 'expand-searchfield', + label: __( 'Show and expand search field' ), + }, + { + value: 'search-page-link', + label: __( 'Navigate to search page' ), + }, + //{ value: 'search-modal', 'label': __( 'Show search modal') }, + ] } + /> + ) } + { ( 'button-inside' === buttonPosition || - 'button-outside' === buttonPosition ) && ( + 'button-outside' === buttonPosition || + 'button-only' === buttonPosition ) && ( <> { renderTextField() } { renderButton() } ) } - { 'button-only' === buttonPosition && renderButton() } { 'no-button' === buttonPosition && renderTextField() } From aa0a932e77d820eb15f9855f4b2554ba5987f929 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 11 May 2021 13:45:19 -0700 Subject: [PATCH 03/36] Handle different display modes for button only view. --- packages/block-library/src/search/edit.js | 23 ++++++++++++++++---- packages/block-library/src/search/style.scss | 9 ++++++-- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 9fa1e37710c15..3b877a7842d3e 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -52,6 +52,8 @@ import { // Used to calculate border radius adjustment to avoid "fat" corners when // button is placed inside wrapper. const DEFAULT_INNER_PADDING = 4; +const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield'; +const BUTTON_BEHAVIOR_LINK = 'search-page-link'; export default function SearchEdit( { className, @@ -98,6 +100,12 @@ export default function SearchEdit( { 'button-only' === buttonPosition ? 'wp-block-search__button-only' : undefined, + BUTTON_BEHAVIOR_EXPAND === buttonBehavior + ? 'wp-block-search__button-behavior-expand' + : undefined, + BUTTON_BEHAVIOR_LINK === buttonBehavior + ? 'wp-block-search__button-behavior-link' + : undefined, ! buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__text-button' : undefined, @@ -121,7 +129,10 @@ export default function SearchEdit( { }; const getResizableSides = () => { - if ( 'button-only' === buttonPosition ) { + if ( + 'button-only' === buttonPosition && + 'search-page-link' === buttonBehavior + ) { return {}; } @@ -275,11 +286,11 @@ export default function SearchEdit( { } options={ [ { - value: 'expand-searchfield', + value: BUTTON_BEHAVIOR_EXPAND, label: __( 'Show and expand search field' ), }, { - value: 'search-page-link', + value: BUTTON_BEHAVIOR_LINK, label: __( 'Navigate to search page' ), }, //{ value: 'search-modal', 'label': __( 'Show search modal') }, @@ -410,13 +421,17 @@ export default function SearchEdit( { > { ( 'button-inside' === buttonPosition || 'button-outside' === buttonPosition || - 'button-only' === buttonPosition ) && ( + ( 'button-only' === buttonPosition && + BUTTON_BEHAVIOR_LINK !== buttonBehavior ) ) && ( <> { renderTextField() } { renderButton() } ) } + { 'button-only' === buttonPosition && + BUTTON_BEHAVIOR_LINK === buttonBehavior && + renderButton() } { 'no-button' === buttonPosition && renderTextField() } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 9959c4545ace4..76173d3cfab39 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -1,5 +1,4 @@ .wp-block-search { - .wp-block-search__button { background: #f7f7f7; border: 1px solid #ccc; @@ -60,8 +59,14 @@ } } + &.wp-block-search__button-behavior-expand { + .wp-block-search__input { + opacity: 0.5; + // TODO handle show/hide + } + } + &.aligncenter .wp-block-search__inside-wrapper { margin: auto; } } - From f4d1a5e88e9b47fcf99158ecbdfaf23ba551a092 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 11 May 2021 15:10:51 -0700 Subject: [PATCH 04/36] Some work on show/hide of search field. --- packages/block-library/src/search/edit.js | 19 ++++++++++++++++++- packages/block-library/src/search/style.scss | 13 +++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 3b877a7842d3e..086e27f58353d 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -30,6 +30,7 @@ import { import { useInstanceId } from '@wordpress/compose'; import { search } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +import { useRef, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -79,6 +80,20 @@ export default function SearchEdit( { const borderRadius = style?.border?.radius; const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; + const searchFieldRef = useRef(); + + useEffect( () => { + if ( 'button-only' !== buttonPosition ) { + return; + } + + if ( isSelected ) { + searchFieldRef.current.style.marginLeft = 0; + //console.log( searchFieldRef.current.offsetWidth ); + } else { + searchFieldRef.current.style.marginLeft = `-${ searchFieldRef.current.offsetWidth }px`; + } + }, [ searchFieldRef ] ); const units = useCustomUnits( { availableUnits: [ '%', 'px' ], @@ -111,7 +126,8 @@ export default function SearchEdit( { : undefined, buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__icon-button' - : undefined + : undefined, + isSelected ? 'wp-block-search__is-selected' : undefined ); }; @@ -158,6 +174,7 @@ export default function SearchEdit( { onChange={ ( event ) => setAttributes( { placeholder: event.target.value } ) } + ref={ searchFieldRef } /> ); }; diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 76173d3cfab39..c503fd2c4ceb0 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -60,10 +60,15 @@ } &.wp-block-search__button-behavior-expand { - .wp-block-search__input { - opacity: 0.5; - // TODO handle show/hide - } + overflow: hidden; + + // .wp-block-search__input { + // } + + // &.wp-block-search__is-selected { + // .wp-block-search__input { + // } + // } } &.aligncenter .wp-block-search__inside-wrapper { From 0877d8612eb715375285281675e82d183043b0db Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 12 May 2021 13:34:20 -0700 Subject: [PATCH 05/36] Very rough proof of concept for animating in and out the search field. --- packages/block-library/src/search/edit.js | 12 ++++++++++-- packages/block-library/src/search/style.scss | 14 ++++++++------ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 086e27f58353d..0a8beb20aaa41 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -89,11 +89,19 @@ export default function SearchEdit( { if ( isSelected ) { searchFieldRef.current.style.marginLeft = 0; - //console.log( searchFieldRef.current.offsetWidth ); + const resetWidth = setTimeout( () => { + searchFieldRef.current.style.flexGrow = '1'; + searchFieldRef.current.style.width = `${ width }${ widthUnit }`; + clearTimeout( resetWidth ); + }, 300 ); } else { + searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; + searchFieldRef.current.style.flexGrow = '0'; searchFieldRef.current.style.marginLeft = `-${ searchFieldRef.current.offsetWidth }px`; + searchFieldRef.current.style.transitionDuration = '300ms'; + searchFieldRef.current.style.transitionProperty = 'margin-left'; } - }, [ searchFieldRef ] ); + } ); const units = useCustomUnits( { availableUnits: [ '%', 'px' ], diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index c503fd2c4ceb0..bb9bfd229a919 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -62,13 +62,15 @@ &.wp-block-search__button-behavior-expand { overflow: hidden; - // .wp-block-search__input { - // } + .wp-block-search__input { + flex-grow: 1; + } - // &.wp-block-search__is-selected { - // .wp-block-search__input { - // } - // } + &.wp-block-search__is-selected { + .wp-block-search__input { + // flex-grow: 1; + } + } } &.aligncenter .wp-block-search__inside-wrapper { From a36fe3937de72a5345e35441b596561a894914de Mon Sep 17 00:00:00 2001 From: apeatling Date: Fri, 14 May 2021 14:01:04 -0700 Subject: [PATCH 06/36] Hide the searchfield on first selection of the button only view. --- packages/block-library/src/search/block.json | 3 +- packages/block-library/src/search/edit.js | 61 +++++++++++++++----- 2 files changed, 48 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index d2d8a9017e8ce..40c14458c4d3e 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -39,7 +39,8 @@ "default": false }, "buttonBehavior": { - "type": "string" + "type": "string", + "default": "expand-searchfield" } }, "supports": { diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 0a8beb20aaa41..eb588d34822ff 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -55,6 +55,7 @@ import { const DEFAULT_INNER_PADDING = 4; const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield'; const BUTTON_BEHAVIOR_LINK = 'search-page-link'; +const SEARCHFIELD_ANIMATION_DURATION = 300; //ms export default function SearchEdit( { className, @@ -81,27 +82,52 @@ export default function SearchEdit( { const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; const searchFieldRef = useRef(); + const buttonRef = useRef(); useEffect( () => { - if ( 'button-only' !== buttonPosition ) { - return; + if ( isSelected ) { + showSearchField(); + } else { + hideSearchField(); } + }, [ isSelected ] ); - if ( isSelected ) { - searchFieldRef.current.style.marginLeft = 0; - const resetWidth = setTimeout( () => { - searchFieldRef.current.style.flexGrow = '1'; - searchFieldRef.current.style.width = `${ width }${ widthUnit }`; - clearTimeout( resetWidth ); - }, 300 ); + useEffect( () => { + if ( 'button-only' !== buttonPosition ) { + showSearchField( false ); } else { - searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; - searchFieldRef.current.style.flexGrow = '0'; - searchFieldRef.current.style.marginLeft = `-${ searchFieldRef.current.offsetWidth }px`; - searchFieldRef.current.style.transitionDuration = '300ms'; - searchFieldRef.current.style.transitionProperty = 'margin-left'; + hideSearchField(); } - } ); + }, [ buttonPosition ] ); + + const hideSearchField = () => { + searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; + searchFieldRef.current.style.flexGrow = '0'; + searchFieldRef.current.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + searchFieldRef.current.style.transitionProperty = 'margin-left'; + + const offset = + searchFieldRef.current.offsetWidth + + parseInt( + window.getComputedStyle( searchFieldRef.current ).marginRight + ) + + parseInt( window.getComputedStyle( buttonRef.current ).marginLeft ); + + searchFieldRef.current.style.marginLeft = `-${ offset }px`; + }; + + const showSearchField = ( animate = true ) => { + const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; + + searchFieldRef.current.style.marginLeft = 0; + searchFieldRef.current.style.transitionDuration = `${ duration }ms`; + + const resetWidth = setTimeout( () => { + searchFieldRef.current.style.flexGrow = '1'; + searchFieldRef.current.style.width = `${ width }${ widthUnit }`; + clearTimeout( resetWidth ); + }, duration ); + }; const units = useCustomUnits( { availableUnits: [ '%', 'px' ], @@ -195,6 +221,8 @@ export default function SearchEdit( { icon={ search } className="wp-block-search__button" style={ { borderRadius } } + onClick={ showSearchField } + ref={ buttonRef } /> ) } @@ -209,6 +237,8 @@ export default function SearchEdit( { onChange={ ( html ) => setAttributes( { buttonText: html } ) } + onClick={ showSearchField } + ref={ buttonRef } /> ) } @@ -274,6 +304,7 @@ export default function SearchEdit( { setAttributes( { buttonPosition: 'button-only', } ); + onClose(); } } > From a825bb842910bb033b4ca0c09a2233b26a288887 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 17 May 2021 10:12:43 -0700 Subject: [PATCH 07/36] Move functions. --- packages/block-library/src/search/edit.js | 29 +++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index eb588d34822ff..be3aca932e83f 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -192,6 +192,35 @@ export default function SearchEdit( { }; }; + const hideSearchField = () => { + searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; + searchFieldRef.current.style.flexGrow = '0'; + searchFieldRef.current.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + searchFieldRef.current.style.transitionProperty = 'margin-left'; + + const offset = + searchFieldRef.current.offsetWidth + + parseInt( + window.getComputedStyle( searchFieldRef.current ).marginRight + ) + + parseInt( window.getComputedStyle( buttonRef.current ).marginLeft ); + + searchFieldRef.current.style.marginLeft = `-${ offset }px`; + }; + + const showSearchField = ( animate = true ) => { + const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; + + searchFieldRef.current.style.marginLeft = 0; + searchFieldRef.current.style.transitionDuration = `${ duration }ms`; + + const resetWidth = setTimeout( () => { + searchFieldRef.current.style.flexGrow = '1'; + searchFieldRef.current.style.width = `${ width }${ widthUnit }`; + clearTimeout( resetWidth ); + }, duration ); + }; + const renderTextField = () => { return ( Date: Mon, 17 May 2021 14:03:52 -0700 Subject: [PATCH 08/36] Shift code to css from js. --- packages/block-library/src/search/edit.js | 37 ++++++++++---------- packages/block-library/src/search/style.scss | 18 ++++++++-- 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index be3aca932e83f..5663dfbd1befa 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -85,6 +85,10 @@ export default function SearchEdit( { const buttonRef = useRef(); useEffect( () => { + if ( 'button-only' !== buttonPosition ) { + return; + } + if ( isSelected ) { showSearchField(); } else { @@ -161,7 +165,7 @@ export default function SearchEdit( { buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__icon-button' : undefined, - isSelected ? 'wp-block-search__is-selected' : undefined + isSelected ? undefined : 'wp-block-search__is-deselected' ); }; @@ -193,32 +197,27 @@ export default function SearchEdit( { }; const hideSearchField = () => { - searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; - searchFieldRef.current.style.flexGrow = '0'; - searchFieldRef.current.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - searchFieldRef.current.style.transitionProperty = 'margin-left'; + const wrapper = searchFieldRef.current.offsetParent; + const searchField = searchFieldRef.current; + const button = buttonRef.current; - const offset = - searchFieldRef.current.offsetWidth + - parseInt( - window.getComputedStyle( searchFieldRef.current ).marginRight - ) + - parseInt( window.getComputedStyle( buttonRef.current ).marginLeft ); - - searchFieldRef.current.style.marginLeft = `-${ offset }px`; + searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.width = `${ button.offsetWidth }px`; + wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; }; const showSearchField = ( animate = true ) => { + const wrapper = searchFieldRef.current.offsetParent; + const searchField = searchFieldRef.current; const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; - - searchFieldRef.current.style.marginLeft = 0; - searchFieldRef.current.style.transitionDuration = `${ duration }ms`; - const resetWidth = setTimeout( () => { - searchFieldRef.current.style.flexGrow = '1'; - searchFieldRef.current.style.width = `${ width }${ widthUnit }`; + searchField.style.width = `${ width }${ widthUnit }`; + clearTimeout( resetWidth ); }, duration ); + + searchField.style.transitionDuration = `${ duration }ms`; + wrapper.style.width = `${ width }${ widthUnit }`; }; const renderTextField = () => { diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index bb9bfd229a919..5e73b9b5b6b29 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -62,13 +62,25 @@ &.wp-block-search__button-behavior-expand { overflow: hidden; + .wp-block-search__inside-wrapper { + overflow: hidden; + transition-property: width; + } + .wp-block-search__input { - flex-grow: 1; + transition-property: width; } - &.wp-block-search__is-selected { + // !important here to override inline styles on button only deselected view. + &.wp-block-search__is-deselected { + .wp-block-search__inside-wrapper { + min-width: 0 !important; + } .wp-block-search__input { - // flex-grow: 1; + width: 0 !important; + min-width: 0 !important; + padding: 0 !important; + border: none !important; } } } From 69f2639687d896e0386498fb75b8a15cf0264a11 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 17 May 2021 14:20:37 -0700 Subject: [PATCH 09/36] Set the closed class on a delay and use state. --- packages/block-library/src/search/edit.js | 15 ++++++++++++--- packages/block-library/src/search/style.scss | 8 ++------ 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 5663dfbd1befa..3476183325670 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -30,7 +30,7 @@ import { import { useInstanceId } from '@wordpress/compose'; import { search } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; -import { useRef, useEffect } from '@wordpress/element'; +import { useRef, useEffect, useState } from '@wordpress/element'; /** * Internal dependencies @@ -83,6 +83,7 @@ export default function SearchEdit( { const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; const searchFieldRef = useRef(); const buttonRef = useRef(); + const [ isClosed, setIsClosed ] = useState( false ); useEffect( () => { if ( 'button-only' !== buttonPosition ) { @@ -165,7 +166,7 @@ export default function SearchEdit( { buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__icon-button' : undefined, - isSelected ? undefined : 'wp-block-search__is-deselected' + isClosed ? 'wp-block-search__is-closed' : undefined ); }; @@ -201,21 +202,29 @@ export default function SearchEdit( { const searchField = searchFieldRef.current; const button = buttonRef.current; + const delayIsClosed = setTimeout( () => { + setIsClosed( true ); + clearTimeout( delayIsClosed ); + }, SEARCHFIELD_ANIMATION_DURATION / 2 ); + searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.width = `${ button.offsetWidth }px`; wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + + wrapper.style.width = `${ button.offsetWidth }px`; }; const showSearchField = ( animate = true ) => { const wrapper = searchFieldRef.current.offsetParent; const searchField = searchFieldRef.current; const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; + const resetWidth = setTimeout( () => { searchField.style.width = `${ width }${ widthUnit }`; clearTimeout( resetWidth ); }, duration ); + setIsClosed( false ); searchField.style.transitionDuration = `${ duration }ms`; wrapper.style.width = `${ width }${ widthUnit }`; }; diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 5e73b9b5b6b29..b2af3af91c675 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -67,12 +67,8 @@ transition-property: width; } - .wp-block-search__input { - transition-property: width; - } - // !important here to override inline styles on button only deselected view. - &.wp-block-search__is-deselected { + &.wp-block-search__is-closed { .wp-block-search__inside-wrapper { min-width: 0 !important; } @@ -80,7 +76,7 @@ width: 0 !important; min-width: 0 !important; padding: 0 !important; - border: none !important; + border-left: none !important; } } } From 827805a66bfdf97a750610f1cf99219fd90da964 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 17 May 2021 15:00:38 -0700 Subject: [PATCH 10/36] Remove state --- packages/block-library/src/search/edit.js | 11 ++--------- packages/block-library/src/search/style.scss | 8 +++----- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 3476183325670..33ab4a5eb22d8 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -30,7 +30,7 @@ import { import { useInstanceId } from '@wordpress/compose'; import { search } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; -import { useRef, useEffect, useState } from '@wordpress/element'; +import { useRef, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -83,7 +83,6 @@ export default function SearchEdit( { const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; const searchFieldRef = useRef(); const buttonRef = useRef(); - const [ isClosed, setIsClosed ] = useState( false ); useEffect( () => { if ( 'button-only' !== buttonPosition ) { @@ -166,7 +165,7 @@ export default function SearchEdit( { buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__icon-button' : undefined, - isClosed ? 'wp-block-search__is-closed' : undefined + isSelected ? undefined : 'wp-block-search__is-deselected' ); }; @@ -202,11 +201,6 @@ export default function SearchEdit( { const searchField = searchFieldRef.current; const button = buttonRef.current; - const delayIsClosed = setTimeout( () => { - setIsClosed( true ); - clearTimeout( delayIsClosed ); - }, SEARCHFIELD_ANIMATION_DURATION / 2 ); - searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; @@ -224,7 +218,6 @@ export default function SearchEdit( { clearTimeout( resetWidth ); }, duration ); - setIsClosed( false ); searchField.style.transitionDuration = `${ duration }ms`; wrapper.style.width = `${ width }${ widthUnit }`; }; diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index b2af3af91c675..ac8baeab9f2e9 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -65,18 +65,16 @@ .wp-block-search__inside-wrapper { overflow: hidden; transition-property: width; + min-width: 0 !important; } // !important here to override inline styles on button only deselected view. - &.wp-block-search__is-closed { - .wp-block-search__inside-wrapper { - min-width: 0 !important; - } + &.wp-block-search__is-deselected { .wp-block-search__input { width: 0 !important; min-width: 0 !important; padding: 0 !important; - border-left: none !important; + border-left-width: 0 !important; } } } From d484ebf4205cef740ae8cedfa0b736fe42277ce3 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 11:15:32 -0700 Subject: [PATCH 11/36] Manually set the field hidden settings. --- packages/block-library/src/search/block.json | 10 ++++- packages/block-library/src/search/edit.js | 45 +++++++++++++------- packages/block-library/src/search/style.scss | 2 +- 3 files changed, 39 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 40c14458c4d3e..ba1d4324e882f 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -21,10 +21,12 @@ "__experimentalRole": "content" }, "width": { - "type": "number" + "type": "number", + "default": 100 }, "widthUnit": { - "type": "string" + "type": "string", + "default": "%" }, "buttonText": { "type": "string", @@ -41,6 +43,10 @@ "buttonBehavior": { "type": "string", "default": "expand-searchfield" + }, + "isSearchFieldHidden": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 33ab4a5eb22d8..1f1906cf42703 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -75,6 +75,7 @@ export default function SearchEdit( { buttonPosition, buttonUseIcon, buttonBehavior, + isSearchFieldHidden, style, } = attributes; @@ -89,20 +90,20 @@ export default function SearchEdit( { return; } - if ( isSelected ) { - showSearchField(); - } else { + if ( isSearchFieldHidden ) { hideSearchField(); + } else { + showSearchField(); } - }, [ isSelected ] ); + }, [ buttonPosition, isSearchFieldHidden ] ); useEffect( () => { - if ( 'button-only' !== buttonPosition ) { - showSearchField( false ); - } else { - hideSearchField(); + if ( 'button-only' === buttonPosition && ! isSelected ) { + setAttributes( { + isSearchFieldHidden: true, + } ); } - }, [ buttonPosition ] ); + }, [ isSelected ] ); const hideSearchField = () => { searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; @@ -153,19 +154,23 @@ export default function SearchEdit( { 'button-only' === buttonPosition ? 'wp-block-search__button-only' : undefined, - BUTTON_BEHAVIOR_EXPAND === buttonBehavior + 'button-only' === buttonPosition && + BUTTON_BEHAVIOR_EXPAND === buttonBehavior ? 'wp-block-search__button-behavior-expand' : undefined, - BUTTON_BEHAVIOR_LINK === buttonBehavior + 'button-only' === buttonPosition && + BUTTON_BEHAVIOR_LINK === buttonBehavior ? 'wp-block-search__button-behavior-link' : undefined, + 'button-only' === buttonPosition && isSearchFieldHidden + ? 'wp-block-search__searchfield-hidden' + : undefined, ! buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__text-button' : undefined, buttonUseIcon && 'no-button' !== buttonPosition ? 'wp-block-search__icon-button' - : undefined, - isSelected ? undefined : 'wp-block-search__is-deselected' + : undefined ); }; @@ -251,7 +256,11 @@ export default function SearchEdit( { icon={ search } className="wp-block-search__button" style={ { borderRadius } } - onClick={ showSearchField } + onClick={ () => { + setAttributes( { + isSearchFieldHidden: ! isSearchFieldHidden, + } ); + } } ref={ buttonRef } /> ) } @@ -267,7 +276,11 @@ export default function SearchEdit( { onChange={ ( html ) => setAttributes( { buttonText: html } ) } - onClick={ showSearchField } + onClick={ () => { + setAttributes( { + isSearchFieldHidden: ! isSearchFieldHidden, + } ); + } } ref={ buttonRef } /> ) } @@ -333,6 +346,7 @@ export default function SearchEdit( { onClick={ () => { setAttributes( { buttonPosition: 'button-only', + isSearchFieldHidden: true, } ); onClose(); @@ -351,6 +365,7 @@ export default function SearchEdit( { onClick={ () => { setAttributes( { buttonUseIcon: ! buttonUseIcon, + isSearchFieldHidden: true, } ); } } className={ diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index ac8baeab9f2e9..4787a90c5915c 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -69,7 +69,7 @@ } // !important here to override inline styles on button only deselected view. - &.wp-block-search__is-deselected { + &.wp-block-search__searchfield-hidden { .wp-block-search__input { width: 0 !important; min-width: 0 !important; From 12e32994add46038a8d0a62591c5d7fc841f6948 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 11:26:41 -0700 Subject: [PATCH 12/36] Unhide the search field when the width is adjusted. --- packages/block-library/src/search/edit.js | 45 +++++++---------------- 1 file changed, 13 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1f1906cf42703..e1c297e6da326 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -85,6 +85,11 @@ export default function SearchEdit( { const searchFieldRef = useRef(); const buttonRef = useRef(); + const units = useCustomUnits( { + availableUnits: [ '%', 'px' ], + defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, + } ); + useEffect( () => { if ( 'button-only' !== buttonPosition ) { return; @@ -105,39 +110,15 @@ export default function SearchEdit( { } }, [ isSelected ] ); - const hideSearchField = () => { - searchFieldRef.current.style.width = `${ searchFieldRef.current.offsetWidth }px`; - searchFieldRef.current.style.flexGrow = '0'; - searchFieldRef.current.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - searchFieldRef.current.style.transitionProperty = 'margin-left'; - - const offset = - searchFieldRef.current.offsetWidth + - parseInt( - window.getComputedStyle( searchFieldRef.current ).marginRight - ) + - parseInt( window.getComputedStyle( buttonRef.current ).marginLeft ); - - searchFieldRef.current.style.marginLeft = `-${ offset }px`; - }; - - const showSearchField = ( animate = true ) => { - const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; - - searchFieldRef.current.style.marginLeft = 0; - searchFieldRef.current.style.transitionDuration = `${ duration }ms`; - - const resetWidth = setTimeout( () => { - searchFieldRef.current.style.flexGrow = '1'; - searchFieldRef.current.style.width = `${ width }${ widthUnit }`; - clearTimeout( resetWidth ); - }, duration ); - }; + useEffect( () => { + if ( 'button-only' !== buttonPosition ) { + return; + } - const units = useCustomUnits( { - availableUnits: [ '%', 'px' ], - defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, - } ); + setAttributes( { + isSearchFieldHidden: false, + } ); + }, [ width ] ); const getBlockClassNames = () => { return classnames( From 91355c54595b966d816c90a6d0049c44e42b88b1 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 11:48:08 -0700 Subject: [PATCH 13/36] Align the search block to the right when floated right. This is likely temporary until better alignment controls are in place. --- packages/block-library/src/search/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 4787a90c5915c..f51a83ddf3a41 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -83,3 +83,9 @@ margin: auto; } } + +.wp-block[data-align="right"] .wp-block-search__button-behavior-expand { + .wp-block-search__inside-wrapper { + float: right; + } +} From f5d19a006a24beb661d9a0c8bed7e0866809213c Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 13:21:43 -0700 Subject: [PATCH 14/36] Make sure search field hides on first load. --- packages/block-library/src/search/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index e1c297e6da326..765851480c76f 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -100,7 +100,7 @@ export default function SearchEdit( { } else { showSearchField(); } - }, [ buttonPosition, isSearchFieldHidden ] ); + }, [ buttonPosition, isSearchFieldHidden, buttonUseIcon ] ); useEffect( () => { if ( 'button-only' === buttonPosition && ! isSelected ) { @@ -111,7 +111,7 @@ export default function SearchEdit( { }, [ isSelected ] ); useEffect( () => { - if ( 'button-only' !== buttonPosition ) { + if ( 'button-only' !== buttonPosition || ! isSelected ) { return; } From d262b41d642d990d5cf012de34f8a1d2325c9736 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 14:00:25 -0700 Subject: [PATCH 15/36] Clean up animation transitions --- packages/block-library/src/search/edit.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 765851480c76f..76d36763f3c83 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -191,20 +191,27 @@ export default function SearchEdit( { wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; wrapper.style.width = `${ button.offsetWidth }px`; + + const removeTransitions = setTimeout( () => { + wrapper.style.transitionDuration = 'unset'; + + clearTimeout( removeTransitions ); + }, SEARCHFIELD_ANIMATION_DURATION ); }; - const showSearchField = ( animate = true ) => { + const showSearchField = () => { const wrapper = searchFieldRef.current.offsetParent; const searchField = searchFieldRef.current; - const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; const resetWidth = setTimeout( () => { searchField.style.width = `${ width }${ widthUnit }`; + wrapper.style.transitionDuration = 'unset'; clearTimeout( resetWidth ); - }, duration ); + }, SEARCHFIELD_ANIMATION_DURATION ); - searchField.style.transitionDuration = `${ duration }ms`; + searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; wrapper.style.width = `${ width }${ widthUnit }`; }; From 336a1e0488cd2e6a2e8844b9fea24735bd61261c Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 14:01:35 -0700 Subject: [PATCH 16/36] Match hide/show functions --- packages/block-library/src/search/edit.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 76d36763f3c83..9a8d2dd70d475 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -189,7 +189,6 @@ export default function SearchEdit( { searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.width = `${ button.offsetWidth }px`; const removeTransitions = setTimeout( () => { @@ -203,16 +202,16 @@ export default function SearchEdit( { const wrapper = searchFieldRef.current.offsetParent; const searchField = searchFieldRef.current; - const resetWidth = setTimeout( () => { + searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.width = `${ width }${ widthUnit }`; + + const removeTransitions = setTimeout( () => { searchField.style.width = `${ width }${ widthUnit }`; wrapper.style.transitionDuration = 'unset'; - clearTimeout( resetWidth ); + clearTimeout( removeTransitions ); }, SEARCHFIELD_ANIMATION_DURATION ); - - searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.width = `${ width }${ widthUnit }`; }; const renderTextField = () => { From 22c4fd29001b271c44815828193fd9a781d07db1 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 14:03:56 -0700 Subject: [PATCH 17/36] Hide drag handle for resize when searchfield is hidden. --- packages/block-library/src/search/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 9a8d2dd70d475..fcb0c6bb77cc1 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -171,7 +171,7 @@ export default function SearchEdit( { const getResizableSides = () => { if ( 'button-only' === buttonPosition && - 'search-page-link' === buttonBehavior + ( 'search-page-link' === buttonBehavior || isSearchFieldHidden ) ) { return {}; } From 64f8082593410528e863156740ca8d1c911c3d93 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 18 May 2021 14:07:07 -0700 Subject: [PATCH 18/36] Don't clip drag handle when searchfield is not hidden. --- packages/block-library/src/search/style.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index f51a83ddf3a41..791113a5ebe4b 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -60,16 +60,19 @@ } &.wp-block-search__button-behavior-expand { - overflow: hidden; - .wp-block-search__inside-wrapper { - overflow: hidden; transition-property: width; min-width: 0 !important; } // !important here to override inline styles on button only deselected view. &.wp-block-search__searchfield-hidden { + overflow: hidden; + + .wp-block-search__inside-wrapper { + overflow: hidden; + } + .wp-block-search__input { width: 0 !important; min-width: 0 !important; From 4d2b6e578436f4cc3849de8feda078dfcf9d6068 Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 20 May 2021 10:10:37 -0700 Subject: [PATCH 19/36] Add frontend class rendering --- packages/block-library/src/search/index.php | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index eba67deeecdce..76e1898085e72 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -141,6 +141,20 @@ function classnames_for_block_core_search( $attributes ) { if ( 'button-only' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-only'; + + if ( ! empty( $attributes['buttonBehavior'] ) ) { + if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $classnames[] = 'wp-block-search__button-behavior-expand'; + } + + if ( 'search-page-link' === $attributes['buttonBehavior'] ) { + $classnames[] = 'wp-block-search__button-behavior-expand'; + } + } + + if ( ! empty( $attributes['isSearchFieldHidden'] ) ) { + $classnames[] = 'wp-block-search__searchfield-hidden'; + } } } From cc6458bd201f4902edb62bbbcdc7f9b9fa9a21c2 Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 20 May 2021 14:37:00 -0700 Subject: [PATCH 20/36] Move search/hide functions to utils.js and make use of them in the editor and frontend. --- packages/block-library/src/search/edit.js | 49 +++++----------- packages/block-library/src/search/frontend.js | 57 +++++++++++++++++++ packages/block-library/src/search/index.php | 9 ++- packages/block-library/src/search/utils.js | 26 +++++++++ 4 files changed, 104 insertions(+), 37 deletions(-) create mode 100644 packages/block-library/src/search/frontend.js diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index fcb0c6bb77cc1..1a69f8038d469 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -48,6 +48,8 @@ import { PX_WIDTH_DEFAULT, MIN_WIDTH, MIN_WIDTH_UNIT, + showSearchField, + hideSearchField, } from './utils.js'; // Used to calculate border radius adjustment to avoid "fat" corners when @@ -55,7 +57,7 @@ import { const DEFAULT_INNER_PADDING = 4; const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield'; const BUTTON_BEHAVIOR_LINK = 'search-page-link'; -const SEARCHFIELD_ANIMATION_DURATION = 300; //ms + export default function SearchEdit( { className, @@ -96,9 +98,18 @@ export default function SearchEdit( { } if ( isSearchFieldHidden ) { - hideSearchField(); + hideSearchField( + searchFieldRef.current.offsetParent, + searchFieldRef.current, + buttonRef.current + ); } else { - showSearchField(); + showSearchField( + searchFieldRef.current.offsetParent, + searchFieldRef.current, + width, + widthUnit + ); } }, [ buttonPosition, isSearchFieldHidden, buttonUseIcon ] ); @@ -182,38 +193,6 @@ export default function SearchEdit( { }; }; - const hideSearchField = () => { - const wrapper = searchFieldRef.current.offsetParent; - const searchField = searchFieldRef.current; - const button = buttonRef.current; - - searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.width = `${ button.offsetWidth }px`; - - const removeTransitions = setTimeout( () => { - wrapper.style.transitionDuration = 'unset'; - - clearTimeout( removeTransitions ); - }, SEARCHFIELD_ANIMATION_DURATION ); - }; - - const showSearchField = () => { - const wrapper = searchFieldRef.current.offsetParent; - const searchField = searchFieldRef.current; - - searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.width = `${ width }${ widthUnit }`; - - const removeTransitions = setTimeout( () => { - searchField.style.width = `${ width }${ widthUnit }`; - wrapper.style.transitionDuration = 'unset'; - - clearTimeout( removeTransitions ); - }, SEARCHFIELD_ANIMATION_DURATION ); - }; - const renderTextField = () => { return ( { + const attributeContainer = block.querySelector( + '.wp-block-search__attributes' + ); + + if ( ! attributeContainer ) { + return; + } + + let attributes; + try { + attributes = JSON.parse( attributeContainer.text ); + } catch ( e ) { + return; + } + attributeContainer.remove(); + + block + .querySelector( '.wp-block-search__button' ) + .addEventListener( 'click', ( e ) => { + e.preventDefault(); + + const wrapper = block.querySelector( + '.wp-block-search__inside-wrapper' + ); + const searchField = block.querySelector( + '.wp-block-search__input' + ); + const button = block.querySelector( '.wp-block-search__button' ); + + if ( + block.classList.contains( + 'wp-search-block__searchfield-hidden' + ) + ) { + showSearchField( + wrapper, + searchField, + attributes.width, + attributes.widthUnit + ); + } else { + hideSearchField( wrapper, searchField, button ); + } + } ); +}; + +document.addEventListener( 'DOMContentLoaded', () => { + Array.from( document.getElementsByClassName( 'wp-block-search' ) ).forEach( ( block ) => { + wpBlockSearch( block ); + } ); +} ); diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 76e1898085e72..8f03e8196f6ec 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -94,12 +94,17 @@ function render_block_core_search( $attributes ) { $input_markup . $button_markup ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); + $block_attributes = ''; + + wp_enqueue_script( 'wp-block-library-search', plugins_url( 'search/frontend.js', __FILE__ ) ); return sprintf( '
%s
', esc_url( home_url( '/' ) ), $wrapper_attributes, - $label_markup . $field_markup + $label_markup . $field_markup . $block_attributes ); } @@ -148,7 +153,7 @@ function classnames_for_block_core_search( $attributes ) { } if ( 'search-page-link' === $attributes['buttonBehavior'] ) { - $classnames[] = 'wp-block-search__button-behavior-expand'; + $classnames[] = 'wp-block-search__button-behavior-link'; } } diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js index b54048b609eb3..a8e3f0986b10d 100644 --- a/packages/block-library/src/search/utils.js +++ b/packages/block-library/src/search/utils.js @@ -5,6 +5,7 @@ export const PC_WIDTH_DEFAULT = 50; export const PX_WIDTH_DEFAULT = 350; export const MIN_WIDTH = 220; export const MIN_WIDTH_UNIT = 'px'; +const SEARCHFIELD_ANIMATION_DURATION = 300; /** * Returns a boolean whether passed unit is percentage @@ -16,3 +17,28 @@ export const MIN_WIDTH_UNIT = 'px'; export function isPercentageUnit( unit ) { return unit === '%'; } + +export function hideSearchField( wrapper, searchField, button ) { + searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.width = `${ button.offsetWidth }px`; + + const removeTransitions = setTimeout( () => { + wrapper.style.transitionDuration = 'unset'; + + clearTimeout( removeTransitions ); + }, SEARCHFIELD_ANIMATION_DURATION ); +} + +export function showSearchField( wrapper, searchField, width, widthUnit ) { + searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; + wrapper.style.width = `${ width }${ widthUnit }`; + + const removeTransitions = setTimeout( () => { + searchField.style.width = `${ width }${ widthUnit }`; + wrapper.style.transitionDuration = 'unset'; + + clearTimeout( removeTransitions ); + }, SEARCHFIELD_ANIMATION_DURATION ); +} From 16d469c4712e5e3be78ff68590e7c897a2f58d8d Mon Sep 17 00:00:00 2001 From: apeatling Date: Thu, 20 May 2021 15:35:54 -0700 Subject: [PATCH 21/36] Only load the frontend JS if it's set for button only mode, and expanding behaviour. --- packages/block-library/src/search/edit.js | 1 - packages/block-library/src/search/frontend.js | 8 +++++--- packages/block-library/src/search/index.php | 14 ++++++++++---- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1a69f8038d469..a01987ab35a96 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -58,7 +58,6 @@ const DEFAULT_INNER_PADDING = 4; const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield'; const BUTTON_BEHAVIOR_LINK = 'search-page-link'; - export default function SearchEdit( { className, attributes, diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index db5b6ff146ecf..51decb4274b80 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -51,7 +51,9 @@ const wpBlockSearch = ( block ) => { }; document.addEventListener( 'DOMContentLoaded', () => { - Array.from( document.getElementsByClassName( 'wp-block-search' ) ).forEach( ( block ) => { - wpBlockSearch( block ); - } ); + Array.from( document.getElementsByClassName( 'wp-block-search__button-behavior-expand' ) ).forEach( + ( block ) => { + wpBlockSearch( block ); + } + ); } ); diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 8f03e8196f6ec..aeed61e9282f2 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -94,11 +94,17 @@ function render_block_core_search( $attributes ) { $input_markup . $button_markup ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); - $block_attributes = ''; + $block_attributes = ''; - wp_enqueue_script( 'wp-block-library-search', plugins_url( 'search/frontend.js', __FILE__ ) ); + if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { + if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { + $block_attributes = ''; + + wp_enqueue_script( 'wp-block-library-search', plugins_url( 'search/frontend.js', __FILE__ ) ); + } + } return sprintf( '
%s
', From 2dac480b70a6fc8f6cea5ac41cb883fa23d0c6ef Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 25 May 2021 11:03:40 -0700 Subject: [PATCH 22/36] Get frontend js correctly working withb the show and hide of the text field. --- packages/block-library/src/search/frontend.js | 17 +++++++++------ packages/block-library/src/search/index.php | 21 +++++++------------ packages/block-library/src/search/style.scss | 1 + packages/block-library/src/search/utils.js | 2 +- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index 51decb4274b80..fe10c8f89ad68 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -35,7 +35,7 @@ const wpBlockSearch = ( block ) => { if ( block.classList.contains( - 'wp-search-block__searchfield-hidden' + 'wp-block-search__searchfield-hidden' ) ) { showSearchField( @@ -44,16 +44,21 @@ const wpBlockSearch = ( block ) => { attributes.width, attributes.widthUnit ); + block.classList.remove( 'wp-block-search__searchfield-hidden' ); } else { hideSearchField( wrapper, searchField, button ); + block.classList.add( 'wp-block-search__searchfield-hidden' ); } } ); }; +// eslint-disable-next-line @wordpress/no-global-event-listener document.addEventListener( 'DOMContentLoaded', () => { - Array.from( document.getElementsByClassName( 'wp-block-search__button-behavior-expand' ) ).forEach( - ( block ) => { - wpBlockSearch( block ); - } - ); + Array.from( + document.getElementsByClassName( + 'wp-block-search__button-behavior-expand' + ) + ).forEach( ( block ) => { + wpBlockSearch( block ); + } ); } ); diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index aeed61e9282f2..5ed564ff457ad 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -54,15 +54,13 @@ function render_block_core_search( $attributes ) { } } - if ( $show_input ) { - $input_markup = sprintf( - '', - $input_id, - esc_attr( get_search_query() ), - esc_attr( $attributes['placeholder'] ), - $inline_styles['shared'] - ); - } + $input_markup = sprintf( + '', + $input_id, + esc_attr( get_search_query() ), + esc_attr( $attributes['placeholder'] ), + $inline_styles['shared'] + ); if ( $show_button ) { $button_internal_markup = ''; @@ -152,6 +150,7 @@ function classnames_for_block_core_search( $attributes ) { if ( 'button-only' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-only'; + $classnames[] = 'wp-block-search__searchfield-hidden'; if ( ! empty( $attributes['buttonBehavior'] ) ) { if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { @@ -162,10 +161,6 @@ function classnames_for_block_core_search( $attributes ) { $classnames[] = 'wp-block-search__button-behavior-link'; } } - - if ( ! empty( $attributes['isSearchFieldHidden'] ) ) { - $classnames[] = 'wp-block-search__searchfield-hidden'; - } } } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 791113a5ebe4b..b77333d583933 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -78,6 +78,7 @@ min-width: 0 !important; padding: 0 !important; border-left-width: 0 !important; + flex-grow: 0; } } } diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js index a8e3f0986b10d..e5fe26ae6f2eb 100644 --- a/packages/block-library/src/search/utils.js +++ b/packages/block-library/src/search/utils.js @@ -5,7 +5,7 @@ export const PC_WIDTH_DEFAULT = 50; export const PX_WIDTH_DEFAULT = 350; export const MIN_WIDTH = 220; export const MIN_WIDTH_UNIT = 'px'; -const SEARCHFIELD_ANIMATION_DURATION = 300; +export const SEARCHFIELD_ANIMATION_DURATION = 300; /** * Returns a boolean whether passed unit is percentage From ce1917f07a54dcc69697e020b33bec04da1b55ed Mon Sep 17 00:00:00 2001 From: apeatling Date: Wed, 26 May 2021 11:26:16 -0700 Subject: [PATCH 23/36] Fix issues with changing top and bottom padding. --- packages/block-library/src/search/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index b77333d583933..7efb88c0e705d 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -76,8 +76,10 @@ .wp-block-search__input { width: 0 !important; min-width: 0 !important; - padding: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; border-left-width: 0 !important; + border-right-width: 0 !important; flex-grow: 0; } } From 1c9674c50f41cf721e1243c7576005d9c82013b9 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 10:19:13 -0700 Subject: [PATCH 24/36] Fix issues with the button with and flex, and make sure animations use inherited values. --- packages/block-library/src/search/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 7efb88c0e705d..c004f1f24d17b 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -6,6 +6,7 @@ color: #32373c; margin-left: 0.625em; word-break: normal; + flex-shrink: 0; &.has-icon { line-height: 0; @@ -65,6 +66,14 @@ min-width: 0 !important; } + .wp-block-search__input { + width: inherit; + padding-left: inherit; + padding-right: inherit; + border-left-width: inherit; + border-right-width: inherit; + } + // !important here to override inline styles on button only deselected view. &.wp-block-search__searchfield-hidden { overflow: hidden; From 6553d1c766e3d13910fbd2ba4663874a966e3b05 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 10:22:00 -0700 Subject: [PATCH 25/36] Remove the UI for selecting button only behavior since there is no default search page in WordPress. Keep the UI commented out because this will be used for an overlay setting in the near future. --- packages/block-library/src/search/edit.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index a01987ab35a96..7fdbb01d83189 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -25,7 +25,6 @@ import { PanelBody, BaseControl, __experimentalUseCustomUnits as useCustomUnits, - SelectControl, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { search } from '@wordpress/icons'; @@ -56,7 +55,6 @@ import { // button is placed inside wrapper. const DEFAULT_INNER_PADDING = 4; const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield'; -const BUTTON_BEHAVIOR_LINK = 'search-page-link'; export default function SearchEdit( { className, @@ -149,10 +147,6 @@ export default function SearchEdit( { BUTTON_BEHAVIOR_EXPAND === buttonBehavior ? 'wp-block-search__button-behavior-expand' : undefined, - 'button-only' === buttonPosition && - BUTTON_BEHAVIOR_LINK === buttonBehavior - ? 'wp-block-search__button-behavior-link' - : undefined, 'button-only' === buttonPosition && isSearchFieldHidden ? 'wp-block-search__searchfield-hidden' : undefined, @@ -343,7 +337,7 @@ export default function SearchEdit( { - { 'button-only' === buttonPosition && ( + { /* { 'button-only' === buttonPosition && ( - ) } + ) } */ } { renderTextField() } { renderButton() } @@ -496,7 +486,7 @@ export default function SearchEdit( { ) } { 'button-only' === buttonPosition && - BUTTON_BEHAVIOR_LINK === buttonBehavior && + BUTTON_BEHAVIOR_EXPAND !== buttonBehavior && renderButton() } { 'no-button' === buttonPosition && renderTextField() } From f87d3d15ce32c0a419a89fad0767981b48600434 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 11:25:34 -0700 Subject: [PATCH 26/36] Update frontend code so that clicking outside of the searchfield closes it. Make sure the search button works to search once it is open. --- packages/block-library/src/search/frontend.js | 63 +++++++++++-------- packages/block-library/src/search/style.scss | 8 --- 2 files changed, 36 insertions(+), 35 deletions(-) diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index fe10c8f89ad68..01fb8524bba15 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -20,36 +20,45 @@ const wpBlockSearch = ( block ) => { } attributeContainer.remove(); - block - .querySelector( '.wp-block-search__button' ) - .addEventListener( 'click', ( e ) => { - e.preventDefault(); + const wrapper = block.querySelector( '.wp-block-search__inside-wrapper' ); + const searchField = block.querySelector( '.wp-block-search__input' ); + const button = block.querySelector( '.wp-block-search__button' ); - const wrapper = block.querySelector( - '.wp-block-search__inside-wrapper' - ); - const searchField = block.querySelector( - '.wp-block-search__input' + const toggleSearchField = ( e ) => { + e.preventDefault(); + + if ( + block.classList.contains( 'wp-block-search__searchfield-hidden' ) + ) { + showSearchField( + wrapper, + searchField, + attributes.width, + attributes.widthUnit ); - const button = block.querySelector( '.wp-block-search__button' ); + block.classList.remove( 'wp-block-search__searchfield-hidden' ); + searchField.focus(); + + button.removeEventListener( 'click', toggleSearchField ); + document.body.addEventListener( 'click', doSearch ); + } else { + hideSearchField( wrapper, searchField, button ); + block.classList.add( 'wp-block-search__searchfield-hidden' ); + } + }; + + const doSearch = ( e ) => { + if ( e.target === button || e.target === searchField ) { + return false; + } + + toggleSearchField( e ); + + document.body.removeEventListener( 'click', doSearch ); + button.addEventListener( 'click', toggleSearchField ); + }; - if ( - block.classList.contains( - 'wp-block-search__searchfield-hidden' - ) - ) { - showSearchField( - wrapper, - searchField, - attributes.width, - attributes.widthUnit - ); - block.classList.remove( 'wp-block-search__searchfield-hidden' ); - } else { - hideSearchField( wrapper, searchField, button ); - block.classList.add( 'wp-block-search__searchfield-hidden' ); - } - } ); + button.addEventListener( 'click', toggleSearchField ); }; // eslint-disable-next-line @wordpress/no-global-event-listener diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index c004f1f24d17b..4553e3b141312 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -66,14 +66,6 @@ min-width: 0 !important; } - .wp-block-search__input { - width: inherit; - padding-left: inherit; - padding-right: inherit; - border-left-width: inherit; - border-right-width: inherit; - } - // !important here to override inline styles on button only deselected view. &.wp-block-search__searchfield-hidden { overflow: hidden; From dae56ffc1fb38c992ad422610a08a2e3fcb30711 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 12:17:09 -0700 Subject: [PATCH 27/36] Make sure that the frontend toggle works when using the SVG icon for the button. --- packages/block-library/src/search/frontend.js | 60 +++++++++++-------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index 01fb8524bba15..5d567d6ec5ed0 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -20,45 +20,57 @@ const wpBlockSearch = ( block ) => { } attributeContainer.remove(); - const wrapper = block.querySelector( '.wp-block-search__inside-wrapper' ); + const hiddenClass = 'wp-block-search__searchfield-hidden'; + const wrapperClass = '.wp-block-search__inside-wrapper'; + const buttonClass = '.wp-block-search__button'; + + const wrapper = block.querySelector( wrapperClass ); const searchField = block.querySelector( '.wp-block-search__input' ); - const button = block.querySelector( '.wp-block-search__button' ); + const button = block.querySelector( buttonClass ); const toggleSearchField = ( e ) => { + if ( e.target !== button && ! e.target.closest( buttonClass ) ) { + return false; + } + e.preventDefault(); - if ( - block.classList.contains( 'wp-block-search__searchfield-hidden' ) - ) { - showSearchField( - wrapper, - searchField, - attributes.width, - attributes.widthUnit - ); - block.classList.remove( 'wp-block-search__searchfield-hidden' ); - searchField.focus(); - - button.removeEventListener( 'click', toggleSearchField ); - document.body.addEventListener( 'click', doSearch ); - } else { - hideSearchField( wrapper, searchField, button ); - block.classList.add( 'wp-block-search__searchfield-hidden' ); - } + return block.classList.contains( hiddenClass ) + ? doShowSearchField() + : doHideSearchField(); + }; + + const doShowSearchField = () => { + showSearchField( + wrapper, + searchField, + attributes.width, + attributes.widthUnit + ); + block.classList.remove( hiddenClass ); + searchField.focus(); + + wrapper.removeEventListener( 'click', toggleSearchField ); + document.body.addEventListener( 'click', doSearch ); + }; + + const doHideSearchField = () => { + hideSearchField( wrapper, searchField, button ); + block.classList.add( hiddenClass ); }; const doSearch = ( e ) => { - if ( e.target === button || e.target === searchField ) { + if ( e.target.closest( wrapperClass ) ) { return false; } - toggleSearchField( e ); + doHideSearchField(); document.body.removeEventListener( 'click', doSearch ); - button.addEventListener( 'click', toggleSearchField ); + wrapper.addEventListener( 'click', toggleSearchField ); }; - button.addEventListener( 'click', toggleSearchField ); + wrapper.addEventListener( 'click', toggleSearchField ); }; // eslint-disable-next-line @wordpress/no-global-event-listener From 58174630e75c4e10edeba7fbbd24a4c007d96009 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 12:39:09 -0700 Subject: [PATCH 28/36] Keep searchfield hidden on editor load, and expand field when a different mode is selected. --- packages/block-library/src/search/edit.js | 31 +++++++++++++++-------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 7fdbb01d83189..631ef1f3b075b 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -90,10 +90,6 @@ export default function SearchEdit( { } ); useEffect( () => { - if ( 'button-only' !== buttonPosition ) { - return; - } - if ( isSearchFieldHidden ) { hideSearchField( searchFieldRef.current.offsetParent, @@ -108,7 +104,7 @@ export default function SearchEdit( { widthUnit ); } - }, [ buttonPosition, isSearchFieldHidden, buttonUseIcon ] ); + }, [ isSearchFieldHidden, buttonUseIcon ] ); useEffect( () => { if ( 'button-only' === buttonPosition && ! isSelected ) { @@ -216,9 +212,14 @@ export default function SearchEdit( { className="wp-block-search__button" style={ { borderRadius } } onClick={ () => { - setAttributes( { - isSearchFieldHidden: ! isSearchFieldHidden, - } ); + if ( + 'button-only' === buttonPosition && + BUTTON_BEHAVIOR_EXPAND === buttonBehavior + ) { + setAttributes( { + isSearchFieldHidden: ! isSearchFieldHidden, + } ); + } } } ref={ buttonRef } /> @@ -236,9 +237,14 @@ export default function SearchEdit( { setAttributes( { buttonText: html } ) } onClick={ () => { - setAttributes( { - isSearchFieldHidden: ! isSearchFieldHidden, - } ); + if ( + 'button-only' === buttonPosition && + BUTTON_BEHAVIOR_EXPAND === buttonBehavior + ) { + setAttributes( { + isSearchFieldHidden: ! isSearchFieldHidden, + } ); + } } } ref={ buttonRef } /> @@ -272,6 +278,7 @@ export default function SearchEdit( { onClick={ () => { setAttributes( { buttonPosition: 'no-button', + isSearchFieldHidden: false, } ); onClose(); } } @@ -283,6 +290,7 @@ export default function SearchEdit( { onClick={ () => { setAttributes( { buttonPosition: 'button-outside', + isSearchFieldHidden: false, } ); onClose(); } } @@ -294,6 +302,7 @@ export default function SearchEdit( { onClick={ () => { setAttributes( { buttonPosition: 'button-inside', + isSearchFieldHidden: false, } ); onClose(); } } From 27346ef2cbfd36c34925500b949f1b282ef71615 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 12:48:32 -0700 Subject: [PATCH 29/36] Update fixtures. --- packages/e2e-tests/fixtures/blocks/core__search.json | 6 +++++- .../fixtures/blocks/core__search__custom-text.json | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__search.json b/packages/e2e-tests/fixtures/blocks/core__search.json index c3764ecb5f793..b1929f5ecf42f 100644 --- a/packages/e2e-tests/fixtures/blocks/core__search.json +++ b/packages/e2e-tests/fixtures/blocks/core__search.json @@ -6,8 +6,12 @@ "attributes": { "showLabel": true, "placeholder": "", + "width": 100, + "widthUnit": "%", "buttonPosition": "button-outside", - "buttonUseIcon": false + "buttonUseIcon": false, + "buttonBehavior": "expand-searchfield", + "isSearchFieldHidden": false }, "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 7d7e970a6c56d..6b89e2e5d3508 100644 --- a/packages/e2e-tests/fixtures/blocks/core__search__custom-text.json +++ b/packages/e2e-tests/fixtures/blocks/core__search__custom-text.json @@ -7,9 +7,13 @@ "label": "Custom label", "showLabel": true, "placeholder": "Custom placeholder", + "width": 100, + "widthUnit": "%", "buttonText": "Custom button text", "buttonPosition": "button-outside", - "buttonUseIcon": false + "buttonUseIcon": false, + "buttonBehavior": "expand-searchfield", + "isSearchFieldHidden": false }, "innerBlocks": [], "originalContent": "" From d7d97b4db03f2595e22dc519c3dc9e3d94b6f8a1 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 13:02:46 -0700 Subject: [PATCH 30/36] Fix PHP lint issues. --- packages/block-library/src/search/index.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 5ed564ff457ad..2a04104dcbb17 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -31,7 +31,6 @@ function render_block_core_search( $attributes ) { $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 = ''; @@ -92,12 +91,15 @@ function render_block_core_search( $attributes ) { $input_markup . $button_markup ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); - $block_attributes = ''; + $block_attributes = ''; if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { $block_attributes = ''; wp_enqueue_script( 'wp-block-library-search', plugins_url( 'search/frontend.js', __FILE__ ) ); From e80abd226b3d0bdae403f4e7a1c77510a48f7992 Mon Sep 17 00:00:00 2001 From: apeatling Date: Mon, 31 May 2021 13:26:11 -0700 Subject: [PATCH 31/36] Remove commented out UI since we can just add this back in when the overlay is worked on. --- packages/block-library/src/search/edit.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 631ef1f3b075b..f01d597f3b460 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -346,23 +346,6 @@ export default function SearchEdit( { - { /* { 'button-only' === buttonPosition && ( - - setAttributes( { buttonBehavior: behavior } ) - } - options={ [ - { - value: BUTTON_BEHAVIOR_EXPAND, - label: __( 'Show and expand search field' ), - }, - //{ value: 'search-modal', 'label': __( 'Show search modal') }, - ] } - /> - ) } */ } - Date: Tue, 1 Jun 2021 13:24:22 -0700 Subject: [PATCH 32/36] Remove margin on the input field when collapsed. --- packages/block-library/src/search/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 4553e3b141312..94a7d3a631c59 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -82,6 +82,7 @@ border-left-width: 0 !important; border-right-width: 0 !important; flex-grow: 0; + margin: 0; } } } From b72f668185196e893191bbdf3d55752efacc32f3 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 1 Jun 2021 13:33:09 -0700 Subject: [PATCH 33/36] Fix line height, font size. Fix padding overrides. --- packages/block-library/src/search/editor.scss | 1 - packages/block-library/src/search/style.scss | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 565afc644c9cb..0e5596d63a800 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -22,7 +22,6 @@ // This needs high specificity because it otherwise inherits styles from `components-button`. // stylelint-disable-line no-duplicate-selectors &.wp-block-search__button.wp-block-search__button { - padding: 6px 10px; display: flex; align-items: center; } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 94a7d3a631c59..a67358983ff56 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -7,6 +7,8 @@ margin-left: 0.625em; word-break: normal; flex-shrink: 0; + font-size: inherit; + line-height: inherit; &.has-icon { line-height: 0; From 0560249dd5fcc38e3197458bc4e1a2f7c4dd54f5 Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 1 Jun 2021 14:16:12 -0700 Subject: [PATCH 34/36] Make sure the search block is still useable with JS turned off. --- packages/block-library/src/search/frontend.js | 12 +++++------ packages/block-library/src/search/index.php | 1 - packages/block-library/src/search/utils.js | 20 +++++++++++-------- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index 5d567d6ec5ed0..9ad0b522b3ba9 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -51,26 +51,26 @@ const wpBlockSearch = ( block ) => { searchField.focus(); wrapper.removeEventListener( 'click', toggleSearchField ); - document.body.addEventListener( 'click', doSearch ); + document.body.addEventListener( 'click', doBlur ); }; - const doHideSearchField = () => { - hideSearchField( wrapper, searchField, button ); + const doHideSearchField = ( animate = true ) => { + hideSearchField( wrapper, searchField, button, animate ); block.classList.add( hiddenClass ); }; - const doSearch = ( e ) => { + const doBlur = ( e ) => { if ( e.target.closest( wrapperClass ) ) { return false; } doHideSearchField(); - - document.body.removeEventListener( 'click', doSearch ); + document.body.removeEventListener( 'click', doBlur ); wrapper.addEventListener( 'click', toggleSearchField ); }; wrapper.addEventListener( 'click', toggleSearchField ); + doHideSearchField( false ); }; // eslint-disable-next-line @wordpress/no-global-event-listener diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 2a04104dcbb17..3e2d3411442ad 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -152,7 +152,6 @@ function classnames_for_block_core_search( $attributes ) { if ( 'button-only' === $attributes['buttonPosition'] ) { $classnames[] = 'wp-block-search__button-only'; - $classnames[] = 'wp-block-search__searchfield-hidden'; if ( ! empty( $attributes['buttonBehavior'] ) ) { if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) { diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js index e5fe26ae6f2eb..286c9812f1021 100644 --- a/packages/block-library/src/search/utils.js +++ b/packages/block-library/src/search/utils.js @@ -18,21 +18,25 @@ export function isPercentageUnit( unit ) { return unit === '%'; } -export function hideSearchField( wrapper, searchField, button ) { - searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; +export function hideSearchField( wrapper, searchField, button, animate = true ) { + const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; + + searchField.style.transitionDuration = `${ duration }ms`; + wrapper.style.transitionDuration = `${ duration }ms`; wrapper.style.width = `${ button.offsetWidth }px`; const removeTransitions = setTimeout( () => { wrapper.style.transitionDuration = 'unset'; clearTimeout( removeTransitions ); - }, SEARCHFIELD_ANIMATION_DURATION ); + }, duration ); } -export function showSearchField( wrapper, searchField, width, widthUnit ) { - searchField.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; - wrapper.style.transitionDuration = `${ SEARCHFIELD_ANIMATION_DURATION }ms`; +export function showSearchField( wrapper, searchField, width, widthUnit, animate = true ) { + const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; + + searchField.style.transitionDuration = `${ duration }ms`; + wrapper.style.transitionDuration = `${ duration }ms`; wrapper.style.width = `${ width }${ widthUnit }`; const removeTransitions = setTimeout( () => { @@ -40,5 +44,5 @@ export function showSearchField( wrapper, searchField, width, widthUnit ) { wrapper.style.transitionDuration = 'unset'; clearTimeout( removeTransitions ); - }, SEARCHFIELD_ANIMATION_DURATION ); + }, duration ); } From 847e9b3cb23442629d9a211398ea01af04a3228c Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 3 Jun 2021 19:54:19 +0300 Subject: [PATCH 35/36] Simplify frontend script for button-only search (#32387) * Simplify frontend script * add transition to the editor * Apply width even for button only mode. Co-authored-by: apeatling --- packages/block-library/src/search/edit.js | 19 --- packages/block-library/src/search/editor.scss | 6 + packages/block-library/src/search/frontend.js | 116 +++++++----------- packages/block-library/src/search/index.php | 12 +- packages/block-library/src/search/style.scss | 7 ++ packages/block-library/src/search/utils.js | 30 ----- 6 files changed, 62 insertions(+), 128 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index f01d597f3b460..bd92a02c36bc3 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -47,8 +47,6 @@ import { PX_WIDTH_DEFAULT, MIN_WIDTH, MIN_WIDTH_UNIT, - showSearchField, - hideSearchField, } from './utils.js'; // Used to calculate border radius adjustment to avoid "fat" corners when @@ -89,23 +87,6 @@ export default function SearchEdit( { defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT }, } ); - useEffect( () => { - if ( isSearchFieldHidden ) { - hideSearchField( - searchFieldRef.current.offsetParent, - searchFieldRef.current, - buttonRef.current - ); - } else { - showSearchField( - searchFieldRef.current.offsetParent, - searchFieldRef.current, - width, - widthUnit - ); - } - }, [ isSearchFieldHidden, buttonUseIcon ] ); - useEffect( () => { if ( 'button-only' === buttonPosition && ! isSelected ) { setAttributes( { diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 0e5596d63a800..55eb03565de95 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -30,4 +30,10 @@ &__components-button-group { margin-top: 10px; } + + &.wp-block-search__button-behavior-expand { + .wp-block-search__input { + transition-duration: 300ms; + } + } } diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index 9ad0b522b3ba9..713c3d027b569 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -1,85 +1,63 @@ -/** - * Internal dependencies - */ -import { showSearchField, hideSearchField } from './utils.js'; +// eslint-disable-next-line @wordpress/no-global-event-listener +document.addEventListener( 'DOMContentLoaded', () => { + const transitionDuration = 300; -const wpBlockSearch = ( block ) => { - const attributeContainer = block.querySelector( - '.wp-block-search__attributes' - ); + Array.from( + document.getElementsByClassName( + 'wp-block-search__button-behavior-expand' + ) + ).forEach( ( block ) => { + const hiddenClass = 'wp-block-search__searchfield-hidden'; + const wrapperClass = '.wp-block-search__inside-wrapper'; + const buttonClass = '.wp-block-search__button'; - if ( ! attributeContainer ) { - return; - } + const wrapper = block.querySelector( wrapperClass ); + const searchField = block.querySelector( '.wp-block-search__input' ); + const button = block.querySelector( buttonClass ); - let attributes; - try { - attributes = JSON.parse( attributeContainer.text ); - } catch ( e ) { - return; - } - attributeContainer.remove(); + // Hide search on init. + block.classList.add( hiddenClass ); + setTimeout( + () => + ( searchField.style.transitionDuration = `${ transitionDuration }ms` ), + transitionDuration + ); - const hiddenClass = 'wp-block-search__searchfield-hidden'; - const wrapperClass = '.wp-block-search__inside-wrapper'; - const buttonClass = '.wp-block-search__button'; + const toggleSearchField = ( e ) => { + if ( e.target !== button && ! e.target.closest( buttonClass ) ) { + return false; + } - const wrapper = block.querySelector( wrapperClass ); - const searchField = block.querySelector( '.wp-block-search__input' ); - const button = block.querySelector( buttonClass ); + e.preventDefault(); - const toggleSearchField = ( e ) => { - if ( e.target !== button && ! e.target.closest( buttonClass ) ) { - return false; - } + return block.classList.contains( hiddenClass ) + ? doShowSearchField() + : doHideSearchField(); + }; - e.preventDefault(); + const doShowSearchField = () => { + block.classList.remove( hiddenClass ); + searchField.focus(); - return block.classList.contains( hiddenClass ) - ? doShowSearchField() - : doHideSearchField(); - }; + wrapper.removeEventListener( 'click', toggleSearchField ); + document.body.addEventListener( 'click', doSearch ); + }; - const doShowSearchField = () => { - showSearchField( - wrapper, - searchField, - attributes.width, - attributes.widthUnit - ); - block.classList.remove( hiddenClass ); - searchField.focus(); + const doHideSearchField = () => { + block.classList.add( hiddenClass ); + }; - wrapper.removeEventListener( 'click', toggleSearchField ); - document.body.addEventListener( 'click', doBlur ); - }; + const doSearch = ( e ) => { + if ( e.target.closest( wrapperClass ) ) { + return false; + } - const doHideSearchField = ( animate = true ) => { - hideSearchField( wrapper, searchField, button, animate ); - block.classList.add( hiddenClass ); - }; + doHideSearchField(); - const doBlur = ( e ) => { - if ( e.target.closest( wrapperClass ) ) { - return false; - } + document.body.removeEventListener( 'click', doSearch ); + wrapper.addEventListener( 'click', toggleSearchField ); + }; - doHideSearchField(); - document.body.removeEventListener( 'click', doBlur ); wrapper.addEventListener( 'click', toggleSearchField ); - }; - - wrapper.addEventListener( 'click', toggleSearchField ); - doHideSearchField( false ); -}; - -// eslint-disable-next-line @wordpress/no-global-event-listener -document.addEventListener( 'DOMContentLoaded', () => { - Array.from( - document.getElementsByClassName( - 'wp-block-search__button-behavior-expand' - ) - ).forEach( ( block ) => { - wpBlockSearch( block ); } ); } ); diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 3e2d3411442ad..6f2a5c7518e86 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -91,17 +91,9 @@ function render_block_core_search( $attributes ) { $input_markup . $button_markup ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); - $block_attributes = ''; if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) { if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) { - $block_attributes = ''; - wp_enqueue_script( 'wp-block-library-search', plugins_url( 'search/frontend.js', __FILE__ ) ); } } @@ -110,7 +102,7 @@ function render_block_core_search( $attributes ) { '
%s
', esc_url( home_url( '/' ) ), $wrapper_attributes, - $label_markup . $field_markup . $block_attributes + $label_markup . $field_markup ); } @@ -197,7 +189,7 @@ function styles_for_block_core_search( $attributes ) { $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; - if ( $has_width && ! $button_only ) { + if ( $has_width ) { $wrapper_styles[] = sprintf( 'width: %d%s;', esc_attr( $attributes['width'] ), diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index a67358983ff56..930845f6ffe23 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -68,6 +68,12 @@ min-width: 0 !important; } + .wp-block-search__input { + transition-property: all; + transition-duration: 0; + flex-basis: 100%; + } + // !important here to override inline styles on button only deselected view. &.wp-block-search__searchfield-hidden { overflow: hidden; @@ -85,6 +91,7 @@ border-right-width: 0 !important; flex-grow: 0; margin: 0; + flex-basis: 0 !important; } } } diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js index 286c9812f1021..b54048b609eb3 100644 --- a/packages/block-library/src/search/utils.js +++ b/packages/block-library/src/search/utils.js @@ -5,7 +5,6 @@ export const PC_WIDTH_DEFAULT = 50; export const PX_WIDTH_DEFAULT = 350; export const MIN_WIDTH = 220; export const MIN_WIDTH_UNIT = 'px'; -export const SEARCHFIELD_ANIMATION_DURATION = 300; /** * Returns a boolean whether passed unit is percentage @@ -17,32 +16,3 @@ export const SEARCHFIELD_ANIMATION_DURATION = 300; export function isPercentageUnit( unit ) { return unit === '%'; } - -export function hideSearchField( wrapper, searchField, button, animate = true ) { - const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; - - searchField.style.transitionDuration = `${ duration }ms`; - wrapper.style.transitionDuration = `${ duration }ms`; - wrapper.style.width = `${ button.offsetWidth }px`; - - const removeTransitions = setTimeout( () => { - wrapper.style.transitionDuration = 'unset'; - - clearTimeout( removeTransitions ); - }, duration ); -} - -export function showSearchField( wrapper, searchField, width, widthUnit, animate = true ) { - const duration = animate ? SEARCHFIELD_ANIMATION_DURATION : 0; - - searchField.style.transitionDuration = `${ duration }ms`; - wrapper.style.transitionDuration = `${ duration }ms`; - wrapper.style.width = `${ width }${ widthUnit }`; - - const removeTransitions = setTimeout( () => { - searchField.style.width = `${ width }${ widthUnit }`; - wrapper.style.transitionDuration = 'unset'; - - clearTimeout( removeTransitions ); - }, duration ); -} From 55ad50a347d5e174ed7d76355de1ea7948601765 Mon Sep 17 00:00:00 2001 From: Andy Peatling Date: Mon, 7 Jun 2021 07:51:03 -0700 Subject: [PATCH 36/36] Move const outside foreach loop. Co-authored-by: Ari Stathopoulos --- packages/block-library/src/search/frontend.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js index 713c3d027b569..9c795e2f37219 100644 --- a/packages/block-library/src/search/frontend.js +++ b/packages/block-library/src/search/frontend.js @@ -1,15 +1,15 @@ // eslint-disable-next-line @wordpress/no-global-event-listener document.addEventListener( 'DOMContentLoaded', () => { const transitionDuration = 300; + const hiddenClass = 'wp-block-search__searchfield-hidden'; + const wrapperClass = '.wp-block-search__inside-wrapper'; + const buttonClass = '.wp-block-search__button'; Array.from( document.getElementsByClassName( 'wp-block-search__button-behavior-expand' ) ).forEach( ( block ) => { - const hiddenClass = 'wp-block-search__searchfield-hidden'; - const wrapperClass = '.wp-block-search__inside-wrapper'; - const buttonClass = '.wp-block-search__button'; const wrapper = block.querySelector( wrapperClass ); const searchField = block.querySelector( '.wp-block-search__input' );