[RNMobile] Add inserter block search #29169

jhnstn · 2021-02-19T21:50:17Z

Description

Adds a block search form to the existing search menu. The available blocks are filtered according to the search query.
The search form is only rendered when a minimal number of blocks are available in the menu (the current min is set to 2)

The new feature is behind the __DEV__ flag in this change set.

Part of wordpress-mobile/gutenberg-mobile#2570

How has this been tested?

Testing search flow

Open the mobile block inserter
Press "Search blocks"
Try searching for a block with the soft keyboard
- The inserter menu should filter the blocks per the search string
Try pressing on a block after searching
- The chosen block should be inserted in the expected position
- The inserter menu should close
Press "Search blocks"
- The prior search input should be cleared
Try searching with a single character i.e, i
- The blocks in the menu should be sorted to best match the search
- The menu should be scrollable

Testing canceling search flows

Open the mobile block inserter
Press "Search blocks"
Press the arrow on the left side of the input
- The inserter menu should return to the original inserter menu
Press "Search blocks" again
Start searching for a block
Press the x on the right side of the input
- The input field should clear and the inserter menu should show all available blocks
Start searching for a block again
Press the arrow on the left side of the input
Press "Search blocks" again
- The input field should reset to the placeholder text

Testing with few available blocks

Add a Buttons block
With the Buttons block selected, open the block inserter
- The search form should not be visible

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2021-02-19T21:50:43Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jhnstn! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Switch to useDispatch for insertDefaultBlock Switch to useDispatch for onSelect Switch to useDispatch for showInsertionPoint Remove withDispatch and WithSelect

Pass items to search results as a prop Move show/hide insertion point Move block insertion to menu Fix block insertion

Also re-org bottom sheet setup

illusaen

So I know you didn't work on the actual filtering part on this PR.... but the search filter seems a little wonky? See below GIF for details.

Wonky search

illusaen · 2021-03-11T16:24:20Z

packages/block-editor/src/components/inserter/search-form.native.js

+						icon={ arrowLeft }
+						onClick={ () => {
+							inputRef.current.blur();
+							onChange( '' );


Out of curiousity, why default to empty string instead of undefined?

Good question, I was thinking the same when I looked back at this PR 😆 . After reviewing the changes as they are now I can't find an explicit reason. I believe as some point while I was drafting the changes I was treating undefined differently. That's not the case now.

I might update the onChange function definition to use '' as the default value in a later change. That way the value remains a String type but can be called with undefined

illusaen

Weird search is being handled in other PR. This one works well.

jhnstn · 2021-03-11T17:49:45Z

So I know you didn't work on the actual filtering part on this PR.... but the search filter seems a little wonky? See below GIF for details.

Yes, I noticed that too. The fix is in a lower level component which I didn't want to include in this new work. The trick is the fix is easier to verify with this change set. Here is the fix PR #29274

mchowning · 2021-03-18T21:58:11Z

packages/block-editor/src/components/inserter/menu.native.js

+		let itemsToDisplay = items.filter(
 			( { name } ) => name !== 'core/block'
 		);

+		itemsToDisplay = searchItems( itemsToDisplay, filterValue );


Minor thing, but I wonder if instead of using a let here we could used two const variables with names that showed how they were different.

mchowning · 2021-03-18T21:58:55Z

Thanks for the PR @jhnstn and the review @illusaen ! 🙇

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Feb 19, 2021

jhnstn mentioned this pull request Feb 23, 2021

[RNMobile] Add setMinHeightToMaxHeight prop to bottom sheet #29274

Merged

7 tasks

jhnstn added 17 commits February 23, 2021 16:44

Refactor to functional component

866b791

Switch to useSelect hook

65548fd

Switch to useDispatch

b11163d

Switch to useDispatch for insertDefaultBlock Switch to useDispatch for onSelect Switch to useDispatch for showInsertionPoint Remove withDispatch and WithSelect

Simplify clipboard flow

38993db

Move menu to search results

fc15948

Move displaying items to a separate component

6cd98b9

Pass items to search results as a prop Move show/hide insertion point Move block insertion to menu Fix block insertion

Add insserter search form

4e3010e

Filter blocks by search query

faf0d26

First pass at styling for search

8baadf6

Also re-org bottom sheet setup

Simplify search form

ea5aaa3

Add dev flag to enable search

0a8d03d

Move BottomSheetConsumer to the menu

3504864

Add ebottom sheet padding for search form

abd950b

Only show search if there are enough items to filter

bddeedf

Clean up styles

743535d

Merge branch 'master' into add/inserter-block-search

6cfa7a5

fix lint error

a53a08d

Base automatically changed from master to trunk March 1, 2021 15:45

jhnstn added 2 commits March 3, 2021 13:21

Merge branch 'trunk' into add/inserter-block-search

d89e312

Merge branch 'trunk' into add/inserter-block-search

e0c871b

jhnstn marked this pull request as ready for review March 5, 2021 23:39

jhnstn changed the title ~~[RNMobile] WIP Add inserter block search~~ [RNMobile] Add inserter block search Mar 10, 2021

illusaen reviewed Mar 11, 2021

View reviewed changes

illusaen approved these changes Mar 11, 2021

View reviewed changes

mchowning reviewed Mar 18, 2021

View reviewed changes

mchowning approved these changes Mar 18, 2021

View reviewed changes

mchowning merged commit 0e4fcfd into WordPress:trunk Mar 18, 2021

github-actions bot added this to the Gutenberg 10.3 milestone Mar 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Add inserter block search #29169

[RNMobile] Add inserter block search #29169

jhnstn commented Feb 19, 2021 •

edited

Loading

github-actions bot commented Feb 19, 2021

illusaen left a comment

illusaen Mar 11, 2021

jhnstn Mar 18, 2021

illusaen left a comment

jhnstn commented Mar 11, 2021 •

edited

Loading

mchowning Mar 18, 2021

mchowning commented Mar 18, 2021

[RNMobile] Add inserter block search #29169

[RNMobile] Add inserter block search #29169

Conversation

jhnstn commented Feb 19, 2021 • edited Loading

Description

How has this been tested?

Testing search flow

Testing canceling search flows

Testing with few available blocks

Screenshots

Types of changes

Checklist:

github-actions bot commented Feb 19, 2021

illusaen left a comment

Choose a reason for hiding this comment

illusaen Mar 11, 2021

Choose a reason for hiding this comment

jhnstn Mar 18, 2021

Choose a reason for hiding this comment

illusaen left a comment

Choose a reason for hiding this comment

jhnstn commented Mar 11, 2021 • edited Loading

mchowning Mar 18, 2021

Choose a reason for hiding this comment

mchowning commented Mar 18, 2021

jhnstn commented Feb 19, 2021 •

edited

Loading

jhnstn commented Mar 11, 2021 •

edited

Loading