← All changes | src/editor/components/HeaderSelect.tsx +43 -5 1.5.0 → 1.13.0 View file →

		@@ -1,8 +1,11 @@
1	1	import { BaseControl } from '@wordpress/components';
2	2	import { sprintf, __ } from '@wordpress/i18n';
3	3	import { Attributes } from '../../types';
4		-import { HeaderType } from './HeaderType';
	4	+import { Headlights } from './headers/Headlights';
	5	+import { HeadlightsMuted } from './headers/HeadlightsMuted';
	6	+import { HeadlightsMutedAlt } from './headers/HeadlightsMutedAlt';
	7	+import { SimpleString } from './headers/SimpleString';
5	8
6	9	type HeaderSelectProps = {
7	10	attributes: Attributes;
8	11	onClick: (slug: string) => void;
		@@ -7,13 +10,19 @@
7	10	attributes: Attributes;
8	11	onClick: (slug: string) => void;
9	12	};
10	13	export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
11		- const { headerType, bgColor } = attributes;
	14	+ const { headerType, ...attributesWithoutHeaderType }: Partial<Attributes> =
	15	+ attributes;
	16	+ const { bgColor } = attributes;
12	17	const types = {
13		- '': __('None', 'code-block-pro'),
	18	+ none: __('None', 'code-block-pro'),
14	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'),
15	23	};
	24	+
16	25	return (
17	26	<div className="code-block-pro-editor">
18	27	{Object.entries(types).map(([slug, type]) => (
19	28	<BaseControl
		@@ -25,16 +34,28 @@
25	34	type,
26	35	)
27	36	: type
28	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	+ }
29	47	key={slug}>
30	48	<button
31	49	id={`code-block-pro-header-${slug}`}
32	50	type="button"
33	51	onClick={() => onClick(slug)}
34		- 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-scroll">
	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">
35	53	<span className="pointer-events-none w-full">
36		- <HeaderType headerType={slug} bgColor={bgColor} />
	54	+ <HeaderType
	55	+ headerType={slug}
	56	+ {...attributesWithoutHeaderType}
	57	+ />
37	58	<span
38	59	className="block w-full h-8"
39	60	style={{ backgroundColor: bgColor }}
40	61	/>
		@@ -43,5 +64,22 @@
43	64	</BaseControl>
44	65	))}
45	66	</div>
46	67	);
	68	+};
	69	+
	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;
47	85	};