How to reorder BlockManager Blocks?
Question
I'm trying to reorder these blocks, removing all of them from BlockManager and adding one by one in my order preference, but it's still not working.
Someone knows what is the rule to ordenate them?
Answers (3)
Don't remove them, just update and render
const bm = editor.BlockManager;
const colmBlock = bm.get('column3').set({
label: 'Clm label'
})
bm.render([
colmBlock,
//...
]);
@artf It would not be ideal to add an order option like this for blocks and panels.
bm.add('section-hero', {
label: 'Hero section',
order:1, // 1,2,3,4...
category: 'Sections',
content: '<header class="header-banner"> <div class="container-width">' +
'<div class="logo-container"><div class="logo">GrapesJS</div></div>' +
'<nav class="navbar">' +
'<div class="menu-item">BUILDER</div><div class="menu-item">TEMPLATE</div><div class="menu-item">WEB</div>' +
'</nav><div class="clearfix"></div>' +
'<div class="lead-title">Build your templates without coding</div>' +
'<div class="lead-btn">Try it now</div></div></header>',
attributes: { class: 'gjs-fonts gjs-f-hero' }
});
@JulyanoF you can re-render them in this way
const bm = editor.BlockManager;
bm.render([
bm.get('column3'),
bm.get('column2'),
bm.get('column1')
]);
or, if it's just about reordering inside their categories, you can rely on order css property as its container is flex
Related Questions and Answers
Continue research with similar issue discussions.
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 #1822
[QUESTION] - Add style sector for specific Css rule
Hey @artf , COuld you give your help on this one? I want to disable the user to able to select the wrapper block (body) but I still want to...
Issue #1864
[QUESTION] Best way to listen to changes on the final HTML?
Hi, I just had a quick question because I could not figure out how to do it or did not find an issue related to it. I am just trying to cal...
Issue #1548
QUESTION: How insert box, section, footer, header...
I'm trying to imagine how to insert a header or a section or a box... I see the blocks panel, and extra an every panel, but all I can inser...
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.