From 0d1467bbaa7bd6c22a5af67920fd415ccafcc9a3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Jun 2021 18:26:59 +0100 Subject: [PATCH 1/6] Add a SearchControl component and reuse accross the UI --- docs/manifest.json | 6 ++ packages/block-editor/src/components/index.js | 1 - .../src/components/inserter/menu.js | 6 +- .../src/components/inserter/quick-inserter.js | 6 +- .../src/components/inserter/style.scss | 47 +-------- .../src/template-part/edit/selection/index.js | 4 +- packages/components/src/index.js | 1 + packages/components/src/index.native.js | 1 + .../components/src/search-control/README.md | 74 ++++++++++++++ .../src/search-control/index.js} | 29 +++--- .../src/search-control/index.native.js | 97 +++++++++++++++++++ .../src/search-control/stories/index.js | 20 ++++ .../components/src/search-control/style.scss | 48 +++++++++ packages/components/src/style.scss | 1 + .../src/components/block-manager/index.js | 15 +-- .../src/components/block-manager/style.scss | 13 --- 16 files changed, 276 insertions(+), 93 deletions(-) create mode 100644 packages/components/src/search-control/README.md rename packages/{block-editor/src/components/inserter/search-form.js => components/src/search-control/index.js} (64%) create mode 100644 packages/components/src/search-control/index.native.js create mode 100644 packages/components/src/search-control/stories/index.js create mode 100644 packages/components/src/search-control/style.scss diff --git a/docs/manifest.json b/docs/manifest.json index 5d71772ac69dd1..42f2c0ae80a8ed 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1145,6 +1145,12 @@ "markdown_source": "../packages/components/src/scrollable/README.md", "parent": "components" }, + { + "title": "SearchControl", + "slug": "search-control", + "markdown_source": "../packages/components/src/search-control/README.md", + "parent": "components" + }, { "title": "SelectControl", "slug": "select-control", diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index a781b86dc25242..6daa8ddd4df354 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -121,7 +121,6 @@ export { default as DefaultBlockAppender } from './default-block-appender'; export { default as __unstableEditorStyles } from './editor-styles'; export { default as Inserter } from './inserter'; export { default as __experimentalLibrary } from './inserter/library'; -export { default as __experimentalSearchForm } from './inserter/search-form'; export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts'; export { MultiSelectScrollIntoView } from './selection-scroll-into-view'; export { default as NavigableToolbar } from './navigable-toolbar'; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 9db480c49d5b09..19b01b5a66b3eb 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useState, useCallback, useMemo } from '@wordpress/element'; -import { VisuallyHidden } from '@wordpress/components'; +import { VisuallyHidden, SearchControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; @@ -10,7 +10,6 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import Tips from './tips'; -import InserterSearchForm from './search-form'; import InserterPreviewPanel from './preview-panel'; import BlockTypesTab from './block-types-tab'; import BlockPatternsTabs from './block-patterns-tab'; @@ -171,7 +170,8 @@ function InserterMenu( {
{ /* the following div is necessary to fix the sticky position of the search form */ }
- { if ( hoveredItem ) setHoveredItem( null ); setFilterValue( value ); diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index ca4ff4c2fa2743..e9060e827a938f 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -8,13 +8,12 @@ import classnames from 'classnames'; */ import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; +import { Button, SearchControl } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import InserterSearchForm from './search-form'; import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; import usePatternsState from './hooks/use-patterns-state'; @@ -87,7 +86,8 @@ export default function QuickInserter( { } ) } > { showSearch && ( - { setFilterValue( value ); diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index cb8f94f93eb6e0..8792dfe9699094 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -99,55 +99,14 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__search { + background: $white; padding: $grid-unit-20; position: sticky; top: 0; - background: $white; z-index: z-index(".block-editor-inserter__search"); - input[type="search"].block-editor-inserter__search-input { - @include input-control; - display: block; - padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20; - background: $gray-100; - border: none; - width: 100%; - height: $grid-unit-60; - - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size; - @include break-small { - font-size: $default-font-size; - } - - &:focus { - background: $white; - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - - &::placeholder { - color: $gray-700; - } - - &::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration { - -webkit-appearance: none; - } - } -} - -.block-editor-inserter__search-icon { - position: absolute; - top: 0; - right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2; - bottom: 0; - display: flex; - align-items: center; - - > svg { - margin: $grid-unit-10; + .components-search-control__icon { + right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2; } } diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js index 2ed5ac835f81f2..4bdef9130e33d0 100644 --- a/packages/block-library/src/template-part/edit/selection/index.js +++ b/packages/block-library/src/template-part/edit/selection/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor'; +import { SearchControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; /** @@ -34,7 +34,7 @@ export default function TemplatePartSelection( { onKeyPress={ stopKeyPropagation } onKeyDown={ preventArrowKeysPropagation } > - + ); +} +``` + +### Props + +The set of props accepted by the component will be specified below. +Props not included in this set will be applied to the input element. + +#### label + +If this property is added, a label will be generated using label property as the content. + +- Type: `String` +- Required: Yes + +#### placeholder + +If this property is added, a specific placeholder will be used for the input. + +- Type: `String` +- Required: No +#### value + +The current value of the input. + +- Type: `String | Number` +- Required: Yes + +#### className + +The class that will be added to the classes of the wrapper div. + +- Type: `String` +- Required: No + +#### onChange + +A function that receives the value of the input. + +- Type: `function` +- Required: Yes + +## Related components + +- To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl. diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/components/src/search-control/index.js similarity index 64% rename from packages/block-editor/src/components/inserter/search-form.js rename to packages/components/src/search-control/index.js index 7914e842fd3dcd..e871a55a938c95 100644 --- a/packages/block-editor/src/components/inserter/search-form.js +++ b/packages/components/src/search-control/index.js @@ -8,44 +8,43 @@ import classnames from 'classnames'; */ import { useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { VisuallyHidden, Button } from '@wordpress/components'; import { Icon, search, closeSmall } from '@wordpress/icons'; import { useRef } from '@wordpress/element'; -function InserterSearchForm( { +/** + * Internal dependencies + */ +import { VisuallyHidden, Button } from '../'; + +function SearchControl( { className, onChange, value, label, - placeholder, + placeholder = __( 'Search' ), } ) { - const instanceId = useInstanceId( InserterSearchForm ); + const instanceId = useInstanceId( SearchControl ); const searchInput = useRef(); return ( -
+
{ label || placeholder } onChange( event.target.value ) } autoComplete="off" value={ value || '' } /> -
+
{ !! value && (
) } - - { __( 'Search for a block' ) } - - setSearch( nextSearch ) } diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss index e375b5091df2b8..3905eeea059f7a 100644 --- a/packages/edit-post/src/components/block-manager/style.scss +++ b/packages/edit-post/src/components/block-manager/style.scss @@ -6,19 +6,6 @@ .edit-post-block-manager__search { margin: $grid-unit-20 0; - - .components-base-control__field { - margin-bottom: 0; - } - - .components-base-control__label { - margin-top: -0.25 * $grid-unit-20; - } - - input[type="search"].components-text-control__input { - padding: $grid-unit-10; - border-radius: $radius-block-ui; - } } .edit-post-block-manager__disabled-blocks-count { From 221c3ed8fbc38ea7cbec36154283825a029476e6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Jun 2021 10:19:38 +0100 Subject: [PATCH 2/6] Add BaseControl to SearchControl --- .../components/src/search-control/README.md | 13 ++++ .../components/src/search-control/index.js | 68 ++++++++++--------- .../src/search-control/stories/index.js | 18 ++++- .../components/src/search-control/style.scss | 4 ++ 4 files changed, 71 insertions(+), 32 deletions(-) diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md index 8324d587f35928..da70164dfad85c 100644 --- a/packages/components/src/search-control/README.md +++ b/packages/components/src/search-control/README.md @@ -69,6 +69,19 @@ A function that receives the value of the input. - Type: `function` - Required: Yes +#### help + +If this property is added, a help text will be generated using help property as the content. + +- Type: `String|WPElement` +- Required: No +### hideLabelFromVision + +If true, the label will only be visible to screen readers. + +- Type: `Boolean` +- Required: No + ## Related components - To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl. diff --git a/packages/components/src/search-control/index.js b/packages/components/src/search-control/index.js index e871a55a938c95..fc0bd900f3b158 100644 --- a/packages/components/src/search-control/index.js +++ b/packages/components/src/search-control/index.js @@ -14,7 +14,8 @@ import { useRef } from '@wordpress/element'; /** * Internal dependencies */ -import { VisuallyHidden, Button } from '../'; +import { Button } from '../'; +import BaseControl from '../base-control'; function SearchControl( { className, @@ -22,42 +23,47 @@ function SearchControl( { value, label, placeholder = __( 'Search' ), + hideLabelFromVision = true, + help, } ) { const instanceId = useInstanceId( SearchControl ); const searchInput = useRef(); + const id = `components-search-control-${ instanceId }`; return ( -
- - { label || placeholder } - - onChange( event.target.value ) } - autoComplete="off" - value={ value || '' } - /> -
- { !! value && ( -
-
+ ); } diff --git a/packages/components/src/search-control/stories/index.js b/packages/components/src/search-control/stories/index.js index 355d9d0c7514a0..2710542a5d6a25 100644 --- a/packages/components/src/search-control/stories/index.js +++ b/packages/components/src/search-control/stories/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { boolean, text } from '@storybook/addon-knobs'; + /** * WordPress dependencies */ @@ -15,6 +20,17 @@ export default { export const _default = () => { const [ value, setValue ] = useState(); + const label = text( 'Label', 'Label Text' ); + const hideLabelFromVision = boolean( 'Hide Label From Vision', true ); + const help = text( 'Help Text', 'Help text to explain the input.' ); - return ; + return ( + + ); }; diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss index d6786f36566e92..247b726fc9dd93 100644 --- a/packages/components/src/search-control/style.scss +++ b/packages/components/src/search-control/style.scss @@ -46,3 +46,7 @@ margin: $grid-unit-10 0; } } + +.components-search-control__input-wrapper { + position: relative; +} From 6a1200d63e12976d25ee760851d17c2845d2dbf4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Jun 2021 11:45:25 +0100 Subject: [PATCH 3/6] Try fix e2e tests --- packages/e2e-test-utils/src/inserter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index 48a4985bfe62fe..1bcce329f07dff 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -7,7 +7,7 @@ import { canvas } from './canvas'; // This selector is written to support the current and old inserter markup // because the performance tests need to be able to run across versions. const INSERTER_SEARCH_SELECTOR = - '.block-editor-inserter__search-input,input.block-editor-inserter__search'; + '.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search'; /** * Opens the global block inserter. From 351ede05da7c730115199f5028f1f80f85e65bff Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Jun 2021 12:03:08 +0100 Subject: [PATCH 4/6] Fix native styles and remove old native search form file --- .../src/components/inserter/menu.native.js | 5 +- .../components/inserter/search-form.native.js | 92 ------------------- .../src/components/inserter/style.native.scss | 31 ------- .../src/search-control/style.native.scss | 30 ++++++ 4 files changed, 32 insertions(+), 126 deletions(-) delete mode 100644 packages/block-editor/src/components/inserter/search-form.native.js create mode 100644 packages/components/src/search-control/style.native.scss diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index ffac41438fb03c..541ab97ec63d51 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -14,13 +14,12 @@ import { import { useEffect, useState, useCallback } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; -import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; +import { BottomSheet, BottomSheetConsumer, SearchControl } from '@wordpress/components'; /** * Internal dependencies */ import InserterSearchResults from './search-results'; -import InserterSearchForm from './search-form'; import { store as blockEditorStore } from '../../store'; import InserterTabs from './tabs'; import styles from './style.scss'; @@ -192,7 +191,7 @@ function InserterMenu( { header={ <> { showSearchForm && ( - diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js deleted file mode 100644 index f23d6b95b91001..00000000000000 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * External dependencies - */ -import { TextInput, View, TouchableHighlight } from 'react-native'; - -/** - * WordPress dependencies - */ -import { useState, useRef } from '@wordpress/element'; -import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; -import { ToolbarButton } from '@wordpress/components'; -import { - Icon, - cancelCircleFilled, - arrowLeft, - search as searchIcon, -} from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import styles from './style.scss'; - -function InserterSearchForm( { value, onChange } ) { - const [ isActive, setIsActive ] = useState( false ); - - const inputRef = useRef(); - - const searchFormStyle = usePreferredColorSchemeStyle( - styles.searchForm, - styles.searchFormDark - ); - - const searchFormInputStyle = usePreferredColorSchemeStyle( - styles.searchFormInput, - styles.searchFormInputDark - ); - - const placeholderStyle = usePreferredColorSchemeStyle( - styles.searchFormPlaceholder, - styles.searchFormPlaceholderDark - ); - - return ( - - - { isActive ? ( - { - inputRef.current.blur(); - onChange( '' ); - setIsActive( false ); - } } - /> - ) : ( - { - inputRef.current.focus(); - setIsActive( true ); - } } - /> - ) } - setIsActive( true ) } - value={ value } - placeholder={ __( 'Search blocks' ) } - /> - - { !! value && ( - } - onClick={ () => { - onChange( '' ); - } } - /> - ) } - - - ); -} - -export default InserterSearchForm; diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index a0f017931a62aa..1ed3d8ab6a3bc9 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -13,37 +13,6 @@ padding-top: 8; } -.searchForm { - height: 46px; - border-radius: 8px; - color: $gray-dark; - margin: $grid-unit-30; - background-color: $gray-light; - flex-direction: row; - justify-content: space-between; -} - -.searchFormDark { - background-color: rgba($white, 0.07); -} - -.searchFormInput { - color: $gray-dark; - flex: 2; -} - -.searchFormInputDark { - color: $white; -} - -.searchFormPlaceholder { - color: $gray; -} - -.searchFormPlaceholderDark { - color: rgba($white, 0.8); -} - .inserter-tabs__wrapper { overflow: hidden; } diff --git a/packages/components/src/search-control/style.native.scss b/packages/components/src/search-control/style.native.scss new file mode 100644 index 00000000000000..8617ad232552f7 --- /dev/null +++ b/packages/components/src/search-control/style.native.scss @@ -0,0 +1,30 @@ +.searchForm { + height: 46px; + border-radius: 8px; + color: $gray-dark; + margin: $grid-unit-30; + background-color: $gray-light; + flex-direction: row; + justify-content: space-between; +} + +.searchFormDark { + background-color: rgba($white, 0.07); +} + +.searchFormInput { + color: $gray-dark; + flex: 2; +} + +.searchFormInputDark { + color: $white; +} + +.searchFormPlaceholder { + color: $gray; +} + +.searchFormPlaceholderDark { + color: rgba($white, 0.8); +} From fc6accc2d07fcecfa1a15bf1303d27d464d12a56 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Jun 2021 12:20:28 +0100 Subject: [PATCH 5/6] Fix linting issue --- .../block-editor/src/components/inserter/menu.native.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 541ab97ec63d51..afaffa950028f3 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -14,7 +14,11 @@ import { import { useEffect, useState, useCallback } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; -import { BottomSheet, BottomSheetConsumer, SearchControl } from '@wordpress/components'; +import { + BottomSheet, + BottomSheetConsumer, + SearchControl, +} from '@wordpress/components'; /** * Internal dependencies From 5bc8bb7905b69b0ebffb22675ca704abcb6dfe57 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 7 Jul 2021 09:37:15 +0100 Subject: [PATCH 6/6] Fix e2e tests --- .../e2e-tests/specs/editor/plugins/cpt-locking.test.js | 4 ++-- .../specs/editor/various/inserting-blocks.test.js | 8 ++++---- .../e2e-tests/specs/editor/various/writing-flow.test.js | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index aee6398871a9b1..03abfc56d189b8 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -123,12 +123,12 @@ describe( 'cpt locking', () => { await page.click( '.wp-block-column .block-editor-button-block-appender' ); - await page.type( '.block-editor-inserter__search-input', 'image' ); + await page.type( '.block-editor-inserter__search input', 'image' ); await pressKeyTimes( 'Tab', 2 ); await page.keyboard.press( 'Enter' ); await page.click( '.edit-post-header-toolbar__inserter-toggle' ); await page.type( - '.block-editor-inserter__search-input', + '.block-editor-inserter__search input', 'gallery' ); await pressKeyTimes( 'Tab', 2 ); diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js index e4a0e07a13d81d..acc7965c5621d2 100644 --- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js @@ -147,7 +147,7 @@ describe( 'Inserting blocks', () => { () => document.activeElement && document.activeElement.classList.contains( - 'block-editor-inserter__search-input' + 'components-search-control__input' ) ); await page.keyboard.type( 'para' ); @@ -185,7 +185,7 @@ describe( 'Inserting blocks', () => { () => document.activeElement.classList ); expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-inserter__search-input' + 'components-search-control__input' ); // Try using the up arrow key (vertical navigation triggers the issue described in #9583). @@ -196,7 +196,7 @@ describe( 'Inserting blocks', () => { () => document.activeElement.classList ); expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-inserter__search-input' + 'components-search-control__input' ); // Tab to the block list @@ -250,7 +250,7 @@ describe( 'Inserting blocks', () => { ); // Insert a paragraph block. - await page.waitForSelector( '.block-editor-inserter__search-input' ); + await page.waitForSelector( '.block-editor-inserter__search input' ); // Search for the paragraph block if it's not in the list of blocks shown. if ( ! page.$( '.editor-block-list-item-paragraph' ) ) { diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index 3b8e6746ac866a..566303fabfeaf2 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -29,7 +29,7 @@ const addParagraphsAndColumnsDemo = async () => { await page.keyboard.press( 'Enter' ); await page.click( ':focus [aria-label="Two columns; equal split"]' ); await page.click( ':focus .block-editor-button-block-appender' ); - await page.waitForSelector( ':focus.block-editor-inserter__search-input' ); + await page.waitForSelector( '.block-editor-inserter__search input:focus' ); await page.keyboard.type( 'Paragraph' ); await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result. await page.keyboard.press( 'Enter' ); // Insert paragraph. @@ -40,7 +40,7 @@ const addParagraphsAndColumnsDemo = async () => { // is a temporary solution. await page.focus( '.wp-block[data-type="core/column"]:nth-child(2)' ); await page.click( ':focus .block-editor-button-block-appender' ); - await page.waitForSelector( ':focus.block-editor-inserter__search-input' ); + await page.waitForSelector( '.block-editor-inserter__search input:focus' ); await page.keyboard.type( 'Paragraph' ); await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result. await page.keyboard.press( 'Enter' ); // Insert paragraph.