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:
- Some core blocks contain other blocks. ( 2 to be specific )
- Those blocks have a class on the element that contains those blocks so that it can be styled
- Some of those have a class that ends in
inner-container - The new twentytwentyone theme needs to style the core blocks
- Wouldn’t it be more performant/neater to target all classes ending in
inner-containerwith 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.