tschortsch

Hi @foldesistudio. You can add custom button styling options with the wpBootstrapBlocks.button.styleOptions JavaScript hook (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin#wpbootstrapblocksbuttonstyleoptions).

In your case this would look something like this:

function outlinePrimaryStyleOption( styleOptions ) {
	styleOptions.push( {
		label: 'Outline primary',
		value: 'outline-primary',
		bgColor: '#ff0000',
		textColor: '#ffffff',
	} );
	return styleOptions;
}
wp.hooks.addFilter(
	'wpBootstrapBlocks.button.styleOptions',
	'myplugin/wp-bootstrap-blocks/button/styleOptions',
	outlinePrimaryStyleOption
);

Hope this helps!

Hi @chrisschrijver. That’s correct, the vertical gutters as well as other styling options are not displayed in the backend. The main reason behind that is that we struggled to adapt the backend styling to work in different WordPress versions. During the 5.x releases almost every minor release had a breaking change in the editor layout which made it really hard to do custom styling for our blocks. That’s why we only styled the most important parts in the backend (eg. rows and cols).

Hey @sandrowuermli. We released version 5.1.0 of the plugin which addresses a bug related to the favicons. The site_icon stacks which are used for favicons weren’t created on rokka side which resulted in not displaying the favicons at all. Could you try updating the plugin and sync the stack again in the settings? Maybe your issue was also related to that.

• This reply was modified 1 year, 9 months ago by tschortsch.

Hi @sandrowuermli. Thanks for your feedback. Sorry to hear that! We will look into the issue and come back to you as soon as we have more information how to solve it.

Hi @bajweb. A column offset is not directly supported via the blocks UI but you can always set arbitrary classes in the Advanced section (Advanced > ADDITIONAL CSS CLASS(ES)) of the column block. But for your use case it would probably make more sense to use the alignment options of the row block (which sets the flex classes accordingly).

Hi @avonhaden. Right now it’s sadly not possible to add custom breakpoints. There’s a lot of conditional logic behind those breakpoints (UI- and Styling-wise) which makes it pretty hard to implement such a feature. Sorry that I can’t give you a better answer for that :/

We just released version 4.2.1 of the plugin with the described change.

Thanks for your kind words. What you probably could do to achieve what you want is overwriting the button.php template inside your theme and do the requested logic in there (see https://github.com/liip/bootstrap-blocks-wordpress-plugin#templates for documentation)?

Hi @jonroc804. Thanks for your feedback! We actually also though about naming the blocks differently in the first place but it somehow looked weird ?? But your request is very valid and useful for the clients so we will rename the blocks in the next release again to <Blockname> (Bootstrap). Hope that’s fine for you?

The locking feature should be enabled by default for all blocks. So yes, it should be available for the Bootstrap blocks as well.

Hi @wpzoneman. Hmm since the whole editor is written in JavaScript and therefore rendered on the client-side it’s probably not that easy to restrict certain options for certain roles. Of course it would be possible to hide some of those options as @comonist34 wrote but security-wise this is not really safe. What should additionally be restricted is the “save” call to the API which is triggered by the editor itself but I think Gutenberg doesn’t offer a simple way to do that.
What could be implemented are block-level permissions with which it would be possible to define which role should see which blocks but this doesn’t really help your use case.

Hi @justinwyllie. Order classes are not directly supported with an UI by the plugin. But you can always set any other classes (which aren’t supported in the UI) directly in the “Advanced section > Additional CSS class(es)” option of the block itself. By default we add those classes to the block so they will be respected in the frontend.

Hi @jupa8. Sorry that it took so long to answer. But I tried again and still couldn’t reproduce the issue :/ I tried all combinations I’ve seen in your screenshot but no luck: https://prnt.sc/g8ETGwkfYayL. My setup: WordPress 5.9 / Twenty-Twenty Two Theme / Bootstrap 5 / CSS Grid disabled.

Maybe it’s a browser issue. Which browser are you using?

Hi @jupa8. Thanks for reporting the issue. Sadly I couldn’t reproduce it on my local machine. Could you maybe tell me which version of WordPress and which theme you’re using? If you’re using a custom theme it would be great if you can switch to an official WordPress theme and see if the issue remains.
I tried with WordPress 5.8 and 5.9 as well as with the Twenty Twenty-One and the Twenty Twenty-Two themes. Maybe you could also copy paste the editor content here to see which blocks you’re using.
It might be a conflicting css styling coming from the theme itself. Or something could be wrong with the image size which makes the flex container break.

Yeah true, but since they’re probably defined in the frontend theme we don’t really know them in the Gutenberg editor where we would need to generate Select-Options for them. Also we can’t really know which ones of those variables are theme colors and which not.