How to remove extra divs in my Page Builder CMS blocks?

Question

While I'm saving the static block extra div's are adding to static block. How to avoid the divs in Magento 2.3?

<div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;"><div data-content-type="html" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;" data-decoded="true">

I don't have the custom style enabled, and I just have HTML code in my custom block.

Answer 1

In page builder when creating CMS block add class=> ignore-div then add style for it

.ignore-div {display: contents;}

It will ignore wrapper

Answer 2

Magento requires these and I found no way around it when using Page Builder which is very frustrating especially for CMS Blocks which are very often small chunks of content that an entire row element is overkill or obtrusive.

The only solution I found to date is to disable Page Builder. Someone came come up with a small light-weight extension (linked below) that allows you to specify individual blocks that will disable PageBuilder so you can just use the standard WYSIWYG editor. This is very nice since right now the only other option is to disable Page Builder globally which is unfortunate.

https://www.cadence-labs.com/2020/01/magento-2-commerce-cloud-disable-page-builder-for-certain-blocks/

Answer 3

Currently, there is no way to remove those divs that row is injected by magento.

It's mandatory to have a row when creating contents using page builder.

If its creating an issue with UI Like,

it's not showing full width then try using the other Appearance like Full-width or Full-bleed on Row-level setting.

There is one issue wherein it applies flex which breaks the UI in some cases. for this, u can apply a class or custom class that uses block.

Answer 4

A quick and dirty trick would be to identify the css selector for the elements you would like to overwrite styles. For example I just needed to get rid of the padding and margin, so I added the below css snippet in the Page Builder content area (in the admin) right at the beginning.

<style>
/* overwrite parallax styles */
div.main div div { padding: 0 !important; margin: 0 !important; }