6.7 broke accordion styles for themes/plugins using `do_accordion_sections()`

[mboynes]

Core provides a meta box function, do_accordion_sections(), which will helpfully render meta boxes for a screen as collapsible accordions. WordPress 6.7 removed some CSS classes (stemming from #42002, I believe) from common.css, and now any plugin or theme using do_accordion_sections() is rendering partially-styled (but still functional) accordions.

[joemcgill]

Thanks, @mboynes. @joedolson do you have the ability to take a look at this?

[joedolson]

@mboynes Can you provide an example of a plugin or theme with this issue, so I can take a look at a specific case? I found a couple of examples and looked at them, but couldn't see the issue in those examples.

[jorbin]

6.6 Screenshot

[jorbin]

6.7 screenshot

[mboynes]

Thanks for looking into this, @joedolson! Absolutely, here's a plugin I maintain for SEO fundamentals: ​https://github.com/alleyinteractive/wp-seo. This plugin has a settings screen which uses do_accordion_sections(). You can see a screenshot of the issue in ​this GitHub issue on that repo.

It looks like the main issue may be the lack of styles on the new <button>, which are specifically targeted toward/beneath .nav-menus-php.

[jorbin]

Noting that depending on the size of the change required, I'm not completely opposed to including this in 6.7.2, but I would like to see it fixed ideally in the next 24 hours so that there is time to package an RC2.

Using ​this plugin, I believe I was able to replicate this.

6.6:

6.7:

[joedolson]

Based on those screenshots, it will be pretty simple; it's just going to require the same site of styles but applicable in a more generic way. I can probably get a patch done pretty quickly - I think it would be worth getting this into 6.7.2.

I'm a little surprised that this didn't come up for such a long time, but looking at usage it seems that this isn't a widely used function, and many extenders using it have already provided extensive custom styling.

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

[joedolson]

Added a draft PR that does some re-mapping of styles to support generic accordion containers. Please check this over thoroughly, since we're trying to get these in soon!

[jorbin]

Initial testing using chrome and the following conditions show promise so moving into 6.7.2 while testing continues.

• Hueman theme 3.7.24 to ensure #62494 is not reintroduced.
• reCAPTCHA in WP comments form plugin
• Using a basic plugin (below) to ensure #62491 isn't reintroduced

<?php
/*
Plugin Name: Testing for 62491
Description:
Author: Jorbin
Version: 1.7.2
Author URI: https://aaron.jorb.in/
*/

function break_customizer_height() {
    ?>
    <style>
    body {
        background: #8ACE00;
    }
    </style>
    <?php
}
add_action( 'admin_enqueue_scripts', 'break_customizer_height' );

I tested this out and it's a massive improvement. One nitpicky note, it looks like the carets are not vertically aligned, they're a pixel or two too close to the top

[joemcgill]

This looks ready to go, but leaving to @joedolson for final sign-off and commit.

[joedolson]

I'll take care of it shortly.

[joedolson]

In 59772:

General: Add styles for extender usage of do_accordion_section().

Follow up to [59224]. Add CSS to cover usage of the do_accordion_section() function when used in extender contexts outside of the existing WordPress core usage.

Props mboynes, jorbin, joemcgill, joedolson.
Fixes #62907.

[joedolson]

Reopening for backport to 6.7.

[joemcgill]

[59772] looks good for backporting.

[jorbin]

In 59779:

General: Add styles for extender usage of do_accordion_section().

Follow up to [59224]. Add CSS to cover usage of the do_accordion_section() function when used in extender contexts outside of the existing WordPress core usage.

Reviewed-by joemcgill, jorbin.
Merges [59772] to 6.7 brnch.

Props mboynes, jorbin, joemcgill, joedolson.
Fixes #62907.