Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File Block: Download Button Not Mobile Responsive #68823

Open
3 of 6 tasks
SainathPoojary opened this issue Jan 22, 2025 · 4 comments · May be fixed by #68824
Open
3 of 6 tasks

File Block: Download Button Not Mobile Responsive #68823

SainathPoojary opened this issue Jan 22, 2025 · 4 comments · May be fixed by #68824
Assignees
Labels
[Block] File Affects the File Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@SainathPoojary
Copy link
Contributor

Description

The File block in editor and frontend is not fully mobile responsive. When viewed on mobile devices, the Download button unintentionally moves to a new line and has an unintentional margin to the left, affecting its alignment.

Expected behavior:
The Download button should remain aligned with the file name or adjust gracefully without extra margins.

Current behavior:
The Download button breaks to a new line on mobile and displays an unintended margin on its left, leading to a misaligned and inconsistent appearance.

Step-by-step reproduction instructions

  1. Create a new post or page in the WordPress editor.
  2. Add a File block and upload or select a file.
  3. Publish or preview the post.
  4. View the post/page on a mobile device or resize the browser window to simulate a mobile screen.
  5. Observe the alignment and placement of the Download button in the File block.

Screenshots, screen recording, code snippet

Mobile:

Image

Desktop:

Image

Environment info

  • WordPress: 6.8-alpha-59602
  • PHP: 8.2.27
  • Server: Apache/2.4.62 (Debian)
  • Database: mysqli (Server: 11.4.4-MariaDB-ubu2404 / Client: mysqlnd 8.2.27)
  • Browser: Chrome 132.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.0
  • MU Plugins: None activated
  • Plugins:
    • Gutenberg 20.1.0-rc.1

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@SainathPoojary SainathPoojary added the [Type] Bug An existing feature does not function as intended label Jan 22, 2025
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 22, 2025
@Mamaduka Mamaduka added the [Block] File Affects the File Block label Jan 22, 2025
@hanneslsm
Copy link

The Download button should remain aligned with the file name or adjust gracefully without extra margins.

I tend to disagree. Since one can change the button text, the button could be longer than only "Download".
Also, we should consider translations. E.g. in german it's "Herunterladen" which is a longer word already.
We can run into a lot of line breaks for the file title and the button text when the button is on the right. I prefer as it is.

The margin could be fixed. However I'm not sure how much is coming from the theme.

@Andrew-Starr
Copy link

There is a left margin of .75em applied to the file button by core/gutenberg regardless of theme.

It should break to a new line when required so I think it would be better if the file block wrapper had a flex layout instead.

@Mayank-Tripathi32
Copy link
Contributor

I think instead of fixing this, we should consider this issue #57314

PR: #68510

@Mamaduka
Copy link
Member

Agreed. It is probably better to focus on general File block button improvements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] File Affects the File Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants