GrapesJS Bootstrap v4 Blocks Plugin

Summary

• Plugin name: grapesjs-blocks-bootstrap4
• Components (see Options for list of Blocks)
  • Layout
    • container
    • row
    • column
    • column_break
    • media_object
    • media_body
  • Components
    • alert
    • tabs
    • badge
    • card
    • card_container
    • collapse
    • dropdown
    • dropdown_menu
  • Typography
    • text
    • header
    • paragraph
  • Media
    • image
    • video
  • Forms
    • form
    • button
    • button_group
    • button_toolbar
    • input
    • input_group
    • form_group_input
    • textarea
    • checkbox
    • radio

Options

{
  blocks: {
    ...
  }
  blockCategories: {
    ...
  }
  labels: {
    ...
  }
  formPredefinedActions: null,
  optionsStringSeparator: '::'
}

Blocks

|Option|Description|Default| |-|-|- |default|Rebuild default component with utility settings|true| |text|Rebuild text component to re-inherit from default|true| |link|Rebuild link component to re-inherit from default and give toggle setting|true| |image|Rebuild image component to re-inherit from default|true| |video|Rebuild video component to re-inherit from default|true| |container|Container (fixed/fluid)|true| |row|Row|true| |column|Columns of all sizes|true| |column_break|Column-break (div.w-100)|true| |media_object|Media object|true| |alert||true| |tabs||true| |badge||true| |card|Card with settings for images, image overlay, header, body, & footer components|true| |card_container|Layouts: group, deck, columns|true| |collapse|Collapse component that can be toggled via link component|true| |dropdown|Dropdown|true| |header|H1-H6|true| |paragraph|P tag with "lead" setting|true| |form||true| |button||true| |button_group||true| |button_toolbar||true| |input||true| |input_group||true| |form_group_input||true| |textarea||true| |checkbox||true| |radio||true|

Block Categories

These are the different categories of blocks as they are grouped in the Blocks sidebar panel. Set a value to false exclude entire groups of blocks (as well as the associated components).

|Option|Description|Default| |-|-|- |layout|Container, row, col, col-break, media object|true| |components|Bootstrap's Components--alert, button, card, etc.|true| |typography|Text, header, paragraph, etc.|true| |basic|Link, image, etc.|true| |forms|Form, input, textarea, etc.|true|

Labels

Same keys as Blocks, but value is the label for the block.

|Option|Description|Default| |-|-|- |text||'Text'| |header||'Header'|

etc.

Other

|Option|Description|Default| |-|-|- |gridDevices|Add devices based on BS grid breakpoints|true| |gridDevicesPanel|Build a panel in the top-left corner with device buttons (use with editor showDevices=false)|false| |formPredefinedActions|Pass a list of predefined form actions to generate a select menu: [{name: 'Contact', value: '/contact'}, ...], if no list is passed an input box to add the action is shown|null| |optionsStringSeparator|Pass a string to identify the separator of values and labels of the select options: optionValue::optionLabel. This setting WILL BE overridden by the gjs-preset-webpage plugin if enabled|'::'|

Download

• NPM
  • npm i grapesjs-blocks-bootstrap4
• GIT
  • git clone https://github.com/kaoz70/grapesjs-blocks-bootstrap4.git

Usage

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-blocks-bootstrap4.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-blocks-bootstrap4'],
      pluginsOpts: {
        'grapesjs-blocks-bootstrap4': {
          blocks: {
            // ...
          },
          blockCategories: {
            // ...
          },
          labels: {
            // ...
          },
          // ...
        }
      },
      canvas: {
        styles: [
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
        ],
        scripts: [
          'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
        ],
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/kaoz70/grapesjs-blocks-bootstrap4.git
$ cd grapesjs-blocks-bootstrap4

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

License

BSD 3-Clause