← All changes | src/editor/controls/Sidebar.tsx +231 -41 1.4.0 → 1.13.0 View file →

		@@ -1,7 +1,8 @@
1	1	import { InspectorControls } from '@wordpress/block-editor';
2	2	import {
3	3	PanelBody,
	4	+ TextControl,
4	5	BaseControl,
5	6	SelectControl,
6	7	Button,
7	8	CheckboxControl,
		@@ -6,9 +7,8 @@
6	7	Button,
7	8	CheckboxControl,
8	9	} from '@wordpress/components';
9	10	import { __ } from '@wordpress/i18n';
10		-import { Theme } from 'shiki';
11	11	import { useLanguage } from '../../hooks/useLanguage';
12	12	import { useGlobalStore } from '../../state/global';
13	13	import { useLanguageStore } from '../../state/language';
14	14	import { useThemeStore } from '../../state/theme';
		@@ -18,11 +18,14 @@
18	18	FontSizeSelect,
19	19	FontLineHeightSelect,
20	20	FontFamilySelect,
21	21	} from '../components/FontSelect';
	22	+import { FooterSelect } from '../components/FooterSelect';
22	23	import { HeaderSelect } from '../components/HeaderSelect';
23		-import { Notice } from '../components/Notice';
24		-import { ThemeSelect } from '../components/ThemeSelect';
	24	+import { HeightPanel } from '../components/HeightPanel';
	25	+import { ThemesPanel } from '../components/ThemesPanel';
	26	+import { BlurControl } from './BlurControl';
	27	+import { HighlightingControl } from './HighlightingControl';
25	28
26	29	export const SidebarControls = ({
27	30	attributes,
28	31	setAttributes,
		@@ -30,9 +33,17 @@
30	33	const [language, setLanguage] = useLanguage({ attributes, setAttributes });
31	34	const { recentLanguages } = useLanguageStore();
32	35	const { updateThemeHistory } = useThemeStore();
33	36	const { setPreviousSettings } = useGlobalStore();
	37	+ const { headerType, footerType } = attributes;
34	38
	39	+ const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart'];
	40	+
	41	+ const showHeaderTextEdit = ['simpleString'].includes(headerType);
	42	+ const showFooterTextEdit = footersNeedingLinks.includes(footerType);
	43	+ const showFooterLinkEdit = footersNeedingLinks.includes(footerType);
	44	+ const showFooterLinkTargetEdit = footersNeedingLinks.includes(footerType);
	45	+
35	46	return (
36	47	<InspectorControls>
37	48	<PanelBody
38	49	title={__('Settings', 'code-block-pro')}
		@@ -44,11 +55,22 @@
44	55	label={__('Code Language', 'code-block-pro')}
45	56	data-cy-cbp="language-select"
46	57	value={language}
47	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	+ }
48	67	options={Object.entries(languages).map(
49	68	([value, label]) => ({
50		- label,
	69	+ label: label.replace(
	70	+ 'ANSI',
	71	+ 'ANSI (experimental)',
	72	+ ),
51	73	value,
52	74	}),
53	75	)}
54	76	/>
		@@ -70,15 +92,154 @@
70	92	</div>
71	93	</>
72	94	) : null}
73	95	</BaseControl>
74		- <Notice />
	96	+ {showHeaderTextEdit && (
	97	+ <BaseControl id="code-block-pro-header-text">
	98	+ <TextControl
	99	+ id="code-block-pro-header-text"
	100	+ spellCheck={false}
	101	+ autoComplete="off"
	102	+ label={__('Header Text', 'code-block-pro')}
	103	+ placeholder={languages[language]}
	104	+ onChange={(headerString) => {
	105	+ setAttributes({ headerString });
	106	+ }}
	107	+ value={attributes.headerString ?? ''}
	108	+ />
	109	+ </BaseControl>
	110	+ )}
	111	+ {showFooterTextEdit && (
	112	+ <BaseControl id="code-block-pro-footer-text">
	113	+ <TextControl
	114	+ id="code-block-pro-footer-text"
	115	+ spellCheck={false}
	116	+ autoComplete="off"
	117	+ label={__('Footer Text', 'code-block-pro')}
	118	+ placeholder={languages[language]}
	119	+ onChange={(footerString) => {
	120	+ setAttributes({ footerString });
	121	+ }}
	122	+ value={attributes.footerString ?? ''}
	123	+ />
	124	+ </BaseControl>
	125	+ )}
	126	+ {showFooterLinkEdit && (
	127	+ <BaseControl id="code-block-pro-footer-link">
	128	+ <TextControl
	129	+ id="code-block-pro-footer-link"
	130	+ spellCheck={false}
	131	+ type="url"
	132	+ autoComplete="off"
	133	+ label={__('Footer Link', 'code-block-pro')}
	134	+ placeholder="https://example.com"
	135	+ help={__(
	136	+ 'Leave blank to disable',
	137	+ 'code-block-pro',
	138	+ )}
	139	+ onChange={(footerLink) => {
	140	+ setAttributes({ footerLink });
	141	+ }}
	142	+ value={attributes.footerLink ?? ''}
	143	+ />
	144	+ </BaseControl>
	145	+ )}
	146	+ {showFooterLinkTargetEdit && (
	147	+ <BaseControl id="code-block-pro-footer-link-target">
	148	+ <CheckboxControl
	149	+ id="code-block-pro-footer-link-target"
	150	+ label={__('Open in new tab?', 'code-block-pro')}
	151	+ checked={attributes.footerLinkTarget}
	152	+ onChange={(footerLinkTarget) => {
	153	+ setAttributes({ footerLinkTarget });
	154	+ updateThemeHistory({
	155	+ ...attributes,
	156	+ footerLinkTarget,
	157	+ });
	158	+ }}
	159	+ />
	160	+ </BaseControl>
	161	+ )}
75	162	</div>
76	163	</PanelBody>
77	164	<PanelBody
	165	+ title={__('Line Settings', 'code-block-pro')}
	166	+ initialOpen={false}>
	167	+ <div className="code-block-pro-editor">
	168	+ <BaseControl id="code-block-pro-show-line-numbers">
	169	+ <CheckboxControl
	170	+ data-cy="show-line-numbers"
	171	+ label={__('Enable line numbers', 'code-block-pro')}
	172	+ help={__(
	173	+ 'Enable line numbers and set a starting number.',
	174	+ 'code-block-pro',
	175	+ )}
	176	+ checked={attributes.lineNumbers}
	177	+ onChange={(lineNumbers) => {
	178	+ setAttributes({ lineNumbers });
	179	+ updateThemeHistory({
	180	+ ...attributes,
	181	+ lineNumbers,
	182	+ });
	183	+ }}
	184	+ />
	185	+ {attributes.lineNumbers && (
	186	+ <BaseControl id="code-block-pro-line-number-start">
	187	+ <TextControl
	188	+ id="code-block-pro-line-number-start"
	189	+ spellCheck={false}
	190	+ autoComplete="off"
	191	+ label={__('Start from', 'code-block-pro')}
	192	+ onChange={(startingLineNumber) => {
	193	+ setAttributes({ startingLineNumber });
	194	+ }}
	195	+ value={attributes.startingLineNumber}
	196	+ />
	197	+ </BaseControl>
	198	+ )}
	199	+ </BaseControl>
	200	+ <HighlightingControl
	201	+ attributes={attributes}
	202	+ setAttributes={setAttributes}
	203	+ />
	204	+ <BlurControl
	205	+ attributes={attributes}
	206	+ setAttributes={setAttributes}
	207	+ />
	208	+ </div>
	209	+ </PanelBody>
	210	+ <PanelBody
	211	+ title={__('Header Type', 'code-block-pro')}
	212	+ initialOpen={false}>
	213	+ <HeaderSelect
	214	+ attributes={attributes}
	215	+ onClick={(headerType) => {
	216	+ setAttributes({ headerType });
	217	+ updateThemeHistory({ ...attributes, headerType });
	218	+ }}
	219	+ />
	220	+ </PanelBody>
	221	+ <PanelBody
	222	+ title={__('Footer Type', 'code-block-pro')}
	223	+ initialOpen={false}>
	224	+ <FooterSelect
	225	+ attributes={attributes}
	226	+ onClick={(footerType) => {
	227	+ setAttributes({ footerType });
	228	+ updateThemeHistory({ ...attributes, footerType });
	229	+ }}
	230	+ />
	231	+ </PanelBody>
	232	+ <ThemesPanel
	233	+ attributes={attributes}
	234	+ setAttributes={setAttributes}
	235	+ />
	236	+ <PanelBody
78	237	title={__('Styling', 'code-block-pro')}
79	238	initialOpen={false}>
80		- <div className="code-block-pro-editor">
	239	+ <div
	240	+ className="code-block-pro-editor"
	241	+ data-cy="font-size-select">
81	242	<h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
82	243	<FontSizeSelect
83	244	value={attributes.fontSize}
84	245	onChange={(fontSize) => {
		@@ -85,8 +246,12 @@
85	246	setAttributes({ fontSize });
86	247	updateThemeHistory({ ...attributes, fontSize });
87	248	}}
88	249	/>
	250	+ </div>
	251	+ <div
	252	+ className="code-block-pro-editor"
	253	+ data-cy="font-line-height-select">
89	254	<h2 className="m-0">
90	255	{__('Line Height', 'code-block-pro')}
91	256	</h2>
92	257	<FontLineHeightSelect
		@@ -98,8 +263,12 @@
98	263	lineHeight,
99	264	});
100	265	}}
101	266	/>
	267	+ </div>
	268	+ <div
	269	+ className="code-block-pro-editor"
	270	+ data-cy="font-family-select">
102	271	<FontFamilySelect
103	272	value={attributes.fontFamily}
104	273	onChange={(fontFamily) => {
105	274	setAttributes({ fontFamily });
		@@ -109,47 +278,68 @@
109	278	});
110	279	}}
111	280	/>
112	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>
113	301	</PanelBody>
	302	+ <HeightPanel
	303	+ attributes={attributes}
	304	+ setAttributes={setAttributes}
	305	+ />
114	306	<PanelBody
115		- title={__('Header Type', 'code-block-pro')}
116		- initialOpen={false}>
117		- <HeaderSelect
118		- attributes={attributes}
119		- onClick={(headerType: string) => {
120		- console.log({ headerType });
121		- setAttributes({ headerType });
122		- updateThemeHistory({ ...attributes, headerType });
123		- }}
124		- />
125		- </PanelBody>
126		- <PanelBody
127		- title={__('Themes', 'code-block-pro')}
128		- initialOpen={false}>
129		- <ThemeSelect
130		- {...attributes}
131		- onClick={(slug: Theme) => {
132		- setAttributes({ theme: slug });
133		- updateThemeHistory({ ...attributes, theme: slug });
134		- }}
135		- />
136		- </PanelBody>
137		- <PanelBody
138	307	title={__('Extra Settings', 'code-block-pro')}
139	308	initialOpen={false}>
140		- <CheckboxControl
141		- label={__('Copy Button', 'code-block-pro')}
142		- help={__(
143		- 'If checked, users will be able to copy your code snippet to their clipboard.',
144		- 'code-block-pro',
145		- )}
146		- checked={attributes.copyButton}
147		- onChange={(value) => {
148		- setPreviousSettings({ copyButton: value });
149		- setAttributes({ copyButton: value });
150		- }}
151		- />
	309	+ <BaseControl id="code-block-pro-show-copy-button">
	310	+ <CheckboxControl
	311	+ data-cy="copy-button"
	312	+ label={__('Copy Button', 'code-block-pro')}
	313	+ help={__(
	314	+ 'If checked, users will be able to copy your code snippet to their clipboard.',
	315	+ 'code-block-pro',
	316	+ )}
	317	+ checked={attributes.copyButton}
	318	+ onChange={(value) => {
	319	+ setPreviousSettings({ copyButton: value });
	320	+ setAttributes({ copyButton: value });
	321	+ }}
	322	+ />
	323	+ </BaseControl>
	324	+ <BaseControl id="code-block-pro-disable-padding">
	325	+ <CheckboxControl
	326	+ data-cy="disable-padding"
	327	+ label={__('Disable Padding', 'code-block-pro')}
	328	+ help={__(
	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.',
	330	+ 'code-block-pro',
	331	+ )}
	332	+ checked={attributes.disablePadding}
	333	+ onChange={(disablePadding) => {
	334	+ setAttributes({ disablePadding });
	335	+ updateThemeHistory({
	336	+ ...attributes,
	337	+ disablePadding,
	338	+ });
	339	+ }}
	340	+ />
	341	+ </BaseControl>
152	342	</PanelBody>
153	343	</InspectorControls>
154	344	);
155	345	};