grapesjs / blocks-basic Goto Github PK

Hi,
Is it possible to update a basic-block traits?
I try to select by default the option "this window" and delete the other option.

Thanks for your help !

Problem summary

Hi @artf , I'm using grapesjs-blocks-basic but have problems with the styling of the blocks not being reflected in editor.getCss(). This leads to overlaps as in the screenshot below.

Problem details

The overlaps are caused by .gjs-cell { height: 75px }, so I thought it would be good to initialize the plugin with flexGrid: true, since this will set .gjs-cell { min-height: 75px } (see blocks.js).

plugins: ['gjs-blocks-basic'],
      pluginsOpts: {
        'gjs-blocks-basic': {
          // category: this.$scope.translation.ADMIN_WIZARDSTEP_PAGE_ELEMENTS,
          category: null,
          labelColumn1: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_COLUMN1,
          labelColumn2: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_COLUMN2,
          labelColumn3: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_COLUMN3,
          labelColumn37: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_COLUMN37,
          labelText: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_TEXT,
          labelLink: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_LINK,
          labelImage: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_IMAGE,
          labelVideo: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_VIDEO,
          labelMap: this.$scope.translation.ADMIN_WIZARDSTEP_BLOCK_MAP,
          flexGrid: true
        }
      },

When I debug the blocks being built, I can see that the correct css is attached to the blocks:

For example this ...

  toAdd('column2') && bm.add('column2', {
    label: c.labelColumn2,
    attributes: { class: 'gjs-fonts gjs-f-b2' },
    category: c.category,
    content: [...]
  });

.. will pass the following content to the BlockManager:

<div  class='gjs-row' data-gjs-droppable='.gjs-cell' data-gjs-resizable='{"tl":0,"tc":0,"tr":0,"cl":0,"cr":0,"bl":0,"br":0,"minDim":1}' data-gjs-name='Row'>
        <div  class='gjs-cell' data-gjs-draggable='.gjs-row' data-gjs-resizable='{"tl":0,"tc":0,"tr":0,"cl":0,"cr":1,"bl":0,"br":0,"minDim":1,"bc":0,"currentUnit":1,"step":0.2,"keyWidth":"flex-basis"}' data-gjs-name='Cell' data-gjs-unstylable='["width"]' data-gjs-stylable-require='["flex-basis"]'></div>
        <div  class='gjs-cell' data-gjs-draggable='.gjs-row' data-gjs-resizable='{"tl":0,"tc":0,"tr":0,"cl":0,"cr":1,"bl":0,"br":0,"minDim":1,"bc":0,"currentUnit":1,"step":0.2,"keyWidth":"flex-basis"}' data-gjs-name='Cell' data-gjs-unstylable='["width"]' data-gjs-stylable-require='["flex-basis"]'></div>
      </div>
      <style>
          
    .gjs-row {
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      flex-wrap: nowrap;
      padding: 10px;
    }
    @media (max-width: 768px) {
      .gjs-row {
        flex-wrap: wrap;
      }
    }
          
    .gjs-cell {
      min-height: 75px;
      flex-grow: 1;
      flex-basis: 100%;
    }
        </style>

However when I work with the blocks in the editor, or when I cann editor.getCss() I can see that still the wrong Css is used, e.g.

.gjs-cell{width:8%;display:table-cell;height:75px;}
@media (max-width: 768px) {
.gjs-cell{width:100%;display:block;}
.gjs-row{flex-wrap:wrap;}
}

Am I doing something wrong?

Hello,
We cannot insert any video on GrapesJS.

@artf

Hi, This is a great plugin.
I am using it for my project.
I really appreciate it.

I have only one complaint.

I am using this plugin in Japanese, and the labels for the blocks in the sidebar can be handled by the current plugin options, but when I drag and drop a block, the text, which is entered as the default value.
Specifically, I would like to be able to manage the "Insert your text here" in the plugin options.

Is it possible to add initial input values for text blocks and link text blocks to the plugin options?

This can be reproduced inside the editor bundled in this repo - by opening the index.html file in a browser.

Steps:

1. Drag one of the layout components onto the canvas, e.g.: the "1 Column" component.
2. Open the HTML code viewer by pressing the </> button.
3. Notice that the @media (max-width: 768px) { .gjs-cell ... } definition will be duplicated.
4. Now drag another layout component onto the canvas.

RESULT: the @media... CSS definition will now be multiplied 4 times.
EXPECTED: There should only be one unique CSS definition per component element/class, and even if multiple components of the same type are dragged onto the canvas.
Note that the non-media definitions don't get multiplied.

Is there some option to accept a video URL from YouTube Provider instead of video ID?

When I put a 2 columns component in the text area, I can then resize them using the small squares on their edges.
Afterwards, I save these components in my database by fetching the grapesjs data through:

const components = editor.getComponents();
const css = editor.getCss();

When I load them up using:

editor.setComponents(components);
editor.setStyle(css);

The columns can no longer be resized, while other types of components still can. If I then add another "2-columns" block, these columns that were just added can be resized. But not the ones that were loaded through setComponents

I tested it on the demonstration page (the one in gh-pages) and the error happens there too.

If I set the canvas html via editor.setComponents(someHtml) the styles are not loaded. Once I drag a block into the canvas, the styles for that particular block are loaded and everything then gets the proper style.

Is that possible to add an option to change the category label from 'Basic' to other?

Please see the following pen: https://codepen.io/mapsmarketing/pen/bGZeJMg @artf

How to reproduce:
Add a video widget to the editor and you will notice you get no settings. It appears in the demo page, but doesn't actually work using the plugin.

From the demo page:
https://grapesjs.com/demo.html

From the Codepen:

pluginsOpts: {
// 'gjs-preset-newsletter': {
// inlineCss: true,
// // ... other options
// },
basicBlocks: {
blocks:['column1', 'column2', 'column3', 'column3-7', 'text', 'image', 'video'],
},
}
Here I am trying to remove map but still map is visible.

After npm i we can see that the level of vulnerabilities is unacceptable.

added 646 packages from 383 contributors and audited 762 packages in 7.892s
found 724 vulnerabilities (353 low, 23 moderate, 348 high)
  run `npm audit fix` to fix them, or `npm audit` for details

I'm trying to fix the problem, at least locally. It will take a long time because every single specified package has a vulnerability.

Hello, I am trying to add some additional settings to already existing blocks, but I cannot find any documentation about that. I have tried to take another approach but no use, nothing worked. any help is appreciated.

Hi Team,

I have 2 components, i am using column2 component to place those 2 components. Initially drag and drop column2 layout component then placing my components in to those columns one by one, when i drag and drop one component which occupies 70%(column width) of width in the row and another column taking 30% width. I found that issue is in the blocks.js file for layout column2 we haven't declare width as 50% so that it is not taking proper equal width. Tried to modified blocks.js file and i am not able to generate grapesjs-blocks-basic.min in dest folder. Tried to modified grapesjs-blocks-basic.min file directly and tested which is working fine. Can you please update the blocks.js file accordingly.

Below is the modified and working code for column2 in grapesjs-blocks-basic.min

h("column2")&&l.add("column2",{label:n.labelColumn2,attributes:{class:"gjs-fonts gjs-f-b2"},category:n.category,content:"<div "+w+">\n <div "+k+' style="'+(o?"flex-basis":"width")+': 50%;">\n <div '+k+' style="'+(o?"flex-basis":"width")+': 50%;">\n \n '+(r?"<style>\n "+u+"\n "+b+"\n "+f+"\n "+g+"\n </style>":"")}

Please do the need full.

Thanks,
Sreenivasulu C

import React, { PureComponent, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import _ from 'lodash';
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
import './grapes.css';

class FileName extends PureComponent {
static propTypes = {}

static defaultProps = {}

componentDidMount = () => {
grapesjs.init({
fromElement: 1,
container: '#gjs',
height: '700px',
width: 'auto',
plugins: [
'gjs-blocks-basic',
],
pluginsOpts8: {},
});
}

render() {
return (

Shouldn't the plugin contain blocks for paragraph P and heading H1-H6 tags? Using the text block always creates a <div>.

@artf I think you may have any issue with v. 0.1.8
I'm loading preset-webpage into my project and trying to drop a column onto the editor. loads an empty div with no class row or cell. So I started looking into it. I'm loading the 0.1.8 package and preset-webpage includes the min.js file. So I switched it with v. 0.1.7 and dropping the columns started working.
First I was confused because your demo shows the latest grapesjs version, but it's not using the latest preset-webpage actually and your demo is actually using 0.1.7, which is how I found out what was wrong.

This is an issue originally opened here: GrapesJS/grapesjs#471
I created a patch with a fix ready to be pushed. How can I contribute it?