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