Merge pull request #2774 from 10up/feature/2768

Remove Instant Results' dependency on @wordpress/date and @wordpress/components
10up · May 19, 2022 · 7c9a32d · 7c9a32d
2 parents 4528115 + a25b719
commit 7c9a32d
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 37 deletions.
diff --git a/assets/css/instant-results.css b/assets/css/instant-results.css
@@ -12,6 +12,7 @@
 @import "instant-results/sidebar.css";
 @import "instant-results/sidebar-toggle.css";
 @import "instant-results/sort.css";
+@import "instant-results/tokens.css";
 @import "instant-results/toolbar.css";
 
 :root {

diff --git a/assets/css/instant-results/tokens.css b/assets/css/instant-results/tokens.css
@@ -0,0 +1,6 @@
+.ep-search-tokens {
+
+	@nest .ep-search-toolbar & {
+		display: contents;
+	}
+}
diff --git a/assets/js/instant-results/components/results/result.js b/assets/js/instant-results/components/results/result.js
@@ -7,11 +7,10 @@ import { WPElement } from '@wordpress/element';
  * Internal dependencies.
  */
 import { postTypeLabels, isWooCommerce } from '../../config';
+import { formatDate } from '../../functions';
 import StarRating from '../common/star-rating';
 import Image from '../common/image';
 
-const { gmdateI18n } = wp.date;
-
 /**
  * Search result.
  *
@@ -24,7 +23,7 @@ export default ({ hit }) => {
 		highlight: { post_title: resultTitle, post_content_plain: resultContent = [] },
 		_source: {
 			meta: { _wc_average_rating: [{ value: resultRating = 0 } = {}] = [] },
-			post_date_gmt: resultDateGmt,
+			post_date: resultDate,
 			permalink: resultPermalink,
 			post_type: resultPostType,
 			price_html: priceHtml,
@@ -72,8 +71,7 @@ export default ({ hit }) => {
 
 			<footer className="ep-search-result__footer">
 				{isWooCommerce && resultRating > 0 && <StarRating rating={resultRating} />}
-
-				{resultPostType === 'post' && gmdateI18n('F j, Y', resultDateGmt)}
+				{resultPostType === 'post' && formatDate(resultDate)}
 			</footer>
 		</article>
 	);

diff --git a/assets/js/instant-results/components/tools/active-constraints.js b/assets/js/instant-results/components/tools/active-constraints.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies.
  */
-import { createSlotFill } from '@wordpress/components';
-import { WPElement } from '@wordpress/element';
+import { createPortal, createRef, WPElement } from '@wordpress/element';
 import { closeSmall, Icon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -12,9 +11,9 @@ import { __, sprintf } from '@wordpress/i18n';
 import SmallButton from '../common/small-button';
 
 /**
- * Create SlotFill.
+ * Create ref for portal.
  */
-const { Fill, Slot } = createSlotFill('ActiveContraints');
+const ref = createRef();
 
 /**
  * Active filter component.
@@ -25,21 +24,24 @@ const { Fill, Slot } = createSlotFill('ActiveContraints');
  * @returns {WPElement} Element.
  */
 export const ActiveContraint = ({ label, onClick }) => {
-	return (
-		<Fill>
-			<SmallButton
-				aria-label={sprintf(
-					/* translators: %s: Constraint label. */
-					__('Remove filter: %s', 'elasticpress'),
-					label,
-				)}
-				className="ep-search-icon-button"
-				onClick={onClick}
-			>
-				<Icon icon={closeSmall} />
-				{label}
-			</SmallButton>
-		</Fill>
+	if (!ref.current) {
+		return null;
+	}
+
+	return createPortal(
+		<SmallButton
+			aria-label={sprintf(
+				/* translators: %s: Constraint label. */
+				__('Remove filter: %s', 'elasticpress'),
+				label,
+			)}
+			className="ep-search-icon-button"
+			onClick={onClick}
+		>
+			<Icon icon={closeSmall} />
+			{label}
+		</SmallButton>,
+		ref.current,
 	);
 };
 
@@ -49,5 +51,5 @@ export const ActiveContraint = ({ label, onClick }) => {
  * @returns {WPElement} Element.
  */
 export default () => {
-	return <Slot>{(fills) => fills}</Slot>;
+	return <div className="ep-search-tokens" ref={ref} />;
 };
diff --git a/assets/js/instant-results/config.js b/assets/js/instant-results/config.js
@@ -13,6 +13,7 @@ const {
 	currencyCode,
 	facets,
 	isWooCommerce,
+	locale,
 	matchType,
 	paramPrefix,
 	postTypeLabels,
@@ -65,6 +66,7 @@ export {
 	currencyCode,
 	facets,
 	isWooCommerce,
+	locale,
 	matchType,
 	paramPrefix,
 	postTypeLabels,

diff --git a/assets/js/instant-results/functions.js b/assets/js/instant-results/functions.js
@@ -1,7 +1,7 @@
 /**
  * Internal deendencies.
  */
-import { currencyCode, facets } from './config';
+import { currencyCode, facets, locale } from './config';
 import { sanitizeArg, sanitizeParam } from './utilities';
 
 /**
@@ -28,6 +28,16 @@ export const clearFacetsFromArgs = (args) => {
 	return clearedArgs;
 };
 
+/**
+ * Format a date.
+ *
+ * @param {string} date Date string.
+ * @returns {string} Formatted number.
+ */
+export const formatDate = (date) => {
+	return new Date(date).toLocaleString(locale, { dateStyle: 'long' });
+};
+
 /**
  * Format a number as a price.
  *

diff --git a/assets/js/instant-results/index.js b/assets/js/instant-results/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies.
  */
-import { SlotFillProvider } from '@wordpress/components';
 import {
 	render,
 	useCallback,
@@ -225,16 +224,14 @@ const App = () => {
 
 	return (
 		<Context.Provider value={context}>
-			<SlotFillProvider>
-				<Modal
-					aria-label={__('Search results', 'elasticpress')}
-					isOpen={state.isOpen}
-					onClose={closeModal}
-					ref={modalRef}
-				>
-					<Layout />
-				</Modal>
-			</SlotFillProvider>
+			<Modal
+				aria-label={__('Search results', 'elasticpress')}
+				isOpen={state.isOpen}
+				onClose={closeModal}
+				ref={modalRef}
+			>
+				<Layout />
+			</Modal>
 		</Context.Provider>
 	);
 };

diff --git a/includes/classes/Feature/InstantResults/InstantResults.php b/includes/classes/Feature/InstantResults/InstantResults.php
@@ -279,6 +279,7 @@ public function enqueue_frontend_assets() {
 				'facets'         => $this->get_facets_for_frontend(),
 				'highlightTag'   => $this->settings['highlight_tag'],
 				'isWooCommerce'  => $this->is_woocommerce,
+				'locale'         => str_replace( '_', '-', get_locale() ),
 				'matchType'      => $this->settings['match_type'],
 				'paramPrefix'    => 'ep-',
 				'postTypeLabels' => $this->get_post_type_labels(),