#514: User sees content snapshot on Category Page in Admin Panel - #1 Added config for category

Author: Lukasz Borowiec

app/code/Magento/PageBuilder/view/adminhtml/ui_component/category_form.xml

@@ -12,6 +12,7 @@
                 <item name="config" xsi:type="array">
                     <item name="wysiwygConfigData" xsi:type="array">
                         <item name="is_pagebuilder_enabled" xsi:type="boolean">true</item>
+                        <item name="pagebuilder_content_snapshot" xsi:type="boolean">true</item>
                         <item name="pagebuilder_button" xsi:type="boolean">true</item>
                     </item>
                 </item>

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/wysiwyg.js

@@ -25,7 +25,7 @@ define([
             elementSelector: '> textarea',
             stageSelector: '.pagebuilder-stage-wrapper',
             pageBuilder: false,
-            visiblePageBuilder: true,
+            visiblePageBuilder: false,
             isComponentInitialized: false,
             wysiwygConfigData: {},
             pageBuilderEditButtonText: $t('Edit with Page Builder'),
@@ -38,7 +38,13 @@ define([
          */
         initialize: function () {
             this._super();
-            this.initPageBuilder();
+
+            switch (true) {
+                case !this.wysiwygConfigData()['pagebuilder_button']:
+                case this.wysiwygConfigData()['pagebuilder_content_snapshot']:
+                    this.initPageBuilder();
+                    break;
+            }
 
             return this;
         },
@@ -88,6 +94,13 @@ define([
                     component: this,
                     selector: this.stageSelector
                 }, this.disableDomObserver.bind(this));
+
+                switch (true) {
+                    case !this.wysiwygConfigData()['pagebuilder_button']:
+                    case this.wysiwygConfigData()['pagebuilder_content_snapshot']:
+                        this.visiblePageBuilder(true);
+                        break;
+                }
             }
         },
 
@@ -158,13 +171,43 @@ define([
                             });
                         }.bind(this), 350);
                     }
+
+                    if (this.wysiwygConfigData()['pagebuilder_button'] &&
+                        !this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                        // Force full screen mode whilst the animation occurs
+                        this.transitionOut(true);
+                        // Trigger animation out
+                        this.transition(false);
+
+                        // Reset the transition out class and hide the stage
+                        _.delay(function () {
+                            this.transitionOut(false);
+                            this.visiblePageBuilder(false);
+                        }.bind(this), 185);
+                    }
                 } else if (args.fullScreen) {
                     if (this.isWithinModal && this.modal) {
                         this.modal.css({
                             transform: 'none',
                             transition: 'none'
                         });
                     }
+
+                    if (this.wysiwygConfigData()['pagebuilder_button'] &&
+                        !this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                        this.visiblePageBuilder(true);
+
+                        fullScreenDeferred.resolve();
+
+                        /* eslint-disable max-depth */
+                        // If the stage has already rendered once we don't need to wait until animating the stage in
+                        if (rendered) {
+                            _.defer(function () {
+                                this.transition(true);
+                            }.bind(this));
+                        }
+                        /* eslint-enable max-depth */
+                    }
                 }
             }.bind(this));
 

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/wysiwyg.html

@@ -6,16 +6,18 @@
 -->
 
 <div visible="visible" css="{'_disabled': disabled}">
-    <button type="button"
+    <button if="wysiwygConfigData()['pagebuilder_button'] || wysiwygConfigData()['pagebuilder_content_snapshot']"
+            type="button"
             class="action-default action"
             ko-disabled="disabled"
             click="pageBuilderEditButtonClick.bind($data)">
         <span translate="pageBuilderEditButtonText" />
     </button>
     <if args="isComponentInitialized">
         <div visible="visiblePageBuilder"
-             class="pagebuilder-wysiwyg-wrapper">
-            <with args="pageBuilder">
+             class="pagebuilder-wysiwyg-wrapper"
+             css="{'pagebuilder-transition-in': wysiwygConfigData()['pagebuilder_button'] && !wysiwygConfigData()['pagebuilder_content_snapshot'], 'trigger-transition': transition, 'pagebuilder-transition-out': transitionOut}">
+        <with args="pageBuilder">
                 <render />
             </with>
         </div>