Create WordPress Blocks based on Bootstrap - wordpress

I would like to create bootstrap blocks based on bootstrap. For this I would write a custom plugin which registers the blocks in the backend.
Each block gets its own individual stylesheet as specified by WordPress documentation. However, in order to display correctly, the blocks still need a stylesheet with global settings such as the sizes for the header, settings regarding the border box and so on. Since I work with SASS, most of this is controlled by the reboot.scss file I import.
So I have two stylesheets: One for the individual block and one global.
The stylesheet for the individual block (block.scss):
#import "../assets/scss/variables";
.myblock {
padding: 120px 0;
color: $body-color;
.myblock__inner {
color: red;
}
}
The global styleheet (global.scss):
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
#import "../node_modules/bootstrap/scss/utilities";
#import "../node_modules/bootstrap/scss/utilities/api";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
To see the correct preview of the blocks in the backend, I tried to include the global stylesheet via the hook enqueue_block_editor_assets:
add_action('enqueue_block_editor_assets', 'editor_style');
function editor_style() {
wp_enqueue_style('global', get_template_directory_uri() . '/assets/css/global.css',false,false,'all');
}
The problem now are the various global styles, which were defined by Bootstrap and destroy other blocks in the backend or make editing impossible.
Is there a way to make the global bootstrap styles work only for my blocks and not for all blocks and for the whole Gutenberg editor?

Try this
function cre8_add_editor_styles() {
add_theme_support('editor-styles');
add_editor_style([
'https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css',
'style.css'
]);
}
add_action('after_setup_theme', 'cre8_add_editor_styles');
Source: https://cre8.agency/blog/augmenting-the-wordpress-block-editor-with-bootstrap-utilities/

Related

How to change variable in bootstrap via app.scss

Currently I'm building a template that will be used by multiple people on different projects. So making this work instantly without changing things per project install is crutial.
For this instance I want to change the $spacer variable that is used for all the margings and paddings classes that Bootstrap offers. But I cant seem to figure out how to change the $spacer variable outside of the /node_modules. I have an own _variables.scss that creates variables for the theme but an !important or anything else wont work eventhough the custom _variables.scss is loaded later that the bootstrap from the node modules.
Is there a way to send a scss file to the node_modules file so it changes the variables from within? or is there a different way to overwrite a variable from the node modules?
I always work like this and no problem:
// File: my-bootstrap-and-styles.scss
// your overrides
$primary : #FEBC35;
// include bootstrap.scss
#import "../node_modules/bootstrap/scss/bootstrap";
// Then add your additional custom code here
.my-primary-div {
background: $primary;
border: 1px solid black;
}
// also don't forget to take advantage
// of bootstrap's variables and mixins
#include media-breakpoint-down(md) {
.my-class {
overflow-y: auto;
}
}

Including Bootstrap in more than one Rails engine overwrites custom definitions

I am working on extracting behavior from a Rails app, and packaging it as a rails engine, to be included as a gem in the original app. My team has already successfully done this with another piece of functionality.
For the purpose of this discussion we can call the existing rails engine Foo and the one I'm creating Bar.
Foo has its own set of scss stylesheets, some of which depend on variables imported from Bootstrap. Bar is going to as well.
The main app's application.scss looks like this:
#import 'bootstrap';
#import 'foo/application'; // main stylesheet for Foo
#import 'bar/application'; // main stylesheet for Bar
foo/application looks like this:
#import 'bootstrap';
.cc-tab__icon {
#extend .lead;
font-size: 12px;
} // class which extends the Bootstrap .lead class
bar/application:
#import 'bootstrap'; // needs bootstrap too
Now, with bootstrap re-imported, my .cc-tab__icon elements have font-size 21px, which comes from a #media declaration on Bootstrap's .lead class. If I leave #import 'bar/application' out of my main application.scss file my .cc-tab__icon elements have the correct 12px font size.
I think the issue must be something I don't understand about #media declarations. Why would re-importing the same library affect a class that's already been declared and which just extends a class of said library?

Conditially override scss variables for bootstrap 4 theme switching

Per the Bootstrap docs,
Every Sass variable in Bootstrap 4 includes the !default flag allowing
you to override the variable’s default value in your own Sass without
modifying Bootstrap’s source code. Copy and paste variables as needed,
modify their values, and remove the !default flag. If a variable has
already been assigned, then it won’t be re-assigned by the default
values in Bootstrap.
So they recommend you create your own theme like this:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
What I would like to do is have two sets of variables, and uses this to switch between a light and dark theme:
// Your variable overrides
body.light-mode {
$body-bg: #fff;
}
body.dark-mode {
$body-bg: #000;
}
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
But this doesn't seem to be working, I think because of how variables are scoped.
Is this possible? Ideally I'd like to have light and dark variables in their own file.
For a little context; I am using bootstrap in a web app created by create-react-app, and they recommend to import bootstrap as detailed here. If I just generated 2 separate style sheets I'd have copy those to my /public folder manually and reference, and they wouldn't be part of the webpack bundling.
This was the solution I went with:
// Default theme
$body-bg: #fff;
// etc...
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
// dark theme, turned on by adding class dark to document.documentElement (html tag)
.dark {
$body-bg: #000;
// etc...
// Import just the things you customize
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/tables";
#import "~bootstrap/scss/button-group"
// etc....
}
That won't work. Why not make two different themes - dark/light:
light theme (light-theme.scss):
// Your variable overrides
$body-bg: #fff;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
dark theme (dark-theme.scss):
// Your variable overrides
$body-bg: #000;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
and then pull the appropriate style sheet into the page as needed?

How do I load both ag-grid themes using SCSS and toggle between them?

I've tried using in my main.scss
#import '~ag-grid-community/src/styles/ag-grid';
#import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';
#import '~ag-grid-community/src/styles/ag-theme-balham-dark/sass/ag-theme-balham-dark';
and then conditionally, I want to apply ag-theme-balham or ag-theme-balham-dark to the div containing ag-grid.
However, if both themes are loaded via scss, since they both build on some common theme files with variables it seems that one overrides the other?? My grid is ending up light even when I can verify through chrome inspector that the surrounding div has class="ag-theme-balham-dark" (even though dark is imported last).
Removing the import of the light theme first succesfully makes for a dark grid.
If I switch to use ag-grid's CSS instead of SCSS that does work, but the whole point of SCSS is so that I could override some theme variables?
To solve this, I ended up not importing their pre-built themes, and created custom themes. Creating the custom themes is still simple to do, since you can use the default variables as a base.
#import '~ag-grid-community/src/styles/ag-grid';
#import '~ag-grid-community/src/styles/ag-theme-balham/vars/ag-theme-balham-vars';
#import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-common';
.ag-theme-balham {
// $ag-params contains all values for the light theme
#include ag-theme-balham($ag-params);
}
.ag-theme-balham-dark {
$background: #2d3436;
$foreground: #F5F5F5;
// override the default params with the dark values
$dark-params: map-merge($ag-params, (
background-color: $background,
foreground-color: $foreground,
secondary-foreground-color: $foreground,
odd-row-background-color: darken($background, 3),
header-background-color: darken(#636e72, 30),
header-foreground-color: $foreground,
header-cell-hover-background-color: lighten($background, 5),
header-cell-moving-background-color: lighten($background, 5),
border-color: #424242,
hover-color: lighten($background, 7)
));
#include ag-theme-balham($dark-params);
}
https://stackblitz.com/edit/ag-grid-scss-themes?embed=1&file=src/styles.scss
Depending on what features you use in ag-grid, you may have to override more of the $ag-params values. I only overrode the ones that were needed for the example.

Import css/scss file into a class

I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).
The solution I've thought so far is to apply a class to the vaadin compiled css, like:
.daVaadinTheme {
#import bootstrap.css;
}
so the content will be compiled like:
.daVaadinTheme h1.insideTheFile{
}
.daVaadinTheme h2.insideTheFile{
}
But, as you may figured out, is not obviously working.
Do you have any solution?
Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...
SOLUTION: (kudos to Mathias Jørgensen)
using #import from another scss file:
in test.scss:
.daVaadinTheme{
#import "bootstrap.scss";
}
Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss
Have an outer File like so:
#main .content { // if that's, where you want them to rule only
#import 'foo';
}
Reasons:
import only works with scss
underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...
You need move your code into mixin:
// botstrap.scss
#mixin bootstrap {
h1.insideTheFile{
}
h2.insideTheFile{
}
}
Then, you can import normal:
// test.scss
#import "bootstrap"; // No extension
#include bootstrap; // The name of "mixin"
or with context:
// test.scss
#import "bootstrap"; // No extension
.daVaadinTheme {
#include bootstrap; // The name of "mixin"
}
If you want to add certain styles to a class using sass/scss I think what you're looking for is
.myClass { #import bootstrap.css; }

Resources