New weighting screen with meta support

.wp-env.json

@@ -21,6 +21,7 @@
         ".htaccess": "./tests/cypress/wordpress-files/.htaccess",
         "wp-content/mu-plugins/skip-wp-lookup.php": "./tests/cypress/wordpress-files/test-mu-plugins/skip-wp-lookup.php",
         "wp-content/mu-plugins/unique-index-name.php": "./tests/cypress/wordpress-files/test-mu-plugins/unique-index-name.php",
+        "wp-content/plugins/auto-meta-mode.php": "./tests/cypress/wordpress-files/test-plugins/auto-meta-mode.php",
         "wp-content/mu-plugins/disable-welcome-guide.php": "./tests/cypress/wordpress-files/test-mu-plugins/disable-welcome-guide.php",
         "wp-content/plugins/cpt-and-custom-tax.php": "./tests/cypress/wordpress-files/test-plugins/cpt-and-custom-tax.php",
         "wp-content/plugins/custom-instant-results-template.php": "./tests/cypress/wordpress-files/test-plugins/custom-instant-results-template.php",

assets/css/dashboard.css

@@ -665,180 +665,6 @@ h2.ep-list-features {
 	color: #d84440;
 }
 
-/**
- * Weighting
- */
-
-.weighting-settings .postbox {
-	box-sizing: border-box;
-	max-width: 650px;
-
-	& * {
-		box-sizing: border-box;
-	}
-}
-
-.weighting-settings .postbox h2.hndle {
-	color: #444;
-	cursor: inherit;
-}
-
-.weighting-settings fieldset {
-	padding: 10px;
-}
-
-.weighting-settings fieldset legend {
-	float: left; /* legend cannot use display */
-	position: relative;
-	top: 5px;
-	width: 100px;
-}
-
-.weighting-settings fieldset p {
-	display: inline-block;
-	float: left;
-	margin: 0;
-}
-
-.weighting-settings .field-group {
-	margin: 10px 0 0;
-}
-
-.weighting-settings .field-group h3 {
-	font-size: 1em;
-	margin: 10px;
-}
-
-.weighting-settings .fields > fieldset:nth-of-type(odd) {
-	background: #f9f9f9;
-}
-
-.weighting-settings .searchable {
-	display: inline-block;
-	width: 120px;
-}
-
-.weighting-settings .weighting {
-	align-items: center;
-	display: flex;
-}
-
-.weighting-settings .weighting label {
-	margin-right: 10px;
-	min-width: 80px;
-}
-
-.weighting-settings input[type="range"] {
-	-webkit-appearance: none;
-	background: transparent;
-	display: inline-block;
-	height: 1em;
-	margin: 0;
-	vertical-align: middle;
-	width: 200px;
-}
-
-.weighting-settings input[type="range"]:focus {
-	outline: none;
-}
-
-.weighting-settings input[type="range"]:disabled {
-	opacity: 0.5;
-	pointer-events: none;
-}
-
-.weighting-settings input[type="range"]::-webkit-slider-runnable-track {
-	background: #ddd;
-	border: 0 solid #000;
-	border-radius: 1px;
-	box-shadow: 0 0 0 #000;
-	cursor: pointer;
-	height: 3px;
-	width: 100%;
-}
-
-.weighting-settings input[type="range"]::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	background: #1e8cbe;
-	border: 1px solid #1e8cbe;
-	border-radius: 25px;
-	box-shadow: 0 0 0 #000;
-	cursor: pointer;
-	height: 14px;
-	margin-top: -6px;
-	width: 14px;
-}
-
-.weighting-settings input[type="range"]:focus::-webkit-slider-runnable-track {
-	background: #ddd;
-}
-
-.weighting-settings input[type="range"]:focus::-webkit-slider-thumb {
-	background: #fff !important;
-}
-
-.weighting-settings input[type="range"]::-moz-range-track {
-	background: #1e8cbe;
-	border: 0 solid #000;
-	border-radius: 1px;
-	box-shadow: 0 0 0 #000;
-	cursor: pointer;
-	height: 3px;
-	width: 100%;
-}
-
-.weighting-settings input[type="range"]::-moz-range-thumb {
-	background: #1e8cbe;
-	border: 1px solid #1e8cbe;
-	border-radius: 25px;
-	box-shadow: 0 0 0 #000;
-	cursor: pointer;
-	height: 14px;
-	width: 14px;
-}
-
-.weighting-settings input[type="range"]::-ms-track {
-	background: transparent;
-	border-color: transparent;
-	color: transparent;
-	cursor: pointer;
-	height: 3px;
-	width: 100%;
-}
-
-.weighting-settings input[type="range"]::-ms-fill-lower {
-	background: #1e8cbe;
-	border: 0 solid #000;
-	border-radius: 2px;
-	box-shadow: 0 0 0 #000;
-}
-
-.weighting-settings input[type="range"]::-ms-fill-upper {
-	background: #1e8cbe;
-	border: 0 solid #000;
-	border-radius: 2px;
-	box-shadow: 0 0 0 #000;
-}
-
-.weighting-settings input[type="range"]::-ms-thumb {
-	background: #a1d0ff;
-	border: 1px solid #1e8cbe;
-	border-radius: 25px;
-	box-shadow: 0 0 0 #000;
-	cursor: pointer;
-	height: 14px;
-	margin-top: 1px;
-	width: 14px;
-}
-
-.weighting-settings input[type="range"]:focus::-ms-fill-lower {
-	background: #1e8cbe;
-}
-
-.weighting-settings input[type="range"]:focus::-ms-fill-upper {
-	background: #1e8cbe;
-}
-
 .ep-feature-search .wp-color-result.button {
 	margin-bottom: 10px;
 }

assets/js/weighting/apps/weighting.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies.
+ */
+import { Button } from '@wordpress/components';
+import { WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal Dependencies.
+ */
+import { useSettingsScreen } from '../../settings-screen';
+import PostType from '../components/post-type';
+import { useWeightingSettings } from '../provider';
+
+/**
+ * Weighting settings app.
+ *
+ * @returns {WPElement} Element.
+ */
+export default () => {
+	const { createNotice } = useSettingsScreen();
+	const { isBusy, save, weightableFields } = useWeightingSettings();
+
+	/**
+	 * Submit event.
+	 *
+	 * @param {Event} event Submit event.
+	 */
+	const onSubmit = async (event) => {
+		event.preventDefault();
+
+		try {
+			await save();
+			createNotice('success', __('Settings saved.', 'elasticpress'));
+		} catch (e) {
+			createNotice('error', __('Something went wrong. Please try again.', 'elasticpress'));
+		}
+	};
+
+	return (
+		<>
+			<p>
+				{__(
+					'This dashboard enables you to select which fields ElasticPress should sync, whether to use those fields in searches, and how heavily to weight fields in the search algorithm. In general, increasing the Weight of a field will increase the relevancy score of a post that has matching text in that field.',
+					'elasticpress',
+				)}
+			</p>
+			<p>
+				{__(
+					'For example, adding more weight to the title attribute will cause search matches on the post title to appear more prominently.',
+					'elasticpress',
+				)}
+			</p>
+			<form className="ep-weighting-screen" onSubmit={onSubmit}>
+				{weightableFields.map(({ key }) => {
+					return <PostType key={key} postType={key} />;
+				})}
+				<Button disabled={isBusy} isBusy={isBusy} isPrimary type="submit" variant="primary">
+					{__('Save changes', 'elasticpress')}
+				</Button>
+			</form>
+		</>
+	);
+};

assets/js/weighting/components/field.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress Dependencies.
+ */
+import { Button, CheckboxControl, RangeControl } from '@wordpress/components';
+import { WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { trash } from '@wordpress/icons';
+
+/**
+ * Field settings component.
+ *
+ * @param {object} props Component props.
+ * @param {string} props.label Property label.
+ * @param {Function} props.onChange Change handler.
+ * @param {Function} props.onDelete Delete handler.
+ * @param {object} props.value Values.
+ * @returns {WPElement} Component element.
+ */
+export default ({ label, onChange, onDelete, value }) => {
+	const { enabled = false, weight = 0 } = value;
+
+	/**
+	 * Handle change of searchable.
+	 *
+	 * @param {boolean} enabled New searchable value.
+	 * @returns {void}
+	 */
+	const onChangeSearchable = (enabled) => {
+		onChange({ weight, enabled });
+	};
+
+	/**
+	 * Handle change of weighting.
+	 *
+	 * @param {number} weight New weight value.
+	 * @returns {void}
+	 */
+	const onChangeWeight = (weight) => {
+		onChange({ enabled: true, weight });
+	};
+
+	/**
+	 * Render.
+	 */
+	return (
+		<div className="ep-weighting-field">
+			<fieldset>
+				<legend className="ep-weighting-field__name">{label}</legend>
+				<div className="ep-weighting-field__searchable">
+					<CheckboxControl
+						checked={enabled}
+						label={__('Searchable', 'elasticpress')}
+						onChange={onChangeSearchable}
+					/>
+				</div>
+				<div className="ep-weighting-field__weighting">
+					<RangeControl
+						disabled={!enabled}
+						label={__('Weight', 'elasticpress')}
+						max={100}
+						min={1}
+						onChange={onChangeWeight}
+						value={weight}
+					/>
+				</div>
+				<div className="ep-weighting-field__actions">
+					<Button
+						className="ep-weighting-action ep-weighting-action--delete"
+						disabled={!onDelete}
+						icon={trash}
+						label={__('Remove', 'elasticpress')}
+						onClick={onDelete}
+					/>
+				</div>
+			</fieldset>
+		</div>
+	);
+};