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