3-column block child ul copies parent class

[banacan]

The ul is picking up the class of its parent, and it’s causing the li content to take only 1/3 of the space it should. Here's a screen shot that should help.

[sunyatasattva]

Hello @banacan thank you for reaching out! Could I ask you to be a little more specific on what your issue is? Which ul is behaving incorrectly?

Please note that, in general, children elements do not inherit the class of their parent (unless there is some specific code for that). So I doubt this is the issue. However, by design, children elements inherit certain properties from the parents elements, read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

If you don't want this to happen, you'll have to be explicit and set those properties to the children elements as well. It sounds to me like this is the issue.

If I'm mistaken and you still believe that the issue is with Storefront, please provide some reproduction steps and some more details and I'll gladly take a deeper look into it and try to help you further.

[banacan]

Hi @sunyatasattva, thanks for your reply. I'm sorry for my late response. I requested notification of comments to my issue, but I never received any.

First, this is related to using the block editor on pages. This is not about CSS inheritance, it's about Storefront (or maybe WooCommerce) taking the class of the parent element (columns-4) and duplicating that same class (columns-4) on the child element.

Here's an image of the markup showing how the defined 3-column block (div.woocommerce.columns-4) is then duplicated on the child element (ul.products.columns-4). Nowhere did I assign the ul a class of columns-4. That's the problem.

Here's an image of a page I created using the block editor. I added a 3-column block (1/3, 1/3, 1/3) to the page. Notice how the headings above which are also in a 3-column block fill the entire space, but the blocks below which contain shortcode blocks are placed in a ul with the class columns-4. This is the problem.

As you can see here, on the default WooCommerce shop page, the markup on the 3-column section shows the class columns-4 is on the ul only and not on the parent div, so it works correctly. It's only when placing a text block or shortcode block within the 3-column block that the problem occurs. Interestingly, as you can see in this image, if I fill the column blocks with images and text below it does not have that problem.

This is a very curious issue. As I said above, I don't know if this is a Storefront or WooCommerce issue. Thoughts welcome.

Thanks

[gigitux]

Thanks, @banacan for providing details. I understand what is the current behavior, but I'm not able to understand what problem it causes. Can you give us more details about why this is a problem?

[danieldudzic]

Since the author hasn't responded in 2 weeks, I'm closing this issue, but please feel free to re-open/create a new issue with further details.

[banacan]

Hi @gigitux,

The more I research this the more I'm convinced this is related to the Shortcode block. In this image you will see the block editor with list view. You will note that the 3-column block contains an image in the first column, a Shortcode block and below it the Hand-picked product in the second column, and a Paragraph block in the third column.

In this image you will see the frontend view of the page. Notice that the image in column one is full column width, the text in column three is full column width, and the Hand-picked product block is full column width. But you can clearly see that the Shortcode block is only 25% of the column width. This is the problem.

In this image of the markup you can see that the Shortcode block has a class of ul.products.columns-4 whereas the Hand-picked product block below has a class of ul.wc-block-grid__products. As you can see in this image, if I change the class of the Shortcode block from ul.products.columns-4 to ul.products.columns-1 it displays correctly (here's the markup showing the class change.)

I hope this illustration helps you to see what the problem is.

[albarin]

Hello @banacan, thanks for getting back with more details, it was very useful. From what I see in the image you provided, you are passing column="1" to the shortcode. The parameter should be columns="1" instead (in plural). I think it does not recognize the parameter and then the columns is defaulting to 4 (as mentioned in the docs) so the product column is occupying 25% of the space.

I hope this helps, let us know if this solves your issue. Thanks a lot!

[banacan]

Hello @albarin,

Thank you very much for pointing out my simple mistake, and more importantly for reminding me that the default is 4.

This solves my issue.