2

I'm reading the tutorial on how to create blocks for the Gutemberg editor. I want to implemente the bootstrap 4 grid, but I'm a bit confused on how to proceed. Can anyone explain to me what's the correct way to do this? I suppose that I need to register the bootstrap css and js files, usually I integrate them inside my custom themes so I'm not sure how to proceed with this part. Also I'm confused on the blocks type. May I need to register a single block for each column size and for row and containers offered by bootstrap? An example will be appreciated.

for now in my plugin file I have only few lines of code:

<?php
/**
 * Plugin Name: BlockStrap
 * Version: 1.0
 */

class BlockStrap {

  public function __construct()
  {
    add_action( 'enqueue_block_editor_assets', [$this, 'init'] );
  }

  public function init()
  {
    wp_enqueue_script(
      'bootstrap-blocks',
      plugins_url( 'main.js', __FILE__ ),
      ['wp-blocks']
    );
  }

}

new BlockStrap;

?>
Improve this question

1 Answer 1

Reset to default
1

Rather than create new blocks to represent the Bootstrap classes. You should enqueue the bootstrap js and css files in your theme as you say you normally do.

Once bootstrap has been added to the theme, you can simply assign the bootstrap css classes to the already existing Gutenberg blocks. As demonstrated in the following article https://www.boldgrid.com/support/wordpress-tutorials/how-to-add-additional-css-classes-to-a-block-using-the-gutenberg-editor/

Wordpress v5.3 introduced the new "Group Block" which works great for Bootstrap style page layouts. https://wordpress.org/support/wordpress-version/version-5-3/#expanded-design-flexibility

Create a group block and give it a bootstrap class such as (container, container-fluid, row), you can nest these no problem. Then give the blocks inside the group, css classes like (col-sm-4, etc.).

Once you set up your basic layout you could always save it to a reuseable block https://www.wpbeginner.com/beginners-guide/how-to-create-a-reusable-block-in-wordpress/

Hope this helps!

Improve this answer
3
  • I will try your suggestions, it's a nice solution and will not require me to code anything. I was thinking about plugin creation to add the blocks because it's the first option I've evalued to use bootstrap with the block editor. Commented Dec 4, 2019 at 15:28
  • I like your answer for its simplicity (use what is already there instead of building custom). Adding custom CSS classes is a little to complicated for most of the people I have built Wordpress sites for, though. Reusable blocks are a good suggestion for that, but still less than ideal. Commented Sep 10, 2020 at 0:52
  • This would be a good solution if my clients had any inclination to learn BS classes and how to construct BS blocks. But I literally need something "fool" proof, but bootstrapped. Even the most-downloaded BS plugin (Bootstrap Blocks) requires knowing container, row, and column, and doesn't include any other pieces of BS for customization. I'd love to know if @blendenzo found a good solution. Commented Jun 1, 2022 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.