← All changes | src/editor/controls/Sidebar.tsx +268 -30 1.3.0 → 1.13.0 View file →

		@@ -1,21 +1,31 @@
1	1	import { InspectorControls } from '@wordpress/block-editor';
2	2	import {
3	3	PanelBody,
	4	+ TextControl,
4	5	BaseControl,
5	6	SelectControl,
	7	+ Button,
6	8	CheckboxControl,
7	9	} from '@wordpress/components';
8	10	import { __ } from '@wordpress/i18n';
9		-import { Theme } from 'shiki';
10	11	import { useLanguage } from '../../hooks/useLanguage';
11	12	import { useGlobalStore } from '../../state/global';
	13	+import { useLanguageStore } from '../../state/language';
12	14	import { useThemeStore } from '../../state/theme';
13	15	import { AttributesPropsAndSetter } from '../../types';
14	16	import { languages } from '../../util/languages';
15		-import { FontSizeSelect, FontLineHeightSelect } from '../components/FontSelect';
16		-import { Notice } from '../components/Notice';
17		-import { ThemeSelect } from '../components/ThemeSelect';
	17	+import {
	18	+ FontSizeSelect,
	19	+ FontLineHeightSelect,
	20	+ FontFamilySelect,
	21	+} from '../components/FontSelect';
	22	+import { FooterSelect } from '../components/FooterSelect';
	23	+import { HeaderSelect } from '../components/HeaderSelect';
	24	+import { HeightPanel } from '../components/HeightPanel';
	25	+import { ThemesPanel } from '../components/ThemesPanel';
	26	+import { BlurControl } from './BlurControl';
	27	+import { HighlightingControl } from './HighlightingControl';
18	28
19	29	export const SidebarControls = ({
20	30	attributes,
21	31	setAttributes,
		@@ -20,11 +30,20 @@
20	30	attributes,
21	31	setAttributes,
22	32	}: AttributesPropsAndSetter) => {
23	33	const [language, setLanguage] = useLanguage({ attributes, setAttributes });
	34	+ const { recentLanguages } = useLanguageStore();
24	35	const { updateThemeHistory } = useThemeStore();
25	36	const { setPreviousSettings } = useGlobalStore();
	37	+ const { headerType, footerType } = attributes;
26	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	+
27	46	return (
28	47	<InspectorControls>
29	48	<PanelBody
30	49	title={__('Settings', 'code-block-pro')}
		@@ -36,23 +55,191 @@
36	55	label={__('Code Language', 'code-block-pro')}
37	56	data-cy-cbp="language-select"
38	57	value={language}
39	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	+ }
40	67	options={Object.entries(languages).map(
41	68	([value, label]) => ({
42		- label,
	69	+ label: label.replace(
	70	+ 'ANSI',
	71	+ 'ANSI (experimental)',
	72	+ ),
43	73	value,
44	74	}),
45	75	)}
46	76	/>
	77	+ {recentLanguages?.length > 0 ? (
	78	+ <>
	79	+ <span className="mb-2 block">
	80	+ {__('Recently Used', 'code-block-pro')}
	81	+ </span>
	82	+ <div className="flex gap-1">
	83	+ {recentLanguages?.map((lang) => (
	84	+ <Button
	85	+ key={lang}
	86	+ className="bg-gray-100 text-black no-underline p-1 px-2 "
	87	+ variant="link"
	88	+ onClick={() => setLanguage(lang)}>
	89	+ {languages[lang] ?? lang}
	90	+ </Button>
	91	+ ))}
	92	+ </div>
	93	+ </>
	94	+ ) : null}
47	95	</BaseControl>
48		- <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	+ )}
49	162	</div>
50	163	</PanelBody>
51	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
52	237	title={__('Styling', 'code-block-pro')}
53	238	initialOpen={false}>
54		- <div className="code-block-pro-editor">
	239	+ <div
	240	+ className="code-block-pro-editor"
	241	+ data-cy="font-size-select">
55	242	<h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
56	243	<FontSizeSelect
57	244	value={attributes.fontSize}
58	245	onChange={(fontSize) => {
		@@ -59,8 +246,12 @@
59	246	setAttributes({ fontSize });
60	247	updateThemeHistory({ ...attributes, fontSize });
61	248	}}
62	249	/>
	250	+ </div>
	251	+ <div
	252	+ className="code-block-pro-editor"
	253	+ data-cy="font-line-height-select">
63	254	<h2 className="m-0">
64	255	{__('Line Height', 'code-block-pro')}
65	256	</h2>
66	257	<FontLineHeightSelect
		@@ -73,35 +264,82 @@
73	264	});
74	265	}}
75	266	/>
76	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>
77	301	</PanelBody>
	302	+ <HeightPanel
	303	+ attributes={attributes}
	304	+ setAttributes={setAttributes}
	305	+ />
78	306	<PanelBody
79		- title={__('Themes', 'code-block-pro')}
80		- initialOpen={false}>
81		- <ThemeSelect
82		- {...attributes}
83		- onClick={(slug: Theme) => {
84		- setAttributes({ theme: slug });
85		- updateThemeHistory({ ...attributes, theme: slug });
86		- }}
87		- />
88		- </PanelBody>
89		- <PanelBody
90	307	title={__('Extra Settings', 'code-block-pro')}
91	308	initialOpen={false}>
92		- <CheckboxControl
93		- label={__('Copy Button', 'code-block-pro')}
94		- help={__(
95		- 'If checked, users will be able to copy your code snippet to their clipboard.',
96		- 'code-block-pro',
97		- )}
98		- checked={attributes.copyButton}
99		- onChange={(value) => {
100		- setPreviousSettings({ copyButton: value });
101		- setAttributes({ copyButton: value });
102		- }}
103		- />
	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>
104	342	</PanelBody>
105	343	</InspectorControls>
106	344	);
107	345	};