MC-3636: User couldn't upload image to a hidden Image Content Block

- Disable uploading of images to hidden content types from the stage

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/uploader/preview/_image.less

@@ -186,3 +186,15 @@
 .pagebuilder-image .pagebuilder-image-uploader-container {
     visibility: visible;
 }
+.pagebuilder-content-type-hidden .pagebuilder-content-type-active .pagebuilder-image-uploader-container .pagebuilder-options {
+    opacity: 0 !important;
+    visibility: hidden !important;
+}
+.pagebuilder-content-type-hidden .pagebuilder-image-uploader-container {
+    &.dragging .pagebuilder-image-uploader-container-dropzone-overlay {
+        display: none;
+    }
+    &.dragging .file-uploader {
+        visibility: visible;
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview.js

@@ -3,8 +3,10 @@
  * See COPYING.txt for license details.
  */
 
+import $ from "jquery";
 import events from "Magento_PageBuilder/js/events";
 import {DataObject} from "../../data-store";
+import ContentTypeAfterRenderEventParamsInterface from "../content-type-after-render-event-params";
 import BasePreview from "../preview";
 import Uploader from "../uploader";
 

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/image/preview.ts

@@ -222,6 +222,7 @@ export default class Preview {
                     id: this.parent.id,
                 },
             );
+            this.disableImageUploadOnHide(element);
         }
     }
 
@@ -578,6 +579,21 @@ export default class Preview {
         return hasDataChanges;
     }
 
+    /**
+     * Any hidden element should block drag / drop events from uploading images from the OS. We have to block this for
+     * all elements as underlying elements could still receive the events if a parent is hidden.
+     *
+     * @param {Element} element
+     */
+    private disableImageUploadOnHide(element: Element) {
+        $(element).on("drag dragstart dragend dragover dragenter dragleave drop", (event) => {
+            if (this.display() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        });
+    }
+
     /**
      * Update observables
      */