initial

wp-content/plugins/visual-regression-tests/editor/components/settings/index.js

@@ -0,0 +1,68 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, TextareaControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { info as infoIcon } from '@wordpress/icons';
+import { dispatch } from '@wordpress/data';
+
+const Settings = ( { test = {} } ) => {
+	const [ testState, setTestState ] = useState( {
+		hide_css_selectors: '',
+		...test,
+	} );
+
+	const updateTest = ( value ) => {
+		const updatedTest = { ...testState, hide_css_selectors: value };
+		test.hide_css_selectors = value;
+		setTestState( updatedTest );
+		return dispatch( 'core/editor' ).editPost( {
+			vrts: { hide_css_selectors: value },
+		} );
+	};
+
+	return (
+		<>
+			<div className="settings">
+				<p className="settings-title">
+					{ __(
+						'Hide elements from VRTs',
+						'visual-regression-tests'
+					) }
+					<span className="vrts-tooltip">
+						<span className="vrts-tooltip-icon">
+							<Icon icon={ infoIcon } size="20" />
+						</span>
+						<span className="vrts-tooltip-content">
+							<span
+								className="vrts-tooltip-content-inner"
+								dangerouslySetInnerHTML={ {
+									__html: sprintf(
+										/* translators: %1$s, %2$s: link wrapper. */
+										__(
+											'Exclude elements on this page: Add %1$sCSS selectors%2$s (as comma separated list) to exclude elements from VRTs when a new snapshot gets created.',
+											'visual-regression-tests'
+										),
+										'<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">',
+										'</a>'
+									),
+								} }
+							></span>
+						</span>
+					</span>
+				</p>
+
+				<TextareaControl
+					placeholder={ __(
+						'e.g.: .lottie, #ads',
+						'visual-regression-tests'
+					) }
+					value={ testState.hide_css_selectors }
+					onChange={ ( value ) => {
+						updateTest( value );
+					} }
+				/>
+			</div>
+		</>
+	);
+};
+
+export default Settings;