MC-4965: Text Wrapping Inside Inline WYSIWYG Editors Will Break On Words (Storefront as well for Slide & Banner)

- add word wrapping to banner, slide, and text when in blocks

Author: anthoula

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

@@ -118,15 +118,21 @@
 //  _____________________________________________________
 
 [data-role='banner'] {
-    .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
-        max-width: 50%;
-    }
+    .pagebuilder-banner-wrapper {
+        overflow-wrap: break-word;
 
-    [data-element='content'] {
-        min-height: 50px;
-    }
+        .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
+            max-width: 50%;
+        }
 
-    .pagebuilder-banner-button {
-        margin: @margin 0 0 0;
+        [data-element='content'] {
+            min-height: 50px;
+        }
+
+        .pagebuilder-banner-button {
+            margin: @margin 0 0 0;
+            max-width: 100%;
+            word-break: break-word;
+        }
     }
 }

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

@@ -113,15 +113,21 @@
 //  _____________________________________________________
 
 [data-role='slide'] {
-    .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
-        max-width: 50%;
-    }
+    .pagebuilder-slide-wrapper {
+        overflow-wrap: break-word;
 
-    [data-element='content'] {
-        min-height: 50px;
-    }
+        .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
+            max-width: 50%;
+        }
 
-    .pagebuilder-slide-button {
-        margin: 20px 0 0 0;
+        [data-element='content'] {
+            min-height: 50px;
+        }
+
+        .pagebuilder-slide-button {
+            margin: 20px 0 0 0;
+            max-width: 100%;
+            word-break: break-word;
+        }
     }
 }

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

@@ -58,3 +58,11 @@
 .pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-text:not(.pagebuilder-toolbar-active) {
     pointer-events: none;
 }
+
+//
+//  Styles rendered through Blocks
+//  ______________________________
+
+[data-role='text'] {
+    overflow-wrap: break-word;
+}