Issue #682💬 AnsweredOpened December 26, 2017by chiqui3d2 reactions

Creating BLOCKs with settings like Style Manager

快速解答by artf1

Hi @chiqui3d you can create blocks with an object as a content with all available properties

Read full answer below ↓

Question

Hello! I would like to know if you can create BLOCKs with options such like style manager, i. e. not drag, showing options in the same sidebar.

Thanks

Answers (3)

artfDecember 27, 2017

Hi @chiqui3d you can create blocks with an object as a content with all available properties

blockManager.add('my-block', {
  label: 'Simple block',
  content: {
    // Component properties
    removable: false,
	draggable: false,
	...
  }
})
artfJanuary 31, 2018

@artf I don't want it to be draggable and I don't want to drag it into the canvas. I just want to click on the Link Replace block button, this show an input to put URL and a submit button (these options as Style Manager does, which shows the options inside the panel).

Ok, this is has nothing to do with Blocks then For your case, I'd suggest adding a new button with a custom command which just opens a Modal with your stuff and executes your logic

chiqui3dJanuary 29, 2018

Hello @artf , Nothing happens, I mean that I have created a block, and clicking doesn't do anything, componets is not the attribute to display the html?

here my code:

 bm.add('link-replace', {
        name: 'link-replace',
        category: 'Extra',
        label: 'Link Replace',
        content: {
            removable: false,
            draggable: false,
            droppable: false,
            script: "console.log('the element', this)",
            components: "<h2>Test Block</h2>",
            content: "<h2>Test Block</h2>",
            traits: [{
                label: 'Link Replace',
                name: 'link-eplace',
                changeProp: 1,
            }],
            style: {
                width: '100px',
                height: '100px'
            }
        },
        attributes: {
            title: 'Link Replace',
            class: 'fa fa-external-link'
        }
    });

The only thing I want to do, is to show an input URL type, for replace all links of canvas. or is there another better way for this?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.