← All changes | js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx +4 -3 4.0.0-beta.1 → trunk View file →

		@@ -1,18 +1,19 @@
1		-import React from 'react'
	1	+import React, { useId } from 'react'
2	2	import { __ } from '@wordpress/i18n'
3	3	import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
4	4
5	5	export const RTLControl: React.FC = () => {
6	6	const { codeEditorInstance } = useSnippetForm()
	7	+ const directionId = useId()
7	8
8	9	return (
9	10	<div className="inline-form-field">
10		- <label htmlFor="snippet-code-direction">
	11	+ <label htmlFor={directionId}>
11	12	{__('Code Direction', 'code-snippets')}
12	13	</label>
13	14
14		- <select id="snippet-code-direction" onChange={event =>
	15	+ <select id={directionId} onChange={event =>
15	16	codeEditorInstance?.codemirror.setOption('direction', 'rtl' === event.target.value ? 'rtl' : 'ltr')
16	17	}>
17	18	<option value="ltr">{__('LTR', 'code-snippets')}</option>
18	19	<option value="rtl">{__('RTL', 'code-snippets')}</option>