← All changes | src/editor/controls/Sidebar.tsx +300 -45 1.1.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		-import { sprintf, __ } from '@wordpress/i18n';
9		-import { Theme } from 'shiki';
10		-import defaultLanguages from '../../defaultLanguages.json';
11		-import defaultThemes from '../../defaultThemes.json';
	10	+import { __ } from '@wordpress/i18n';
12	11	import { useLanguage } from '../../hooks/useLanguage';
13	12	import { useGlobalStore } from '../../state/global';
	13	+import { useLanguageStore } from '../../state/language';
14	14	import { useThemeStore } from '../../state/theme';
15	15	import { AttributesPropsAndSetter } from '../../types';
16		-import { Notice } from '../components/Notice';
17		-import { ThemePreview } from '../components/ThemePreview';
	16	+import { languages } from '../../util/languages';
	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 });
24		- const { setPreviousTheme } = useThemeStore();
	34	+ const { recentLanguages } = useLanguageStore();
	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')}
		@@ -29,62 +48,298 @@
29	48	<PanelBody
30	49	title={__('Settings', 'code-block-pro')}
31	50	initialOpen={true}>
32	51	<div className="code-block-pro-editor">
33		- <BaseControl id="code-block-pro-settings">
	52	+ <BaseControl id="code-block-pro-language">
34	53	<SelectControl
35		- label={__('Language', 'code-block-pro')}
	54	+ id="code-block-pro-language"
	55	+ label={__('Code Language', 'code-block-pro')}
	56	+ data-cy-cbp="language-select"
36	57	value={language}
37	58	onChange={setLanguage}
38		- options={defaultLanguages.map((value) => ({
39		- label: value,
40		- value,
41		- }))}
	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	+ }
	67	+ options={Object.entries(languages).map(
	68	+ ([value, label]) => ({
	69	+ label: label.replace(
	70	+ 'ANSI',
	71	+ 'ANSI (experimental)',
	72	+ ),
	73	+ value,
	74	+ }),
	75	+ )}
42	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}
	95	+ </BaseControl>
	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	+ )}
	162	+ </div>
	163	+ </PanelBody>
	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">
43	169	<CheckboxControl
44		- label={__('Copy Button', 'code-block-pro')}
	170	+ data-cy="show-line-numbers"
	171	+ label={__('Enable line numbers', 'code-block-pro')}
45	172	help={__(
46		- 'If checked, users will be able to copy your code snippet to their clipboard.',
	173	+ 'Enable line numbers and set a starting number.',
47	174	'code-block-pro',
48	175	)}
49		- checked={attributes.copyButton}
50		- onChange={(value) => {
51		- setPreviousSettings({ copyButton: value });
52		- setAttributes({ copyButton: value });
	176	+ checked={attributes.lineNumbers}
	177	+ onChange={(lineNumbers) => {
	178	+ setAttributes({ lineNumbers });
	179	+ updateThemeHistory({
	180	+ ...attributes,
	181	+ lineNumbers,
	182	+ });
53	183	}}
54	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	+ )}
55	199	</BaseControl>
56		- <Notice />
	200	+ <HighlightingControl
	201	+ attributes={attributes}
	202	+ setAttributes={setAttributes}
	203	+ />
	204	+ <BlurControl
	205	+ attributes={attributes}
	206	+ setAttributes={setAttributes}
	207	+ />
57	208	</div>
58	209	</PanelBody>
59	210	<PanelBody
60		- title={__('Themes', 'code-block-pro')}
	211	+ title={__('Header Type', 'code-block-pro')}
61	212	initialOpen={false}>
62		- <div className="code-block-pro-editor">
63		- {Object.entries(defaultThemes).map(([slug, name]) => (
64		- <BaseControl
65		- id={`code-block-pro-theme-${slug}`}
66		- label={
67		- attributes.theme === slug
68		- ? sprintf(
69		- __('%s (current)', 'code-block-pro'),
70		- name,
71		- )
72		- : name
73		- }
74		- key={slug}>
75		- <ThemePreview
76		- theme={slug as Theme}
77		- lang={language}
78		- onClick={() => {
79		- setAttributes({ theme: slug as Theme });
80		- setPreviousTheme(slug as Theme);
81		- }}
82		- code={attributes.code}
83		- />
84		- </BaseControl>
85		- ))}
	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
	237	+ title={__('Styling', 'code-block-pro')}
	238	+ initialOpen={false}>
	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	+ />
86	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>
	301	+ </PanelBody>
	302	+ <HeightPanel
	303	+ attributes={attributes}
	304	+ setAttributes={setAttributes}
	305	+ />
	306	+ <PanelBody
	307	+ title={__('Extra Settings', 'code-block-pro')}
	308	+ initialOpen={false}>
	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>
87	342	</PanelBody>
88	343	</InspectorControls>
89	344	);
90	345	};