Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#42205 closed defect (bug) (fixed)

FTP credentials dialog gets hidden behind things

Reported by: helen Owned by: afercia
Milestone: 4.9 Priority: low
Severity: normal Version:
Component: Customize Keywords: good-first-bug has-patch
Focuses: ui Cc:


Steps to reproduce:

  1. Force FTP on if not already.
  2. Head to Add Themes and click on a screenshot for a full screen overlay preview.
  3. Click Install in the sidebar.
  4. Observe the Install button change to Installing with a spinner that seems to get stuck.
  5. Close the preview overlay and observe that the FTP credentials dialog is there waiting patiently.

This is hopefully "merely" a z-index issue. Here's how to force FTP on for testing:

 * Plugin Name: Force FTP
 * Description: Used to test FTP credentials screen.

add_filter( 'filesystem_method', function() {
	return 'ftpext';
} );

add_filter( 'fs_ftp_connection_types', function() {
	return [
		'ftp'  => __( 'FTP' ),
		'ftps' => __( 'FTPS (SSL)' ),
		'ssh'  => __( 'SSH2' ),
} );

Attachments (2)

42205.patch (559 bytes) - added by purnendu 4 years ago.
FTP credentials dialog modal visibility for the body class was hidden in core css, added the css attribute via js
42205.diff (446 bytes) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (18)

4 years ago

FTP credentials dialog modal visibility for the body class was hidden in core css, added the css attribute via js

#1 @purnendu
4 years ago

  • Keywords has-patch added; needs-patch removed

#2 @afercia
4 years ago

  • Component changed from Upgrade/Install to Customize
  • Milestone changed from Awaiting Review to 4.9

Hm, the customizer uses visibility: hidden on the body when there are full overlays, to completely hide all elements except the customizer. This has the advantage to make the customizer the only perceivable content in the page, and its focusable elements the only ones in the page (no need to constrain tabbing within the full overlays, etc.)

However, the FTP credentials modal is inside wp-body-content so it inherits visibility: hidden. A proper fix would be setting visibility: visible on the modal using just CSS.

To evaluate: why the FTP credentials modal is inside wp-body-content? Ideally, all modals should be placed in the source before the </body>.
To evaluate: maybe the customizer should set visibility: hidden on #wpwrap and not on the body.

4 years ago

#3 @afercia
4 years ago

42205.diff uses just CSS preserving visibility: hidden on the body. When testing, please be sure to hard-refresh your browser cache.

#4 @purnendu
4 years ago


This is being discussed in one of your topic here - https://core.trac.wordpress.org/ticket/27705

That visibility: hidden is being set for the body class and changing of hidden to visible is being done via javascript.

#5 @afercia
4 years ago

@purnendu in this case, body should stay hidden, the customizer should stay visible (so it's the only perceivable content as discussed on #27705). Only when the customizer full overlay closes, visibility hidden gets removed from the body. In other words: we shouldn't touch that. We should just make the modal visible.

#6 @purnendu
4 years ago


Thanks for the clarification.

That's what I did, and did that when modal opens via JavaScript.

Last edited 4 years ago by purnendu (previous) (diff)

#7 @afercia
4 years ago

@purnendu sure, but there's no need to do that with JavaScript. Presentation should be done with CSS.

#8 @melchoyce
4 years ago

@afercia I did a hard refresh, but I'm still seeing the FTP modal behind the theme preview with 42205.diff applied.

#9 @afercia
4 years ago

@melchoyce I don't see the FTP modal at all :) I mean, seems to me it's not printed out in the markup. @westonruter any recent change that could cause the modal markup to be not printed out?

@melchoyce do you see an element with class request-filesystem-credentials-dialog in your browser inspector?

#10 @westonruter
4 years ago

I've not had the problem of the FTP creds modal being hidden behind anything in the Customizer. As long as I activate the “Force FTP” plugin above, and apply the patch from #42184 to get the modal even output into the Customizer, it appears just fine (it doesn't work after that).

#11 @afercia
4 years ago

Ok with #42184 applied I see the FTP credentials in the Customizer too (wp.org themes).

The original report by @helen is about the theme installer though, that's the one in the Appearance screen > Add New > click on a not installed theme to open the theme installer, for example:



Click on the "Install" button and the FTP modal appears.

Behind the overlay the "Install" button turns into "Installing".

Cancel and close the modal: the button turns back to "Install".

Se everything seems to work fine, I can't test what happens when actually submitting real credentials though.

Instead, in the Customizer:

  • apply also the patch on #42184
  • go to the Customizer > change theme > wp.org themes
  • click on theme details to open the details modal and then install
  • or click directly on Install & Preview
  • the FTP modal opens correctly

However, when I cancel and close the modal, all I can see is the Customizer full overlay below. There's no escape from there, the only chance is refresh or browser's Back button:


Unrelated to the FTP modal visibility, but should be fixed.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.

4 years ago

#13 @afercia
4 years ago

For the "downloading" overlay issue, see https://core.trac.wordpress.org/ticket/42314

The patch here can be committed together with the one on #42184

#14 @afercia
4 years ago

Will commit since simply setting visibility: visible on the modal partially solves the issue and doesn't harm other pending fixes in #42184.

#15 @afercia
4 years ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

In 41972:

Customize: Make sure the FTP credentials modal is visible.

The customizer and the theme installer use visibility: hidden on the body when
they open full-overlays screens. The FTP credentials modal needs a visibility
property set back to visible to be visible over those overlays.

Props purnendu.
Fixes #42205.

#16 @swissspidy
4 years ago

#43245 was marked as a duplicate.

Note: See TracTickets for help on using tickets.