Solved: Unable to save content block with my custom conten...

marijaivic5692 · ‎07-26-2023

Hello

I am trying to create a custom content type for Magento's Page Builder. My content type is rendered correctly, but when I try to save a content block with that content type, I get the following error in browser console:

[ERROR] Page Builder was rendering for 5 seconds without releasing locks.

I have followed the official tutorial for creating content types and I am not sure why this is happening.

Here is my code:

Test/Test/view/adminhtml/pagebuilder/content_type/test.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="test"
          label="Test"
          menu_section="add_content"
          component="Magento_PageBuilder/js/content-type"
          preview_component="Test_Test/js/content-type/test/preview"
          master_component="Test_Test/js/content-type/test/master"
          form="pagebuilder_base_form"
          icon="icon-pagebuilder-heading"
          sortOrder="21"
          translate="label">
        <children default_policy="deny"/>
        <parents default_policy="allow"/>
        <appearances>
            <appearance name="default"
                        default="true"
                        preview_template="Test_Test/content-type/test/default/preview"
                        master_template="Test_Test/content-type/test/default/master"
                        reader="Magento_PageBuilder/js/master-format/read/configurable">
            </appearance>
        </appearances>
    </type>
</config>

Test/Test/view/adminhtml/web/js/content-type/test/preview.js

define([
    'Magento_PageBuilder/js/content-type/preview'
], function (PreviewBase) {
    'use strict';
    var $super;


    function Preview(parent, config, stageId) {
        PreviewBase.call(this, parent, config, stageId);
    }

    Preview.prototype = Object.create(PreviewBase.prototype);
    $super = PreviewBase.prototype;

    Preview.prototype.retrieveOptions = function retrieveOptions() {
        var options = $super.retrieveOptions.call(this, arguments);
        delete options.edit;

        return options;
    };

    return Preview;
});

Test/Test/view/adminhtml/web/template/content-type/test/default/preview.html

<div attr="data.main.attributes"
     ko-style="data.main.style"
     class="pagebuilder-content-type"
     css="data.main.css"
     event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
</div>

Am I missing some part of the configuration? Are there any other files that I need in order for this to work correctly?