← All changes | src/editor/controls/Sidebar.tsx +93 -68 1.9.0 → 1.13.0 View file →

		@@ -7,9 +7,8 @@
7	7	Button,
8	8	CheckboxControl,
9	9	} from '@wordpress/components';
10	10	import { __ } from '@wordpress/i18n';
11		-import { Theme } from 'shiki';
12	11	import { useLanguage } from '../../hooks/useLanguage';
13	12	import { useGlobalStore } from '../../state/global';
14	13	import { useLanguageStore } from '../../state/language';
15	14	import { useThemeStore } from '../../state/theme';
		@@ -21,10 +20,10 @@
21	20	FontFamilySelect,
22	21	} from '../components/FontSelect';
23	22	import { FooterSelect } from '../components/FooterSelect';
24	23	import { HeaderSelect } from '../components/HeaderSelect';
25		-// import { Notice } from '../components/Notice';
26		-import { ThemeSelect } from '../components/ThemeSelect';
	24	+import { HeightPanel } from '../components/HeightPanel';
	25	+import { ThemesPanel } from '../components/ThemesPanel';
27	26	import { BlurControl } from './BlurControl';
28	27	import { HighlightingControl } from './HighlightingControl';
29	28
30	29	export const SidebarControls = ({
		@@ -36,12 +35,14 @@
36	35	const { updateThemeHistory } = useThemeStore();
37	36	const { setPreviousSettings } = useGlobalStore();
38	37	const { headerType, footerType } = attributes;
39	38
	39	+ const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart'];
	40	+
40	41	const showHeaderTextEdit = ['simpleString'].includes(headerType);
41		- const showFooterTextEdit = ['simpleStringEnd'].includes(footerType);
42		- const showFooterLinkEdit = ['simpleStringEnd'].includes(footerType);
43		- const showFooterLinkTargetEdit = ['simpleStringEnd'].includes(footerType);
	42	+ const showFooterTextEdit = footersNeedingLinks.includes(footerType);
	43	+ const showFooterLinkEdit = footersNeedingLinks.includes(footerType);
	44	+ const showFooterLinkTargetEdit = footersNeedingLinks.includes(footerType);
44	45
45	46	return (
46	47	<InspectorControls>
47	48	<PanelBody
		@@ -54,11 +55,22 @@
54	55	label={__('Code Language', 'code-block-pro')}
55	56	data-cy-cbp="language-select"
56	57	value={language}
57	58	onChange={setLanguage}
	59	+ help={
	60	+ language === 'ansi'
	61	+ ? __(
	62	+ 'Some code themes may not render ANSI correctly. Control sequences render only on the front.',
	63	+ 'code-block-pro',
	64	+ )
	65	+ : null
	66	+ }
58	67	options={Object.entries(languages).map(
59	68	([value, label]) => ({
60		- label,
	69	+ label: label.replace(
	70	+ 'ANSI',
	71	+ 'ANSI (experimental)',
	72	+ ),
61	73	value,
62	74	}),
63	75	)}
64	76	/>
		@@ -146,69 +158,17 @@
146	158	}}
147	159	/>
148	160	</BaseControl>
149	161	)}
150		- {/* <Notice /> */}
151	162	</div>
152	163	</PanelBody>
153	164	<PanelBody
154		- title={__('Styling', 'code-block-pro')}
155		- initialOpen={false}>
156		- <div className="code-block-pro-editor">
157		- <h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
158		- <FontSizeSelect
159		- value={attributes.fontSize}
160		- onChange={(fontSize) => {
161		- setAttributes({ fontSize });
162		- updateThemeHistory({ ...attributes, fontSize });
163		- }}
164		- />
165		- <h2 className="m-0">
166		- {__('Line Height', 'code-block-pro')}
167		- </h2>
168		- <FontLineHeightSelect
169		- value={attributes.lineHeight}
170		- onChange={(lineHeight) => {
171		- setAttributes({ lineHeight });
172		- updateThemeHistory({
173		- ...attributes,
174		- lineHeight,
175		- });
176		- }}
177		- />
178		- <FontFamilySelect
179		- value={attributes.fontFamily}
180		- onChange={(fontFamily) => {
181		- setAttributes({ fontFamily });
182		- updateThemeHistory({
183		- ...attributes,
184		- fontFamily,
185		- });
186		- }}
187		- />
188		- <CheckboxControl
189		- label={__('Clamp Values', 'code-block-pro')}
190		- help={__(
191		- 'Check this if your font sizes are unusually large or tiny.',
192		- 'code-block-pro',
193		- )}
194		- checked={attributes.clampFonts}
195		- onChange={(clampFonts) => {
196		- setAttributes({ clampFonts });
197		- updateThemeHistory({
198		- ...attributes,
199		- clampFonts,
200		- });
201		- }}
202		- />
203		- </div>
204		- </PanelBody>
205		- <PanelBody
206	165	title={__('Line Settings', 'code-block-pro')}
207	166	initialOpen={false}>
208	167	<div className="code-block-pro-editor">
209	168	<BaseControl id="code-block-pro-show-line-numbers">
210	169	<CheckboxControl
	170	+ data-cy="show-line-numbers"
211	171	label={__('Enable line numbers', 'code-block-pro')}
212	172	help={__(
213	173	'Enable line numbers and set a starting number.',
214	174	'code-block-pro',
		@@ -268,24 +228,88 @@
268	228	updateThemeHistory({ ...attributes, footerType });
269	229	}}
270	230	/>
271	231	</PanelBody>
	232	+ <ThemesPanel
	233	+ attributes={attributes}
	234	+ setAttributes={setAttributes}
	235	+ />
272	236	<PanelBody
273		- title={__('Themes', 'code-block-pro')}
	237	+ title={__('Styling', 'code-block-pro')}
274	238	initialOpen={false}>
275		- <ThemeSelect
276		- {...attributes}
277		- onClick={(slug: Theme) => {
278		- setAttributes({ theme: slug });
279		- updateThemeHistory({ ...attributes, theme: slug });
280		- }}
281		- />
	239	+ <div
	240	+ className="code-block-pro-editor"
	241	+ data-cy="font-size-select">
	242	+ <h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
	243	+ <FontSizeSelect
	244	+ value={attributes.fontSize}
	245	+ onChange={(fontSize) => {
	246	+ setAttributes({ fontSize });
	247	+ updateThemeHistory({ ...attributes, fontSize });
	248	+ }}
	249	+ />
	250	+ </div>
	251	+ <div
	252	+ className="code-block-pro-editor"
	253	+ data-cy="font-line-height-select">
	254	+ <h2 className="m-0">
	255	+ {__('Line Height', 'code-block-pro')}
	256	+ </h2>
	257	+ <FontLineHeightSelect
	258	+ value={attributes.lineHeight}
	259	+ onChange={(lineHeight) => {
	260	+ setAttributes({ lineHeight });
	261	+ updateThemeHistory({
	262	+ ...attributes,
	263	+ lineHeight,
	264	+ });
	265	+ }}
	266	+ />
	267	+ </div>
	268	+ <div
	269	+ className="code-block-pro-editor"
	270	+ data-cy="font-family-select">
	271	+ <FontFamilySelect
	272	+ value={attributes.fontFamily}
	273	+ onChange={(fontFamily) => {
	274	+ setAttributes({ fontFamily });
	275	+ updateThemeHistory({
	276	+ ...attributes,
	277	+ fontFamily,
	278	+ });
	279	+ }}
	280	+ />
	281	+ </div>
	282	+ <div className="code-block-pro-editor" data-cy="clamp-fonts">
	283	+ <div className="mt-6">
	284	+ <CheckboxControl
	285	+ label={__('Clamp Values', 'code-block-pro')}
	286	+ help={__(
	287	+ 'Check this if your font sizes are unusually large or tiny.',
	288	+ 'code-block-pro',
	289	+ )}
	290	+ checked={attributes.clampFonts}
	291	+ onChange={(clampFonts) => {
	292	+ setAttributes({ clampFonts });
	293	+ updateThemeHistory({
	294	+ ...attributes,
	295	+ clampFonts,
	296	+ });
	297	+ }}
	298	+ />
	299	+ </div>
	300	+ </div>
282	301	</PanelBody>
	302	+ <HeightPanel
	303	+ attributes={attributes}
	304	+ setAttributes={setAttributes}
	305	+ />
283	306	<PanelBody
284	307	title={__('Extra Settings', 'code-block-pro')}
285	308	initialOpen={false}>
286	309	<BaseControl id="code-block-pro-show-copy-button">
287	310	<CheckboxControl
	311	+ data-cy="copy-button"
288	312	label={__('Copy Button', 'code-block-pro')}
289	313	help={__(
290	314	'If checked, users will be able to copy your code snippet to their clipboard.',
291	315	'code-block-pro',
		@@ -298,8 +322,9 @@
298	322	/>
299	323	</BaseControl>
300	324	<BaseControl id="code-block-pro-disable-padding">
301	325	<CheckboxControl
	326	+ data-cy="disable-padding"
302	327	label={__('Disable Padding', 'code-block-pro')}
303	328	help={__(
304	329	'This is useful if you pick a theme that matches your background color, and want the code to line up to the edge of your content. You maybe need to add your own padding with CSS.',
305	330	'code-block-pro',