bob-grapesjs-blocks-basic

GrapesJS Basic Blocks

This plugin contains some basic blocks for the GrapesJS editor

Demo

Summary

• Plugin name: bob-gjs-blocks-basic
• Blocks: column1, column2, column3, column3-7, heading, text, link, image, video, map, section, divider

Options

Option	Description	Default
blocks	Which blocks to add	['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map', 'section'] (all)
category	Category name	Basic
flexGrid	Make use of flexbox for the grid	false
stylePrefix	Classes prefix	gjs-
addBasicStyle	Use basic CSS for blocks	true
labelColumn1	1 Column label	1 Column
labelColumn2	2 Columns label	2 Columns
labelColumn3	3 Columns label	3 Columns
labelColumn37	3/7 Columns label	2 Columns 3/7
labelHeading	Heading label	Heading
labelText	Text label	Text
labelLink	Link label	Link
labelImage	Image label	Image
labelVideo	Video label	Video
labelMap	Map label	Map
labelSection	Section label	Section
labelDivider	Divider label	Divider
rowHeight	Initial height	75

Download

• CDN
  • https://unpkg.com/bob-gjs-blocks-basic
• NPM
  • npm i bob-gjs-blocks-basic
• GIT
  • git clone https://github.com/boykioyb/grapesjs-blocks-basic.git

Usage

Directly in the browser

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

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

<script type="text/javascript">
  var editor = grapesjs.init({
    fromElement: 1,
    container: "#gjs",
    plugins: ["bob-gjs-blocks-basic"],
    pluginsOpts: {
      "bob-gjs-blocks-basic": {
        /* ...options */
      }
    }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'bob-grapesjs-blocks-basic';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/boykioyb/grapesjs-blocks-basic
$ cd grapesjs-blocks-basic

Install it

$ npm i

Start the dev server

$ npm start

Build before the commit. This will also increase the patch level version of the package

$ npm run build

License

BSD 3-Clause