[Bug]: Body -> Decorations -> Background-image

[ghost]

Version 0.14.25 | Local copy GrapesJS Tested in: Chrome 68, Firefox 61

Add a background image in "Body (Selected #wrapper) -> Decorations -> Background -> Layer # -> Image", save to db, refresh page, load from db, blank background. Same with image or color.

Adding background

After refresh page

and, how can add a background image gif or video? need to pull a request?

Thanks.

[artf]

I need to know what do you store in DB and how do you load it.

[ghost]

Hi, this is the code.

<div id="builder"></div>

<script type="text/javascript">

    var token = "{{ csrf_token() }}";

    var editor = grapesjs.init({
        fromElement: 1,
        clearOnRender: true,
        container: '#builder',
        plugins: ['gjs-preset-newsletter', 'gjs-blocks-basic', 'gjs-blocks-flexbox'],
        pluginsOpts: {
            'gjs-blocks-basic': { category: false },
        },

        storageManager: {
            autosave: false,
            setStepsBeforeSave: 1,
            type: 'remote',
            urlStore: '/dashboard/pages/builder/' + {{ $page->id }},
            urlLoad: '/dashboard/pages/builder/' + {{ $page->id }} + '/load',
            contentTypeJson: true,
            params: { _token:token },
        },

        assetManager: {
            assets: {!! !empty($page->builder['gjs-assets']) ? $page->builder['gjs-assets'] : '[]' !!},
            storeOnChange : true,
            storeAfterUpload : true,
            upload: '/dashboard/pages/builder/' + {{ $page->id }} + '/postimages',
            uploadName: 'images',
            params: { _token:token, enctype:'multipart/form-data' },
            autoAdd: 1,
        },
    });

    var assets = editor.AssetManager.getAll();

    assets.on('remove', function(asset) {

        var removefile = asset.get('src').split('/').reverse()[0];

        $.ajax({
            url: '/dashboard/pages/builder/' + {{ $page->id }} + '/postimages',
            type: 'POST',
            data: { file:removefile, _token:token },
            success: function(response){
                assets.remove(asset.get('src'));
            }
        });
    });

    editor.Panels.addButton
    ('options',
        [{
            id: 'save-db',
            className: 'fa fa-floppy-o',
            command: 'save-db',
            attributes: {title: 'Save'}
        }]
    );

    editor.Commands.add
    ('save-db',
        {
            run: function(editor, sender)
            {
                sender && sender.set('active');
                editor.store();
            }
    });

        editor.Panels.removeButton("options", ["export-template", "gjs-toggle-images", "gjs-open-import-template"]);

    editor.on('storage:load', function(e) {
        console.log('Loaded ', e);
    });

    editor.on('storage:store', function(e) {
        console.log('Stored ', e);
    });

    var btnClass = editor.Panels.addButton
    ('options',
        [{
            id: 'add-class',
            className: 'fa fa-plus',
            command: 'add-class',
            attributes: {title: 'Add Clicker Zone'}
        }]
    );

    var cmdClass = editor.Commands.add
    ('add-class',
        {
            run: function(editor, sender)
            {
                var componentModel = editor.getSelected();
                componentModel.addClass('open-box');
                sender && sender.set('active', true);
            },

            stop: function(editor, sender)
            {
                var componentModel = editor.getSelected();
                componentModel.removeClass('open-box');
                sender && sender.set('active', false);
            }
        }
    );

</script>

This is the php code: store

public function builderPost(Page $page, Request $request)
    {
        if (!empty($page->exists) AND Gate::allows('page-access', $page)) {

            $page->builder = json_encode($request->except('_token'));
            $page->save();

            return ['status' => 'success', 'message' => 'Your Page was successfully saved!'];
        }

        Session::flash('flashSession', ['status' => 'danger', 'message' => 'Error, you cannot build this Page!']);
        return redirect('dashboard/pages');
    }

for load

public function builderLoad(Page $page)
    {
        if (!empty($page->exists) AND Gate::allows('page-access', $page)) {

            return json_decode($page->builder, true);
        }

        Session::flash('flashSession', ['status' => 'danger', 'message' => 'Error, you cannot build this Page!']);
        return redirect('dashboard/pages');

    }

Thanks.

[ghost]

forgot the stored data, sorry

i have a route preview loading the html and css, the background is loaded, but not in the builder

"{\"gjs-assets\":\"[{\\\"type\\\":\\\"image\\\",\\\"src\\\":\\\"http:\\/\\/pages.test\\/uploads\\/images\\/2\\/oALdpg\\/afacb1b9da2ff84435ca760a0a307797.jpeg\\\",\\\"unitDim\\\":\\\"px\\\",\\\"height\\\":0,\\\"width\\\":0}]\",\"gjs-css\":\"* { box-sizing: border-box; } body {margin: 0;}body{background-image:url(http:\\/\\/adoffers.test\\/uploads\\/images\\/2\\/oALdpg\\/afacb1b9da2ff84435ca760a0a307797.jpeg);background-repeat:repeat;background-position:left top;background-attachment:scroll;background-size:auto;}\",\"gjs-styles\":\"[]\",\"gjs-html\":null,\"gjs-components\":\"[]\"}"

this bug/error is only in the builder, but, if i change something in the builder the background disappear from the route preview, this is the modified data after add the background-image

"{\"gjs-assets\":\"[{\\\"type\\\":\\\"image\\\",\\\"src\\\":\\\"http:\\/\\/pages.test\\/uploads\\/images\\/2\\/oALdpg\\/afacb1b9da2ff84435ca760a0a307797.jpeg\\\",\\\"unitDim\\\":\\\"px\\\",\\\"height\\\":0,\\\"width\\\":0}]\",\"gjs-css\":\"* { box-sizing: border-box; } body {margin: 0;}.row{display:flex;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;}.cell{min-height:75px;flex-grow:1;flex-basis:100%;}.c1253{padding:10px;}@media (max-width: 768px){.row{flex-wrap:wrap;}.row{flex-wrap:wrap;}}\",\"gjs-styles\":\"[{\\\"selectors\\\":[{\\\"name\\\":\\\"row\\\",\\\"label\\\":\\\"row\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"selectorsAdd\\\":\\\"\\\",\\\"style\\\":{\\\"display\\\":\\\"flex\\\",\\\"justify-content\\\":\\\"flex-start\\\",\\\"align-items\\\":\\\"stretch\\\",\\\"flex-wrap\\\":\\\"nowrap\\\",\\\"padding-top\\\":\\\"10px\\\",\\\"padding-right\\\":\\\"10px\\\",\\\"padding-bottom\\\":\\\"10px\\\",\\\"padding-left\\\":\\\"10px\\\"},\\\"mediaText\\\":\\\"\\\",\\\"state\\\":\\\"\\\",\\\"stylable\\\":true,\\\"atRuleType\\\":\\\"\\\",\\\"singleAtRule\\\":0,\\\"important\\\":0},{\\\"selectors\\\":[{\\\"name\\\":\\\"row\\\",\\\"label\\\":\\\"row\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"selectorsAdd\\\":\\\"\\\",\\\"style\\\":{\\\"flex-wrap\\\":\\\"wrap\\\"},\\\"mediaText\\\":\\\"(max-width: 768px)\\\",\\\"state\\\":\\\"\\\",\\\"stylable\\\":true,\\\"atRuleType\\\":\\\"media\\\",\\\"singleAtRule\\\":0,\\\"important\\\":0},{\\\"selectors\\\":[{\\\"name\\\":\\\"cell\\\",\\\"label\\\":\\\"cell\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"selectorsAdd\\\":\\\"\\\",\\\"style\\\":{\\\"min-height\\\":\\\"75px\\\",\\\"flex-grow\\\":\\\"1\\\",\\\"flex-basis\\\":\\\"100%\\\"},\\\"mediaText\\\":\\\"\\\",\\\"state\\\":\\\"\\\",\\\"stylable\\\":true,\\\"atRuleType\\\":\\\"\\\",\\\"singleAtRule\\\":0,\\\"important\\\":0},{\\\"selectors\\\":[{\\\"name\\\":\\\"row\\\",\\\"label\\\":\\\"row\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"selectorsAdd\\\":\\\"\\\",\\\"style\\\":{\\\"flex-wrap\\\":\\\"wrap\\\"},\\\"mediaText\\\":\\\"(max-width: 768px)\\\",\\\"state\\\":\\\"\\\",\\\"stylable\\\":true,\\\"atRuleType\\\":\\\"media\\\",\\\"singleAtRule\\\":0,\\\"important\\\":0},{\\\"selectors\\\":[{\\\"name\\\":\\\"c1230\\\",\\\"label\\\":\\\"c1230\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":false,\\\"protected\\\":false}],\\\"selectorsAdd\\\":\\\"\\\",\\\"style\\\":{\\\"padding\\\":\\\"10px\\\"},\\\"mediaText\\\":\\\"\\\",\\\"state\\\":\\\"\\\",\\\"stylable\\\":true,\\\"atRuleType\\\":\\\"\\\",\\\"singleAtRule\\\":0,\\\"important\\\":0},{\\\"selectors\\\":[{\\\"name\\\":\\\"c1253\\\",\\\"label\\\":\\\"c1253\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":false,\\\"protected\\\":false}],\\\"selectorsAdd\\\":\\\"\\\",\\\"style\\\":{\\\"padding\\\":\\\"10px\\\"},\\\"mediaText\\\":\\\"\\\",\\\"state\\\":\\\"\\\",\\\"stylable\\\":true,\\\"atRuleType\\\":\\\"\\\",\\\"singleAtRule\\\":0,\\\"important\\\":0}]\",\"gjs-html\":\"<div class=\\\"row\\\"><div class=\\\"cell\\\"><\\/div><div class=\\\"cell\\\"><div class=\\\"c1253\\\">test<\\/div><\\/div><\\/div>\",\"gjs-components\":\"[{\\\"tagName\\\":\\\"div\\\",\\\"type\\\":\\\"\\\",\\\"name\\\":\\\"\\\",\\\"removable\\\":true,\\\"draggable\\\":true,\\\"droppable\\\":\\\".cell\\\",\\\"badgable\\\":true,\\\"stylable\\\":true,\\\"stylable-require\\\":\\\"\\\",\\\"unstylable\\\":\\\"\\\",\\\"highlightable\\\":true,\\\"copyable\\\":true,\\\"resizable\\\":{\\\"tl\\\":0,\\\"tc\\\":0,\\\"tr\\\":0,\\\"cl\\\":0,\\\"cr\\\":0,\\\"bl\\\":0,\\\"br\\\":0,\\\"minDim\\\":1},\\\"editable\\\":false,\\\"layerable\\\":true,\\\"selectable\\\":true,\\\"hoverable\\\":true,\\\"void\\\":false,\\\"state\\\":\\\"\\\",\\\"status\\\":\\\"\\\",\\\"content\\\":\\\"\\\",\\\"icon\\\":\\\"\\\",\\\"style\\\":\\\"\\\",\\\"attributes\\\":{},\\\"classes\\\":[{\\\"name\\\":\\\"row\\\",\\\"label\\\":\\\"row\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"script\\\":\\\"\\\",\\\"traits\\\":[{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"id\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]},{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"title\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]}],\\\"propagate\\\":\\\"\\\",\\\"custom-name\\\":\\\"Row\\\",\\\"components\\\":[{\\\"tagName\\\":\\\"div\\\",\\\"type\\\":\\\"\\\",\\\"name\\\":\\\"\\\",\\\"removable\\\":true,\\\"draggable\\\":\\\".row\\\",\\\"droppable\\\":true,\\\"badgable\\\":true,\\\"stylable\\\":true,\\\"stylable-require\\\":[\\\"flex-basis\\\"],\\\"unstylable\\\":[\\\"width\\\"],\\\"highlightable\\\":true,\\\"copyable\\\":true,\\\"resizable\\\":{\\\"tl\\\":0,\\\"tc\\\":0,\\\"tr\\\":0,\\\"cl\\\":0,\\\"cr\\\":1,\\\"bl\\\":0,\\\"br\\\":0,\\\"minDim\\\":1,\\\"bc\\\":0,\\\"keyWidth\\\":\\\"flex-basis\\\",\\\"currentUnit\\\":1,\\\"step\\\":0.2},\\\"editable\\\":false,\\\"layerable\\\":true,\\\"selectable\\\":true,\\\"hoverable\\\":true,\\\"void\\\":false,\\\"state\\\":\\\"\\\",\\\"status\\\":\\\"\\\",\\\"content\\\":\\\"\\\",\\\"icon\\\":\\\"\\\",\\\"style\\\":\\\"\\\",\\\"attributes\\\":{},\\\"classes\\\":[{\\\"name\\\":\\\"cell\\\",\\\"label\\\":\\\"cell\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"script\\\":\\\"\\\",\\\"traits\\\":[{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"id\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]},{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"title\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]}],\\\"propagate\\\":\\\"\\\",\\\"custom-name\\\":\\\"Column\\\",\\\"components\\\":[],\\\"open\\\":false},{\\\"tagName\\\":\\\"div\\\",\\\"type\\\":\\\"\\\",\\\"name\\\":\\\"\\\",\\\"removable\\\":true,\\\"draggable\\\":\\\".row\\\",\\\"droppable\\\":true,\\\"badgable\\\":true,\\\"stylable\\\":true,\\\"stylable-require\\\":[\\\"flex-basis\\\"],\\\"unstylable\\\":[\\\"width\\\"],\\\"highlightable\\\":true,\\\"copyable\\\":true,\\\"resizable\\\":{\\\"tl\\\":0,\\\"tc\\\":0,\\\"tr\\\":0,\\\"cl\\\":0,\\\"cr\\\":1,\\\"bl\\\":0,\\\"br\\\":0,\\\"minDim\\\":1,\\\"bc\\\":0,\\\"keyWidth\\\":\\\"flex-basis\\\",\\\"currentUnit\\\":1,\\\"step\\\":0.2},\\\"editable\\\":false,\\\"layerable\\\":true,\\\"selectable\\\":true,\\\"hoverable\\\":true,\\\"void\\\":false,\\\"state\\\":\\\"\\\",\\\"status\\\":\\\"\\\",\\\"content\\\":\\\"\\\",\\\"icon\\\":\\\"\\\",\\\"style\\\":\\\"\\\",\\\"attributes\\\":{},\\\"classes\\\":[{\\\"name\\\":\\\"cell\\\",\\\"label\\\":\\\"cell\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":1,\\\"protected\\\":false}],\\\"script\\\":\\\"\\\",\\\"traits\\\":[{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"id\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]},{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"title\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]}],\\\"propagate\\\":\\\"\\\",\\\"custom-name\\\":\\\"Column\\\",\\\"components\\\":[{\\\"tagName\\\":\\\"div\\\",\\\"type\\\":\\\"text\\\",\\\"name\\\":\\\"\\\",\\\"removable\\\":true,\\\"draggable\\\":true,\\\"droppable\\\":false,\\\"badgable\\\":true,\\\"stylable\\\":true,\\\"stylable-require\\\":\\\"\\\",\\\"unstylable\\\":\\\"\\\",\\\"highlightable\\\":true,\\\"copyable\\\":true,\\\"resizable\\\":false,\\\"editable\\\":true,\\\"layerable\\\":true,\\\"selectable\\\":true,\\\"hoverable\\\":true,\\\"void\\\":false,\\\"state\\\":\\\"\\\",\\\"status\\\":\\\"selected\\\",\\\"content\\\":\\\"\\\",\\\"icon\\\":\\\"\\\",\\\"style\\\":{},\\\"attributes\\\":{},\\\"classes\\\":[{\\\"name\\\":\\\"c1253\\\",\\\"label\\\":\\\"c1253\\\",\\\"type\\\":1,\\\"active\\\":true,\\\"private\\\":false,\\\"protected\\\":false}],\\\"script\\\":\\\"\\\",\\\"traits\\\":[{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"id\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]},{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"title\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]}],\\\"propagate\\\":\\\"\\\",\\\"activeOnRender\\\":0,\\\"components\\\":[{\\\"tagName\\\":\\\"\\\",\\\"type\\\":\\\"textnode\\\",\\\"name\\\":\\\"\\\",\\\"removable\\\":0,\\\"draggable\\\":0,\\\"droppable\\\":false,\\\"badgable\\\":true,\\\"stylable\\\":true,\\\"stylable-require\\\":\\\"\\\",\\\"unstylable\\\":\\\"\\\",\\\"highlightable\\\":0,\\\"copyable\\\":0,\\\"resizable\\\":false,\\\"editable\\\":0,\\\"layerable\\\":true,\\\"selectable\\\":true,\\\"hoverable\\\":true,\\\"void\\\":false,\\\"state\\\":\\\"\\\",\\\"status\\\":\\\"\\\",\\\"content\\\":\\\"test\\\",\\\"icon\\\":\\\"\\\",\\\"style\\\":\\\"\\\",\\\"attributes\\\":{},\\\"classes\\\":[],\\\"script\\\":\\\"\\\",\\\"traits\\\":[{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"id\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]},{\\\"type\\\":\\\"text\\\",\\\"label\\\":\\\"\\\",\\\"name\\\":\\\"title\\\",\\\"min\\\":\\\"\\\",\\\"max\\\":\\\"\\\",\\\"unit\\\":\\\"\\\",\\\"step\\\":1,\\\"value\\\":\\\"\\\",\\\"default\\\":\\\"\\\",\\\"placeholder\\\":\\\"eg. Text here\\\",\\\"changeProp\\\":0,\\\"options\\\":[]}],\\\"propagate\\\":\\\"\\\",\\\"components\\\":[]}],\\\"open\\\":0}],\\\"open\\\":1}],\\\"open\\\":1}]\"}"

the asset is loaded

assetManager: {
            assets: [{"type":"image","src":"http://pages.test/uploads/images/2/oALdpg/afacb1b9da2ff84435ca760a0a307797.jpeg","unitDim":"px","height":0,"width":0}],
            storeOnChange : true,

[artf]

@yosoyfran ok but there is one thing that is not clear for me, is it just about the background or all of your content? I mean, if you add some block inside, save and refresh, you see them correctly, right? If you completely don't see anything of your content, check the load request via inspector

[ghost]

@artf This problem is only in the "body" (Selected #wrapper) background, the content in the builder is ok, please check this video gift link

Would be awesome if you add the options, Decorations -> background -> add layer -> [image, video, color], opacity/transparency. (for ex: i wanna add a video (layer 1) and image/color (layer 2) with transparency in front, for effect).

Thank you for your time.

[v8jupiter]

Have same issue.

[artf]

Ok thanks for the video @yosoyfran I'll try to figure it out was is going on there

[ageir]

I'm having the exact same problem. The background isn't reloaded. But the data sent back from php to the load function is correct and contains the background styles. All other content are preserved and ok.

Also when clearing the canvas (with the trashcan icon) it doesn't clear the background styles, i think that might be related. You can test it on https://grapesjs.com/demo.html Set a background image and press clear canvas. The background is still there.

[maryia-kabash]

As a workaround for body background I use the following actions:

• save body background to DB separately from components and styles, via editor.DomComponents.getWrapper().attributes.style
• when template is loaded set the style via editor.DomComponents.getWrapper().setStyle(/*set proper styles*/)
• clear canvas with editor.DomComponents.getWrapper().setStyle('') , but this doesn't clear background from traits

[artf]

Also when clearing the canvas (with the trashcan icon) it doesn't clear the background styles, i think that might be related. You can test it on grapesjs.com/demo.html Set a background image and press clear canvas. The background is still there.

mmmm I'd say it's just because the clear canvas command doesn't touch wrapper's style (it's about adding the line suggested by @maryia-kabash in CanvasClear, could be an easy PR), so not related

BTW I've added this issue for the Next release

[artf]

Guys, can you try to use this option and let me know if it fixes the issue:

grapesjs.init({
    //...
    domComponents: { storeWrapper: 1 },
})

[ghost]

@artf Yes the background is fixed, but, when i save and refresh the content is missing (but i can see all the content in the layers section). Even deleting the background the content is missing.

[artf]

@yosoyfran can you check what do you load? The main difference with that option is that the stored components key is not an array of components anymore ([{type: 'header', ...}, {...}]) but a component itself, the wrapper ({ type: 'wrapper', components: [{type: 'header', ...}, {...}], ... })

[v8jupiter]

When template loaded again to editor no content inside only background displayed. storeWrapper - enabled grapesjs.init({ //... domComponents: { storeWrapper: 1 },

Please look at this video - https://youtu.be/4lF4wdxfI0I

data from db: {"gjs-assets":"[]","gjs-css":"* { box-sizing: border-box; } body {margin: 0;}body{background-color:#d5bebe;}.c862{padding:10px;}","gjs-styles":"[{\"selectors\":[{\"name\":\"c843\",\"label\":\"c843\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"padding\":\"10px\"},\"mediaText\":\"\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"\",\"singleAtRule\":0,\"important\":0},{\"selectors\":[{\"name\":\"c862\",\"label\":\"c862\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"selectorsAdd\":\"\",\"style\":{\"padding\":\"10px\"},\"mediaText\":\"\",\"state\":\"\",\"stylable\":true,\"atRuleType\":\"\",\"singleAtRule\":0,\"important\":0}]","gjs-html":"<div class=\"c862\"><p>Insert your text here</p></div>","gjs-components":"{\"tagName\":\"div\",\"type\":\"\",\"name\":\"\",\"removable\":false,\"draggable\":false,\"droppable\":true,\"badgable\":true,\"stylable\":[\"background\",\"background-color\",\"background-image\",\"background-repeat\",\"background-attachment\",\"background-position\",\"background-size\"],\"stylable-require\":\"\",\"unstylable\":\"\",\"highlightable\":true,\"copyable\":false,\"resizable\":false,\"editable\":false,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"selected\",\"content\":\"\",\"icon\":\"\",\"style\":{\"background-color\":\"#d5bebe\"},\"classes\":[],\"script\":\"\",\"attributes\":{\"id\":\"wrapper\"},\"traits\":[],\"propagate\":\"\",\"components\":[{\"tagName\":\"div\",\"type\":\"text\",\"name\":\"\",\"removable\":true,\"draggable\":true,\"droppable\":false,\"badgable\":true,\"stylable\":true,\"stylable-require\":\"\",\"unstylable\":\"\",\"highlightable\":true,\"copyable\":true,\"resizable\":false,\"editable\":true,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"\",\"content\":\"<p>Insert your text here</p>\",\"icon\":\"\",\"style\":{},\"classes\":[{\"name\":\"c862\",\"label\":\"c862\",\"type\":1,\"active\":true,\"private\":false,\"protected\":false}],\"script\":\"\",\"attributes\":{},\"traits\":[{\"type\":\"text\",\"label\":\"\",\"name\":\"id\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]},{\"type\":\"text\",\"label\":\"\",\"name\":\"title\",\"min\":\"\",\"max\":\"\",\"unit\":\"\",\"step\":1,\"value\":\"\",\"default\":\"\",\"placeholder\":\"eg. Text here\",\"changeProp\":0,\"options\":[]}],\"propagate\":\"\",\"activeOnRender\":0,\"components\":[]}],\"custom-name\":\"Body\",\"wrapper\":1,\"open\":0}"}

[artf]

Thanks @v8jupiter for the video and the data, it helps a lot, but still not getting why it's not working on your machine (the data stored seems to be correct though). Do you use the latest version? How do you load the stored data, simply via config.storageManager.urlLoad? For anyone who is interested, this is where we get the loaded data and check if it is an object: https://github.com/artf/grapesjs/blob/dev/src/dom_components/index.js#L327-L343

[xamdam777]

Thanks @artf and all the other people in this thread.

I was experiencing the same problem. I´m not saving to DB, but the same happens in local storage or saving to txt files.

After some investigation:

• When you create a new background in a blank page, grapes automatically sets two selectors using that background: body & #wrapper.

• If you reload the page (save & open operation in my localstorage), grapes will duplicate the body tag, since when grapes finds a #wrapper, it will clone it to a new body.

• If you reload again, you will see that it won't create more than 2 body tags.

So the bug seems to be: when cloning the #wrapper into a body, grapes is not checking correctly if a previous body exists. It only stops cloning after two body selectors exists. It should stop cloning if there is only one body selector.

And the fix I´m using is: just delete all the body styles after opening your page.

const regex = /body{(.*?)}/mgs; myContent = myContent.replace(regex, ''); editor.setComponents(myContent);

Notes about the fix:

• It seems that you will lose nothing if you continuosly delete the body tag CSS properties. Everything is cloned in #wrapper and a new body is created after page load, based on that #wrapper.

• This fix seems to solve all the related bugs with duplicate body selectors for me (clear canvas, change background, remove background...)

• I have tested it only a few hours, I hope it works for you too!

[artf]

Example with localStorage (the process is the same as the remote one) https://jsfiddle.net/n2a3rvct/ the load works correctly. Can someone confirm that it works with the latest version? @yosoyfran @v8jupiter @maryia-kabash @ageir

[artf]

As already explained here with domComponents.storeWrapper you store also the wrapper in your components data instead of the array. After thinking about it for a while it might be correct to keep the wrapper always stored, so probably I'll set true as the default value

[v8jupiter]

I will check tomorrow . Need to check with latest build from dev or master ?

[v8jupiter]

v0.14.33 - not work for me as expected. It work only after triple or more refreshed. It seems components loaded faster than background and background overlaps other components.

Video: https://youtu.be/_aHIeOBulpc

I checked and response from server always same, but sometimes i see only background sometimes no. Checked in FF and Chrome

[artf]

@v8jupiter weird... can you post your config regarding the storage?

[v8jupiter]

storageManager: { autoload: true, autosave: false, setStepsBeforeSave: 1, type: 'remote', urlStore: urlStore, // var from PHP urlLoad: loadUrl, // var from PHP contentTypeJson: true }, assetManager: { upload: urlAssets, // var from PHP },

[artf]

Hi @v8jupiter (and others), can you check please the new released RC https://github.com/artf/grapesjs/tree/15-beta/dist (npm https://www.npmjs.com/package/grapesjs/v/0.15.3-rc) Unfortunately, I'm stuck with releasing the new version due to this bug, so if you're able to test and report (domComponents.storeWrapper is true by default now) I'll be really gratefull

[ghost]

Hi @artf , i don't know if i am implement wrong or this is not working for me, this is my code https://jsfiddle.net/jkbr16aL/

Sorry for the delay.

[artf]

@yosoyfran I didn't get if you use the 0.15.3-rc version

[v8jupiter]

@artf Tested and for me 0.15.3-rc work as expected. Thank you! I checked with old templates and it works too.

[v8jupiter]

I found in 0.15.3-rc another issue. Not related with background, but please look https://youtu.be/uE3aNxDeaxQ

I can to reproduce only in new version

[ghost]

Hi @artf, sorry i tried now in 0.15, and is working fine, thank you for your amazing work!!!

[artf]

@v8jupiter can you confirm that this happens after the load (I'm not able to reproduce it with an empty template)? In that case, can you post the components JSON you get from the load?

[v8jupiter]

{"gjs-assets":"[]","gjs-css":"* { box-sizing: border-box; } body {margin: 0;}body{background-color:rgba(201,0,0,0.77);}","gjs-styles":"[]","gjs-html":"","gjs-components":"{\"tagName\":\"div\",\"type\":\"wrapper\",\"name\":\"\",\"removable\":false,\"draggable\":false,\"droppable\":true,\"badgable\":true,\"stylable\":[\"background\",\"background-color\",\"background-image\",\"background-repeat\",\"background-attachment\",\"background-position\",\"background-size\"],\"stylable-require\":\"\",\"style-signature\":\"\",\"unstylable\":\"\",\"highlightable\":true,\"copyable\":false,\"resizable\":false,\"editable\":false,\"layerable\":true,\"selectable\":true,\"hoverable\":true,\"void\":false,\"state\":\"\",\"status\":\"selected\",\"content\":\"\",\"icon\":\"\",\"style\":{\"background-color\":\"rgba(201,0,0,0.77)\"},\"classes\":[],\"script\":\"\",\"attributes\":{\"id\":\"wrapper\"},\"traits\":[],\"propagate\":\"\",\"components\":[],\"custom-name\":\"Body\",\"wrapper\":1,\"open\":false}"}

It seems only after load and with openned debug toolbar Steps for reproduce:

1. Before load open dubug toolbar and make size of toolbar as on prev. video
2. Try to move any element . And it will added before you "release" the item

[v8jupiter]

I returned to 0.14.33 because a lot of bugs in 0.15

[artf]

a lot of bugs

@v8jupiter Be more specific, please...

[artf]

@v8jupiter check the new 0.15.3-rc.2 I wasn't able to reproduce your issue because of another bug on load (now fixed). Can't reproduce it even after the fix so please try re-create it in a live demo, it might be only on your side.

ps: To simulate the load on components you can do something like this editor.DomComponents.load({ components: '{"tagName":"div","type":"wrapper"...' })

[v8jupiter]

@artf Tomorrow i will retest and give you full feedback.

[artf]

Hi guys, I just published the new release https://github.com/artf/grapesjs/releases/tag/v0.14.40 which was in pending for too much. To avoid breaking changes I rolled back the default of storeWrapper to false @v8jupiter I close this issue. For your new feedbacks please open a new one

[lock[bot]]

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.