From a2dc487428ba4679f19c0d6ad512569636848388 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Feb 2024 00:56:32 +0900 Subject: [PATCH 1/2] Update SearchControl consumers --- .../src/components/inserter/style.scss | 16 ++-------- .../src/navigation/menu/menu-title-search.tsx | 12 +++---- .../navigation/styles/navigation-styles.tsx | 32 +++---------------- .../add-custom-template-modal-content.js | 1 + .../components/add-new-template/style.scss | 12 +++---- .../src/components/page-patterns/style.scss | 13 +++----- 6 files changed, 24 insertions(+), 62 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index dd0cc50e31fcb..35c18e1d9acce 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -108,10 +108,6 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__search { padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20; - - .components-search-control__icon { - right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5; - } } .block-editor-inserter__tabs { @@ -615,15 +611,9 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__media-panel-search { - &.components-search-control { - input[type="search"].components-search-control__input { - background: $white; - } - button.components-button { - min-width: auto; - padding-left: $grid-unit-05 * 0.5; - padding-right: $grid-unit-05 * 0.5; - } + // TODO: Consider using the Theme component to automatically adapt to a gray background. + &:not(:focus-within) { + --wp-components-color-background: #{$white}; } } } diff --git a/packages/components/src/navigation/menu/menu-title-search.tsx b/packages/components/src/navigation/menu/menu-title-search.tsx index d03766f28d752..c1dbda5af88fb 100644 --- a/packages/components/src/navigation/menu/menu-title-search.tsx +++ b/packages/components/src/navigation/menu/menu-title-search.tsx @@ -10,10 +10,11 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import withSpokenMessages from '../../higher-order/with-spoken-messages'; import { useNavigationMenuContext } from './context'; import { useNavigationContext } from '../context'; -import { MenuTitleSearchUI } from '../styles/navigation-styles'; import { SEARCH_FOCUS_DELAY } from '../constants'; import type { NavigationMenuTitleSearchProps } from '../types'; +import SearchControl from '../../search-control'; +import { MenuTitleSearchControlWrapper } from '../styles/navigation-styles'; function MenuTitleSearch( { debouncedSpeak, @@ -80,9 +81,9 @@ function MenuTitleSearch( { ).trim(); return ( -
- + onSearch?.( value ) } @@ -90,10 +91,9 @@ function MenuTitleSearch( { placeholder={ placeholder } onClose={ onClose } ref={ inputRef } - type="search" value={ search } /> -
+ ); } diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx index 27c508b98f26d..820cf2224be88 100644 --- a/packages/components/src/navigation/styles/navigation-styles.tsx +++ b/packages/components/src/navigation/styles/navigation-styles.tsx @@ -17,7 +17,6 @@ import { Text } from '../../text'; import { Heading } from '../../heading'; import { reduceMotion, rtl } from '../../utils'; import { space } from '../../utils/space'; -import SearchControl from '../../search-control'; export const NavigationUI = styled.div` width: 100%; @@ -69,6 +68,11 @@ export const MenuTitleUI = styled.div` width: 100%; `; +export const MenuTitleSearchControlWrapper = styled.div` + margin: 11px 0; // non-ideal hardcoding to maintain same height as Heading, could be improved + padding: 1px; // so the focus border doesn't get cut off by the overflow hidden on MenuTitleUI +`; + export const MenuTitleActionsUI = styled.span` height: ${ space( 6 ) }; // 24px, same height as the buttons inside @@ -91,32 +95,6 @@ export const MenuTitleActionsUI = styled.span` } `; -export const MenuTitleSearchUI = styled( SearchControl )` - input[type='search'].components-search-control__input { - margin: 0; - background: #303030; - color: #fff; - - &:focus { - background: #434343; - color: #fff; - } - - &::placeholder { - color: rgba( 255, 255, 255, 0.6 ); - } - } - - svg { - fill: white; - } - - .components-button.has-icon { - padding: 0; - min-width: auto; - } -`; - export const GroupTitleUI = styled( Heading )` min-height: ${ space( 12 ) }; align-items: center; diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js index 44554eac0dcd6..7e53bd737760a 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js @@ -134,6 +134,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) { { showSearchControl && ( Date: Thu, 8 Feb 2024 01:58:18 +0900 Subject: [PATCH 2/2] Revert overrides to New Template Modal --- .../add-custom-template-modal-content.js | 1 - .../src/components/add-new-template/style.scss | 10 ---------- 2 files changed, 11 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js index 7e53bd737760a..44554eac0dcd6 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js @@ -134,7 +134,6 @@ function SuggestionList( { entityForSuggestions, onSelect } ) { { showSearchControl && (