Skip to content

Instant Search: improve search phrase highlighting (#2)#13824

Merged
jeherve merged 2 commits intomasterfrom
update/instant-search-highlighting
Oct 24, 2019
Merged

Instant Search: improve search phrase highlighting (#2)#13824
jeherve merged 2 commits intomasterfrom
update/instant-search-highlighting

Conversation

@bluefuton
Copy link
Copy Markdown
Contributor

@bluefuton bluefuton commented Oct 23, 2019

Fixes #13792.

Changes proposed in this Pull Request:

We recently switched to use <mark> to show where search results contain the search phrase. It looks like this by default:

Screen Shot 2019-10-22 at 16 30 41

This PR changes the highlighting to have a more subtle appearance:

67346520-8153ce80-f59b-11e9-9220-147aff242a87

Is this a new feature or does it add/remove features to an existing part of Jetpack?

No - it's a visual adjustment to an unreleased feature.

Testing instructions

Add define( "JETPACK_SEARCH_PROTOTYPE", true ); to your wp-config.php.
If using Jetpack's Docker development environment, you can create a file at /docker/mu-plugins/instant-search.php and add the define there.

Ensure that your site has the Jetpack Pro plan and Jetpack Search enabled.
You can enable Jetpack Search in the Performance tab within the Jetpack menu (/wp-admin/admin.php?page=jetpack#/performance).

Perform a search and make sure the correct highlighting is applied. For example: /?s=card&blog_id=84860689 should show the word "card" bolded in results.

Proposed changelog entry for your changes:

  • No changelog required.

@bluefuton bluefuton added [Status] Needs Review This PR is ready for review. [Feature] Search For all things related to Search Instant Search labels Oct 23, 2019
@bluefuton bluefuton requested review from a team, gibrown and jsnmoon October 23, 2019 22:04
@bluefuton bluefuton self-assigned this Oct 23, 2019
@jetpackbot
Copy link
Copy Markdown
Collaborator

Warnings
⚠️

pre-commit hook was skipped for one or more commits

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS against ecec32f

Copy link
Copy Markdown
Contributor

@jsnmoon jsnmoon left a comment

Choose a reason for hiding this comment

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

Neat; works as expected.

Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

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

This looks good to me. Merging.

pre-commit hook was skipped for one or more commits

I would suggest running yarn build in your local install, so the pre-commit hook is available whenever you commit something.

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! Enhancement Changes to an existing feature — removing, adding, or changing parts of it and removed [Status] Needs Review This PR is ready for review. labels Oct 24, 2019
@jeherve jeherve added this to the 7.9 milestone Oct 24, 2019
@jeherve jeherve merged commit 0ff623a into master Oct 24, 2019
@jeherve jeherve deleted the update/instant-search-highlighting branch October 24, 2019 08:11
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Oct 24, 2019
@bluefuton
Copy link
Copy Markdown
Contributor Author

Thanks for merging @jeherve!

I would suggest running yarn build in your local install, so the pre-commit hook is available whenever you commit something.

I do have yarn watch running - this seemed to happen when a did a git cherry-pick of some commits from an old branch, which appears to have skipped the pre-commit hook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Feature] Search For all things related to Search

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Instant Search: Add CSS for <mark> in the search results

5 participants