Components not working on Windows Chrome Browswer

[rajeevhanda]

Chrome Version: Version 100.0.4896.60 (Official Build) (x86_64)

Refer attached video

@artf On the windows Chrome browser, the components when dragged and dropped into the canvas, just brings in the backend image of the component and not the exact HTML defined for that component.

video1616771506.mp4

[artf]

This sounds like an old bug, update to the latest grapesjs version.

[rajeevhanda]

Even after using the latest version 0.18.4, the issue with the Chrome browser still exists.

[artf]

I can't help you without a reproducible demo, show at least how you init your blocks.

[rajeevhanda]

Thanks, @artf for your response.

Here is the code and JSON structures we are using to initialize the blocks:

The value of the top.categories is:
["Banner","Layouts","Elements","Tabs","Buttons and Links","Widgets","Question & Feedback"]

The JSON structure for the top.templates look something like this (I have kept only a few elements here, just for reference):

[{"template":"<div id=\"one-column-row\">\n <div id=\"one-column-cell\">\n <h2 id=\"i57l1\">Lorem ipsum dolor sit amet</h2>\n <p id=\"io5g2\">Dolor sit amet, consectetur adipiscing elit. Nullam auctor scelerisque nunc, quis hendrer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor scelerisque nunc.</p>\n <div id=\"buttons\">\n <a data-highlightable=\"1\" droppable=\"true\" data-droppable=\"true\" data-gjs-droppable=\"true\" id=\"primary\">Primary</a>\n </div>\n </div>\n<img class=\"image\" src=\"banner3.svg\"/></div> \n<style>\n#one-column-row {\n display: flex;\n align-items: stretch;\n flex-wrap: nowrap;\n width:100%;\n background: #DBE1EA;\n height: 295px;\n min-height: 295px;\n}\n#one-column-cell {\n min-height: 295px;\n flex-grow: 1;\n flex-basis: 100%;\n position: relative;\n padding-top: 60px;\n padding-right: 30px;\n padding-bottom: 70px;\n position: relative;\n left: 10%;\n max-width: 55%;\n}\n#i57l1 {\n font-family: Source Sans Pro;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 44px;\n color: #293e40;\n margin: 10px;\n}\n#io5g2 {\n margin: 10px;\n font-family: Source Sans Pro;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n color: #293e40;\n max-width: 650px;\n}\n #buttons{\n margin-top:20px;\n}\n #primary {\n margin-left: 10px;\n font-family: Source Sans Pro;\n border: none;\n padding: 11px 45px;\n background: #82d362;\n border-radius: 3px;\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n color: black;\n} \n\n\n@media (max-width: 768px) {\n #one-column-row {\n flex-wrap: wrap;\n }\n}\n</style>","image":"6b3cbdd287064110a740a6483cbb354e","id":null,"title":"Site Banner 3","category":"Banner","picture":"6b3cbdd287064110a740a6483cbb354e.iix"},{"template":"<div>\n <div id=\"one-column-row\">\n <div id=\"one-column-cell\">\n </div>\n </div>\n </div>\n\n<style>\n #one-column-row{\n display:flex;\n justify-content:space-between;\n align-items:stretch;\n flex-wrap:nowrap;\n padding-top:10px;\n padding-right:10px;\n padding-bottom:10px;\n padding-left:10px;\n width:100%;\n border-top-width:initial;\n border-right-width:initial;\n border-bottom-width:initial;\n border-left-width:initial;\n border-top-style:initial;\n border-right-style:initial;\n border-bottom-style:initial;\n border-left-style:initial;\n border-top-color:rgb(192, 194, 196);\n border-right-color:rgb(192, 194, 196);\n border-bottom-color:rgb(192, 194, 196);\n border-left-color:rgb(192, 194, 196);\n border-image-source:initial;\n border-image-slice:initial;\n border-image-width:initial;\n border-image-outset:initial;\n border-image-repeat:initial;\n background-color:rgb(255, 255, 255);\n}\n#one-column-cell{\n min-height:1px;\n flex-grow:1;\n flex-basis:100%;\n background-color:rgb(138, 142, 145);\n border-top-width:1px;\n border-right-width:1px;\n border-bottom-width:1px;\n border-left-width:1px;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-top-color:rgb(219, 225, 231);\n border-right-color:rgb(219, 225, 231);\n border-bottom-color:rgb(219, 225, 231);\n border-left-color:rgb(219, 225, 231);\n border-image-source:initial;\n border-image-slice:initial;\n border-image-width:initial;\n border-image-outset:initial;\n border-image-repeat:initial;\n}\n@media (max-width: 768px){\n #one-column-row{\n flex-wrap:wrap;\n }\n}\n</style>","image":"ec82358a1b0ab010c37553d7624bcb57","id":null,"title":"Separator","category":"Elements","picture":"ec82358a1b0ab010c37553d7624bcb57.iix"},{"template":"<div id=\"one-column-row\">\n <div id=\"one-column-cell\">\n <h2 id=\"i57l1\">Lorem ipsum dolor sit amet</h2>\n <p id=\"io5g2\">Dolor sit amet, consectetur adipiscing elit. Nullam auctor scelerisque nunc, quis hendrer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor scelerisque nunc.</p>\n <div id=\"buttons\">\n <a data-highlightable=\"1\" droppable=\"true\" data-droppable=\"true\" data-gjs-droppable=\"true\" id=\"primary\">Primary</a>\n </div>\n </div>\n <img src=\"banner4.svg\"/>\n</div>\n<style>\n#one-column-row {\n display: flex;\n align-items: stretch;\n flex-wrap: nowrap;\n width:100%;\n background: #032D42;\n height: 295px;\n min-height: 295px;\n}\n#one-column-cell {\n min-height: 295px;\n flex-grow: 1;\n flex-basis: 100%;\n position: relative;\n padding-top: 60px;\n padding-right: 30px;\n padding-bottom: 70px;\n position: relative;\n left: 10%;\n max-width: 55%;\n}\n#i57l1 {\n font-family: Source Sans Pro;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 44px;\n color: white;\n margin: 10px;\n}\n#io5g2 {\n margin: 10px;\n font-family: Source Sans Pro;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n color: white;\n max-width: 650px;\n}\n #buttons{\n margin-top:20px;\n}\n #primary {\n margin-left: 10px;\n font-family: Source Sans Pro;\n border: none;\n padding: 11px 45px;\n background: #82d362;\n border-radius: 3px;\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n color: black;\n} \n\n\n@media (max-width: 768px) {\n #one-column-row {\n flex-wrap: wrap;\n }\n}\n</style>","image":"f6dc391687064110a740a6483cbb35e3","id":null,"title":"Site Banner 4","category":"Banner","picture":"f6dc391687064110a740a6483cbb35e3.iix"},{"template":"<div id=\"one-column-row\">\n <div id=\"one-column-cell\">\n <h2 id=\"i57l1\">Lorem ipsum dolor sit amet</h2>\n <p id=\"io5g2\">Dolor sit amet, consectetur adipiscing elit. Nullam auctor scelerisque nunc, quis hendrer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor scelerisque nunc.</p>\n </div>\n <img class=\"image\" src=\"banner3.svg\"/></div> \n<style>\n#one-column-row {\n display: flex;\n align-items: stretch;\n flex-wrap: nowrap;\n width:100%;\n background: #032D42;\n height: 295px;\n min-height: 295px;\n}\n#one-column-cell {\n min-height: 295px;\n flex-grow: 1;\n flex-basis: 100%;\n position: relative;\n padding-top: 70px;\n padding-right: 30px;\n padding-bottom: 70px;\n position: relative;\n left: 10%;\n max-width: 55%;\n}\n#i57l1 {\n font-family: Source Sans Pro;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 44px;\n color: white;\n margin: 10px;\n}\n#io5g2 {\n margin: 10px;\n font-family: Source Sans Pro;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n color: white;\n max-width: 650px;\n}\n\n@media (max-width: 768px) {\n #one-column-row {\n flex-wrap: wrap;\n }\n}\n</style>","image":"d5bdb15687064110a740a6483cbb3539","id":null,"title":"Site Banner 5","category":"Banner","picture":"d5bdb15687064110a740a6483cbb3539.iix"}]

The code for initializing the block:
`
const blockManager = editor.BlockManager;
blockManager.getAll().reset();

        /**
         * Rendering blocks/categories in the correct order
         *
         * Sorting blocks by their category and then looping
         * through each category to render their blocks
         * **/
        var blocksInCategories = {};
    	  console.log('The value of top.category is: '+JSON.stringify(top.categories));
          console.log('The value of top.template is: '+JSON.stringify(top.templates));
        top.categories.forEach((category) => {
            blocksInCategories[category] = [];
        });
        top.templates.forEach((template) => {
            blocksInCategories[template.category].push(template);
        });
        top.categories.forEach((category) => {
            blocksInCategories[category].forEach((template) => {
                blockManager.add(template.title, {
                    label: template.picture ?
                        `<img src="` +
                        template.picture +
                        `" style="width: 100%; height: 100%; border-radius: 5px;">` : `<div><div class="my-label-block" style="padding: 1rem">` +
                        template.title +
                        `</div></div>`,
                    category: template.category,
                    content: template.template
                });
            });
        });

        /**
         * Attach the Block Manager and all its blocks to the new div
         *  **/
        var firstCategory = blockManager
            .getAll()
            .filter((block) => block.get('category').id == top.categories[0]);
        const newBlocksEl = blockManager.render(firstCategory);
        document.getElementById('custom-blocks').appendChild(newBlocksEl);
        document.getElementById('categ-btn-0').className = 'selected-categ';

`

[artf]

Use media property for images instead of the label https://grapesjs.com/docs/modules/Blocks.html#initialization

[rajeevhanda]

It's already defined in the JSON template I have pasted.

…

On Wed, Apr 20, 2022 at 7:18 PM Ronaldo Hoch ***@***.***> wrote: Hello! content: template.template is the correct variable? Can you show one of them? — Reply to this email directly, view it on GitHub <#4252 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB7AM66YPVN7MGNUCMXAELDVGADMLANCNFSM5TGOH7PQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>