Howto add Blocks?
Question
Hello all, it turns me crazy but I do not understand how to add blocks. I can write them myself following tutorial, but when I load plugin, like grapesjs-block-basic for example, blocks don't show. Here is my code:
var editor = grapesjs.init({
// Indicate where to init the editor. You can also pass an HTMLElement
container: '#gjs',
// Get the content for the canvas directly from the element
// As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
fromElement: true,
// Size of the editor
height: '90vh',
width: 'auto',
// Disable the storage manager for the moment
storageManager: {
//type: null
id: 'gjs-', // Prefix identifier that will be used inside storing and loading
type: 'local', // Type of the storage
autosave: true, // Store data automatically
autoload: true, // Autoload stored data on init
stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
storeComponents: true, // Enable/Disable storing of components in JSON format
storeStyles: true, // Enable/Disable storing of rules in JSON format
storeHtml: true, // Enable/Disable storing of components as HTML string
storeCss: true,
},
plugins: ['gjs-blocks-flexbox', 'gjs-blocks-basic'],
pluginsOpts: {
'gjs-blocks-flexbox': {
// options
},
'gjs-blocks-basic': {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map']
}
},
// Avoid any default panel
panels: {
defaults: [
{
id: 'layers',
el: '.panel__right',
// Make the panel resizable
resizable: {
maxDim: 350,
minDim: 200,
tc: 0, // Top handler
cl: 1, // Left handler
cr: 0, // Right handler
bc: 0, // Bottom handler
// Being a flex child we need to change `flex-basis` property
// instead of the `width` (default)
keyWidth: 'flex-basis',
},
},
{
id: 'panel-switcher',
el: '.panel__switcher',
buttons: [
{
id: 'show-layers',
active: false,
label: 'Layers',
command: 'show-layers',
// Once activated disable the possibility to turn it off
togglable: true,
},
{
id: 'show-style',
active: false,
label: 'Styles',
command: 'show-styles',
togglable: true,
},
{
id: 'show-blocks',
active: true,
label: 'Blocks',
command: 'show-blocks',
togglable: true,
},
//...
]
},
{
id: 'panel-devices',
el: '.panel__devices',
buttons: [
{
id: 'device-desktop',
label: '<i class="fas fa-desktop"></i>',
command: 'set-device-desktop',
active: true,
togglable: false,
},
{
id: 'device-tablet',
label: '<i class="fas fa-tablet-alt"></i>',
command: 'set-device-tablet',
togglable: false,
},
{
id: 'device-mobile',
label: '<i class="fas fa-mobile-alt"></i>',
command: 'set-device-mobile',
togglable: false,
}
],
}
]
},
blockManager: {
//appendTo: '#blocks',
appendTo: '.blocks-container',
},
layerManager: {
appendTo: '.layers-container'
},
selectorManager: {
appendTo: '.styles-container'
},
styleManager: {
appendTo: '.styles-container',
sectors: [
{
name: 'General',
open: false,
buildProps: [
'float', 'display', 'position', 'top', 'right', 'left', 'bottom'
]
},
{
name: 'Dimension',
open: false,
buildProps: [
'width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'
],
properties: [
{
id: 'flex-width',
type: 'integer',
name: 'Width',
units: ['px', '%'],
property: 'flex-basis',
toRequire: 1,
}
]
},
{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},
// {
// name: 'Dimension',
// open: false,
// // Use built-in properties
// buildProps: ['width', 'min-height', 'padding'],
// // Use `properties` to define/override single property
// properties: [
// {
// // Type of the input,
// // options: integer | radio | select | color | slider | file | composite | stack
// type: 'integer',
// name: 'The width', // Label for the property
// property: 'width', // CSS property (if buildProps contains it will be extended)
// units: ['px', '%'], // Units, available only for 'integer' types
// defaults: 'auto', // Default value
// min: 0, // Min value, available only for 'integer' types
// }
// ]
// },
{
name: 'Extra',
open: false,
buildProps: ['background-color', 'box-shadow', 'custom-prop'],
properties: [
{
id: 'custom-prop',
name: 'Custom Label',
property: 'font-size',
type: 'select',
defaults: '32px',
// List of options, available only for 'select' and 'radio' types
options: [
{ value: '12px', name: 'Tiny' },
{ value: '18px', name: 'Medium' },
{ value: '32px', name: 'Big' },
],
}
]
}
]
},
deviceManager: {
devices: [
{
name: 'Desktop',
width: '', // default size
},
{
name: 'Tablet',
width: '480px', // this value will be used on canvas width
widthMedia: '768px', // this value will be used in CSS @media
},
{
name: 'Mobile',
width: '320px', // this value will be used on canvas width
widthMedia: '480px', // this value will be used in CSS @media
}
]
},
});
Can somebody explain me what I'm missing? I think that loading grapesjs-blocks-basic.min.js should make those blocks visible in automatic way, but I'm wrong in believing this? Please help me and put me on the right way.. many thanks in advance
Answers (2)
found the problem, was loading wrong js file.. sorry.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1691
How to use variable/function outside of the script
Hello @artf , How can i access the variable as well functions which is outside of the script. My code is like, I am using angular.js(Angula...
Issue #1141
[Question] - How to extend the existing traits and render the changes in canvas?
I am trying to write a plugin to manage all the element properties of Boostrap Blocks. If someone clicks on the button it will show button...
Issue #1514
How to add video block on blockManager
Hello All. i want to add a video block on blockmanager same as mentioned on below snapshot i am using following code for adding video block...
Issue #1325
How to disable drop for specific blocks/components
Hello, with the following code we are able to indicate if it's possible to drop other component(blocks) inside that particular component......
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.