WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 4 months ago

#43978 assigned defect (bug)

Avoid flickering on the Tools / Export page

Reported by: birgire Owned by: birgire
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Export Keywords: has-screenshots has-patch
Focuses: ui, administration Cc:

Description

The export filters are hidden by default on the Tools / Export page.

But it's only hidden with Javascript in wp-admin/export.php:

jQuery(document).ready(function($){
    var form = $('#export-filters'),
        filters = form.find('.export-filters');
    filters.hide();

The filters can therefore be visible for a short time, before they are hidden.

Here the filters.hide() will add a display:none; inline styling to the corresponding filters.

We can avoid this flickering with CSS, something like:

#export-filters .export-filters {
    display: none;
}

Attachments (7)

flicker-on-export-tools-page.gif (114.9 KB) - added by birgire 2 years ago.
43978.patch (367 bytes) - added by robicse11128 2 years ago.
43978.2.patch (663 bytes) - added by robicse11128 2 years ago.
Code moved to wp-admin/css/forms.css
43978.diff (338 bytes) - added by pmbaldha 2 years ago.
Positioned css at proper location where tools styles reside in forms.css and discard all changes in common.css which are in 43978.2.patch
43978.3.diff (338 bytes) - added by pmbaldha 2 years ago.
Positioned css at proper location where tools styles reside in forms.css and discard all changes in common.css which are in 43978.2.patch
43978.3.test-fixed-issue.gif (211.6 KB) - added by pmbaldha 2 years ago.
43978.3.gif have resolved the issue
43978-4.diff (767 bytes) - added by birgire 12 months ago.

Download all attachments as: .zip

Change History (15)

@robicse11128
2 years ago

#1 @birgire
2 years ago

Thanks for the patch @robicse11128

These files currently have references to #export-filters or .export-filters:

wp-admin/css/forms.css
wp-admin/css/edit.css

I wonder if either one, would be suitable here. What do you think?

@robicse11128
2 years ago

Code moved to wp-admin/css/forms.css

@pmbaldha
2 years ago

Positioned css at proper location where tools styles reside in forms.css and discard all changes in common.css which are in 43978.2.patch

@pmbaldha
2 years ago

Positioned css at proper location where tools styles reside in forms.css and discard all changes in common.css which are in 43978.2.patch

@pmbaldha
2 years ago

43978.3.gif have resolved the issue

#2 @pmbaldha
2 years ago

  • Keywords has-patch added; needs-patch removed

#3 @birgire
2 years ago

  • Keywords good-first-bug removed

@pmbaldha Thanks for the patch and the screen-animation. That looks good

Mark the good-first-bug as claimed and remove that tag.

@birgire
12 months ago

#4 @birgire
12 months ago

  • Focuses ui added
  • Milestone changed from Awaiting Review to 5.3
  • Owner set to birgire
  • Status changed from new to assigned

I was reminded by this again today, when using the export :-)

I think we should try to target the next big milestone, as this is a relatively small fix.

The 43978-4.diff patch only targets the case when javascript is enabled, to allow the options to be expanded when it's disabled. It came to mind to use the .hidden CSS class on the .export-filters nodes, but since plugins can add their own, it's not suitable, as they would be missing the .hidden class.

Last edited 12 months ago by birgire (previous) (diff)

#5 @garrett-eclipse
12 months ago

Thanks @birgire I would lean more towards using the .hidden CSS class as well as use setActionState() in xfn.js to add remove the class. For the plugins we can on load run JS to apply the class, I guess that will cause the plugin ones to flicker though which almost defeats the purpose.
Would be nice to know how export_filters is used in the wild.

#6 @birgire
12 months ago

@garrett-eclipse thanks for the suggestions.

Having a way to avoid the flickering for both default setup and all filters added via the export_filters filter would be optimal.

It would be an interesting approach, if you think there's a way to add .hidden via javascript to reduce the flickering, but I guess one would probably have to test it to see if it helps :-)

Here we have 24 plugins in the plugin directory that add their own export filter:

https://wpdirectory.net/search/01DE7RBMHNMS56FF8KQG7VPQD9

When we have a suitable patch, it would be good to test some of them.

ps: The setActionState() should now be in the new privacy-tools.js

#7 @birgire
8 months ago

  • Milestone changed from 5.3 to 5.4

#8 @birgire
4 months ago

  • Milestone changed from 5.4 to Future Release
Note: See TracTickets for help on using tickets.