/grapesjs-blocks-bootstrap4

GrapesJS Bootstrap v4 Blocks Plugin

Primary LanguageJavaScriptBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

GrapesJS Bootstrap v4 Blocks Plugin

npm

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