Issue #1913πŸ’¬ AnsweredOpened March 21, 2019by SylvainBigonneau2 reactions

Specifying background-size in background's properties breaks grapesjs

Quick answerby artf❀ 1

Ok, I think I found where is the issue, I'll fix it for the next release

Read full answer below ↓

Question

Using latest versions of grapesjs (0.14.55) and grapesjs-preset-webpage (0.1.10), I have configured my editor as such:

import grapesjs from 'grapesjs';
import grapesJsPresetWebpage from 'grapesjs-preset-webpage';

grapesjs.init({
    // ...
    plugins: [grapesJsPresetWebpage],
    pluginsOpts: {
      [grapesJsPresetWebpage]: {
        customStyleManager: [
          {
            id: 'deco',
            name: 'Decorations',
            open: false,
            buildProps: ['background'],
            properties: [
              {
                name: 'Background',
                property: 'background',
                properties: [{
                    name: 'Background size',
                    property: 'background-size'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  });

The library crashes with a "TypeError: values[0] is undefined" error, as referenced in this issue.

If I add all the other properties in the array, such as:

{
  property: 'background',
  properties: [
    { name: 'Image', property: 'background-image'},
    { name: 'Repeat', property:   'background-repeat'},
    { name: 'Position', property: 'background-position'},
    { name: 'Attachment', property: 'background-attachment'},
    { name: 'Size', property: 'background-size'}
  ],
}

the error disappears, but I don't need all of those properties...

Answers (3)

artfβ€’ March 24, 2019

Ok, I think I found where is the issue, I'll fix it for the next release

SylvainBigonneauβ€’ March 25, 2019

Can confirm it's fixed on v0.14.57. Thanks @artf !

lock[bot]β€’ March 27, 2020

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.