MC-3406: Explicit Background Attributes for Tab

 - stabilize tests

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBlockSection.xml

@@ -30,7 +30,7 @@
         <element name="noCssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[not(@class)]" parameterized="true"/>
         <element name="margins" type="text" selector="(//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
         <element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
-        <element name="overlay" type="text" selector=".pagebuilder-content-type-hidden"/>
+        <element name="overlay" type="text" selector="(//div[contains(@class,'pagebuilder-block') and contains(@class,'pagebuilder-block-overlay')])[{{arg1}}]" parameterized="true"/>
     </section>
     <section name="BlockOnGrid">
         <element name="searchBox" type="text" selector="//input[contains(@class,'data-grid-search-control')]"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockTest.xml

@@ -890,7 +890,7 @@
             <argument name="contentType" value="PageBuilderBlockContentType"/>
             <argument name="contentTypeIndex" value="1"/>
         </actionGroup>
-        <seeElement selector="{{BlockOnStage.overlay}}" stepKey="seeOverlayOnBlock"/>
+        <seeElement selector="{{BlockOnStage.overlay('1')}}" stepKey="seeOverlayOnBlock"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <!--Verify block on the frontend-->
         <comment userInput="Verify Block On Store front" stepKey="commentCheckingThatImageIsNotRenderedOnTheStoreFront"/>
@@ -965,7 +965,7 @@
             <argument name="contentType" value="PageBuilderBlockContentType"/>
             <argument name="contentTypeIndex" value="1"/>
         </actionGroup>
-        <seeElement selector="{{BlockOnStage.overlay}}" stepKey="seeOverlayOnBlock"/>
+        <seeElement selector="{{BlockOnStage.overlay('1')}}" stepKey="seeOverlayOnBlock"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <amOnPage url="$$createCMSPage.identifier$$" stepKey="amOnPageTestPage"/>
         <!--Verify block on the frontend-->

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

@@ -52,7 +52,7 @@
 }
 
 :not(.pagebuilder-content-type-hidden) {
-    > .pagebuilder-block.pagebuilder-content-type {
+    > .pagebuilder-block.pagebuilder-content-type.pagebuilder-block-overlay {
         &:before {
             content: '';
             opacity: 0;

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+<div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false" css="{'pagebuilder-block-overlay': displayingBlockPreview()}">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
         <div if="displayingBlockPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
         <div ifnot="displayingBlockPreview" class="pagebuilder-block-placeholder">