← All changes | src/editor/components/ThemeSelect.tsx +103 -35 1.9.0 → 1.13.0 View file →

		@@ -1,8 +1,12 @@
1		-import { BaseControl } from '@wordpress/components';
	1	+import { BaseControl, ExternalLink } from '@wordpress/components';
	2	+import { applyFilters } from '@wordpress/hooks';
2	3	import { sprintf, __ } from '@wordpress/i18n';
3		-import { Lang, Theme } from 'shiki';
	4	+import { Theme } from 'shiki';
4	5	import defaultThemes from '../../defaultThemes.json';
	6	+import { useSettingsStore } from '../../state/settings';
	7	+import { Lang } from '../../types';
	8	+import { getPriorityThemes } from '../../util/themes';
5	9	import { ThemePreview } from '../components/ThemePreview';
6	10
7	11	type ThemeSelectProps = {
8	12	theme: Theme;
		@@ -10,11 +14,83 @@
10	14	code: string;
11	15	fontSize: string;
12	16	lineHeight: string;
13	17	fontFamily: string;
	18	+ search: string;
	19	+ clampFonts: boolean;
14	20	onClick: (slug: Theme) => void;
15	21	};
16		-export const ThemeSelect = ({
	22	+export const ThemeSelect = (props: ThemeSelectProps) => {
	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));
	33	+
	34	+ const priorityThemes = getPriorityThemes();
	35	+
	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	+ );
	88	+};
	89	+
	90	+const ThemeItem = ({
	91	+ slug,
	92	+ name,
17	93	theme,
18	94	language,
19	95	code,
20	96	fontSize,
		@@ -19,37 +95,29 @@
19	95	code,
20	96	fontSize,
21	97	lineHeight,
22	98	fontFamily,
	99	+ clampFonts,
23	100	onClick,
24		-}: ThemeSelectProps) => {
25		- return (
26		- <div className="code-block-pro-editor">
27		- {Object.entries(defaultThemes).map(([slug, name]) => (
28		- <BaseControl
29		- id={`code-block-pro-theme-${slug}`}
30		- label={
31		- theme === slug
32		- ? sprintf(
33		- __('%s (current)', 'code-block-pro'),
34		- name,
35		- )
36		- : name
37		- }
38		- key={slug}>
39		- <ThemePreview
40		- id={`code-block-pro-theme-${slug}`}
41		- theme={slug as Theme}
42		- lang={language}
43		- fontSize={fontSize}
44		- lineHeight={lineHeight}
45		- fontFamily={fontFamily}
46		- onClick={() => {
47		- onClick(slug as Theme);
48		- }}
49		- code={code}
50		- />
51		- </BaseControl>
52		- ))}
53		- </div>
54		- );
55		-};
	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>
	123	+);