HTML Import Doesn't Recognize Bricks Containers or Blocks

How To
1

I am trying to import HTML and have it use native Bricks elements - Containers, Blocks.

Can’t find any docs - does not seem possible.

2

Hi David,
Containers and Blocks are basically just regular divs, to which default styles are assigned via the .brxe-container and .brxe-block classes.

Consequently, nothing is automatically “converted” after the import, because Bricks can’t know what you want to use and where. Generally speaking, that isn’t necessary with HTML imports anyway, since the required styles—like flex and others—are already in place.

If you still want to use the container and block elements, you can right-click the divs in the Structure panel to convert them.

You can find more information about the HTML & CSS to Bricks feature here:

3

Hi Tim,

Thanks for the response. I read all the docs I could find before I came here.

My issue is that I actively use the default Bricks containers for what I believe are their intended purposes. I understand they are divs with styles applied, but why have them at all if they are just to be treated as plain divs? I guess I could add my own container and block classes for use in copying and pasting in, but then I am duplicating what Bricks already does with containers and blocks.

Copying large layouts with dozens of elements makes updating them manually impractical.

David

5

Pinging my last response. Any thoughts out there?

7

Without a specific example of your markup, I’m afraid I’m a bit in the dark, but:

If your HTML markup includes the native Bricks classes for layout elements such as section, container, or block, they should normally be converted to the “correct” elements (at least in 2.4 beta – in 2.3.9, it won’t work).

Example:

<section class="brxe-section hero">
  <div class="brxe-container hero__inner">
    <div class="brxe-block hero__content">
      <h2 class="hero__title">Section Title</h2>
    </div>
  </div>
</section>

If that doesn’t work for you, please provide us with your HTML markup.

1 Like
8

Thanks for the response. This is helpful. I had tried the markup example you gave above and it did not work. However, I am working in 2.3.9 – waiting for 2.4 to be out of beta. This is solved for me.