GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.37k stars 4.05k forks source link

Could anyone give me a proper guideline for making cell components in blockmanager which add others components inside them (Like coumn1, column3/7 and vise versa) #2221

Closed nikhilmate closed 5 years ago

nikhilmate commented 5 years ago

WARNING

READ and FOLLOW next 5 steps, then REMOVE them before posting the issue

  1. Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
  2. Use the GitHub Issues EXCLUSIVELY for BUGS, FEATURE REQUESTS or QUESTIONS. Prefix the title of the issue with its context, eg. [Bug]: ....
  3. Do a quick SEARCH first, to see if someone else didn't open the same issue
  4. DON'T ASK to create examples/code for you, read DOCS and APIs first, then you can post what you have tried (we'd like to see your code) and what you're unable to achieve
  5. All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED

You're submitting a BUG

  1. Are you using the latest release (older versions are NOT supported)?
    1. If you're not sure, type grapesjs.version in console and press ENTER
  2. Are you facing the bug with your local copy of GrapesJS or with the current demo?
  3. If a local copy
    1. Indicate all informations about your OS, browser and GrapesJS version.
    2. Are you able to reproduce the bug from the demo?
  4. What is the expected behavior?
  5. What happens instead?
  6. If you're able to reproduce the bug indicate all the necessary steps
  7. Attach screenshots (using KAP/LICEcap), screencasts or live demo
    1. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
    2. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl

You're submitting a FEATURE REQUEST

  1. Be sure to work on the latest version, as the feature might be already there
  2. Keep in mind that the feature should be considered valid to use for everyone, not only for your case
artf commented 5 years ago

https://grapesjs.com/docs/modules/Blocks.html

smik3 commented 5 years ago

I am also getting really confused about this. For example, how do you decide where to put the html markup, in the block content property or in the component view property? Also in the basic-blocks plugin it defines rows/cells as classes instead of using the default DomC components. Should we be doing that when creating multi-component blocks?

artf commented 5 years ago

For example, how do you decide where to put the html markup, in the block content property or in the component view property?

It depends, but I highly suggest to adopt more a component-oriented approach, so blocks could only be a mix of already defined components.

Blocks.add('...', {
    ...
    content: {
        type: 'component-type-1',
        components: [
            { type: 'component-type-2' },
            { type: 'component-type-2', someProp: '...' },
        ]
    }
})
smik3 commented 5 years ago

Yeah, after 3-4 re-writes I've managed to get to the approach there, haha. Would it be possible for that snippet to be added to the docs? It's taken a few days of searching through issues to see that it is even possible to pass an array of components to the content property