Instant Search: Update prototype with feature branch changes

[jsnmoon]

Changes proposed in this Pull Request:

This PR updates the Instant Search prototype with the following changes:

• Bugfixes and code optimizations
• Accessibility improvements
• Network connectivity improvements
• Product improvements via design feedback
• Photon support

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

• Yes, this is part of the Jetpack Instant Search project: p10gg3-9iP-p2. It has not yet been released to the public.

Testing instructions:

1. If you haven't already, set up Instant Search following the instructions in the readme.
2. Enter a search query into your site's search input. Ensure that the search results render onto your site's main content area.

Proposed changelog entry for your changes:

• Bugfixes and code optimizations for Jetpack Instant Search.

[jeherve]

@sirreal had worked on something a bit similar that included a few extra checks and handled srcset:

jetpack/extensions/blocks/tiled-gallery/utils/index.js

Lines 18 to 112 in 354af3d

	/**
	* Build src and srcSet properties which can be used on an <img />
	*
	* @param {Object} img Image
	* @param {number} img.height Image height
	* @param {string} img.url Image URL
	* @param {number} img.width Image width
	*
	* @param {Object} galleryAtts Gallery attributes relevant for image optimization.
	* @param {string} galleryAtts.layoutStyle Gallery layout. 'rectangular', 'circle', etc.
	* @param {number} galleryAtts.columns Gallery columns. Not applicable for all layouts.
	*
	* @return {Object} Returns an object. If possible, the object will include `src` and `srcSet`
	* properties {string} for use on an image.
	*/
	export function photonizedImgProps( img, galleryAtts = {} ) {
	if ( ! img.height || ! img.url || ! img.width ) {
	return {};
	}
	// Do not Photonize images that are still uploading or from localhost
	if (
	isBlobURL( img.url ) ||
	/^https?:\/\/localhost/.test( img.url ) ||
	/^https?:\/\/.*\.local\//.test( img.url )
	) {
	return { src: img.url };
	}
	// Drop query args, photon URLs can't handle them
	// This should be the "raw" url, we'll add dimensions later
	const url = img.url.split( '?', 1 )[ 0 ];
	const { height, width } = img;
	const { layoutStyle } = galleryAtts;
	const photonImplementation =
	isWpcomFilesUrl( url ) || true === isVIP() ? photonWpcomImage : photon;
	/**
	* Build the `src`
	* We don't know what the viewport size will be like. Use full size src.
	*/
	let src;
	if ( isSquareishLayout( layoutStyle ) && width && height ) {
	// Layouts with 1:1 width/height ratio should be made square
	const size = Math.min( PHOTON_MAX_RESIZE, width, height );
	src = photonImplementation( url, {
	resize: `${ size },${ size }`,
	} );
	} else {
	src = photonImplementation( url );
	}
	/**
	* Build a sensible `srcSet` that will let the browser get an optimized image based on
	* viewport width.
	*/
	const step = 300;
	const srcsetMinWith = 600;
	let srcSet;
	if ( isSquareishLayout( layoutStyle ) ) {
	const minWidth = Math.min( srcsetMinWith, width, height );
	const maxWidth = Math.min( PHOTON_MAX_RESIZE, width, height );
	srcSet = range( minWidth, maxWidth, step )
	.map( srcsetWidth => {
	const srcsetSrc = photonImplementation( url, {
	resize: `${ srcsetWidth },${ srcsetWidth }`,
	strip: 'info',
	} );
	return srcsetSrc ? `${ srcsetSrc } ${ srcsetWidth }w` : null;
	} )
	.filter( Boolean )
	.join( ',' );
	} else {
	const minWidth = Math.min( srcsetMinWith, width );
	const maxWidth = Math.min( PHOTON_MAX_RESIZE, width );
	srcSet = range( minWidth, maxWidth, step )
	.map( srcsetWidth => {
	const srcsetSrc = photonImplementation( url, {
	strip: 'info',
	width: srcsetWidth,
	} );
	return srcsetSrc ? `${ srcsetSrc } ${ srcsetWidth }w` : null;
	} )
	.filter( Boolean )
	.join( ',' );
	}
	return Object.assign( { src }, srcSet && { srcSet } );
	}

I wonder if it may be worth doing something similar here, or extract this so it can be used by both the block and Instant Search?

[sirreal]

Certainly seems like there's some generic utility there 👍

[jsnmoon]

@bluefuton, your thoughts on this? Extracting and re-using sounds like a good way forward.

[bluefuton]

Yes - definitely agree it would be nice to break this out in the future and make it reusable 👍 I'll add it to the list.

[gibrown]

There seems to be a lot of things broken in this branch:

• core search widget no longer has instant search working (for instance it works on http://gibrown.wpsandbox.me/demo/ where I am running master)
• filtering overlay icon getting added to core search widget: https://cloudup.com/cqaJXdz2n6S
• search filters are not displaying for me at all

[jsnmoon]

• core search widget no longer has instant search working (for instance it works on http://gibrown.wpsandbox.me/demo/ where I am running master) @gibrown

I couldn't reproduce this; core search widget injection still works as expected on my local docker setup. I also don't see any code changes that would change our behavior around core search widget injection.

• filtering overlay icon getting added to core search widget: https://cloudup.com/cqaJXdz2n6S @gibrown
• search filters are not displaying for me at all @gibrown

It looks like this was introduced in #14142; it should be fixed now. @bluefuton, could you sanity check my fix for this (210582e)?

[bluefuton]

It looks like this was introduced in #14142; it should be fixed now. @bluefuton, could you sanity check my fix for this (210582e)?

Fixes both of the described issues for me 👍 Thanks @jsnmoon.

[bluefuton]

Created another PR to port these fixes across to our instant-search-master branch: #14265

[jeherve]

I gave it a try on my own site and found a few issues.

That's the site: https://jeremy.hu
The theme is a child theme of Twenty Twenty, and I've added a Jetpack Search Widget in the footer.

---

The widget settings don't seem to be reflecting in the widget:

---

I get some odd behaviour when typing into the Jetpack search widget. I'm not exactly sure what is happening. Check https://jeremy.hu for an example

https://videopress.com/v/RzdFEeW7

It would appear that the search term is removed from the URL if I am not fast enough to type a word that would return results.

This is another instance of the same bug I think:

https://videopress.com/v/FjWGK8sW

---

The core search widget is just broken now, it does not return any results.

---

It seems that I lose my checked filters when I change the results' order:

https://videopress.com/v/7fD4o0sg

---

If I am on a post's page, I can lose it just by checking a filter:

https://videopress.com/v/KEOhtqlH

[jsnmoon]

core search widget no longer has instant search working (for instance it works on http://gibrown.wpsandbox.me/demo where I am running master) @gibrown

The core search widget is just broken now, it does not return any results. @jeherve

It looks like we miswired the core search widget in #14142; this should be fixed now with 1f78ce9.

[jsnmoon]

The widget settings don't seem to be reflecting in the widget @jeherve

Sharp eye! This is something we intend to wire up in a future release.

If I am on a post's page, I can lose it just by checking a filter @jeherve

Unchecking the filter should place you back onto the post page.

Nonetheless, it's worth mentioning that our current content-injection approach will be replaced with an overlay approach in the near future.

[jsnmoon]

I get some odd behaviour when typing into the Jetpack search widget. I'm not exactly sure what is happening. Check jeremy.hu for an example

videopress.com/v/RzdFEeW7

It would appear that the search term is removed from the URL if I am not fast enough to type a word that would return results.

This is another instance of the same bug I think:

videopress.com/v/FjWGK8sW
(@jeherve)

Hey Jeremy, this is a bit of a wild guess, but could you try disabling Jetpack's Infinite Scroll functionality? It looks like the updateUrl function is being invoked on every scroll event and possibly wiping out the search query value.

It's possible that this issue might be related to the bug where changing the sort order wipes out your filter selections.

[jeherve]

could you try disabling Jetpack's Infinite Scroll functionality?

That seems to help, it looks like you're right!

Unchecking the filter should place you back onto the post page.

Yep, that worked. It was what I expected at first, but I guess that makes sense.

[jsnmoon]

After discussing this with the team, we've decided on not releasing an Instant Search update with the Jetpack 8.1 release in January 2020. Instead, we will port bugfixes realized in this PR back into instant-search-master for continued polish and development. Thank you for your feedback!

We intend to release an update for Instant Search once we have implemented and stabilized our newly designed overlay-based approach.