Nested Global Blocks - Beta 8

Beta
#1

Now that we’re on an RC, I upgraded a staging version of a live site to Beta 8, and ran into some quirks related to nested Global Blocks. This may be a side effect of some complex nesting & duplication that I’ve done, so bear with me.

In the screenshot below, the live version is on the left and beta 8 on the right.

image
image829×750 82.8 KB

The most obvious issue is the last little container with the social icons. (However, you can also see that the hours icon is pushed over a little bit too)

This particular section is a collection of “Contact Cards” for different locations for this business. And because I want to reference these contact cards at different points on the website, I have created Global Blocks for each of them (e.g. Tustin is its own card, and so are the Social icons).

I’ve then placed these Global Blocks inside of other Global Blocks containing Off Canvas Toggles.

image

To be clear, each of those :point_up_2:is referenced in multiple other GBs just like that (so it appears on some pages multiple times). We’ll just focus on id=3095 for this, since its the one with most obvious issues. Here’s its skeleton (there’s some CSS on the classic column to make it a flex-row):

image

However, inspecting the page, it appears that a bunch of additional column divs have been added to the structure (live on left, beta on right - note the extra columns starting with e-3095-7 x-column highlighted on the right).

image
image1634×238 105 KB

I’ve been waiting for this RC to clean up some of this complex structure, so it’s certainly possible this is just a side effect of me going a little crazy with nested GB. However, it seems pretty strange to me that there are column divs being inserted into the structure of the page that aren’t present in the Global Blocks being referenced.

Can share login creds if you want to poke around.

#2

In case you can’t easily see that last screenshot, here it is broken into two. First is the live site, second is the beta.

image
image788×237 60.2 KB

image
image846×238 64.1 KB

#3

Thanks @devinelston! Really helpful information, and thank you for sharing the credentials. I’ll write back here when we get a solution.

Once fixed, would you mind if I installed a development build on that server to quickly confirm if the fix addresses everything?

#4

Please feel free. I won’t use that install for anything else, so you’re welcome to change anything you need to.

#5

Ok will do! It will probably be sometime tomorrow or Friday depending on when I get to this item but I’ll let you know here when I update it.

1 Like
#6

Thanks again for letting me check on your site. There’s a working development build installed. It’s also fixed for the next patch that I’m about to push out.

Also, quick FYI: We’ve made an adjustment so Global Blocks can now be a direct child of a Section if desired. On that note and a total aside, we’ve also been talking about some updates to the Outline pane that would allow any element to go top level or as a child of a Section to help reduce all the nested layers. It will take some rewrites of the Outline workspace but should be a nice improvement when we get to it, especially when it comes to nesting Global Blocks.

2 Likes
#7

Awesome, thanks!

As I was playing around with the new Div and global blocks, I kept thinking it’d be nice to be able to ditch the section container altogether. So I like that direction.

Also, the ability to put elements directly inside the content areas of Off Canvas/Tabs/Accordions/etc will really help too. I know you guys have mentioned that’s on the roadmap, and I’m looking forward to it :slight_smile:

#8

Yes! We want to make variants that support drag/drop and managing child elements. That should cut down on needing to nest Global Blocks as often. I’m looking forward as well to the different “mega menu” setups that will be possible by laying out elements inside a dropdown.

#9

@alexander, I’ve had a busy few days and hadn’t been able to check out the staging site again until today. I updated that site to the RC, and noticed that the accordion element in that card still has some strange padding it seems to be pulling from the browser’s stylesheet.

image

image

Info added in secure note. Since the preview doesn’t work in my staging environment at the moment, here’s where you find that particular element in the outline:

image
image314×526 14.9 KB

#10

Hey, @devinelston! Thanks for this, I patched this up in some other areas but looks like you found an outlier. Essentially, what is happening here is that in our dynamic styles for the Elements, we do a lot of things like this:

.$_el.x-acc .x-acc-header {
  ...
  @unless $accordion_header_padding?? {
    padding: $accordion_header_padding;
  }
  ...
}

That @unless statement with the ?? at the end basically says, “If this value is not empty, allow it to be output.” We count “empty” as a lot of different things across different Elements—could be a value of none on something, transparent for a color, a computed value of 0px for a dimension control, or something being “off” with our new toggles (amongst many others). We do this to keep the dynamic output as lean as possible.

Since you have the padding set to 0px in your Accordion Header, this means that no padding value was output in the dynamic styles for the Header. Because of this, the theme’s base stylesheet was taking over, and for generic markup this isn’t an issue, but since that Header is a button, it was recieving some low level styles and bumping it out, even though your value was set to 0px.

I’ve remedied this by basically adding the following value to the static styles for Accordion Headers:

.x-acc-header {
  padding: 0;
}

I fixed this in a few other spots as mentioned above but this one must have flown under my radar since it’s a little rare to turn that value to 0px for the Header. Just wanted to share all that in case you run into something again that seems similar, you can just ping me on here and I can address it.

Thanks, and hopefully that fixes things up for you when the new patch goes out! It seems to be working for me locally.

2 Likes
#11

Great, thanks @kory

#12

:+1: you’re welcome!