← All changes | src/editor/components/HeaderSelect.tsx +34 -5 1.9.3 → 1.26.7 View file →

		@@ -3,16 +3,22 @@
3	3	import { Attributes } from '../../types';
4	4	import { Headlights } from './headers/Headlights';
5	5	import { HeadlightsMuted } from './headers/HeadlightsMuted';
6	6	import { HeadlightsMutedAlt } from './headers/HeadlightsMutedAlt';
	7	+import { PillString } from './headers/PillString';
7	8	import { SimpleString } from './headers/SimpleString';
	9	+import { StringSmall } from './headers/StringSmall';
	10	+import { UnsupportedTheme } from './misc/Unsupported';
8	11
9	12	type HeaderSelectProps = {
10	13	attributes: Attributes;
11	14	onClick: (slug: string) => void;
12	15	};
	16	+
	17	+const unsupportedWithCssVars = ['headlightsMutedAlt'];
	18	+
13	19	export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
14		- const { headerType, ...attributesWithoutHeaderType }: Partial<Attributes> =
	20	+ const { headerType, ...attributesWithoutHeaderType }: Attributes =
15	21	attributes;
16	22	const { bgColor } = attributes;
17	23	const types = {
18	24	none: __('None', 'code-block-pro'),
		@@ -19,9 +25,12 @@
19	25	headlights: __('Headlights', 'code-block-pro'),
20	26	headlightsMuted: __('Headlights muted', 'code-block-pro'),
21	27	headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
22	28	simpleString: __('Simple string', 'code-block-pro'),
	29	+ stringSmall: __('String muted', 'code-block-pro'),
	30	+ pillString: __('Pill string', 'code-block-pro'),
23	31	};
	32	+ const isUnsupported = bgColor?.startsWith('var(');
24	33
25	34	return (
26	35	<div className="code-block-pro-editor">
27	36	{Object.entries(types).map(([slug, type]) => (
		@@ -35,10 +44,16 @@
35	44	)
36	45	: type
37	46	}
38	47	help={
39		- ['simpleString'].includes(slug)
40		- ? __('Update text in Settings', 'code-block-pro')
	48	+ ['simpleString', 'pillString', 'stringSmall'].includes(
	49	+ slug,
	50	+ )
	51	+ ? // Settings refers to the panel that can be expanded
	52	+ __(
	53	+ 'Set the text at the top of this panel.',
	54	+ 'code-block-pro',
	55	+ )
41	56	: undefined
42	57	}
43	58	key={slug}>
44	59	<button
		@@ -56,8 +71,11 @@
56	71	style={{ backgroundColor: bgColor }}
57	72	/>
58	73	</span>
59	74	</button>
	75	+ {isUnsupported && unsupportedWithCssVars.includes(slug) && (
	76	+ <UnsupportedTheme />
	77	+ )}
60	78	</BaseControl>
61	79	))}
62	80	</div>
63	81	);
		@@ -62,10 +80,15 @@
62	80	</div>
63	81	);
64	82	};
65	83
66		-export const HeaderType = (attributes: Partial<Attributes>) => {
67		- const { headerType } = attributes;
	84	+export const HeaderType = (attributes: Attributes) => {
	85	+ const { headerType, bgColor } = attributes;
	86	+ const isACustomTheme = bgColor?.startsWith('var(');
	87	+ if (isACustomTheme && unsupportedWithCssVars.includes(headerType ?? '')) {
	88	+ return null;
	89	+ }
	90	+
68	91	if (headerType === 'headlights') {
69	92	return <Headlights {...attributes} />;
70	93	}
71	94	if (headerType === 'headlightsMuted') {
		@@ -75,7 +98,13 @@
75	98	return <HeadlightsMutedAlt {...attributes} />;
76	99	}
77	100	if (headerType === 'simpleString') {
78	101	return <SimpleString {...attributes} />;
	102	+ }
	103	+ if (headerType === 'stringSmall') {
	104	+ return <StringSmall {...attributes} />;
	105	+ }
	106	+ if (headerType === 'pillString') {
	107	+ return <PillString {...attributes} />;
79	108	}
80	109	return null;
81	110	};