Merge pull request #44 from KevinBatdorf/add-language-name-headers

Add additional headers

readme.txt

@@ -215,9 +215,13 @@ Look under the "Styling" tab and turn on "Clamp Values", which will compute the
 1. Choose from more than 25 themes.
 2. Customize fonts, themes, and behavior.
 3. Example showing light theme with padding disabled.
+4. Example showing a header with a string using Palenight theme.
 
 == Changelog ==
 
+- Feature: Add additional header styles
+- Feature: Allow overriding the label in the header
+
 = 1.5.1 - 2022-09-08 =
 - Fix: Fix padding on copy button when padding is disabled
 

src/block.json

@@ -20,6 +20,7 @@
         "lineNumbers": { "type": "boolean" },
         "clampFonts": { "type": "boolean", "default": false },
         "headerType": { "type": "string" },
+        "headerString": { "type": "string" },
         "disablePadding": { "type": "boolean", "default": false },
         "startingLineNumber": { "type": "number", "default": 1 },
         "frame": { "type": "boolean" },

src/editor/components/HeaderSelect.tsx

@@ -1,7 +1,10 @@
 import { BaseControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { Attributes } from '../../types';
-import { HeaderType } from './HeaderType';
+import { Headlights } from './headers/Headlights';
+import { HeadlightsMuted } from './headers/HeadlightsMuted';
+import { HeadlightsMutedAlt } from './headers/HeadlightsMutedAlt';
+import { SimpleString } from './headers/SimpleString';
 
 type HeaderSelectProps = {
     attributes: Attributes;
@@ -12,7 +15,16 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
     const types = {
         none: __('None', 'code-block-pro'),
         headlights: __('Headlights', 'code-block-pro'),
+        headlightsMuted: __('Headlights muted', 'code-block-pro'),
+        headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
+        simpleString: __('Simple string', 'code-block-pro'),
     };
+
+    const attributesWithoutHeaderType = {
+        ...attributes,
+    } as Partial<Attributes>;
+    delete attributesWithoutHeaderType.headerType;
+
     return (
         <div className="code-block-pro-editor">
             {Object.entries(types).map(([slug, type]) => (
@@ -33,7 +45,10 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
                         onClick={() => onClick(slug)}
                         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">
                         <span className="pointer-events-none w-full">
-                            <HeaderType headerType={slug} bgColor={bgColor} />
+                            <HeaderType
+                                headerType={slug}
+                                {...attributesWithoutHeaderType}
+                            />
                             <span
                                 className="block w-full h-8"
                                 style={{ backgroundColor: bgColor }}
@@ -45,3 +60,20 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
         </div>
     );
 };
+
+export const HeaderType = (attributes: Partial<Attributes>) => {
+    const { headerType } = attributes;
+    if (headerType === 'headlights') {
+        return <Headlights {...attributes} />;
+    }
+    if (headerType === 'headlightsMuted') {
+        return <HeadlightsMuted {...attributes} />;
+    }
+    if (headerType === 'headlightsMutedAlt') {
+        return <HeadlightsMutedAlt {...attributes} />;
+    }
+    if (headerType === 'simpleString') {
+        return <SimpleString {...attributes} />;
+    }
+    return null;
+};

src/editor/components/headers/Headlights.tsx

@@ -0,0 +1,43 @@
+import { Attributes } from '../../../types';
+
+export const Headlights = ({ bgColor }: Partial<Attributes>) => (
+    <span
+        style={{
+            display: 'block',
+            padding: '16px 0 0 16px',
+            marginBottom: '-1px',
+            width: '100%',
+            textAlign: 'left',
+            backgroundColor: bgColor,
+        }}>
+        <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>
+);

src/editor/components/headers/HeadlightsMuted.tsx

@@ -0,0 +1,59 @@
+import { colord, AnyColor } from 'colord';
+import { Attributes } from '../../../types';
+
+export const HeadlightsMuted = ({
+    textColor,
+    bgColor,
+}: Partial<Attributes>) => (
+    <span
+        style={{
+            display: 'block',
+            padding: '16px 0 0 16px',
+            marginBottom: '-1px',
+            width: '100%',
+            textAlign: 'left',
+            backgroundColor: bgColor,
+        }}>
+        <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={colord(textColor as AnyColor)
+                        .alpha(0.2)
+                        .toHex()}
+                    stroke={colord(textColor as AnyColor)
+                        .alpha(0.3)
+                        .toHex()}
+                    strokeWidth=".5"></circle>
+                <circle
+                    cx="26"
+                    cy="6"
+                    r="6"
+                    fill={colord(textColor as AnyColor)
+                        .alpha(0.2)
+                        .toHex()}
+                    stroke={colord(textColor as AnyColor)
+                        .alpha(0.3)
+                        .toHex()}
+                    strokeWidth=".5"></circle>
+                <circle
+                    cx="46"
+                    cy="6"
+                    r="6"
+                    fill={colord(textColor as AnyColor)
+                        .alpha(0.2)
+                        .toHex()}
+                    stroke={colord(textColor as AnyColor)
+                        .alpha(0.3)
+                        .toHex()}
+                    strokeWidth=".5"></circle>
+            </g>
+        </svg>
+    </span>
+);

src/editor/components/headers/HeadlightsMutedAlt.tsx

@@ -0,0 +1,49 @@
+import { colord, AnyColor } from 'colord';
+import { Attributes } from '../../../types';
+
+export const HeadlightsMutedAlt = ({ bgColor }: Partial<Attributes>) => {
+    const bgC = colord(bgColor as AnyColor);
+    const bg = bgC.isDark() ? bgC.lighten(0.05) : bgC.darken(0.05);
+    return (
+        <span
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '10px 0px 10px 16px',
+                marginBottom: '-2px',
+                width: '100%',
+                textAlign: 'left',
+                backgroundColor: bg.toHex(),
+            }}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={62}
+                height={20}
+                viewBox="0 0 62 20">
+                <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+                    <circle
+                        cx="8"
+                        cy="8"
+                        r="8"
+                        fill={bgColor}
+                        stroke={bgColor}
+                        strokeWidth=".5"></circle>
+                    <circle
+                        cx="30"
+                        cy="8"
+                        r="8"
+                        fill={bgColor}
+                        stroke={bgColor}
+                        strokeWidth=".5"></circle>
+                    <circle
+                        cx="52"
+                        cy="8"
+                        r="8"
+                        fill={bgColor}
+                        stroke={bgColor}
+                        strokeWidth=".5"></circle>
+                </g>
+            </svg>
+        </span>
+    );
+};

src/editor/components/headers/SimpleString.tsx

@@ -0,0 +1,31 @@
+import { colord, AnyColor } from 'colord';
+import { Lang } from 'shiki';
+import { Attributes } from '../../../types';
+import { languages } from '../../../util/languages';
+
+export const SimpleString = ({
+    language,
+    bgColor,
+    textColor,
+    headerString,
+}: Partial<Attributes>) => {
+    const bgC = colord(bgColor as AnyColor);
+    const bg = bgC.isDark() ? bgC.lighten(0.05) : bgC.darken(0.05);
+    const textC = colord(textColor as AnyColor);
+    const text = textC.isDark() ? textC.lighten(0.05) : textC.darken(0.05);
+    return (
+        <span
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '10px 0px 10px 16px',
+                marginBottom: '-2px',
+                width: '100%',
+                textAlign: 'left',
+                backgroundColor: bg.toHex(),
+                color: text.toHex(),
+            }}>
+            {headerString || languages[language as Lang]}
+        </span>
+    );
+};

src/editor/controls/Sidebar.tsx

@@ -1,6 +1,7 @@
 import { InspectorControls } from '@wordpress/block-editor';
 import {
     PanelBody,
+    TextControl,
     BaseControl,
     SelectControl,
     Button,
@@ -32,6 +33,8 @@ export const SidebarControls = ({
     const { updateThemeHistory } = useThemeStore();
     const { setPreviousSettings } = useGlobalStore();
 
+    const showHeaderTextEdit = ['simpleString'].includes(attributes.headerType);
+
     return (
         <InspectorControls>
             <PanelBody
@@ -71,6 +74,20 @@ export const SidebarControls = ({
                             </>
                         ) : null}
                     </BaseControl>
+                    {showHeaderTextEdit && (
+                        <BaseControl id="code-block-pro-header-text">
+                            <TextControl
+                                id="code-block-pro-header-text"
+                                spellCheck={false}
+                                label={__('Header Text', 'code-block-pro')}
+                                placeholder={languages[language]}
+                                onChange={(headerString) => {
+                                    setAttributes({ headerString });
+                                }}
+                                value={attributes.headerString ?? ''}
+                            />
+                        </BaseControl>
+                    )}
                     <Notice />
                 </div>
             </PanelBody>

src/front/BlockOutput.tsx

@@ -1,5 +1,5 @@
 import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
-import { HeaderType } from '../editor/components/HeaderType';
+import { HeaderType } from '../editor/components/HeaderSelect';
 import { Attributes } from '../types';
 import { fontFamilyLong, maybeClamp } from '../util/fonts';
 import { CopyButton } from './CopyButton';

src/front/style.css

@@ -35,14 +35,18 @@
 .code-block-pro-copy-button {
     border: 0;
     background: none;
-    padding: 12px 12px 0 0;
-    @apply absolute top-0 right-0 left-auto bg-transparent border-none border-0 cursor-pointer opacity-30 focus:opacity-100 transition-opacity duration-200 ease-in-out leading-none z-10;
+    padding: 6px;
+    @apply absolute top-0 right-0 left-auto bg-transparent border-none border-0 cursor-pointer opacity-10 focus:opacity-40 transition-opacity duration-200 ease-in-out leading-none z-10;
 }
 .wp-block-kevinbatdorf-code-block-pro.padding-disabled .code-block-pro-copy-button {
     padding: 0;
 }
 .wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
-    @apply opacity-100;
+    @apply opacity-40;
+}
+/* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
+.wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
+    @apply opacity-90;
 }
 .code-block-pro-copy-button .without-check {
     @apply block;

src/icons.tsx

@@ -30,34 +30,3 @@ export const languageIcon = () => (
         />
     </svg>
 );
-export const HeadlightsIcon = () => (
-    <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>
-);