diff --git a/assets/css/synonyms.css b/assets/css/synonyms.css
index ac6f60f634..1470d890b0 100644
--- a/assets/css/synonyms.css
+++ b/assets/css/synonyms.css
@@ -1,3 +1,13 @@
+:root {
+ --ep-synonyms-input-border-color: hsl(0, 0%, 80%);
+ --ep-synonyms-color-black: #1a1e24;
+ --ep-synonyms-color-error: #b52727;
+}
+
+html.wp-toolbar {
+ background: transparent;
+}
+
#synonym-root {
& .page-title-action {
@@ -9,68 +19,97 @@
}
& h2 {
- color: #23282d;
+ color: var(--ep-synonyms-color-black);
}
}
-.synonym-alternatives-editor,
-.synonym-set-editor {
- display: flex;
+.synonym-editor {
- & > .postbox {
+ & .postbox {
width: 100%;
& > .hndle {
display: flex;
}
}
+}
- & .synonym-alternative-editor {
- display: flex;
- }
+.synonym-alternative-editor,
+.synonym-set-editor {
+ align-items: flex-start;
+ display: flex;
- & .ep-synonyms__linked-multi-input {
+ & .components-form-token-field {
flex: 1;
margin-bottom: 0.5em;
}
- & .ep-synonyms__input {
- border: 1px solid hsl(0, 0%, 80%);
- margin-bottom: 0.5em;
- margin-right: 1em;
- width: 10em;
+ & .components-form-token-field__label {
+ display: none;
}
- & .synonym-alternatives__primary-heading {
- width: 11em;
+ & .components-form-token-field__input-container {
+ border-color: var(--ep-synonyms-input-border-color);
+ box-sizing: border-box;
}
- & .synonym-alternatives__input-heading {
- flex: 1;
+ & .components-form-token-field__token-text {
+ padding-bottom: 1px;
+ padding-top: 1px;
+
+ @media screen and (max-width: 782px) {
+ padding-bottom: 3px;
+ padding-top: 3px;
+ }
}
- & .ep-synonyms__linked-multi-input input:focus {
- box-shadow: none;
+ & input[type="text"].components-form-token-field__input {
+ margin-bottom: 2px;
+ margin-top: 2px;
+
+ @media screen and (max-width: 782px) {
+ min-height: 30px;
+ }
}
- &.invalid input {
- border-color: #a00;
+ & .components-form-token-field__help {
+ margin-top: 0;
}
}
-.synonym-alternative-editor,
-.synonym-set-editor {
- margin-top: 0.625em;
+input[type="text"].ep-synonyms__input {
+ border: 1px solid var(--ep-synonyms-input-border-color);
+ margin-bottom: 0.5em;
+ margin-right: 1em;
+ min-height: 36px;
+ width: 10em;
+
+ @media screen and (max-width: 782px) {
+ min-height: 40px;
+ }
+}
+
+.synonym-alternatives__primary-heading {
+ width: 11em;
+}
+
+.synonym-alternatives__input-heading {
+ flex: 1;
}
button.synonym__remove {
background-color: transparent;
border: none;
- color: #a00;
+ color: var(--ep-synonyms-color-error);
cursor: pointer;
- margin: -8px 0 0 10px;
+ margin: 0 0 0 10px;
+ min-height: 36px;
padding: 0;
+ @media screen and (max-width: 782px) {
+ min-height: 40px;
+ }
+
& .dashicons-dismiss {
margin: -2px 2px 0 0;
}
@@ -84,7 +123,7 @@ button.synonym__remove {
.synonym__validation,
.synonym-solr-editor__validation p {
- color: #a00;
+ color: var(--ep-synonyms-color-error);
font-style: italic;
}
diff --git a/assets/js/autosuggest.js b/assets/js/autosuggest.js
index 1d53c00fa2..9eeb180b16 100644
--- a/assets/js/autosuggest.js
+++ b/assets/js/autosuggest.js
@@ -1,4 +1,8 @@
/* eslint-disable camelcase, no-underscore-dangle, no-use-before-define */
+
+/**
+ * Internal dependencies.
+ */
import {
findAncestorByClass,
escapeDoubleQuotes,
@@ -6,9 +10,6 @@ import {
debounce,
domReady,
} from './utils/helpers';
-import 'element-closest';
-import 'promise-polyfill/src/polyfill';
-import 'whatwg-fetch';
const { epas } = window;
@@ -186,7 +187,8 @@ async function esSearch(query, searchTerm) {
}
try {
- const response = await window.fetch(epas.endpointUrl, fetchConfig);
+ const response = await fetch(epas.endpointUrl, fetchConfig);
+
if (!response.ok) {
throw Error(response.statusText);
}
diff --git a/assets/js/blocks/related-posts/Edit.js b/assets/js/blocks/related-posts/Edit.js
index 3530076d51..0b525d9ee1 100644
--- a/assets/js/blocks/related-posts/Edit.js
+++ b/assets/js/blocks/related-posts/Edit.js
@@ -1,12 +1,11 @@
-const { __ } = wp.i18n;
-
-const { AlignmentToolbar, BlockControls, InspectorControls } = wp.editor;
-
-const { PanelBody, Placeholder, Spinner, QueryControls } = wp.components;
-
-const { Fragment, Component, RawHTML } = wp.element;
-
-const { addQueryArgs } = wp.url;
+/**
+ * WordPress dependencies.
+ */
+import { AlignmentToolbar, BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, Placeholder, Spinner, QueryControls } from '@wordpress/components';
+import { Fragment, Component, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
/**
* Edit component
diff --git a/assets/js/blocks/related-posts/block.js b/assets/js/blocks/related-posts/block.js
index eb6297d1b5..3542f90a29 100644
--- a/assets/js/blocks/related-posts/block.js
+++ b/assets/js/blocks/related-posts/block.js
@@ -1,8 +1,13 @@
-import Edit from './Edit';
-
-const { __ } = wp.i18n;
+/**
+ * WordPress dependencies.
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
-const { registerBlockType } = wp.blocks;
+/**
+ * Internal dependencies.
+ */
+import Edit from './Edit';
registerBlockType('elasticpress/related-posts', {
title: __('Related Posts (ElasticPress)', 'elasticpress'),
diff --git a/assets/js/ordering/index.js b/assets/js/ordering/index.js
index 37312cc168..3630604121 100644
--- a/assets/js/ordering/index.js
+++ b/assets/js/ordering/index.js
@@ -1,5 +1,11 @@
-import ReactDOM from 'react-dom';
+/**
+ * WordPress dependencies.
+ */
+import { render } from '@wordpress/element';
+/**
+ * Internal dependencies.
+ */
import { Pointers } from './pointers';
-ReactDOM.render(, document.getElementById('ordering-app'));
+render(, document.getElementById('ordering-app'));
diff --git a/assets/js/ordering/pointers.js b/assets/js/ordering/pointers.js
index 13f4c0f9e0..94836d34d4 100644
--- a/assets/js/ordering/pointers.js
+++ b/assets/js/ordering/pointers.js
@@ -1,8 +1,18 @@
-// External
-import React, { Component } from 'react';
-import apiFetch from '@wordpress/api-fetch';
+/**
+ * External dependencies.
+ */
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
import { pluck, debounce } from '../utils/helpers';
apiFetch.use(apiFetch.createRootURLMiddleware(window.epOrdering.restApiRoot));
@@ -369,7 +379,7 @@ export class Pointers extends Component {
);
return (
-
+
{parseInt(window.epOrdering.postsPerPage, 10) ===
index && (
)}
-
+
);
})}
{provided.placeholder}
diff --git a/assets/js/synonyms/components/SynonymsEditor.js b/assets/js/synonyms/components/SynonymsEditor.js
index 4e706fb6be..16de25e638 100644
--- a/assets/js/synonyms/components/SynonymsEditor.js
+++ b/assets/js/synonyms/components/SynonymsEditor.js
@@ -1,13 +1,20 @@
-import React, { useContext, useEffect } from 'react';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, useEffect, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
import { State, Dispatch } from '../context';
-import SetsEditor from './editors/SetsEditor';
import AlterativesEditor from './editors/AlternativesEditor';
+import SetsEditor from './editors/SetsEditor';
import SolrEditor from './editors/SolrEditor';
/**
* Synonyms editor component.
*
- * @returns {React.FC} Synonyms component
+ * @returns {WPElement} Synonyms component
*/
const SynonymsEditor = () => {
const state = useContext(State);
diff --git a/assets/js/synonyms/components/editors/AlternativeEditor.js b/assets/js/synonyms/components/editors/AlternativeEditor.js
index 5cbf93475c..af2b6dd547 100644
--- a/assets/js/synonyms/components/editors/AlternativeEditor.js
+++ b/assets/js/synonyms/components/editors/AlternativeEditor.js
@@ -1,12 +1,19 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-import LinkedMultiInput from '../shared/LinkedMultiInput';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, useEffect, useMemo, useRef, useState, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
import { Dispatch } from '../../context';
+import LinkedMultiInput from '../shared/LinkedMultiInput';
/**
* Alternative Editor
*
* @param {object} props Props.
- * @returns {React.FC} AlternativeEditor component
+ * @returns {WPElement} AlternativeEditor component
*/
const AlternativeEditor = (props) => {
const { id, synonyms, removeAction, updateAction } = props;
@@ -32,7 +39,7 @@ const AlternativeEditor = (props) => {
/**
* Handle key down.
*
- * @param {React.SyntheticEvent} event Keydown event.
+ * @param {Event} event Keydown event.
*/
const handleKeyDown = (event) => {
switch (event.key) {
@@ -54,7 +61,7 @@ const AlternativeEditor = (props) => {
primaryRef.current.focus();
}, [primaryRef]);
- const memoizedSynonyms = React.useMemo(() => {
+ const memoizedSynonyms = useMemo(() => {
return synonyms.filter((item) => !item.primary);
}, [synonyms]);
diff --git a/assets/js/synonyms/components/editors/AlternativesEditor.js b/assets/js/synonyms/components/editors/AlternativesEditor.js
index 2d211ffd84..e48d2f4be5 100644
--- a/assets/js/synonyms/components/editors/AlternativesEditor.js
+++ b/assets/js/synonyms/components/editors/AlternativesEditor.js
@@ -1,13 +1,20 @@
-import React, { Fragment, useContext } from 'react';
-import AlternativeEditor from './AlternativeEditor';
+/**
+ * WordPress dependencies.
+ */
+import { Fragment, useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
import { Dispatch, State } from '../../context';
+import AlternativeEditor from './AlternativeEditor';
/**
* Synonyms editor component.
*
* @param {object} props Props.
* @param {object[]} props.alternatives Defined alternatives (explicit mappings).
- * @returns {React.FC} AlternativesEditor component
+ * @returns {WPElement} AlternativesEditor component
*/
const AlternativesEditor = ({ alternatives }) => {
const dispatch = useContext(Dispatch);
@@ -22,7 +29,7 @@ const AlternativesEditor = ({ alternatives }) => {
/**
* Handle click.
*
- * @param {React.SyntheticEvent} e Event.
+ * @param {Event} e Event.
*/
const handleClick = (e) => {
const [lastItem] = state.alternatives.slice(-1);
diff --git a/assets/js/synonyms/components/editors/SetsEditor.js b/assets/js/synonyms/components/editors/SetsEditor.js
index 557f94b38d..b2e43e7ba3 100644
--- a/assets/js/synonyms/components/editors/SetsEditor.js
+++ b/assets/js/synonyms/components/editors/SetsEditor.js
@@ -1,13 +1,20 @@
-import React, { useContext, Fragment } from 'react';
-import LinkedMultiInput from '../shared/LinkedMultiInput';
+/**
+ * WordPress dependencies.
+ */
+import { Fragment, useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
import { Dispatch, State } from '../../context';
+import LinkedMultiInput from '../shared/LinkedMultiInput';
/**
* Synonyms editor component.
*
* @param {object} props Props
* @param {object[]} props.sets Defined sets (equivalent synonyms).
- * @returns {React.FC} SetsEditor component
+ * @returns {WPElement} SetsEditor component
*/
const SetsEditor = ({ sets }) => {
const dispatch = useContext(Dispatch);
@@ -17,7 +24,7 @@ const SetsEditor = ({ sets }) => {
/**
* Handle click.
*
- * @param {React.SyntheticEvent} e Event
+ * @param {Event} e Event
*/
const handleClick = (e) => {
const [lastSet] = state.sets.slice(-1);
diff --git a/assets/js/synonyms/components/editors/SolrEditor.js b/assets/js/synonyms/components/editors/SolrEditor.js
index a960e0e33a..1631f58a67 100644
--- a/assets/js/synonyms/components/editors/SolrEditor.js
+++ b/assets/js/synonyms/components/editors/SolrEditor.js
@@ -1,10 +1,17 @@
-import React, { useContext } from 'react';
+/**
+ * WordPress dependencies.
+ */
+import { useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
import { State, Dispatch } from '../../context';
/**
* Synonym Inspector
*
- * @returns {React.FC} SolrEditor Component
+ * @returns {WPElement} SolrEditor Component
*/
const SolrEditor = () => {
const state = useContext(State);
diff --git a/assets/js/synonyms/components/shared/LinkedMultiInput.js b/assets/js/synonyms/components/shared/LinkedMultiInput.js
index 536458f162..c728d210c3 100644
--- a/assets/js/synonyms/components/shared/LinkedMultiInput.js
+++ b/assets/js/synonyms/components/shared/LinkedMultiInput.js
@@ -1,5 +1,12 @@
-import React, { useContext } from 'react';
-import MultiInput from './MultiInput';
+/**
+ * WordPress dependencies.
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useContext, WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
import { Dispatch } from '../../context';
/**
@@ -10,12 +17,31 @@ import { Dispatch } from '../../context';
* @param {object[]} props.synonyms Array of synonyms.
* @param {string} props.removeAction Name of action to dispatch on remove.
* @param {string} props.updateAction Name of action to dispatch on update.
- * @returns {React.FC} LinkedMultiInput component
+ * @returns {WPElement} LinkedMultiInput component
*/
const LinkedMultiInput = ({ id, synonyms, removeAction, updateAction }) => {
const dispatch = useContext(Dispatch);
const { removeItemText } = window.epSynonyms.i18n;
+ /**
+ * Handle change to tokens.
+ *
+ * @param {string[]} value Array of tokens.
+ */
+ const handleChange = (value) => {
+ const tokens = value.map((v) => {
+ const token = {
+ label: v,
+ value: v,
+ primary: false,
+ };
+
+ return token;
+ });
+
+ dispatch({ type: updateAction, data: { id, tokens } });
+ };
+
/**
* Handle clearing the synonym.
*/
@@ -25,11 +51,11 @@ const LinkedMultiInput = ({ id, synonyms, removeAction, updateAction }) => {
return (
<>
- dispatch({ type: updateAction, data: { id, tokens } })}
+ label={null}
+ onChange={handleChange}
+ value={synonyms.map((s) => s.value)}
/>