Twenty Nineteen: Flex order on comment form causes contents of comment_form_after to appear above the form

[garrett-eclipse]

In the Twenty Nineteen theme the comment form design uses flexbox order CSS properties.

When contents are injected via the comment_form_after they're expected to appear below the form, for instance the Akisment privacy message. Due to the flex order the contents instead appears before the form.

Attaching screenshots

[garrett-eclipse]

Akismet content injected via comment_form_after appearing above comments form

[garrett-eclipse]

Inspect screen showing the dom and css affecting the content order.

[sabernhardt]

The order has been like this since the initial commit, so I do not understand why it was done this way. But making the visual order match the DOM is important, with or without the comment_form_after content.

[sabernhardt]

creating a new container class to avoid flex order, hiding that container in print styles, moving heading before the form (in the markup)

[sabernhardt]

Adding a message also hides the "Leave a comment" heading, and 46600.diff​ shows it again.

The patch uses a new class to stop using CSS flex, but any child theme with the old markup still would have the older styles. And this new container is hidden in the print stylesheet.

The patch does not match the styles perfectly when no messages are added. The 1rem top margin for the short line above the heading does not apply (it's included in the wrapper's margin), though I'm not convinced that the extra space is necessary.

[audrasjb]

@sabernhardt thanks, the patch looks great to me but I'm only wondering about replacing class comment-form-flex with comment-form-wrapper, since it would introduce a breaking change for people who customized this container. For the sake of backward compatibility, could we keep the previous class?

[sabernhardt]

I thought to switch classes for the structure, but did not account for several other possibilities (changing text or background color, adding a border, etc.).

It probably should add a new class and keep the existing class, which requires a bit more CSS editing.

Fix the DOM order in the comment form, and add a new .comment-form-wrapper class to change flex display to block.

Trac ticket: https://core.trac.wordpress.org/ticket/46600

[sabernhardt]

The print styles apparently do not need editing with this way. Both .comment-form-flex and .comment-form-wrapper have the same level of specificity.

[sabernhardt]

The pull request is updated, including the RTL stylesheet and correcting an HTML comment for another container.

[audrasjb]

Thank you @sabernhardt for the changes.
The pull request looks good to me know.
Self assigning for commit and adding needs-dev-note keyword so this new class could be referenced on a Bundled Themes dev note or in the Misc changes dev note 📗

[audrasjb]

In 52993:

Twenty Nineteen: Override flex order in comment form.

This change updates Twenty Nineteen bundled theme to fix the DOM order in the comment form, and to add a new .comment-form-wrapper class to change flex display to block for this specific area.

Props garrett-eclipse, audrasjb, sabernhardt.
Fixes #46600.

Committed in https://core.trac.wordpress.org/changeset/52993

[sabernhardt]

The ​field guide mentions this change.

If someone wants to write about this in a Bundled Themes note as well, it could be worth adding how child themes that replace the parent style.css and/or comments.php would retain the flex order.