Pre-made Bootstrap Blocks not showing styles in Gutenberg editor

Pinegrow WordPress Plugin
1

I’m trying to add a Bootstrap block as a Gutenberg block following this PG tutorial

However, while I see the styles on the front end:

front-end-styles
front-end-styles1780×922 145 KB

the block has no CSS styles applied in the Gutenberg editor.

no-styles-GB
no-styles-GB1920×1623 70.1 KB

Based on this article, I added the following to the functions.php file

add_theme_support(‘editor-styles’);
add_editor_style( ‘/wp-content/themes/pinegrow-theme/css/style.css’ );

But I still don’t see the styles in Gutenberg.

Does anyone have any suggestions for how to resolve this?

Note, I do see the styles (inside the Gutenberg editor) of blocks I created myself, just not the styles of the pre-made bootstrap blocks.

pg-bootstrap-block
pg-bootstrap-block1920×960 84.5 KB

2

Hi @CarrieTwist, assuming you are building a theme, use the Theme settings in PG to include bootstrap.css in the WP block editor:

3

This solved it. Still working my way through the documentation. It’s a learning curve. Thanks so much for the direction!!

1 Like