Avoid flickering on the Tools / Export page

[birgire]

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;
}

[birgire]

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]

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

[pmbaldha]

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]

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]

43978.3.gif have resolved the issue

[birgire]

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

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

[birgire]

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.

[garrett-eclipse]

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.

[birgire]

@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