Developer Advisory: HTML Tag Update in Block Templates for WooCommerce 9.0

Overview

In WooCommerce 9.0, schedule for release on June 11th, 2024, we will be changing the main HTML tag from <div> to <main> in several block templates in an effort to improve accessibility. 

Affected Templates

The following templates are updated:

• archive-product.html
• product-search-results.html
• single-product.html
• taxonomy-product_attribute.html
• taxonomy-product_cat.html
• taxonomy-product_tag.html
• blockified/archive-product.html
• blockified/product-search-results.html
• blockified/single-product.html
• blockified/taxonomy-product_attribute.html
• blockified/taxonomy-product_cat.html
• blockified/taxonomy-product_tag.html

Why This Change?

Accessibility Improvement

The <main> tag defines the central content of a page, providing better support for assistive technologies such as screen readers. This change enhances navigation for users relying on these technologies, aligning with our commitment to accessibility.

Actions Required

For Custom Themes

• Update Custom Templates: If you have customized any of the affected templates, we encourage you to update them to use <main> instead of <div>, in order to take advantage of these accessibility improvements. 

For Custom CSS

• Selector Changes: If your custom CSS targets div.wp-block-group, update it to main.wp-block-group or use a more generic selector, like .wp-block-group to avoid breaking styles with the upgrade to WooCommerce 9.0. 
• Global Styles: We strongly recommend using global styles over custom CSS for block styling to ensure compatibility with future updates.

Best Practices

• Avoid Specific Nesting: Do not write CSS selectors that depend on specific block nesting, as this can break when blocks are moved or updated.
• Use Global Styles: Adopt global styles to minimize conflicts with other plugins or themes and maintain compatibility with template updates.

Next Steps

Monitoring and Support

We are closely monitoring feedback to address any issues promptly. Should you need assistance or encounter problems, please reach out via our support channels or @DevelopWoo on Twitter.

Feedback and Questions

For any questions or feedback, engage with us on our support channels or connect with us on Twitter @DevelopWoo.

Conclusion

We appreciate your cooperation and understanding as we implement these improvements. Our goal is to enhance accessibility while maintaining a seamless experience for all users. Thank you for your support.