← All changes | src/editor/components/ThemeSelect.tsx +55 -12 1.11.0 → 1.13.0 View file →

		@@ -1,12 +1,13 @@
1		-import { BaseControl } from '@wordpress/components';
	1	+import { BaseControl, ExternalLink } from '@wordpress/components';
2	2	import { applyFilters } from '@wordpress/hooks';
3	3	import { sprintf, __ } from '@wordpress/i18n';
4		-import { Lang, Theme } from 'shiki';
	4	+import { Theme } from 'shiki';
5	5	import defaultThemes from '../../defaultThemes.json';
6	6	import { useSettingsStore } from '../../state/settings';
	7	+import { Lang } from '../../types';
	8	+import { getPriorityThemes } from '../../util/themes';
7	9	import { ThemePreview } from '../components/ThemePreview';
8		-import { Notice } from './Notice';
9	10
10	11	type ThemeSelectProps = {
11	12	theme: Theme;
12	13	language: Lang;
		@@ -14,8 +15,9 @@
14	15	fontSize: string;
15	16	lineHeight: string;
16	17	fontFamily: string;
17	18	search: string;
	19	+ clampFonts: boolean;
18	20	onClick: (slug: Theme) => void;
19	21	};
20	22	export const ThemeSelect = (props: ThemeSelectProps) => {
21	23	const { hiddenThemes } = useSettingsStore();
		@@ -28,21 +30,60 @@
28	30	.filter(([slug]) => slug.includes(props.search.toLocaleLowerCase()))
29	31	.map(([slug, { name, priority }]) => ({ name, slug, priority }))
30	32	.sort((a, b) => (a.priority === b.priority ? 0 : a.priority ? -1 : 1));
31	33
	34	+ const priorityThemes = getPriorityThemes();
	35	+
32	36	return (
33	37	<div className="code-block-pro-editor">
34		- {themesSorted.map(({ name, slug }) => (
	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 }) => (
35	53	<ThemeItem key={slug} slug={slug} name={name} {...props} />
36	54	))}
37		- <BaseControl id="add-on-themes">
38		- <Notice
39		- seenKey={'add-on-themes'}
40		- href="https://code-block-pro.com"
41		- callback={console.log}
42		- message={'Click here for more themes'}
43		- />
44		- </BaseControl>
	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	+ )}
45	86	</div>
46	87	);
47	88	};
48	89
		@@ -54,8 +95,9 @@
54	95	code,
55	96	fontSize,
56	97	lineHeight,
57	98	fontFamily,
	99	+ clampFonts,
58	100	onClick,
59	101	}: { slug: string; name: string } & ThemeSelectProps) => (
60	102	<BaseControl
61	103	id={`code-block-pro-theme-${slug}`}
		@@ -70,8 +112,9 @@
70	112	lang={language}
71	113	fontSize={fontSize}
72	114	lineHeight={lineHeight}
73	115	fontFamily={fontFamily}
	116	+ clampFonts={clampFonts}
74	117	onClick={() => {
75	118	onClick(slug as Theme);
76	119	}}
77	120	code={code}