Changes on Twenty Nineteen HTML structure in WordPress 5.3

Welcome!

The WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:

Found a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.? Create a ticket in the bug tracker.

Want to contribute? Get started quickly with tickets marked as good first bugs for new contributors or join a bug scrub. There’s more on the reports page, like patches needing testing, and on feature projects page.

Other questions? Here is a detailed handbook for contributors, complete with tutorials.

In some templates, Twenty Nineteen was using a <main> HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element which was appearing as a direct descendant of a <section> HTML element. This resulted in markup errors on the following templates:

404.php
archive.php
image.php
index.php
page.php
search.php
single.php

For reference, see HTML specifications:

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements.
Source: HTML Living Standard

WordPress 5.3 will change that behavior by using a neutral <div> element instead of <section>.

Previous HTML rendering example:

<section id="primary" class="content-area">
    <main id="main" class="site-main">
        …
    </main>
</section>

New HTML rendering example:

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        …
    </main>
</div>

WordPress users who are using Twenty Nineteen as a parent theme are encouraged to check their child themes stylesheets are not using selectors like section#primary or section.content-area and to update them to #primary or .content-area if needed.

For reference, see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #47066

#5-3, #dev-notes

Jonathan Desrosiers 9:06 pm on September 4, 2019
Thanks for this, @audrasjb! Is there any way that some CSSCSS Cascading Style Sheets. examples can be added to demonstrate changes that would be need to made to custom stylesheets?

I do appreciate the problem that is trying to be solved here, but I still have some big concerns about the roll out of this change.

Any child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of Twenty Nineteen or any site that has custom CSS (which is even harder to detect and account for) with any of the following rules could potentially see some severe adverse affects on how their site looks.
- `section .site-main`
- `section #main`
- `section #primary`
- `section.content-area`
These are pretty basic style definitions that would allow a site owner to change the font size, color, weight or family for their site, padding, etc.

I’d also argue that users that utilize custom CSS in the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. will never see this dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.. And even if they do, they may not understand how HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. or CSS works (maybe they copy and pasted an example from a tutorial to change how their site looks).
Andrea Fercia 9:20 pm on September 4, 2019

@desrosj as noted also on the ticketticket Created for both bug reports and feature development on the bug tracker. https://core.trac.wordpress.org/ticket/47066 these concerns are shared by everyone. However, I’d encourage everyone to think at the best way to make this change happen rather than arguing on potential breakage 🙂

What is the best way to communicate this change to the broadest possible audience? Any help would be greatly appreciated.
- Jb Audras 9:53 pm on September 4, 2019
  
  Thanks @desrosj, will add some examples in the post.
  On our (fr_FR) side, we will translate that dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. on our Rosetta website.
  After that, I’ll encourage other polyglots teams to do the same. I hope that could help to share that 🙂

Comments are closed.

Welcome!

Communication

Share this: