cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2.3.2 Pagebuilder HTML Area Not shows Widget and Variable Icons

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Magento 2.3.2 Pagebuilder HTML Area Not shows Widget and Variable Icons

Hi Guys,

I faced an issue on M2.3.2 EE that the PageBuilder HTML Area Not shows the Widget and Magento Variable buttons.

Therefore I create a patch by checking the m2.3.3 version.

HTML_WidgetVars (1).png

Patch File: 

--- vendor/magento/module-page-builder/view/adminhtml/web/js/form/element/html-code.js	(date 1568094986000)
+++ vendor/magento/module-page-builder/view/adminhtml/web/js/form/element/html-code.js	(date 1568094986000)
@@ -0,0 +1,47 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'Magento_Ui/js/form/element/textarea',
+    'mage/adminhtml/wysiwyg/widget'
+], function (Textarea) {
+    'use strict';
+
+    var HTML_ID_PLACEHOLDER = 'HTML_ID_PLACEHOLDER';
+
+    return Textarea.extend({
+        defaults: {
+            elementTmpl: 'Magento_PageBuilder/form/element/html-code'
+        },
+
+        /**
+         * Click event for Insert Widget Button
+         */
+        clickInsertWidget: function () {
+            return widgetTools.openDialog(
+                this.widgetUrl.replace(HTML_ID_PLACEHOLDER, this.uid)
+            );
+        },
+
+        /**
+         * Click event for Insert Image Button
+         */
+        clickInsertImage: function () {
+            return MediabrowserUtility.openDialog(
+                this.imageUrl.replace(HTML_ID_PLACEHOLDER, this.uid)
+            );
+        },
+
+        /**
+         * Click event for Insert Variable Button
+         */
+        clickInsertVariable: function () {
+            return MagentovariablePlugin.loadChooser(
+                this.variableUrl,
+                this.uid
+            );
+        },
+    });
+});
--- vendor/magento/module-page-builder/Component/Form/HtmlCode.php	(date 1568094986000)
+++ vendor/magento/module-page-builder/Component/Form/HtmlCode.php	(date 1568094986000)
@@ -0,0 +1,95 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\PageBuilder\Component\Form;
+
+use Magento\Backend\Model\UrlInterface as BackendUrlInterface;
+use Magento\Cms\Helper\Wysiwyg\Images;
+use Magento\Framework\View\Element\UiComponentFactory;
+use Magento\Framework\View\Element\UiComponent\ContextInterface;
+use Magento\Variable\Model\Variable\Config as VariableConfig;
+
+/**
+ * Updates field element with HTML Code specific config
+ */
+class HtmlCode extends \Magento\Ui\Component\Form\Field
+{
+    const HTML_ID_PLACEHOLDER = 'HTML_ID_PLACEHOLDER';
+
+    /**
+     * @var BackendUrlInterface
+     */
+    private $backendUrl;
+
+    /**
+     * @var Images
+     */
+    private $imagesHelper;
+
+    /**
+     * @var VariableConfig
+     */
+    private $variableConfig;
+
+    /**
+     * @var string
+     */
+    private $currentTreePath;
+
+    /**
+     * @param ContextInterface $context
+     * @param UiComponentFactory $uiComponentFactory
+     * @param BackendUrlInterface $backendUrl
+     * @param Images $imagesHelper
+     * @param VariableConfig $variableConfig
+     * @param string $currentTreePath
+     * @param array $components
+     * @param array $data
+     */
+    public function __construct(
+        ContextInterface $context,
+        UiComponentFactory $uiComponentFactory,
+        BackendUrlInterface $backendUrl,
+        Images $imagesHelper,
+        VariableConfig $variableConfig,
+        $currentTreePath = 'wysiwyg',
+        $components = [],
+        array $data = []
+    ) {
+        $this->backendUrl = $backendUrl;
+        $this->imagesHelper = $imagesHelper;
+        $this->variableConfig = $variableConfig;
+        $this->currentTreePath = $currentTreePath;
+        parent::__construct($context, $uiComponentFactory, $components, $data);
+    }
+
+    /**
+     * Prepare component configuration
+     *
+     * @return void
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function prepare()
+    {
+        $config = $this->getData('config');
+        $config['widgetUrl'] = $this->backendUrl->getUrl(
+            'adminhtml/widget/index',
+            [
+                'widget_target_id' => self::HTML_ID_PLACEHOLDER
+            ]
+        );
+        $config['imageUrl'] = $this->backendUrl->getUrl(
+            'cms/wysiwyg_images/index',
+            [
+                'current_tree_path' => $this->imagesHelper->idEncode($this->currentTreePath),
+                'target_element_id' => self::HTML_ID_PLACEHOLDER
+            ]
+        );
+        $config['variableUrl'] = $this->variableConfig->getVariablesWysiwygActionUrl();
+        $this->setData('config', $config);
+        parent::prepare();
+    }
+}
--- vendor/magento/module-page-builder/view/adminhtml/ui_component/pagebuilder_html_form.xml	(date 1574666522000)
+++ vendor/magento/module-page-builder/view/adminhtml/ui_component/pagebuilder_html_form.xml	(date 1574663946764)
@@ -74,7 +74,7 @@
         <settings>
             <label/>
         </settings>
-        <field name="html" formElement="textarea" sortOrder="10">
+        <field name="html" formElement="textarea" sortOrder="10" component="Magento_PageBuilder/js/form/element/html-code" class="Magento\PageBuilder\Component\Form\HtmlCode">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="source" xsi:type="string">page</item>
--- vendor/magento/module-page-builder/view/adminhtml/web/template/form/element/html-code.html	(date 1568094986000)
+++ vendor/magento/module-page-builder/view/adminhtml/web/template/form/element/html-code.html	(date 1568094986000)
@@ -0,0 +1,52 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<div class="admin__control-wysiwig">
+    <div id="buttonspagebuilder_html_form_html" class="buttons-set">
+        <button type="button"
+                class="scalable action-add-widget plugin"
+                click="clickInsertWidget">
+            <span>
+                <span>
+                    <span translate="'Insert Widget...'"/>
+                </span>
+            </span>
+        </button>
+        <button type="button"
+                class="scalable action-add-image plugin"
+                click="clickInsertImage">
+            <span>
+                <span>
+                    <span translate="'Insert Image...'"/>
+                </span>
+            </span>
+        </button>
+        <button type="button"
+                class="scalable add-variable plugin"
+                click="clickInsertVariable">
+            <span>
+                <span>
+                    <span translate="'Insert Variable...'"/>
+                </span>
+            </span>
+        </button>
+    </div>
+</div>
+<textarea class="admin__control-textarea" data-bind="
+    value: value,
+    valueUpdate: valueUpdate,
+    hasFocus: focused,
+    attr: {
+        name: inputName,
+        cols: cols,
+        rows: rows,
+        'aria-describedby': noticeId,
+        placeholder: placeholder,
+        id: uid,
+        disabled: disabled
+    }"
+/>

 

Cheers!