Make WordPress Core

Opened 2 years ago

Closed 17 months ago

#56114 closed defect (bug) (fixed)

Multiple Themes: Separator Block Dots Style Width

Reported by: umesh84's profile umesh84 Owned by: audrasjb's profile audrasjb
Milestone: 6.2 Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: ui, css Cc:

Description (last modified by sabernhardt)

Twenty Fifteen Themes Separator Block Dots styling issue in editor and Front

Steps to replicate:

1: Activate the Twenty Fifteen Themes
2: add Separator block
3: Select Dots style

URL: https://www.loom.com/share/a532739c54594c98ac3ddb49c56f6002

Attachments (20)

Screenshot 2022-06-30 at 8.05.51 PM.png (1.1 MB) - added by umesh84 2 years ago.
For better understanding I have attached a screenshot
56114.patch (86.8 KB) - added by multidots1896 2 years ago.
added patch
CleanShot 2022-07-01 at 11.26.35@2x.png (1.0 MB) - added by multidots1896 2 years ago.
added screenshot after applying patch
56114.1.patch (2.7 KB) - added by sabernhardt 19 months ago.
using full width for Dots style in five themes
Dots-Separator-Twenty-Eleven.png (4.6 KB) - added by sabernhardt 19 months ago.
Dots-Separator-Twenty-Thirteen.png (7.0 KB) - added by sabernhardt 19 months ago.
Dots-Separator-Twenty-Fourteen.png (5.6 KB) - added by sabernhardt 19 months ago.
Dots-Separator-Twenty-Fifteen-editor.png (32.7 KB) - added by sabernhardt 19 months ago.
Dots-Separator-Twenty-Fifteen-front.png (8.5 KB) - added by sabernhardt 19 months ago.
Dots-Separator-Twenty-Sixteen.png (7.8 KB) - added by sabernhardt 19 months ago.
Capture d’écran 2023-01-22 à 18.19.55.png (288.9 KB) - added by audrasjb 17 months ago.
Before patch - Twenty Eleven
Capture d’écran 2023-01-22 à 18.19.55.2.png (288.9 KB) - added by audrasjb 17 months ago.
After patch - Twenty Eleven
Capture d’écran 2023-01-22 à 18.36.47.png (63.0 KB) - added by audrasjb 17 months ago.
Before patch - Twenty Fifteen
Capture d’écran 2023-01-22 à 18.37.15.png (56.5 KB) - added by audrasjb 17 months ago.
After patch - Twenty Fifteen
Capture d’écran 2023-01-22 à 18.38.24.png (108.6 KB) - added by audrasjb 17 months ago.
Before patch - Twenty Fourteen
Capture d’écran 2023-01-22 à 18.38.55.png (99.6 KB) - added by audrasjb 17 months ago.
After patch - Twenty Fourteen
Capture d’écran 2023-01-22 à 18.40.01.png (140.4 KB) - added by audrasjb 17 months ago.
Before patch - Twenty Sixteen
Capture d’écran 2023-01-22 à 18.40.41.png (143.5 KB) - added by audrasjb 17 months ago.
After patch - Twenty Sixteen
Capture d’écran 2023-01-22 à 18.42.10.png (86.4 KB) - added by audrasjb 17 months ago.
Before patch - Twenty Thirteen
Capture d’écran 2023-01-22 à 18.42.20.png (90.9 KB) - added by audrasjb 17 months ago.
After patch - Twenty Thirteen

Change History (28)

@umesh84
2 years ago

For better understanding I have attached a screenshot

#1 @multidots1896
2 years ago

  • Keywords has-patch added; needs-patch removed

@multidots1896
2 years ago

added patch

@multidots1896
2 years ago

added screenshot after applying patch

#2 @sabernhardt
2 years ago

  • Description modified (diff)
  • Keywords needs-patch added; has-patch removed
  • Summary changed from Themes Twenty Fifteen Separator Block Dots styling Issue to Multiple Themes: Separator Block Dots Style Width
  • Version changed from 6.0 to 5.8

Thanks for the report! The theme should be corrected, even if a change to the editor would fix the problem.

Some themes set the Separator block max-width to 100px without making an exception for the Dots style, which had worked with earlier versions of Gutenberg. Then GB30255 switched max-width: none to width: none, and GB33793 removed that for being invalid.

Twenty Fifteen already adjusts the max-width for Wide separators:

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

And it could have the same for the Dots style:

.wp-block-separator.is-style-wide,
.wp-block-separator.is-style-dots {
	max-width: 100%;
}

Twenty Fifteen would need edits to both blocks.css and editor-blocks.css.

Other themes would need a similar change in only the blocks.css file (for the front end):

  • Twenty Eleven
  • Twenty Thirteen
  • Twenty Fourteen
  • Twenty Sixteen

@sabernhardt
19 months ago

using full width for Dots style in five themes

#3 @sabernhardt
19 months ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.2

#4 @esratpopy
17 months ago

Test Report


Patch resolve the issue.

I have tested this issue and tested the patch also. It's really works fine for using this code as mentioned by sabernhardt,

.wp-block-separator.is-style-wide,
.wp-block-separator.is-style-dots {
    max-width: 100%;
}

#5 @amin7
17 months ago

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56114/56114.1.patch


Environment

OS: Windows 10 version 22H2
Web Server: Nginx
PHP: 7.4.30
WordPress: 6.2-alpha-54642-src
Browser: Chrome 109.0.5414.87
Theme: Twenty Twenty-fifteen
Active Plugins: No plugins activated.


Actual Results

✅ Separator dot width issue is solved with the patch.


Supplemental Artifacts

Before Patch: https://d.pr/i/JLHtgf
After Patch: https://d.pr/i/0h5BXA

Last edited 17 months ago by amin7 (previous) (diff)

#6 @audrasjb
17 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for final testing/review and commit.

@audrasjb
17 months ago

Before patch - Twenty Eleven

@audrasjb
17 months ago

After patch - Twenty Eleven

@audrasjb
17 months ago

Before patch - Twenty Fifteen

@audrasjb
17 months ago

After patch - Twenty Fifteen

@audrasjb
17 months ago

Before patch - Twenty Fourteen

@audrasjb
17 months ago

After patch - Twenty Fourteen

@audrasjb
17 months ago

Before patch - Twenty Sixteen

@audrasjb
17 months ago

After patch - Twenty Sixteen

@audrasjb
17 months ago

Before patch - Twenty Thirteen

@audrasjb
17 months ago

After patch - Twenty Thirteen

#7 @audrasjb
17 months ago

  • Keywords commit added
  • Status changed from reviewing to accepted

Marking as ready for commit 🚀

#8 @audrasjb
17 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 55114:

Bundled Themes: Fix Separator block "Dots" style variation on various themes.

This changeset fixes an issue with the "Dots" style of the Separator block on multiple bundled themes. It adds max-width: 100% to this style variation on the following themes: Twenty Eleven, Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, and Twenty Sixteen.

Props umesh84, sabernhardt, audrasjb, amin7, esratpopy, multidots1896.
Fixes #56114.

Note: See TracTickets for help on using tickets.