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

		@@ -1,100 +1,85 @@
1	1	import { BaseControl } from '@wordpress/components';
2		-import { __, sprintf } from '@wordpress/i18n';
3		-import type { Attributes } from '../../types';
	2	+import { sprintf, __ } from '@wordpress/i18n';
	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';
8	7	import { SimpleString } from './headers/SimpleString';
9		-import { StringSmall } from './headers/StringSmall';
10		-import { UnsupportedTheme } from './misc/Unsupported';
11	8
12	9	type HeaderSelectProps = {
13		- attributes: Attributes;
14		- onClick: (slug: string) => void;
	10	+ attributes: Attributes;
	11	+ onClick: (slug: string) => void;
15	12	};
16		-
17		-const unsupportedWithCssVars = ['headlightsMutedAlt'];
18		-
19	13	export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
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(');
	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	+ };
32	24
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		- );
	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	+ ? // Settings refers to the panel that can be expanded
	41	+ __(
	42	+ 'Update extras in the Settings panel',
	43	+ 'code-block-pro',
	44	+ )
	45	+ : undefined
	46	+ }
	47	+ key={slug}>
	48	+ <button
	49	+ id={`code-block-pro-header-${slug}`}
	50	+ type="button"
	51	+ onClick={() => onClick(slug)}
	52	+ 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">
	53	+ <span className="pointer-events-none w-full">
	54	+ <HeaderType
	55	+ headerType={slug}
	56	+ {...attributesWithoutHeaderType}
	57	+ />
	58	+ <span
	59	+ className="block w-full h-8"
	60	+ style={{ backgroundColor: bgColor }}
	61	+ />
	62	+ </span>
	63	+ </button>
	64	+ </BaseControl>
	65	+ ))}
	66	+ </div>
	67	+ );
72	68	};
73	69
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;
	70	+export const HeaderType = (attributes: Partial<Attributes>) => {
	71	+ const { headerType } = attributes;
	72	+ if (headerType === 'headlights') {
	73	+ return <Headlights {...attributes} />;
	74	+ }
	75	+ if (headerType === 'headlightsMuted') {
	76	+ return <HeadlightsMuted {...attributes} />;
	77	+ }
	78	+ if (headerType === 'headlightsMutedAlt') {
	79	+ return <HeadlightsMutedAlt {...attributes} />;
	80	+ }
	81	+ if (headerType === 'simpleString') {
	82	+ return <SimpleString {...attributes} />;
	83	+ }
	84	+ return null;
100	85	};