Hello everyone.
I am playing with Pinegrow and Full Site Editing following Matjaz’s tutorial: Simple Full Site Editing with Minimal Theme and Blocks. Everything works just fine.
Meanwhile, as an experiment, I activated the FSE Editor on the theme, and I am testing the possibility to manage Bootstrap’s color palette through FSE Global Styles - Color.
I know that Pinegrow / Bootstrap printout css variables like for example: var(–bs-primary), but how to sync it with the gutenberg editor, so that would be possible to use the wordpress global styles to change bootstrap design / layouts colors as blocks?
WP uses its own naming convention to generate styles and classes. IMO the simplest way would be to add BS Design panel colors into theme.json color palette setting, so that WP and BS colors are in sync.
Once we add support for FSE, this should be an automatic process.
I’d like to join that conversation here and drop in with another question about how Pinegrow generates the bootstrap theme.
I normally use bootstrap with SCSS which makes it pretty ease to override colors and so. But I can’t really do that with CSS based. I would like to offer a possibility to customize some colors inside the wordpress-page on a custom settings page.
I thought that the process would be pretty straight-forward. Providing a color picker for primary for example, overriding the --bs-primary variable, maybe generate some shades and override them too, however it turned out that bootstrap seems to use fixed color values on some elements (like buttons).
Now i was wondering how the process takes place inside of pinegrow and maybe there is some possibility for me to do it kind of the same way. Is there any API or something you are calling to generate the theme styles or it is all “hardcoded” by yourself?
I wouldn’t mind to generate the whole bootstrap.css and replace the old one inside of wordpress whenever the settings get changed. But I didn’t find any solution for that yet without having a loooot of work by recreating almost all BS-styles (at least those involving colors)
After another research i’ve decided to stick with SCSS and create a plugin which basically does nothing more than compiling bootstraps SCSS files into a css file, the color variables and so are based on a color-picker I have in a settings-page.
Just did a quick test with it and it feels promising, so that would enable live bootstrap-theme switching inside the wordpress site, which basically gives me the option to easier reuse created gutenberg-blocks since I can easily switch my color scheme and fonts and so on then.
If anyone interested I can provide the pliugin here when I’m finished, but I think I will only create a color-based version in the first place and add maybe later other Stuff I will need!
@Wolfgang.Hartl yes, SCSS is the way to go because many things in BS are not controlled by CSS variables. Which SASS library are you using in the browser? Or is it server-based?
FYI, once we have PG as a WP plugin, Design Panel and custom BS CSS generation will be included. We have it already working in the browser on pinegrow.online.
@matjaz Oh cool, I didn’t know that you’re working on a plugin for Pinegrow. How will that look like, something like pinegrow.online but for wordpress?
No it’s not serverside (or at least not completely, some kind of, written in PHP :-D), what I basically did is including the default bootstrap.min.css file and also added the SCSS files as assets inside my plugin.
Then I’ve used the metabox framework to create my custom fields inside a wordpress-settings page. And codewise i’m crapping the values of those fields and compile into my bootstrap.min.css the finished CSS file which takes the input of my values.
This is pretty cool because now I can also control which aspects of Bootstrap I want to load, helped me reducing the amount of chars from 155~K to 60k~ which should drastically reduce the file size too (didn’t test that too much yet because I’m still developing).
Here’s a screenshot of how that looks like (whenever I hit the save button it replaces the content of the bootstrap.min.css file with the new compiled one → so i can still provide the static asset file)
To finally answer your question, I’ve found a pretty sweet PHP Project which compiles SCSS to CSS, it also allows me to minify the output. It is called “scssphp” SCSS Compiler in PHP - scssphp
Codewise it’s pretty easy to use, looks something like this!
Even if you plan to create a plugin which already includes that functionality I’m gonna share the finished plugin here as a download for other users who need that while we are waiting for the plugin to get released. Just have to do some polish on it and make all components/libraries of BS selectable!
But the downside will be that everyone who wants to use that will need the metabox plugin, since I didn’t want to waste my time with creating “native” setting/meta-fields in WP
@Wolfgang.Hartl nice & elegant Yes, please share the plugin here.
PG Online is already a WP plugin, and the site is a WP site. The plan is to bring that functionality, including the WP Builder closer to developers, so that they can use it there directly, for example to create custom blocks.
Yes, please share the plugin here.
