WordPress.org

Make WordPress Core

Opened 19 months ago

Closed 19 months ago

Last modified 16 months 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:

Description

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:

<?php
/**
 * 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 19 months 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 19 months ago.

Download all attachments as: .zip

Change History (18)

@purnendu
19 months ago

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

#1 @purnendu
19 months ago

  • Keywords has-patch added; needs-patch removed

#2 @afercia
19 months 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.

@afercia
19 months ago

#3 @afercia
19 months 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
19 months ago

@afercia,

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
19 months 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
19 months ago

@afercia

Thanks for the clarification.

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

Last edited 19 months ago by purnendu (previous) (diff)

#7 @afercia
19 months ago

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

#8 @melchoyce
19 months 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
19 months 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
19 months 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
19 months 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:

wp-admin/theme-install.php?theme=placid

https://cldup.com/O2U8MUtJW2.png

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:

https://cldup.com/lOuhciR29P.png

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

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


19 months ago

#13 @afercia
19 months 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
19 months 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
19 months 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
16 months ago

#43245 was marked as a duplicate.

Note: See TracTickets for help on using tickets.