Grapesjs: Adding new components to Block Manager

Created on 6 Mar 2019 · 7Comments · Source: artf/grapesjs

I'm trying to add multiple components which are in my canvas into the block manager but I believe because of an id issue they're not visible properly. What exactly does the id refer to?
Here's my code:

  const bm = editor.BlockManager;
  bm.add("social-sign-in-butttons-section", {
    label: "Facebook sign-in",
    content:
      '<div class="pull-left social-sign-in-button padding-right-small" data-gjs-droppable=".fa .fa-facebook-square">' +
      '<img data-gjs-draggable=".social-sign-in-button" src="facebook.png" id="facebook" title="facebook" class="fa fa-facebook-square fa-3x ">' +
      "</img>" +
      "</div>",
    attributes: {
      class: "fa fa-facebook"
    }
  });

  bm.add("the-row-block", {
    label: "GooglePlus sign-in",
    content:
      '<div class="pull-left social-sign-in-button padding-right-small">' +
      '<img src="google.png" id="googleplus" title="googleplus" class="fa fa-google-plus-square fa-3x ">' +
      "</img>" +
      "</div>",
    attributes: {
      class: "fa fa-google-plus-square"
    }
  });

  bm.add("the-row-block", {
    label: "LinkedIn sign-in",
    content:
      '<div class="pull-left social-sign-in-button padding-right-small">' +
      '<img src="linkedin.png" id="linkedin" title="linkedin" class="fa fa-linkedin-square fa-3x">' +
      "</img>" +
      "</div>",
    attributes: {
      class: "fa fa-linkedin-square"
    }
  });

outdated

Source

sakshigarg9

All 7 comments

Hi,

Your LinkedIn sign-in id is the same that your GooglePlus sign-in.
The key of block must be unique.

Bye

WebEtSolutions on 6 Mar 2019

👍1

The id is used internally to track each block individually. As @WebEtSolutions said you should put unique identifiers to each new block

arthuralmeidap on 6 Mar 2019

👍1

OHH alright, worked, thanks!

sakshigarg9 on 7 Mar 2019

👍1

Also, I'm trying to restrict dragging these components in only the social class section. The html of the same goes as follows:

<div id="social-sign-in-buttons-section" class="social" >
                <div class="pull-left social-sign-in-button padding-right-small">
                  <img src="facebook.png" id="facebook" title="facebook"  data-gjs-resizable="false" data-gjs-editable="false" data-gjs-draggable="div[class~='social']"></img>
                </div>
                <div class="pull-left social-sign-in-button padding-right-small">
                  <img src="google.png" id="googleplus" title="googleplus" data-gjs-resizable="false" data-gjs-editable="false" data-gjs-draggable="div[class~='social']"></img>
                </div>
                <div class="pull-left social-sign-in-button padding-right-small">
                  <img src="linkedin.png" id="linkedin" title="linkedin" data-gjs-resizable="false" data-gjs-editable="false" data-gjs-draggable="div[class~='social']"></img>
                </div>
         </div>

So I've accordingly created my components in the block manager and defined the droppable and draggable properties but the components are able to be dragged and dropped anywhere in the canvas :

bm.add("facebook-signin", {
    label: "Facebook sign-in",
    content:
      '<div id="social-sign-in-buttons-section" class="social" data-gjs-droppable="social-signin">' +
      '<div class="pull-left social-sign-in-button padding-right-small" data-gjs-droppable=".fa .fa-facebook-square">' +
      '<img class="social-signin" data-gjs-draggable="social" src="facebook.png" id="facebook" title="facebook" >' +
      "</img>" +
      "</div>" +
      "</div>",
    attributes: {
      class: "fa fa-facebook"
    }
  });

  bm.add("googleplus-signin", {
    label: "GooglePlus sign-in",
    content:
      '<div id="social-sign-in-buttons-section" class="social" data-gjs-droppable=".social-signin">' +
      '<div class="pull-left social-sign-in-button padding-right-small" >' +
      '<img class="social-signin" data-gjs-draggable=".social" src="google.png" id="googleplus" title="googleplus">' +
      "</img>" +
      "</div>" +
      "</div>",
    attributes: {
      class: "fa fa-google-plus-square"
    }
  });

  bm.add("linkedin-signin", {
    label: "LinkedIn sign-in",
    content:
      '<div id="social-sign-in-buttons-section" class="social" data-gjs-droppable=".social-signin">' +
      '<div class="pull-left social-sign-in-button padding-right-small">' +
      '<img class="social-signin" data-gjs-draggable=".social" src="linkedin.png" id="linkedin" title="linkedin">' +
      "</img>" +
      "</div>" +
      "</div",
    attributes: {
      class: "fa fa-linkedin-square"
    }
  });

sakshigarg9 on 7 Mar 2019

as far as I can see, for the droppable prop, you can only define on which HTML elements are allowed to drop your block. Since your social section is a div element, almost everywhere would be possible to drop your block.

maybe @artf , has better ideas about it.

arthuralmeidap on 7 Mar 2019

@sakshigarg9 you should put data-gjs-draggable=".social" on the root element of the block, not on the inner image.

BTW don't reopen an issue just to talk about another problem, create a new one next time...