Multiple Themes: Separator Block Dots Style Width

[umesh84]

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

[umesh84]

For better understanding I have attached a screenshot

[multidots1896]

added patch

[multidots1896]

added screenshot after applying patch

[sabernhardt]

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]

using full width for Dots style in five themes

[esratpopy]

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%;
}

[amin7]

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

[audrasjb]

Self assigning for final testing/review and commit.

[audrasjb]

Before patch - Twenty Eleven

[audrasjb]

After patch - Twenty Eleven

[audrasjb]

Before patch - Twenty Fifteen

[audrasjb]

After patch - Twenty Fifteen

[audrasjb]

Before patch - Twenty Fourteen

[audrasjb]

After patch - Twenty Fourteen

[audrasjb]

Before patch - Twenty Sixteen

[audrasjb]

After patch - Twenty Sixteen

[audrasjb]

Before patch - Twenty Thirteen

[audrasjb]

After patch - Twenty Thirteen

[audrasjb]

Marking as ready for commit 🚀

[audrasjb]

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.