WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 2 weeks ago

#43978 assigned defect (bug)

Avoid flickering on the Tools / Export page

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

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 18 months ago.
43978.patch (367 bytes) - added by robicse11128 18 months ago.
43978.2.patch (663 bytes) - added by robicse11128 18 months ago.
Code moved to wp-admin/css/forms.css
43978.diff (338 bytes) - added by pmbaldha 18 months 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 18 months 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 18 months ago.
43978.3.gif have resolved the issue
43978-4.diff (767 bytes) - added by birgire 4 months ago.

Download all attachments as: .zip

Change History (14)

#1 @birgire
18 months 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
18 months ago

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

@pmbaldha
18 months 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
18 months 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
18 months ago

43978.3.gif have resolved the issue

#2 @pmbaldha
18 months ago

  • Keywords has-patch added; needs-patch removed

#3 @birgire
17 months 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
4 months ago

#4 @birgire
4 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 4 months ago by birgire (previous) (diff)

#5 @garrett-eclipse
4 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
4 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
2 weeks ago

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