Adds new header option "HeadlightsTabString"

[ajskelton]

I've been using the CodeBlockPro block on a client site and they had a design request to have a 'tab' like title for the filename in the header.

I combined the Headlights and SimpleString headers to create a new header type "HeadlightsTabString". I also used the HeadlightsMuted background color for the header, and then pulled in the background color of the main editor to use for the tab background.

Here is an example of the new header:

If you don't want to include this in the plugin is there a good way to extend the plugin to add in custom headers?

[KevinBatdorf]

Nice job! I considered this actually but my concern is that people will expect there to be clickable tabs there. What do you think? In the future I actually want to support multiple tabs with multiple languages, but I need to rewrite the plugin to support a few other new features so I need to plan a bit more.

How are you using this now? If it's just for your client it could probably be done with some CSS too.

[ajskelton]

Personally I wouldn't expect them to be clickable for a code block like this. Once interactivity is involved I would expect a fully editable code block like an embedded CodePen or something like that. But I can see how some people might see the tab and think it's more than just design. Especially down the road with your idea of having multiple tabs to show the different languages.

I pulled back and started trying to accomplish this with just css. It's difficult to get it as flexible. Right now there is no class added to the main block for which header style is selected. Also the main colors like the bg and text are inlined to the elements instead of being set to custom properties which would be easier to use. I could code in the specific colors, but I'm trying to plan for the client wanting to change a theme eventually. Actually, I just found the blocks.codeBlockPro.themes hook so I can limit what themes are available for the client. They'll want to only use on across the board anyway, so hard-coding header styles shouldn't be an issue and we can adjust colors when/if they ever change themes.

The client I'm planning on using this for is a big site that we're slowly moving over to blocks. We actually just had another delay on launching new pages with these code blocks so I'm not rushing anything. They're still deciding what highlighting theme they want to use site wide.

[KevinBatdorf]

Actually, I just found the blocks.codeBlockPro.themes hook so I can limit what themes are available for the client. They'll want to only use on across the board anyway, so hard-coding header styles shouldn't be an issue and we can adjust colors when/if they ever change themes.

At the top of the themes panel there's a setting area to manage the themes there too if you'd prefer to use that.

Great feedback overall. I'll think about the PR some more.