← All changes | src/editor/components/ThemeSelect.tsx +106 -29 1.3.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;
		@@ -7,40 +11,113 @@
7	11	type ThemeSelectProps = {
8	12	theme: Theme;
9	13	language: Lang;
10	14	code: string;
	15	+ fontSize: string;
	16	+ lineHeight: string;
	17	+ fontFamily: string;
	18	+ search: string;
	19	+ clampFonts: boolean;
11	20	onClick: (slug: Theme) => void;
12	21	};
13		-export const ThemeSelect = ({
14		- theme,
15		- language,
16		- code,
17		- onClick,
18		-}: ThemeSelectProps) => {
	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	+
19	36	return (
20	37	<div className="code-block-pro-editor">
21		- {Object.entries(defaultThemes).map(([slug, name]) => (
22		- <BaseControl
23		- id={`code-block-pro-theme-${slug}`}
24		- label={
25		- theme === slug
26		- ? sprintf(
27		- __('%s (current)', 'code-block-pro'),
28		- name,
29		- )
30		- : name
31		- }
32		- key={slug}>
33		- <ThemePreview
34		- id={`code-block-pro-theme-${slug}`}
35		- theme={slug as Theme}
36		- lang={language}
37		- onClick={() => {
38		- onClick(slug as Theme);
39		- }}
40		- code={code}
41		- />
	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	+ )}
42	50	</BaseControl>
	51	+ ) : null}
	52	+ {themesSorted.slice(0, 9).map(({ name, slug }) => (
	53	+ <ThemeItem key={slug} slug={slug} name={name} {...props} />
43	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	+ )}
44	86	</div>
45	87	);
46	88	};
	89	+
	90	+const ThemeItem = ({
	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>
	123	+);