Twenty Twenty-Four theme - Problem with the Mini Cart on Mobile Devices

[mattiaspl]

Hello!

I using the Twenty Twenty-Four theme (the latest version). I’m experiencing an issue with the mini cart in the mobile version. The X button (close button) often goes missing after opening the mini cart. The mini cart is added to the header. I’ve noticed that the problem with the cart occurs on WooCommerce pages that are built with blocks, for example, products displayed on the shop page via the Products Block (beta). I’ve also checked the ‘All Products’ block. No changes, the mini cart’s close button is still missing.

I reported this issue on the Woocommerce plugin forum (here's the link: ​https://wordpress.org/support/topic/problem-with-the-mini-cart-on-mobile-devices-2/). Ultimately, they confirmed the same problem that I am experiencing. Accordingly, I am submitting the issue as per the suggestion received on the forum. All the details are also available there.

I hope that we will be able to resolve this issue.
If you need any additional information, please feel free to ask.

best regards & have a good day! :)

[poena]

Hi @mattiaspl
Thank you for taking the time to report this.
I understand that you were asked to open the issue here, but this is not a bug with the theme Twenty Twenty-Four.
As you wrote on the forum, it happens with other block themes too. I followed your instructions and tested it with my custom block themes and I see the same issue.
It seems to be a problem with the compatibility between WooCommerce and block themes.
That is why it works when it is tested with Storefront, which is a classic PHP based theme, not a block theme.

In block themes, it looks like nothing is rendered/output for the mobile version:

<div class="wc-block-components-drawer__close-wrapper"></div>

In classic themes:

<div class="wc-block-components-drawer__close-wrapper">
<button type="button" class="components-button wc-block-components-button wp-element-button wc-block-components-drawer__close contained has-text has-icon" aria-label="Close">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
<span class="wc-block-components-button__text"></span></button></div>

I looked at the open issues for the MiniCart in the WooCommerce GitHub repository but I was unable to find any similar reports:
​https://github.com/woocommerce/woocommerce/issues?q=is%3Aissue+label%3A%22block%3A+mini-cart%22+is%3Aopen

Because this is an issue with a third-party product, I will close this ticket.