← All changes | src/editor/components/HeightPanel.tsx +22 -83 1.27.3 → 1.13.0 View file →

		@@ -5,9 +5,8 @@
5	5	PanelBody,
6	6	} from '@wordpress/components';
7	7	import { useEffect, useRef, useState } from '@wordpress/element';
8	8	import { __ } from '@wordpress/i18n';
9		-import { useThemeStore } from '../../state/theme';
10	9	import { AttributesPropsAndSetter } from '../../types';
11	10	import { SeeMoreSelect } from './SeeMoreSelect';
12	11
13	12	export const HeightPanel = ({
		@@ -13,9 +12,11 @@
13	12	export const HeightPanel = ({
14	13	attributes,
15	14	setAttributes,
16	15	}: AttributesPropsAndSetter) => {
17		- const [editorHeight, setEditorHeight] = useState(attributes?.editorHeight);
	16	+ const [editorHeight, setEditorHeight] = useState(
	17	+ attributes?.editorHeight ?? false,
	18	+ );
18	19	const [enableMaxHeight, setEnableMaxHeight] = useState(
19	20	attributes?.enableMaxHeight ?? false,
20	21	);
21	22	const [seeMoreString, setSeeMoreString] = useState(
		@@ -26,16 +27,9 @@
26	27	);
27	28	const [seeMoreTransition, setSeeMoreTransition] = useState(
28	29	attributes?.seeMoreTransition ?? false,
29	30	);
30		- const [seeMoreCollapse, setSeeMoreCollapse] = useState(
31		- attributes?.seeMoreCollapse ?? false,
32		- );
33		- const [seeMoreCollapseString, setSeeMoreCollapseString] = useState(
34		- attributes?.seeMoreCollapseString ?? '',
35		- );
36	31	const open = useRef(Number(attributes?.editorHeight) > 0);
37		- const { updateThemeHistory } = useThemeStore();
38	32
39	33	useEffect(() => {
40	34	setAttributes({
41	35	editorHeight,
		@@ -41,10 +35,8 @@
41	35	editorHeight,
42	36	seeMoreString,
43	37	seeMoreAfterLine,
44	38	seeMoreTransition,
45		- seeMoreCollapse,
46		- seeMoreCollapseString,
47	39	enableMaxHeight,
48	40	});
49	41	}, [
50	42	editorHeight,
		@@ -50,10 +42,8 @@
50	42	editorHeight,
51	43	seeMoreString,
52	44	seeMoreAfterLine,
53	45	seeMoreTransition,
54		- seeMoreCollapse,
55		- seeMoreCollapseString,
56	46	setAttributes,
57	47	enableMaxHeight,
58	48	]);
59	49
		@@ -66,36 +56,39 @@
66	56	spellCheck={false}
67	57	autoComplete="off"
68	58	data-cy-cbp="editor-height"
69	59	type="number"
70		- label={__(
71		- 'Max editor height (admin only)',
	60	+ label={__('Max editor height', 'code-block-pro')}
	61	+ help={__(
	62	+ 'Admin only. Set to 0 to disable.',
72	63	'code-block-pro',
73	64	)}
74		- help={__('Set to 0 to disable.', 'code-block-pro')}
75	65	placeholder={'0'}
76		- onChange={(editorHeight) => {
77		- setEditorHeight(editorHeight);
78		- }}
	66	+ onChange={setEditorHeight}
79	67	value={editorHeight}
80	68	/>
81	69	</BaseControl>
82	70	<BaseControl id="code-block-pro-see-more-enabled">
83	71	<CheckboxControl
84		- label={__('Enable frontend max height', 'code-block-pro')}
85		- help={__(
86		- 'Enable this, then select a specific line number below.',
87		- 'code-block-pro',
88		- )}
	72	+ label={__('Enable max height', 'code-block-pro')}
89	73	data-cy="enable-max-height"
90	74	checked={enableMaxHeight}
91		- onChange={(enableMaxHeight) => {
92		- setEnableMaxHeight(enableMaxHeight);
93		- }}
	75	+ onChange={setEnableMaxHeight}
94	76	/>
95	77	</BaseControl>
96	78	{enableMaxHeight && (
97	79	<>
	80	+ <BaseControl id="code-block-pro-see-more-text">
	81	+ <TextControl
	82	+ data-cy="see-more-text"
	83	+ spellCheck={false}
	84	+ autoComplete="off"
	85	+ label={__('See more text', 'code-block-pro')}
	86	+ placeholder={__('Expand', 'code-block-pro')}
	87	+ onChange={setSeeMoreString}
	88	+ value={seeMoreString ?? ''}
	89	+ />
	90	+ </BaseControl>
98	91	<BaseControl id="code-block-pro-see-more-line">
99	92	<TextControl
100	93	data-cy="see-more-line"
101	94	spellCheck={false}
		@@ -104,11 +97,9 @@
104	97	help={__(
105	98	'Enter the last visible line number.',
106	99	'code-block-pro',
107	100	)}
108		- onChange={(seeMoreAfterLine) => {
109		- setSeeMoreAfterLine(seeMoreAfterLine);
110		- }}
	101	+ onChange={setSeeMoreAfterLine}
111	102	value={seeMoreAfterLine}
112	103	/>
113	104	</BaseControl>
114	105	<BaseControl id="code-block-pro-see-more-transition">
		@@ -117,67 +108,15 @@
117	108	'Animate height transition',
118	109	'code-block-pro',
119	110	)}
120	111	checked={seeMoreTransition}
121		- onChange={(seeMoreTransition) => {
122		- setSeeMoreTransition(seeMoreTransition);
123		- updateThemeHistory({ seeMoreTransition });
124		- }}
	112	+ onChange={setSeeMoreTransition}
125	113	/>
126	114	</BaseControl>
127		- <BaseControl id="code-block-pro-see-more-text">
128		- <TextControl
129		- data-cy="see-more-text"
130		- spellCheck={false}
131		- autoComplete="off"
132		- label={__('See more text', 'code-block-pro')}
133		- placeholder={__('Expand', 'code-block-pro')}
134		- onChange={(seeMoreString) => {
135		- setSeeMoreString(seeMoreString);
136		- updateThemeHistory({ seeMoreString });
137		- }}
138		- value={seeMoreString ?? ''}
139		- />
140		- </BaseControl>
141		- <BaseControl id="code-block-pro-see-more-collapse">
142		- <CheckboxControl
143		- data-cy="enable-collapse"
144		- label={__(
145		- 'Allow users to collapse',
146		- 'code-block-pro',
147		- )}
148		- checked={seeMoreCollapse}
149		- onChange={(seeMoreCollapse) => {
150		- setSeeMoreCollapse(seeMoreCollapse);
151		- updateThemeHistory({ seeMoreCollapse });
152		- }}
153		- />
154		- </BaseControl>
155		- {seeMoreCollapse ? (
156		- <BaseControl id="code-block-pro-collapse-text">
157		- <TextControl
158		- data-cy="collapse-text"
159		- spellCheck={false}
160		- autoComplete="off"
161		- label={__('Collapse text', 'code-block-pro')}
162		- placeholder={__('Collapse', 'code-block-pro')}
163		- onChange={(seeMoreCollapseString) => {
164		- setSeeMoreCollapseString(
165		- seeMoreCollapseString,
166		- );
167		- updateThemeHistory({
168		- seeMoreCollapseString,
169		- });
170		- }}
171		- value={seeMoreCollapseString ?? ''}
172		- />
173		- </BaseControl>
174		- ) : null}
175	115	<SeeMoreSelect
176	116	attributes={attributes}
177	117	onClick={(seeMoreType) => {
178	118	setAttributes({ seeMoreType });
179		- updateThemeHistory({ seeMoreType });
180	119	}}
181	120	/>
182	121	</>
183	122	)}