Using block manager how to have a slider panel with two tabs - each tab having its own blocks ?

[chetan-bbc]

We have a requirement to have two tabs on a panel. First tab will have standard controls (blocks). Second tab will have custom controls (blocks).

We initialized grapesjs with below code and with block-manager blocks appeneding to ".myblocks".

grapesjs.init({
      container: containerId,
      fromElement: true,
      height: height,
      width: width,
      styleManager: { clearProperties: true },
      storageManager: false,
      panels: disablePanel ? { defaults: [] }: {},
      blockManager: {
        appendTo: appendBlockTo,
        blocks: [
        ],
      },
    });

i tried to add the blocks to visible tab and remove blocks from the hidden tab.
when user click on any tab, respective tab blocks will be added and other tabs blocks will be removed. Below is the high level code,

<div class="main">
	<div *ngIf="value === true">
		<bootstrap-tab-one class="myblocks" (click)="showhide()"></bootstrap-tab-one>
	</div>
	<div *ngIf="value === false">
		<bootstrap-tab-two class="myblocks" (click)="showhide()"></bootstrap-tab-two>
	</div>
</div>

after adding and removing blocks as mentioned above, it will only reflect the controls on the first tab, but does not reflect on the second tab when clicked.

Will it work having class="myblocks" on two div, with either one always visible ?

OR

Can we build the control panel having two tabs using different features of grapesjs?

Please let me know if you need more detail. Thank you for your help in advance.

[mosh-tudor]

@chetan-bbc

Can we build the control panel having two tabs using different features of grapesjs?

You can do it using https://grapesjs.com/docs/modules/Blocks.html#customization

Something like this

const editor = grapesjs.init({
  // ...
  blockManager: {
    // ...
    custom: true,
  },
});


editor.on('block:custom', (props: TCustomBlocksProps) => {
  <Tabs className={styles.tabs}>
    <Tabs.Pane tab={'Elements'} key={'elements'} active={true}>
      <CustomBlocksElements bm={props.bm} dragStart={props.dragStart} dragStop={props.dragStop} />
    </Tabs.Pane>
    <Tabs.Pane tab={'Sections'} key={'sections'}>
      <CustomBlocksSections bm={props.bm} dragStart={props.dragStart} dragStop={props.dragStop} />
    </Tabs.Pane>
  </Tabs>
});

Screen.Recording.2024-12-04.at.13.48.29.mov