Create custom blocks for bootstrap

by

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;

?>

1 Answer
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!

Leave a Comment