Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Editor: Improve the way terms are matched in the block inserter #19122

Merged
merged 3 commits into from Dec 17, 2019

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented Dec 13, 2019

Description

This is preliminary work for integration block patterns with the inserter. While contemplating how this could be achieved, I did some refactoring to make the process easier for myself and future contributors by moving related code to search for blocks to its own file. It quickly led to a few discoveries:

  • categories were fetched directly from the store, which might lead to some sync issues when categories get updated, added or removed by 3rd party plugins
  • the search mechanism was very basic and it would be hard to find a good heuristics to include block patterns there

What this PR covers:

  • InserterMenu get categories injected using withSelect HOC
  • search logic was refactored to:
    • ignore whitespaces between words
    • ignore everything which doesn't resemble a word
    • match terms by scanning all possible properties used at the same time (block title, category name, and keywords) - all of them need to be matched in any combination

Before

before-inserter-search

After

improved-inserter-search

How has this been tested?

Unit tests were updated, new cases were covered:
npm run test-unit

UI part can be tested either with Storybook and the playground or directly in the block editor in WordPress. Storybook is just easier to develop with :)

Types of changes

Enhancement + refactoring

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • 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. .

@gziolo gziolo added [Type] Enhancement A suggestion for improvement. [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Dec 13, 2019
@gziolo gziolo self-assigned this Dec 13, 2019
@gziolo gziolo requested a review from mapk December 13, 2019 12:22
Copy link
Contributor

@mapk mapk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, such a great improvement here! Thanks for creating this PR, @gziolo. :shipit:

@gziolo gziolo merged commit 662c38e into master Dec 17, 2019
@gziolo gziolo deleted the update/patterns-inserter branch December 17, 2019 06:34
@youknowriad youknowriad added this to the Gutenberg 7.2 milestone Jan 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants