Adds new header option "HeadlightsTabString"

src/editor/components/HeaderSelect.tsx

@@ -4,6 +4,7 @@ import { Attributes } from '../../types';
 import { Headlights } from './headers/Headlights';
 import { HeadlightsMuted } from './headers/HeadlightsMuted';
 import { HeadlightsMutedAlt } from './headers/HeadlightsMutedAlt';
+import { HeadlightsTabString } from './headers/HeadlightsTabString';
 import { PillString } from './headers/PillString';
 import { SimpleString } from './headers/SimpleString';
 import { StringSmall } from './headers/StringSmall';
@@ -25,6 +26,7 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
         headlights: __('Headlights', 'code-block-pro'),
         headlightsMuted: __('Headlights muted', 'code-block-pro'),
         headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
+        headlightsTabString: __('Headlights with tab string', 'code-block-pro'),
         simpleString: __('Simple string', 'code-block-pro'),
         stringSmall: __('String muted', 'code-block-pro'),
         pillString: __('Pill string', 'code-block-pro'),
@@ -45,7 +47,7 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
                             : type
                     }
                     help={
-                        ['simpleString', 'pillString', 'stringSmall'].includes(
+                        ['headlightsTabString', 'simpleString', 'pillString', 'stringSmall'].includes(
                             slug,
                         )
                             ? // Settings refers to the panel that can be expanded
@@ -97,6 +99,9 @@ export const HeaderType = (attributes: Attributes) => {
     if (headerType === 'headlightsMutedAlt') {
         return <HeadlightsMutedAlt {...attributes} />;
     }
+    if ( headerType === 'headlightsTabString') {
+        return <HeadlightsTabString {...attributes} />;
+    }
     if (headerType === 'simpleString') {
         return <SimpleString {...attributes} />;
     }

src/editor/components/headers/HeadlightsTabString.tsx

@@ -0,0 +1,79 @@
+import { colord, AnyColor } from "colord";
+import { Attributes, Lang } from '../../../types';
+import { findBackgroundColor, findTextColor } from '../../../util/colors';
+import { languages } from '../../../util/languages';
+
+export const HeadlightsTabString = (attributes: Attributes) => {
+    const {language, bgColor, textColor, headerString} = attributes;
+    const bgC = colord(bgColor as AnyColor);
+    let bg = bgC.isDark()
+        ? bgC.lighten(0.05).toHex()
+        : bgC.darken(0.05).toHex();
+    const textC = colord(textColor as AnyColor);
+    let text = textC.isDark()
+        ? textC.lighten(0.05).toHex()
+        : textC.darken(0.05).toHex();
+
+    if (bgColor?.startsWith('var(')) {
+        bg = findBackgroundColor(attributes) ?? bgColor;
+    }
+    if (textColor?.startsWith('var(')) {
+        text = findTextColor(attributes) ?? textColor;
+    }
+
+    return (
+        <span
+            style={{
+                display: 'block',
+                padding: '5px 0 0 16px',
+                marginBottom: '-1px',
+                width: '100%',
+                textAlign: 'left',
+                backgroundColor: bg,
+                color: text,
+            }}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={54}
+                height={14}
+                viewBox="0 0 54 14">
+                <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+                    <circle
+                        cx="6"
+                        cy="6"
+                        r="6"
+                        fill="#FF5F56"
+                        stroke="#E0443E"
+                        strokeWidth=".5"></circle>
+                    <circle
+                        cx="26"
+                        cy="6"
+                        r="6"
+                        fill="#FFBD2E"
+                        stroke="#DEA123"
+                        strokeWidth=".5"></circle>
+                    <circle
+                        cx="46"
+                        cy="6"
+                        r="6"
+                        fill="#27C93F"
+                        stroke="#1AAB29"
+                        strokeWidth=".5"></circle>
+                </g>
+            </svg>
+            <span
+                style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    padding: '5px 10px',
+                    borderRadius: '0.25rem 0.25rem 0 0',
+                    marginLeft: '16px',
+                    textAlign: 'center',
+                    color: text,
+                    backgroundColor: bgColor,
+                }}>
+                {headerString || languages[language as Lang]}
+            </span>
+        </span>
+    );
+}

src/editor/controls/Sidebar.tsx

@@ -50,6 +50,7 @@ export const SidebarControls = ({
     const canEdit = useCanEditHTML();
     const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart'];
     const showHeaderTextEdit = [
+        'headlightsTabString',
         'simpleString',
         'pillString',
         'stringSmall',