Default Settings

[sdenike]

I would love to see a settings panel in the WordPress dashboard that allowed you to specify all of the default settings such as theme, line numbering, code type, etc.

[KevinBatdorf]

I have an idea to add something but given the nature of Gutenberg and how it pre-renders and stores the rendered data into the db, it's not that simple. I'd have to search the database for code blocks, then update and apply changes directly.

But some people aren't using the same language, theme, etc for every code block, so it would have to also be able to select specific ones.

What is your specific use case though? To update blocks you previously added?

[sdenike]

Currently, I am replacing SyntaxHighlighter Evolved with Code Block Pro, so right now there is a lot of editing posts and copying the code, making the new block with Code Block Pro, pasting the code and then tweaking the settings such as the theme, language etc.

This is time-consuming as you can imagine. It would be nice if one of two things could happen. The first being that it will always default to the last used settings (theme, language, line numbers, etc) so that when editing an old post or making a new you would not have to change all the settings to make the new block conform to the others you have on your site.

Another option would be the setting of default options in the WordPress dashboard (Even if it didn't let you select a default language, as we both know changes are people are posting about multiple languages... well at least I am) but having default theme selection, line numbers and all the other settings would be great as it would allow people to pop in a new code block pro block and be on their way instead of spending the additional time making sure it looked like the previous blocks that they had in other blocks. I would imagine that most people use the same theme styling across their site and are not changing the theme on each post, but I could be wrong.

Thanks again for the great plugin, I had it installed for long enough to swap out a single post and then went and purchased the paid version to help support it. Keep up the good work!

[KevinBatdorf]

The settings should_ persist after you add a block for most items. You shouldn't have to set the theme, line settings, language, etc. Full list is here: https://github.com/KevinBatdorf/code-block-pro/blob/main/src/state/theme.ts#L8-L17

If you add a new block, you shouldn't have to adjust those. If that's not working, do you see any errors in the browser's console when you add a block?

I am replacing SyntaxHighlighter Evolved with Code Block Pro

There's actually a tiny helper I added for this, but you still need to navigate to the block and press the button

(I havent tested this in a while though so it may not be perfect, so make sure you can revert back to a saved state)

[sdenike]

Hey @KevinBatdorf thanks that helper is working, but it is only a per-post basis which is not ideal but doable for at least getting through converting everything over at least.

[aadilayub]

I think there's a feature in 6.3 that lets you push changes to a block to "global styles". It's under the advanced panel in block settings for core blocks. That should solve this use case I think.

[KevinBatdorf]

I'm not sure that would work but can you show me where you read about it? Maybe I can update the code so the two features can work together.

[aadilayub]

I can't find a link describing the feature, but I see this in the site editor in 6.2:

[KevinBatdorf]

Ah ok that's for global styles. I would only be able to use that with the pro theme's css variable theme and have it apply to every theme since those global styles are for variables and not pre-rendering.

I'll have to build a custom tool for this.

[adriancs2]

Another possible idea is by saving all settings as profile. So now, in stead of manually adjust the settings during editing a block, you can choose the profile from a drop down box to quickly apply the settings.

[KevinBatdorf]

That would still only work for future blocks that are added and not ones you added yesterday.

How it works today is it's saved based on the last settings you used. This should work for 95% of people as most use the same theme, line height, font size, header type, etc for everything.

I do like the idea of keeping a settings profile. Can you describe how you specifically would use it?

[KevinBatdorf]

Just discovered there was a bug with how default settings are saved in the way I described above. I'll fix that in the next release. So that might solve the issue for most people!

[adriancs2]

That would still only work for future blocks that are added and not ones you added yesterday.

Yes, it's only take effect on new blocks.

Can you describe how you specifically would use it?

Like... while editing on a new block, the settings profile can be used to quickly apply specific set of settings.

Normally, the settings will be applying [Last Used Settings], if saving current settings is enabled and a name can be given to it. Then the options could be as follow (for example):

• Last Used Settings
• My Custom Settings 1
• My Custom Settings 2

However, at the moment, I do not rely on the settings to apply the following style:

• font family
• font-size
• line-height
• font-weight

In stead, I use a plugin call Simple Custom CSS and JS to apply the CSS style globally for whole site.

With the help of the plugin, I insert this CSS for backend:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

.wp-block-kevinbatdorf-code-block-pro {
	margin-bottom: 25px;
}

.wp-block-kevinbatdorf-code-block-pro pre,
.wp-block-kevinbatdorf-code-block-pro textarea {
	font-family: "Roboto Mono", monospace !important;	
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 135% !important;
}

and insert this for frontend:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

.wp-block-kevinbatdorf-code-block-pro {
	margin-bottom: 25px;
}

.wp-block-kevinbatdorf-code-block-pro pre code {
	font-family: "Roboto Mono", monospace !important;	
	line-height: 135% !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.wp-block-kevinbatdorf-code-block-pro pre span::selection {
  background-color: #336ecc; /* Cursor highlight background color */
  color: white; /* Cursor highlight text color */
}

Above approach can change the font to any font to the whole site at ease any time.

I think it is a good idea to share this info to the community for those who wish to further do global customization. Like, writing a wiki page for this info. Maybe like title the wiki as "Advance Global Style Customization", or something like that. Then in the wiki, we show an example of CSS code of doing the global site font & size customization like what I've shown in this post. How do you think?

[KevinBatdorf]

I think it is a good idea to share this info to the community for those who wish to further do global customization. Like, writing a wiki page for this info. Maybe like title the wiki as "Advance Global Style Customization", or something like that. Then in the wiki, we show an example of CSS code of doing the global site font & size customization like what I've shown in this post. How do you think?

I'd like to make this all possible with no code though so I think instructing users this way isn't the best long term solution.

Sharing styles here or in a discussion is helpful though and users may end up here from searching, etc too.

[mgilank]

we have hundreds post need to edit manually, i hope it can be setting to default code tag.