[wp-trac] [WordPress Trac] #56114: Multiple Themes: Separator Block Dots Style Width (was: Themes Twenty Fifteen Separator Block Dots styling Issue)

[WordPress Trac]

#56114: Multiple Themes: Separator Block Dots Style Width
-----------------------------------------+------------------------------
 Reporter:  umesh84                      |       Owner:  (none)
     Type:  defect (bug)                 |      Status:  new
 Priority:  normal                       |   Milestone:  Awaiting Review
Component:  Bundled Theme                |     Version:  5.8
 Severity:  normal                       |  Resolution:
 Keywords:  has-screenshots needs-patch  |     Focuses:  ui, css
-----------------------------------------+------------------------------
Changes (by sabernhardt):

 * keywords:  has-screenshots has-patch => has-screenshots needs-patch
 * version:  6.0 => 5.8


Old description:

> 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

New description:

 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

--

Comment:

 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56114#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform