WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#35833 new defect (bug)

Adding a table with the "widefat" class on post and taxonomy list table screens causes the quick edit UI and bulk edit to fail

Reported by: Braad Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.4.2
Component: Quick/Bulk Edit Keywords: has-screenshots has-patch dev-feedback
Focuses: ui, javascript, administration Cc:

Description

This is a very strange issue. On a fresh WP install running twentysixteen with no plugins activated, including this code causes the quick edit UI to miscalculate its width and end up looking wacky:

add_action( 'load-edit.php', 'xxx_test_table_in_help_tab' );
function xxx_test_table_in_help_tab() {
    $test_table_args = array(
        'id'       => 'test_help_table',
        'title'    => 'Something',
        'content'  => '<table class="widefat"><tr><td>Something</td></tr></table>',
    );
    get_current_screen()->add_help_tab( $test_table_args );
}

I'm attaching a screenshot of what the quick edit UI looks like with this code in place. Removing the class "widefat" restores the quick edit UI to normal. As strange as it sounds, I believe the presence of the widefat class is causing something in the quick edit JS to miscalculate. I haven't found the exact line where the issue is, but it seems to all come down to the presence of the "widefat" class.

Attachments (5)

wp-quick-edit-issue.png (138.1 KB) - added by Braad 2 years ago.
Screenshot of the issue, after toggling open the quick edit
inline-edit-post.diff (2.7 KB) - added by Braad 2 years ago.
First pass at using more specific selectors
wp-tax-quick-edit-issue.png (235.9 KB) - added by Braad 2 years ago.
Screenshot of the issue on taxonomy edit screens, after toggling open the quick edit
test-35833.php (402 bytes) - added by Braad 2 years ago.
A quick plugin for testing this issue, simply adds a table.widefat in the Help tabs
35833.diff (4.3 KB) - added by Braad 2 years ago.
Improved patch that uses table.wp-list-table in place of table.widefat for both post and taxonomy edit screens

Download all attachments as: .zip

Change History (12)

@Braad
2 years ago

Screenshot of the issue, after toggling open the quick edit

#1 @Braad
2 years ago

If anyone wants to test this without running that code, you can even just inspect element in your browser and paste this into one of the Help tabs .help-tab-content divs:

<table class="widefat"><tr><td>Something</td></tr></table>

Then try toggling the quick edit to see the issue. This is happening for me in Chrome.

#2 @Braad
2 years ago

The issue appears to be originating in /wp-admin/js/inline-edit-post.js, where this selector is used throughout that file:

$('table.widefat')

Since these aren't scoped to just the quick edit section a <table> with the class "widefat" inside the Help tabs (or really anywhere else on the page) is getting targeted also.

There is even a selector that is just ".widefat" on line 291, which could potentially cause other side effects when the class is used on inputs and other elements anywhere on the page.

@Braad
2 years ago

First pass at using more specific selectors

#3 @Braad
2 years ago

Just created my first patch that attempts to fix this issue. I'm not sure what the official method is for minifying core JS so I haven't submitted a minified version of the file yet, but trying the updated code in that file works for me.

The changes I made include switching all instances of the generic $( 'table.widefat' ) and $( '.widefat' ) to $( 'table.wp-list-table.widefat' ). I'm hoping this is safe to do, but it's possible that the "widefat" class is no longer needed in the selector at all and we can just do $( 'table.wp-list-table' ).

I don't expect my patch will be the final one but I wanted to get the ball rolling. If anyone can point me in the right direction to minify the file I can submit another patch that includes that, or if there are other issues with my patch I'm happy to make any necessary changes to take this over the finish line.

#4 @Braad
2 years ago

  • Keywords has-screenshots has-patch added

#5 @Braad
2 years ago

  • Summary changed from Including a table with the "widefat" class in Help tabs causes the quick edit UI to fail to Adding a table with the "widefat" class on post and taxonomy list table screens causes the quick edit UI and bulk edit to fail

@Braad
2 years ago

Screenshot of the issue on taxonomy edit screens, after toggling open the quick edit

@Braad
2 years ago

A quick plugin for testing this issue, simply adds a table.widefat in the Help tabs

@Braad
2 years ago

Improved patch that uses table.wp-list-table in place of table.widefat for both post and taxonomy edit screens

#6 @Braad
2 years ago

After digging a bit deeper I discovered that the table.widefat and .widefat selectors were also being used on taxonomy edit screens in /wp-admin/js/inline-edit-tax.js, and the issue with the quick edit UI was also happening there.

I also discovered that on the posts list table screens the bulk edit was broken (checking box for one or more posts, setting "bulk edit actions" dropdown to "edit" and clicking apply does nothing) in addition to the issue with the quick edit UI happening.

All of these issues happen when there is a second table with the class "widefat" anywhere on the post and taxonomy list table screens, not just in the Help tabs.

I've uploaded a screenshot of the quick edit issue happening on taxonomy edit screens, and I've uploaded test-35833.php as a quick test plugin you can activate to see the issue happening (activate and try to use the quick edit on posts, pages, categories, or tags to see the issue).

I'm also uploading a second patch that fixes a typo in the first patch, switches to consistently using table.wp-list-table as the selector (getting away from selecting by .widefat completely), and updates inline-edit-tax.js also, solving this problem for both post and taxonomy list table screens.

Looking at similar tickets it doesn't seem that people are submitting minified versions of JS files in patches, so I think this new patch has everything it needs. I did grab the develop branch and get the grunt tasks working and all qunit tests still pass.

If there is anything else this patch needs, please let me know. I'm happy to keep working on it. This would be my first core contribution if it gets merged, and I'm ready to do anything necessary to take it over the finish line :)

Last edited 2 years ago by Braad (previous) (diff)

#7 @Braad
2 years ago

  • Focuses ui javascript administration added
  • Keywords dev-feedback added
Note: See TracTickets for help on using tickets.