← All changes | src/editor/components/HeaderSelect.tsx +87 -68 1.9.1 → 1.28.0 View file →

		@@ -1,81 +1,100 @@
1	1	import { BaseControl } from '@wordpress/components';
2		-import { sprintf, __ } from '@wordpress/i18n';
3		-import { Attributes } from '../../types';
	2	+import { __, sprintf } from '@wordpress/i18n';
	3	+import type { 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		- attributes: Attributes;
11		- onClick: (slug: string) => void;
	13	+ attributes: Attributes;
	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> =
15		- attributes;
16		- const { bgColor } = attributes;
17		- const types = {
18		- none: __('None', 'code-block-pro'),
19		- headlights: __('Headlights', 'code-block-pro'),
20		- headlightsMuted: __('Headlights muted', 'code-block-pro'),
21		- headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
22		- simpleString: __('Simple string', 'code-block-pro'),
23		- };
	20	+ const { headerType, ...attributesWithoutHeaderType }: Attributes = attributes;
	21	+ const { bgColor } = attributes;
	22	+ const types = {
	23	+ none: __('None', 'code-block-pro'),
	24	+ headlights: __('Headlights', 'code-block-pro'),
	25	+ headlightsMuted: __('Headlights muted', 'code-block-pro'),
	26	+ headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
	27	+ simpleString: __('Simple string', 'code-block-pro'),
	28	+ stringSmall: __('String muted', 'code-block-pro'),
	29	+ pillString: __('Pill string', 'code-block-pro'),
	30	+ };
	31	+ const isUnsupported = bgColor?.startsWith('var(');
24	32
25		- return (
26		- <div className="code-block-pro-editor">
27		- {Object.entries(types).map(([slug, type]) => (
28		- <BaseControl
29		- id={`code-block-pro-header-${slug}`}
30		- label={
31		- headerType === slug
32		- ? sprintf(
33		- __('%s (current)', 'code-block-pro'),
34		- type,
35		- )
36		- : type
37		- }
38		- help={
39		- ['simpleString'].includes(slug)
40		- ? __('Update text in Settings', 'code-block-pro')
41		- : undefined
42		- }
43		- key={slug}>
44		- <button
45		- id={`code-block-pro-header-${slug}`}
46		- type="button"
47		- onClick={() => onClick(slug)}
48		- className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto">
49		- <span className="pointer-events-none w-full">
50		- <HeaderType
51		- headerType={slug}
52		- {...attributesWithoutHeaderType}
53		- />
54		- <span
55		- className="block w-full h-8"
56		- style={{ backgroundColor: bgColor }}
57		- />
58		- </span>
59		- </button>
60		- </BaseControl>
61		- ))}
62		- </div>
63		- );
	33	+ return (
	34	+ <div className="code-block-pro-editor">
	35	+ {Object.entries(types).map(([slug, type]) => (
	36	+ <BaseControl
	37	+ id={`code-block-pro-header-${slug}`}
	38	+ label={
	39	+ headerType === slug
	40	+ ? sprintf(__('%s (current)', 'code-block-pro'), type)
	41	+ : type
	42	+ }
	43	+ help={
	44	+ ['simpleString', 'pillString', 'stringSmall'].includes(slug)
	45	+ ? // Settings refers to the panel that can be expanded
	46	+ __('Set the text at the top of this panel.', 'code-block-pro')
	47	+ : undefined
	48	+ }
	49	+ key={slug}
	50	+ >
	51	+ <button
	52	+ id={`code-block-pro-header-${slug}`}
	53	+ type="button"
	54	+ onClick={() => onClick(slug)}
	55	+ className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto"
	56	+ >
	57	+ <span className="pointer-events-none w-full">
	58	+ <HeaderType headerType={slug} {...attributesWithoutHeaderType} />
	59	+ <span
	60	+ className="block w-full h-8"
	61	+ style={{ backgroundColor: bgColor }}
	62	+ />
	63	+ </span>
	64	+ </button>
	65	+ {isUnsupported && unsupportedWithCssVars.includes(slug) && (
	66	+ <UnsupportedTheme />
	67	+ )}
	68	+ </BaseControl>
	69	+ ))}
	70	+ </div>
	71	+ );
64	72	};
65	73
66		-export const HeaderType = (attributes: Partial<Attributes>) => {
67		- const { headerType } = attributes;
68		- if (headerType === 'headlights') {
69		- return <Headlights {...attributes} />;
70		- }
71		- if (headerType === 'headlightsMuted') {
72		- return <HeadlightsMuted {...attributes} />;
73		- }
74		- if (headerType === 'headlightsMutedAlt') {
75		- return <HeadlightsMutedAlt {...attributes} />;
76		- }
77		- if (headerType === 'simpleString') {
78		- return <SimpleString {...attributes} />;
79		- }
80		- return null;
	74	+export const HeaderType = (attributes: Attributes) => {
	75	+ const { headerType, bgColor } = attributes;
	76	+ const isACustomTheme = bgColor?.startsWith('var(');
	77	+ if (isACustomTheme && unsupportedWithCssVars.includes(headerType ?? '')) {
	78	+ return null;
	79	+ }
	80	+
	81	+ if (headerType === 'headlights') {
	82	+ return <Headlights {...attributes} />;
	83	+ }
	84	+ if (headerType === 'headlightsMuted') {
	85	+ return <HeadlightsMuted {...attributes} />;
	86	+ }
	87	+ if (headerType === 'headlightsMutedAlt') {
	88	+ return <HeadlightsMutedAlt {...attributes} />;
	89	+ }
	90	+ if (headerType === 'simpleString') {
	91	+ return <SimpleString {...attributes} />;
	92	+ }
	93	+ if (headerType === 'stringSmall') {
	94	+ return <StringSmall {...attributes} />;
	95	+ }
	96	+ if (headerType === 'pillString') {
	97	+ return <PillString {...attributes} />;
	98	+ }
	99	+ return null;
81	100	};