Make WordPress Core

Opened 2 years ago

Last modified 6 weeks ago

#58500 assigned defect (bug)

Twenty Twenty: Separator block's Default style is wider than Wide Line style in editor

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 6.2.2
Component: Bundled Theme Keywords: has-patch changes-requested has-test-info
Focuses: css Cc:

Description

Steps to reproduce the issue.

  1. Activate Twenty Twenty theme.
  2. Take separator block.
  3. Choose wide-width and check that editor and front both side.

In front side default and wide width working as expected but in editor side it not works proper.

I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/xLbqrymSPhRf1kPpSw7B

Attachments (7)

58500.diff (1.1 KB) - added by sabernhardt 2 years ago.
LTR-800-front.png (6.3 KB) - added by sabernhardt 2 years ago.
On larger screens, the Default style lines up with the margin of a paragraph block, and the Wide Line separator approaches the edge of the window on the front end.
LTR-800-editor.png (32.6 KB) - added by sabernhardt 2 years ago.
With the patch in the editor, the Default style lines up with the margin of a paragraph block, and the Wide Line separator gets closer to the edge (than it does on the front).
LTR-600-front.png (4.4 KB) - added by sabernhardt 2 years ago.
On smaller screens, the front end shows both the Default and Wide Line separators aligned with the margin of a paragraph block.
LTR-600-editor.png (24.3 KB) - added by sabernhardt 2 years ago.
With the patch, the editor also shows both the Default and Wide Line separators aligned with the margin of a paragraph block.
editor.png (96.0 KB) - added by shraddhagore 5 months ago.
site.png (64.1 KB) - added by shraddhagore 5 months ago.

Download all attachments as: .zip

Change History (16)

#1 @sabernhardt
2 years ago

  • Focuses css added
  • Summary changed from Twenty Twenty theme separator block is having issue in editor with default and wide-width layout. to Twenty Twenty: Separator block's Default style is wider than Wide Line style in editor

@sabernhardt
2 years ago

@sabernhardt
2 years ago

On larger screens, the Default style lines up with the margin of a paragraph block, and the Wide Line separator approaches the edge of the window on the front end.

@sabernhardt
2 years ago

With the patch in the editor, the Default style lines up with the margin of a paragraph block, and the Wide Line separator gets closer to the edge (than it does on the front).

@sabernhardt
2 years ago

On smaller screens, the front end shows both the Default and Wide Line separators aligned with the margin of a paragraph block.

@sabernhardt
2 years ago

With the patch, the editor also shows both the Default and Wide Line separators aligned with the margin of a paragraph block.

#2 @sabernhardt
2 years ago

  • Keywords has-patch added

The Default style's max-width was necessary with WordPress 5.3 to override the 100px size from the editor. That is not necessary anymore, and the hr element is no longer inside a div to hold it to the standard .wp-block width of 610px. I added 610px as the max-width for this style of the Separator block.

The Wide Line style is not quite 100% on the front end (100vw - 8rem), but I used 100% in the editor for both width and max-width so it would not be narrower than the Default style.

#3 @sabernhardt
2 years ago

Oops. You said the "Wide width" alignment option, not the "Wide Line" style. The patch might still work, or at least be closer, but alignment options are not included in the screenshots.

#4 @karmatosed
13 months ago

  • Keywords needs-testing added

#5 @karmatosed
12 months ago

  • Owner set to karmatosed
  • Status changed from new to assigned

#6 @karmatosed
10 months ago

  • Owner karmatosed deleted

#7 @sainathpoojary
6 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58500/58500.diff

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.27
  • Server: nginx/1.27.3
  • Database: mysqli (Server: 8.4.3 / Client: mysqlnd 8.2.27)
  • Browser: Chrome 132.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty 2.8
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

❌ Issue not resolved with patch.

Supplemental Artifacts

Before Patch:

https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOF12uVLlPjKxSwy47ckIJHQLbgYtoDfNVhmpA

After Patch:

https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOffcAdC4ctlDHSkwfNGujMUIyo2W4P7rqvbXB

Last edited 6 months ago by sainathpoojary (previous) (diff)

@shraddhagore
5 months ago

@shraddhagore
5 months ago

#8 @shraddhagore
5 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58500/58500.diff

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.27
  • Server: nginx/1.27.4
  • Database: mysqli (Server: 8.4.4 / Client: mysqlnd 8.2.27)
  • Browser: Chrome 133.0.0.0
  • OS: Windows 10/11
  • Theme: Twenty Twenty 2.8
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ❌ The issue is not resolved with the patch 58500.

Additional Notes

The width of the wide line separator appears to be smaller than the default separator in the editor. However, both separators seem to be rendered correctly on the site.

Supplemental Artifacts

#9 @avinashbhosale
6 weeks ago

  • Keywords changes-requested has-test-info added; needs-testing removed

Combined Bug Reproduction and Patch Test Report

Description

This report validates that patch works as expected but some improvements are needed

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58500/58500.diff

Environment

  • WordPress: 6.8.1
  • PHP: 8.2.27
  • Server: nginx/1.26.1
  • Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
  • Browser: Chrome 137.0.0.0
  • OS: Windows 10/11
  • Theme: Twenty Eleven 4.9
  • MU Plugins: None activated
  • Plugins: None

Bug Reproduction

  1. Activate Twenty Twenty theme.
  2. Add a separator block with default width
  3. Add a separator block with wide width
  4. Observe that the default width separator is wider than the wide width separator in the editor

Expected Result

  • The default width separator should be smaller than the wide width separator

Actual Result

🟠 Issue resolved with patch, but some improvement is required

Additional Notes

  • The wide width separator is displayed differently in editor vs front end, please refer to the below screenshots
  • The dot separator is not visible in the front end

Supplemental Artifacts

  • Screenshots:
  1. https://prnt.sc/R0Gh_1wfffou (Editor)
  2. https://prnt.sc/l-NhxtiXOVVX (Front End)
Last edited 6 weeks ago by avinashbhosale (previous) (diff)
Note: See TracTickets for help on using tickets.