Make WordPress Core

Opened 2 years ago

Last modified 4 months ago

#59263 new defect (bug)

Twenty Nineteen: File block does not respect center alignment setting

Reported by: truptikanzariya's profile truptikanzariya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:

Description

In the Twenty Nineteen Theme, the File Block element may not be centered correctly on the front end of the website. This misalignment can result in a visually uneven layout.

For a better understanding, I have attached a video.

https://www.awesomescreenshot.com/video/20417359?key=343f6fb217d9d85baa05a68bcd238f6a

Thank you.

Attachments (7)

centered-file-blocks-v2-editor.png (149.7 KB) - added by sabernhardt 2 years ago.
Centered file blocks with Twenty Nineteen in WordPress 6.3 with the non-framed editor
centered-file-blocks-iframe-editor.png (149.2 KB) - added by sabernhardt 2 years ago.
The iframe editor does not center File block contents either
centered-file-blocks-front.png (82.5 KB) - added by sabernhardt 2 years ago.
On the front end, text links are centered within the content area, but Download links are not centered
file-block-before-fix.mov (3.0 MB) - added by lakshyajeet 5 months ago.
File Block before the fix
file-block-after-fix.mov (3.6 MB) - added by lakshyajeet 5 months ago.
File Block after the fix
Testing.png (186.4 KB) - added by sourabhjain 4 months ago.
New Note.jpeg (553.9 KB) - added by poojapadamad 4 months ago.

Change History (14)

@sabernhardt
2 years ago

Centered file blocks with Twenty Nineteen in WordPress 6.3 with the non-framed editor

@sabernhardt
2 years ago

The iframe editor does not center File block contents either

@sabernhardt
2 years ago

On the front end, text links are centered within the content area, but Download links are not centered

#1 @sabernhardt
2 years ago

  • Component changed from Themes to Bundled Theme
  • Focuses css added
  • Summary changed from The Twenty Nineteen Theme: File Block is not centered on the front end. to Twenty Nineteen: File Block can only center the text link
  • Version changed from trunk to 5.0

Thanks for the report!

The Center alignment setting apparently never worked on the Download link, when it is included in the File block, with Twenty Nineteen. The Download link would need to honor the Center setting in both the editor and the front end, and the text link would need centering within the editor too.

The PDF embed is the full block width, so it does not need centering. Twenty Nineteen aligns this block with paragraphs and other content blocks, not according to the page (see #58441).

#2 @sabernhardt
2 years ago

  • Summary changed from Twenty Nineteen: File Block can only center the text link to Twenty Nineteen: File block does not respect center alignment setting

This ticket was mentioned in PR #9056 on WordPress/wordpress-develop by @lakshyajeet.


5 months ago
#3

  • Keywords has-patch added; needs-patch removed

Trac ticket: https://core.trac.wordpress.org/ticket/59263

Make File Block respect the alignment settings.

### Before:
Center and Right alignment does not work for Download button.

https://github.com/user-attachments/assets/8ca3fc75-6001-4d32-bbc4-e758e527d98d

### After:
Center and Right alignment fixed for File block.

https://github.com/user-attachments/assets/d5a008f5-4fdf-42ba-ab2d-52dcfbc2ff0b

@lakshyajeet
5 months ago

File Block before the fix

@lakshyajeet
5 months ago

File Block after the fix

#4 @lakshyajeet
5 months ago

  • Keywords needs-testing added

@sourabhjain
4 months ago

#5 @sourabhjain
4 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/9056

Environment

  • WordPress: 6.9-alpha-20250624.091151
  • PHP: 7.4.31-dev
  • Server: PHP.wasm
  • Database: WP_SQLite_Driver (Server: 5.5 / Client: 3.40.1)
  • Browser: Chrome 138.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.1
  • MU Plugins: None activated

Actual Results

  • ✅ Issue resolved with patch.

Additional Notes

  • Due to limitation of Playground option unable to see the PDF preview

Testing Steps :

Change Theme to Twenty Ninteen
Create New Post
Add File Block
Kindly ensure the file is centrally aligned.

Supplemental Artifacts

Add as Attachment - https://core.trac.wordpress.org/attachment/ticket/59263/Testing.png

Last edited 4 months ago by sourabhjain (previous) (diff)

#6 @SirLouen
4 months ago

@sourabhjain I recommend you to use the right template which includes a link to the patch you tested (despite there is only one rn, there could be more in the future). You could either use this plugin or copy paste this one.

#7 @poojapadamad
4 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.
Patch tested: https://github.com/WordPress/wordpress-develop/pull/9056

Environment

  • WordPress: 6.9-alpha-20250624.091151
  • PHP: 7.4.31-dev
  • Server: PHP.wasm
  • Database: WP_SQLite_Driver (Server: 5.5 / Client: 3.40.1)
  • Browser: Chrome 138.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 3.1
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ✅ Issue resolved with patch.

Steps to reproduce:

  1. Activate Twenty Ninteen theme
  2. Create a post
  3. Add a file block
  4. Observe that file is centrally aligned.

Additional Notes

Because of the limitations of the Playground option, I’m not able to view the PDF preview.

Supplemental Artifacts

Attachment -https://core.trac.wordpress.org/attachment/ticket/59263/New%20Note.jpeg

Last edited 4 months ago by poojapadamad (previous) (diff)
Note: See TracTickets for help on using tickets.