magento2: Unable to save page and block changes using Page Builder with enabled js minification.

Preconditions (*)

  1. Magento 2.3.3 EE

Steps to reproduce (*)

  1. Stores->Settings->Configuration->Advanced->Developer->JavaScript Settings->Minify JavaScript Files = Yes
  2. Set production bin/magento deploy:mode:set production
  3. Go to Content->Elements->Blocks\Pages->Edit
  4. Make changes and Save

Expected result (*)

  1. Possibility to edit and save blocks and pages.

Actual result (*)

  1. Changes are not saved.

Additional Information

  1. I can see in browser console that Page Builder tries to load not minified resources. Since we have js minification enabled, in static content exists only minified js.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 29 (8 by maintainers)

Most upvoted comments

@sdzhepa I just want to thank you for carefully responding to the OP about this issue. There has been a habit of closing issues raised that mention Commerce Edition. Instead you chose to provide guidance anyway, and I think that’s an example for Adobe to follow when dealing with the community, since Open-Source and Commerce are (for the time being) very closely related.

I have made module based on @LordHansolo reply, it is working perfectly. https://github.com/kushaljindal92/magentoee-pagebuilder-fix

I made some investigation.

The CMS page form and the WYSIWYG editor are connected by the JQuery event which transfers the Page Builder instance from the editor to the form.

See: src/vendor/magento/module-page-builder/view/adminhtml/web/js/form/element/wysiwyg.js:91

src/vendor/magento/module-page-builder/view/adminhtml/web/js/form/form-mixin.js:27

events.on('pagebuilder:register', function (data) {
                if (data.ns === self.ns) {
                    self.pageBuilderInstances.push(data.instance);
                }
            });

If the form is initialized earlier than the editor (that often happens after the first/second save of the CMS page/block and page reload), the form is missing this event and doesn’t see the PB instance.

I’ve made a temporary hotfix for CMS Page in my project (maybe someone needs a quick solution):

diff --git a/vendor/magento/module-page-builder/view/adminhtml/web/js/form/form-mixin.js b/vendor/magento/module-page-builder/view/adminhtml/web/js/form/form-mixin.js
--- a/vendor/magento/module-page-builder/view/adminhtml/web/js/form/form-mixin.js	
+++ b/vendor/magento/module-page-builder/view/adminhtml/web/js/form/form-mixin.js	(date 1683647187438)
@@ -44,6 +44,16 @@
                 timeout,
                 locks;
 
+            let self = this;
+            if (_.isEmpty(this.pageBuilderInstances) & this.name === 'cms_page_form.cms_page_form') {
+                var registry = require('uiRegistry');
+                let contentComponent = registry.get(
+                    "cms_page_form.cms_page_form.content.content"
+                );
+
+                self.pageBuilderInstances.push(contentComponent.pageBuilder);
+            }
+
             if (_.isEmpty(this.pageBuilderInstances)) {
                 submit();
             } else {

@anton-vidext did you use google chrome ? can you try using firefox? I’m beginning to think it’s browser related issue

I used google chrome, firefox and edge. It was happening in every browser.

Disabled minified JS and CSS and I can now save page builder content.

@mugua @LordHansolo If you have an active Magento Commerce subscription you can just ask the Commerce support and they’ll send you a patch.

Thank You @sdzhepa. Hello @mugua. Yes I fixed it. I will provide You part of code and places where they should appear.

In my module I created block that extends Magento\PageBuilder\Block\Adminhtml\Stage\Render and adds two additional methods isJsMinificationEnabled and getMinResolverAssetUrl.

<?php

namespace Fix\PageBuilder\Block\Adminhtml\Stage;

use Magento\Framework\Serialize\Serializer\Json;
use Magento\Framework\View\Asset\Minification;
use Magento\Framework\View\Element\Template\Context;
use Magento\PageBuilder\Block\Adminhtml\Stage\Render as ParentRender;
use Magento\PageBuilder\Model\Stage\Config;
use Magento\RequireJs\Model\FileManager;

/**
 * Class Render
 */
class Render extends ParentRender
{
    /**
     * @var FileManager
     */
    private $fileManager;

    /**
     * @var Minification
     */
    private $minification;

    /**
     * Class constructor
     *
     * @param Context $context
     * @param FileManager $fileManager
     * @param Config $config
     * @param Json $json
     * @param Minification $minification
     * @param array $data
     */
    public function __construct(
        Context $context,
        FileManager $fileManager,
        Config $config,
        Json $json,
        Minification $minification,
        array $data = []
    ) {
        parent::__construct($context, $fileManager, $config, $json, $data);

        $this->fileManager = $fileManager;
        $this->minification = $minification;
    }

    /**
     * Check that js minification is enabled
     *
     * @return boolean
     */
    public function isJsMinificationEnabled()
    {
        return $this->minification->isEnabled('js');
    }

    /**
     * Get min resolver asset url
     *
     * @return string
     */
    public function getMinResolverAssetUrl()
    {
        $minResolver = $this->fileManager->createMinResolverAsset();
        $url = $minResolver ? $minResolver->getUrl() : '';

        return $url;
    }
}

Next I created template in My module scope view/adminhtml/templates/stage/render.phtml with content from <magento_root>/vendor/magento/module-page-builder/view/adminhtml/templates/stage/render.phtml and add code below after <script src="<?= $block->escapeUrl($block->getRequireJsUrl()); ?>"></script>.

<?php if ($block->isJsMinificationEnabled()) : ?>
    <script src="<?= $block->escapeUrl($block->getMinResolverAssetUrl()); ?>"></script>
<?php endif ?>

Next I created Controller that extends Magento\PageBuilder\Controller\Adminhtml\Stage\Render. Copy entire execute method and override part below.

$renderBlock = $layout->createBlock(
    \Fix\PageBuilder\Block\Adminhtml\Stage\Render::class,
    'stage_render'
);
$renderBlock->setTemplate('Fix_PageBuilder::stage/render.phtml');

Next I created adminhtml/di.xml to set preference for Magento\PageBuilder\Controller\Adminhtml\Stage\Render.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\PageBuilder\Controller\Adminhtml\Stage\Render" type="Fix\PageBuilder\Controller\Adminhtml\Stage\Render" />
</config>

Next in module.xml I add Magento_PageBuilder to sequence.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Fix_PageBuilder" setup_version="1.0.0">
        <sequence>
            <module name="Magento_PageBuilder"/>
        </sequence>
    </module>
</config>

Thats all. Now Page Builder should work fine with enabled js minification.

Hello @LordHansolo

Thank you for contribution and collaboration!

This issue related to Page Builder functionality which is not part of Magento Open Source.

Current repository and issue tracker aimed at Magento Open Source version only and the main focus is community contribution/collaboration. It described in Issue reporting guidelines and it is a part of the issue report template:

Verify, that the issue you are about to report does not relate to the Magento Commerce. GitHub is intended for Magento Open Source users to report on issues related to Open Source only. There are no account management services associated with GitHub. You can report Commerce-related issues in one of two ways:

  • You can use the Support portal associated with your account
  • If you are a Partner reporting on behalf of a merchant, use the Partner portal.

But I have asked internal Magento team(who is working on Page Builder) about this issue and

  • This issue has been fixed and will be available with next release 2.3.4
  • The same issue was reported into the private repository related to Page Builder on Oct 25 2019 and was fixed and delivered with internal Pull Request #304.