← All changes | src/editor/components/ThemeSelect.tsx +107 -118 1.28.0 → 1.13.0 View file →

		@@ -1,134 +1,123 @@
1	1	import { BaseControl, ExternalLink } from '@wordpress/components';
2	2	import { applyFilters } from '@wordpress/hooks';
3		-import { __, sprintf } from '@wordpress/i18n';
4		-import type { Theme } from 'shiki';
	3	+import { sprintf, __ } from '@wordpress/i18n';
	4	+import { Theme } from 'shiki';
5	5	import defaultThemes from '../../defaultThemes.json';
6	6	import { useSettingsStore } from '../../state/settings';
7		-import type { CustomStyles, HelpUrl, Lang, ThemeOption } from '../../types';
	7	+import { Lang } from '../../types';
8	8	import { getPriorityThemes } from '../../util/themes';
9	9	import { ThemePreview } from '../components/ThemePreview';
10	10
11	11	type ThemeSelectProps = {
12		- theme: Theme;
13		- language: Lang;
14		- code: string;
15		- fontSize: string;
16		- lineHeight: string;
17		- fontFamily: string;
18		- search: string;
19		- clampFonts: boolean;
20		- tabSize: number;
21		- onClick: (slug: Theme) => void;
	12	+ theme: Theme;
	13	+ language: Lang;
	14	+ code: string;
	15	+ fontSize: string;
	16	+ lineHeight: string;
	17	+ fontFamily: string;
	18	+ search: string;
	19	+ clampFonts: boolean;
	20	+ onClick: (slug: Theme) => void;
22	21	};
23	22	export const ThemeSelect = (props: ThemeSelectProps) => {
24		- const { hiddenThemes } = useSettingsStore();
25		- const themes = applyFilters(
26		- 'blocks.codeBlockPro.themes',
27		- defaultThemes,
28		- ) as ThemeOption;
29		- const themesSorted = Object.entries(themes)
30		- .filter(([slug]) => !hiddenThemes.includes(slug))
31		- .filter(([slug]) => slug.includes(props.search.toLocaleLowerCase()))
32		- .map(([slug, data]) => ({ slug, ...data }))
33		- // Put priority themes at the top
34		- .sort((a, b) => (a.priority === b.priority ? 0 : a.priority ? -1 : 1))
35		- // then put custom themes above that
36		- .sort((a, b) => (a.custom === b.custom ? 0 : a.custom ? -1 : 1));
	23	+ const { hiddenThemes } = useSettingsStore();
	24	+ const themes = applyFilters(
	25	+ 'blocks.codeBlockPro.themes',
	26	+ defaultThemes,
	27	+ ) as Record<string, { name: string; priority?: boolean }>;
	28	+ const themesSorted = Object.entries(themes)
	29	+ .filter(([slug]) => !hiddenThemes.includes(slug))
	30	+ .filter(([slug]) => slug.includes(props.search.toLocaleLowerCase()))
	31	+ .map(([slug, { name, priority }]) => ({ name, slug, priority }))
	32	+ .sort((a, b) => (a.priority === b.priority ? 0 : a.priority ? -1 : 1));
37	33
38		- const priorityThemes = getPriorityThemes();
	34	+ const priorityThemes = getPriorityThemes();
39	35
40		- return (
41		- <div className="code-block-pro-editor" style={{ tabSize: props.tabSize }}>
42		- {props.search?.length > 0 ? (
43		- <BaseControl id="add-on-themes">
44		- {priorityThemes?.length > 0 ? null : (
45		- <div className="font-semibold text-base">
46		- <ExternalLink href="https://code-block-pro.com">
47		- {__('Get 25+ more themes here', 'code-block-pro')}
48		- </ExternalLink>
49		- </div>
50		- )}
51		- </BaseControl>
52		- ) : null}
53		- {themesSorted.slice(0, 9).map((data) => (
54		- <ThemeItem key={data.slug} {...data} {...props} />
55		- ))}
56		- {props.search?.length > 0 ? null : (
57		- <BaseControl id="add-on-themes">
58		- {priorityThemes?.length > 0 ? null : (
59		- <div className="font-semibold text-base">
60		- <ExternalLink href="https://code-block-pro.com/themes">
61		- {__('Get 25+ more themes here', 'code-block-pro')}
62		- </ExternalLink>
63		- </div>
64		- )}
65		- </BaseControl>
66		- )}
67		- {themesSorted.slice(9).map((data) => (
68		- <ThemeItem key={data.slug} {...data} {...props} />
69		- ))}
70		- {props.search?.length > 0 ? null : (
71		- <BaseControl id="add-on-themes">
72		- {priorityThemes?.length > 0 ? null : (
73		- <div className="font-semibold text-base">
74		- <ExternalLink href="https://code-block-pro.com/themes">
75		- {__('Get 25+ more themes here', 'code-block-pro')}
76		- </ExternalLink>
77		- </div>
78		- )}
79		- </BaseControl>
80		- )}
81		- </div>
82		- );
	36	+ return (
	37	+ <div className="code-block-pro-editor">
	38	+ {props.search?.length > 0 ? (
	39	+ <BaseControl id="add-on-themes">
	40	+ {priorityThemes?.length > 0 ? null : (
	41	+ <div className="font-semibold text-base">
	42	+ <ExternalLink href="https://code-block-pro.com/?utm_campaign=notice&utm_source=search">
	43	+ {__(
	44	+ 'Get 25+ more themes here',
	45	+ 'code-block-pro',
	46	+ )}
	47	+ </ExternalLink>
	48	+ </div>
	49	+ )}
	50	+ </BaseControl>
	51	+ ) : null}
	52	+ {themesSorted.slice(0, 9).map(({ name, slug }) => (
	53	+ <ThemeItem key={slug} slug={slug} name={name} {...props} />
	54	+ ))}
	55	+ {props.search?.length > 0 ? null : (
	56	+ <BaseControl id="add-on-themes">
	57	+ {priorityThemes?.length > 0 ? null : (
	58	+ <div className="font-semibold text-base">
	59	+ <ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=mid-themes">
	60	+ {__(
	61	+ 'Get 25+ more themes here',
	62	+ 'code-block-pro',
	63	+ )}
	64	+ </ExternalLink>
	65	+ </div>
	66	+ )}
	67	+ </BaseControl>
	68	+ )}
	69	+ {themesSorted.slice(9).map(({ name, slug }) => (
	70	+ <ThemeItem key={slug} slug={slug} name={name} {...props} />
	71	+ ))}
	72	+ {props.search?.length > 0 ? null : (
	73	+ <BaseControl id="add-on-themes">
	74	+ {priorityThemes?.length > 0 ? null : (
	75	+ <div className="font-semibold text-base">
	76	+ <ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=below-themes">
	77	+ {__(
	78	+ 'Get 25+ more themes here',
	79	+ 'code-block-pro',
	80	+ )}
	81	+ </ExternalLink>
	82	+ </div>
	83	+ )}
	84	+ </BaseControl>
	85	+ )}
	86	+ </div>
	87	+ );
83	88	};
84	89
85	90	const ThemeItem = ({
86		- slug,
87		- name,
88		- theme,
89		- language,
90		- code,
91		- fontSize,
92		- lineHeight,
93		- fontFamily,
94		- clampFonts,
95		- onClick,
96		- styles,
97		- helpUrl,
98		-}: {
99		- slug: string;
100		- name: string;
101		- styles?: CustomStyles;
102		- helpUrl?: HelpUrl;
103		-} & ThemeSelectProps) => (
104		- <BaseControl
105		- id={`code-block-pro-theme-${slug}`}
106		- label={
107		- theme === slug
108		- ? sprintf(__('%s (current)', 'code-block-pro'), name)
109		- : name
110		- }
111		- >
112		- <ThemePreview
113		- id={`code-block-pro-theme-${slug}`}
114		- theme={slug as Theme}
115		- lang={language}
116		- fontSize={fontSize}
117		- lineHeight={lineHeight}
118		- fontFamily={fontFamily}
119		- clampFonts={clampFonts}
120		- styles={styles}
121		- onClick={() => {
122		- onClick(slug as Theme);
123		- }}
124		- code={code}
125		- />
126		- {helpUrl?.url ? (
127		- <div className="mt-2">
128		- <ExternalLink href={helpUrl.url}>
129		- {helpUrl?.text || __('Read more', 'code-block-pro')}
130		- </ExternalLink>
131		- </div>
132		- ) : null}
133		- </BaseControl>
	91	+ slug,
	92	+ name,
	93	+ theme,
	94	+ language,
	95	+ code,
	96	+ fontSize,
	97	+ lineHeight,
	98	+ fontFamily,
	99	+ clampFonts,
	100	+ onClick,
	101	+}: { slug: string; name: string } & ThemeSelectProps) => (
	102	+ <BaseControl
	103	+ id={`code-block-pro-theme-${slug}`}
	104	+ label={
	105	+ theme === slug
	106	+ ? sprintf(__('%s (current)', 'code-block-pro'), name)
	107	+ : name
	108	+ }>
	109	+ <ThemePreview
	110	+ id={`code-block-pro-theme-${slug}`}
	111	+ theme={slug as Theme}
	112	+ lang={language}
	113	+ fontSize={fontSize}
	114	+ lineHeight={lineHeight}
	115	+ fontFamily={fontFamily}
	116	+ clampFonts={clampFonts}
	117	+ onClick={() => {
	118	+ onClick(slug as Theme);
	119	+ }}
	120	+ code={code}
	121	+ />
	122	+ </BaseControl>
134	123	);