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?