Is the AB Container Block working?

I’m jumping onto this ticket because I’m pretty sure I’m experiencing the same behavior. An important note: I was seeing this behavior before the 2.7.1 release as well – I think the issue here is updates to Gutenberg, not anything to do with Atomic Blocks (other than Atomic Blocks now probably needing to update for compatibility).

Here’s a video showing what I’m seeing:

The issue described above is seen here, along with a few others.

Hey Jon,
Thanks for the video. My experience is spot on with yours… so the container block was indeed there, I just couldn’t see it. And yes, using the keyboard up arrow does make it appear and calls the block editor options in the right panel.

But visually, knowing where or selecting where, you want to be is quite challenging after the WordPress update to 5.4. I wonder if it’s related to WP’s code changes to the fullscreen mode editor.

Thanks for articulating the issue.

Hi @dlmweb @jonschr, thanks for the report. We’ll dig into it and issue a fix as soon as possible.

Sure thing. John, if there’s anything you need help with – if you’d like me to run the current version of the plugin on Github and look for what’s working and what’s not, for example, I’m happy to put time into it. I love using Atomic Blocks, and I want it to be as good as possible.

@jonschr @dlmweb give version 2.8.0 a try. We’ve fixed a few issues related to this.

Just a heads up that we fixed the issue where toolbars are off-screen on full width containers, but the fix only works on newly created containers. There was no way to safely update those old containers unfortunately. Hope this helps!

First of all, thanks so much!!! Night and day difference on the block selection, and the new toolbar looks great on new blocks!

I see two remaining issues:

1) The selection of the container block after adding it still isn’t happening, and this presents a huge usability issue for clients using their sites. I know that I can push the up arrow to select the parent container, but the default behavior when adding a block should be that the newly-added block is selected (otherwise, it looks like you’ve just added a paragraph). Video showing what I mean: https://www.loom.com/share/7a6a988e2cc84b31abea0e9dda7f31b3

Possible partial solution: add default padding on the backend to this block which will be overridden anyway when/if the user adds padding. That would make the block more easily selectable, though it still probably should be selected by default.

2) Is there a distinguishing factor between the old containers and the new ones in terms of CSS class or anything like that? I have a few sites that are built from those containers, and might inject some css to fix it on the old ones as well. Obviously, if this fix only applies to “new” blocks, that means every site ever built with AB using fullwidth blocks will look broken on the backend, which seems somewhat problematic.

• This reply was modified 4 years, 7 months ago by Jon Schroeder. Reason: clarity
• This reply was modified 4 years, 7 months ago by Jon Schroeder.
• This reply was modified 4 years, 7 months ago by Jon Schroeder.

BTW, it does look like on blocks that were previously added, if you toggle them to not full, then back to full, that adds the [data-align=”full”] that you’re targeting in the CSS and makes the block work properly.

Hey Jon,

1. I’ll have to look further into this. What’s happening is that the container is added, and immediately it’s selecting the paragraph block which is the default. The paragraph doesn’t get a focus box around it by default or when you are typing. Only when selecting it or interacting with it. So it’s acting how it should in that regard. I see your concern, but it will take some further thought about what the default state of the container should be.

2. I just noticed that wide/full toggle trick as well. That’s probably the best we can do here. I tried a few different ways to trigger the fix with CSS, but the toolbars are rendered outside of the block markup, so you can’t reliably target them. Nor would deprecating the block work or transitioning it.

1. Sounds good. I **do** think that pre-wordpress 5.4 the default behavior was essentially what I’m describing here. And yeah, I figured that was what’s happening, since there’s a paragraph there already (it gets focus, then immediately loses it). I may pull down a copy of the dev branch to play with this a bit and see if I can find another way (haven’t used your build system before, but it looks simple enough).

2. Yeah, after recording the video I looked further into it, and I see the pickle you’re in – the new control scheme is how you target the new blocks, but in the old scheme just wasn’t as fine-grained, and I doubt you can reliably add those controls to existing blocks since there’s not a great way to know whether they’re fullwidth or not, nor a great way to target the toolbar in the necessary use case since it’s outside the block markup. I doubt there’s much that can be done here, and that’s not your fault.

Not sure how much time I have to dedicate, but I’d love to contribute to this project a bit. There are several features I’d love to see added, and PRs might be the way to do that. Video backgrounds for the container block, controls for making the background image fixed position, default paddings for container blocks, and a few others are the things I’ve been mulling.

Feel free to shoot us some ideas! Maybe start by opening a few issues on the Github repo and we can chat about what might be possible before doing the work on PRs. Really appreciate your feedback here, very helpful.

Will do!

@atomicblocks is there any hope that we’re going to have a fix for this in a future update? Or do we have to make all new blocks? Toggling from full to wide and back again isn’t fixing this for me.

Hi Gretchen,

Sorry for the hiccup on this. I’m not sure there’s much we can do on this one, unfortunately. We attempted to fix this programmatically, but the way they updated this feature in core made it impossible to do so. We’ll keep digging into it, but for now the fix would be to either recreate it or just leave your current containers as is.

After all, the old containers work fine, just the toggles may be a little tough to grab. If you switch to use the Top Bar toolbar (introduced in core somewhat recently), this should help.