← All changes | js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx +8 -36 4.0.0-beta.1 → trunk View file →

		@@ -1,45 +1,16 @@
1	1	import { __ } from '@wordpress/i18n'
2		-import React from 'react'
	2	+import React, { useId } from 'react'
3	3	import Select from 'react-select'
4	4	import { useSnippetForm } from '../WithSnippetFormContext'
5	5	import { SNIPPET_TYPE_SCOPES } from '../../../../types/Snippet'
6		-import { getSnippetType, isCondition } from '../../../../utils/snippets/snippets'
	6	+import { SNIPPET_SCOPE_DESCRIPTIONS, SNIPPET_SCOPE_ICONS, getSnippetType, isCondition } from '../../../../utils/snippets/snippets'
7	7	import type { SnippetCodeScope } from '../../../../types/Snippet'
8	8	import type { SelectOption } from '../../../../types/SelectOption'
9	9
10		-const SCOPE_ICONS: Record<SnippetCodeScope, string> = {
11		- 'global': 'admin-site',
12		- 'admin': 'admin-tools',
13		- 'front-end': 'admin-appearance',
14		- 'single-use': 'clock',
15		- 'content': 'shortcode',
16		- 'head-content': 'editor-code',
17		- 'body-content': 'editor-code',
18		- 'footer-content': 'editor-code',
19		- 'admin-css': 'dashboard',
20		- 'site-css': 'admin-customizer',
21		- 'site-head-js': 'media-code',
22		- 'site-footer-js': 'media-code'
23		-}
24		-
25		-const SCOPE_DESCRIPTIONS: Record<SnippetCodeScope, string> = {
26		- 'global': __('Run everywhere', 'code-snippets'),
27		- 'admin': __('Only run in administration area', 'code-snippets'),
28		- 'front-end': __('Only run on site front-end', 'code-snippets'),
29		- 'single-use': __('Only run once', 'code-snippets'),
30		- 'content': __('Where inserted in editor', 'code-snippets'),
31		- 'head-content': __('In site header (<head> section)', 'code-snippets'),
32		- 'body-content': __('In site content (start of <body>)', 'code-snippets'),
33		- 'footer-content': __('In site footer (end of <body>)', 'code-snippets'),
34		- 'site-css': __('Site front-end', 'code-snippets'),
35		- 'admin-css': __('Administration area', 'code-snippets'),
36		- 'site-head-js': __('In site header (<head> section)', 'code-snippets'),
37		- 'site-footer-js': __('In site footer (end of <body>)', 'code-snippets')
38		-}
39		-
40	10	export const SnippetLocationInput: React.FC = () => {
41	11	const { snippet, setSnippet, isReadOnly } = useSnippetForm()
	12	+ const locationId = useId()
42	13
43	14	const options: SelectOption<SnippetCodeScope>[] = SNIPPET_TYPE_SCOPES[getSnippetType(snippet)]
44	15	.filter(scope => 'condition' !== scope)
45	16	.map(scope => ({
		@@ -44,22 +15,23 @@
44	15	.filter(scope => 'condition' !== scope)
45	16	.map(scope => ({
46	17	key: scope,
47	18	value: scope,
48		- label: SCOPE_DESCRIPTIONS[scope]
	19	+ label: SNIPPET_SCOPE_DESCRIPTIONS[scope]
49	20	}))
50	21
51	22	return isCondition(snippet)
52	23	? null
53	24	: <div className="block-form-field">
54		- <label htmlFor="snippet-location">
	25	+ <label htmlFor={locationId}>
55	26	{__('Location', 'code-snippets')}
56	27	</label>
57	28
58	29	<Select
59		- inputId="snippet-location"
	30	+ inputId={locationId}
60	31	className="code-snippets-select code-snippets-select-location"
61	32	options={options}
	33	+ isSearchable={false}
62	34	isDisabled={isReadOnly}
63	35	styles={{
64	36	menu: provided => ({ ...provided, zIndex: 9999 }),
65	37	input: provided => ({ ...provided, ':focus': { boxShadow: 'none' } })
		@@ -66,9 +38,9 @@
66	38	}}
67	39	value={options.find(option => option.value === snippet.scope)}
68	40	formatOptionLabel={({ label, value }) =>
69	41	<>
70		- <span className={`dashicons dashicons-${SCOPE_ICONS[value]}`} aria-hidden="true"></span>{` ${label}`}
	42	+ <span className={`dashicons dashicons-${SNIPPET_SCOPE_ICONS[value]}`} aria-hidden="true"></span>{` ${label}`}
71	43	</>
72	44	}
73	45	onChange={option =>
74	46	option?.value && setSnippet(previous => ({ ...previous, scope: option.value }))}