← All changes | src/editor/components/ThemeSelect.tsx +26 -49 1.27.7 → 1.13.0 View file →

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