After changing the theme to Twenty Twenty-One, I have a bug with custom containers from various block plugins. In particular, custom blocks should have a class ending with inner-container (which I will call as a class family) at the direct parent div of the content. I understand this is a recommended standard from WordPress, and the plugins' authors should follow. However, the fact that those plugins don't have this class family at the first place and still working with other themes says that this class family is fairly new.

I can't find any documentation of this class family. Can you explain how it works?

After changing the theme to Twenty Twenty-One, I have a bug with custom containers from various block plugins. In particular, custom blocks should have a class ending with inner-container (which I will call as a class family) at the direct parent div of the content. I understand this is a recommended standard from WordPress, and the plugins' authors should follow. However, the fact that those plugins don't have this class family at the first place and still working with other themes says that this class family is fairly new.

I can't find any documentation of this class family. Can you explain how it works?

• css
• coding-standards

• Or the authors of those themes have learned they can't rely on it and have coded around it, so they're not getting whatever benefit they could from the class suffix. – Rup Commented Feb 28, 2021 at 15:09
• Can you link to the WordPress recommendation that you should have a class ending with inner-container? I haven't seen that, but then I don't know the block editor well. – Rup Commented Feb 28, 2021 at 15:10
• Take a look at this. If you are interested in investigating more in this, I recommend following this Trac ticket. This is the best I know – Ooker Commented Feb 28, 2021 at 15:35

1 Answer 1

I can't find any documentation of this class family. Can you explain how it works?

That's because there is none, there is no standard.

Lets follow what happened:

1. Some core blocks contain other blocks. ( 2 to be specific )
2. Those blocks have a class on the element that contains those blocks so that it can be styled
3. Some of those have a class that ends in inner-container
4. The new twentytwentyone theme needs to style the core blocks
5. Wouldn't it be more performant/neater to target all classes ending in inner-container with a single selector instead of 2?

And that's it. There's no standard, no convention. Just coincidence and a developer trying to optimise CSS.

So this statement:

In particular, custom blocks should have a class ending with inner-container (which I will call as a class family) at the direct parent div of the content.

Is not true.

Nobody has decided this, there is no consensus, there is no standard, it's just a coincidence. You are looking for an explanation of something that does not exist.

Perhaps in the future that might change though.

Why Do Some Blocks Contain A Div With A Class Ending in inner-container Then?

Group and cover blocks do this, and they do this because they can contain other blocks, and they have backgrounds that can be images. This lets them have an img tag with responsive sizes, or do other things with CSS, such as having a background image with a colour/gradient overlay.

It's likely that one copied the other, and that's why they both have a class that ends in inner-container.