MC-3571: Implement overlay for MC-1405

Add/style .pagebuilder-block-overlay

Author: danmooney2

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/block/_default.less

@@ -21,6 +21,21 @@
             font-weight: lighter;
         }
     }
+    .pagebuilder-block-overlay {
+        -moz-transition: background-color 500ms ease;
+        -o-transition: background-color 500ms ease;
+        -webkit-transition: background-color 500ms ease;
+        height: 100%;
+        opacity: .7;
+        position: absolute;
+        transition: background-color 500ms ease;
+        width: 100%;
+        z-index: 10;
+
+        &:hover {
+            background-color: @color-gray98;
+        }
+    }
     .rendered-content {
         min-height: 50px;
         pointer-events: none;

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/block/default/preview.html

@@ -7,9 +7,12 @@
 
 <div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-        <div if="displayPreview" class="rendered-content" html="data.main.html"></div>
-        <div ifnot="displayPreview" class="pagebuilder-block-placeholder">
-            <span class="placeholder-text" text="placeholderText"/>
+        <div class="pagebuilder-block-wrapper">
+            <div class="pagebuilder-block-overlay"></div>
+            <div if="displayPreview" class="rendered-content" html="data.main.html"></div>
+            <div ifnot="displayPreview" class="pagebuilder-block-placeholder">
+                <span class="placeholder-text" text="placeholderText"/>
+            </div>
         </div>
     </div>
     <div data-role="spinner"