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)} />