Twenty Nineteen: Horizontal rule is very narrow

[laurelfulford]

Originally reported by @joyously in the Twenty Nineteen GitHub repo:

The <hr> tag outputs a line that is very narrow (max-width: 2.25em), and seems like it would be an unexpected style in legacy content.

It's matches the current default style for the separator block, but it's possible to change that style to be full-width, or centred dots; for the <hr> tag it can't be changed.

For the purpose of preserving the expected visual appearance in legacy content, let's switch its appearance with that of the wide separator block style.

Original ticket here: ​https://github.com/WordPress/twentynineteen/issues/83

[laurelfulford]

Twenty Nineteen three separator block variants. hr tags currently look like the first one, but should be updated to look like the second one.

[nielslange]

Howdy @laurelfulford 👋

I’ld love to provide a patch for this issue the next days! 😉

[laurelfulford]

Thanks @nielslange!

I'll assign this to you for now, so it's known that it's "taken" :)

[nielslange]

Thanks, @laurelfulford.

[nielslange]

The patch is ready for testing. 😀

[nielslange]

@laurelfulford, @allancole or @kjellr: Anyone up for a quick test? 😛

[kjellr]

This works for me!

Before:

After:

Thanks, @nielslange!

[samful]

16 months later, I tested the patch today and apart from some line ending issues my end, this patch still seems to work well. @kjellr 's screenshots are still accurate.

[ianbelanger]

The most recent patch now fails to apply, so I am removing commit and marking with needs-refresh.

[samful]

@leprincenoir's patch works for me, screen-shot below:

[ianbelanger]

Thanks for you patch @leprincenoir and for testing @samful. The patch works good above 768px, but below 768px the <hr> reverts back to the narrow width. Screenshots coming.

I believe it is due to the use of the postContentMaxWidth() function, which only includes media queries for tablet and desktop sizes.

[ianbelanger]

Above 768px

[ianbelanger]

Below 768px

[leprincenoir]

Normally, she's the one

[ianbelanger]

Patch looks good, thanks for the quick update @leprincenoir. Reviewing for commit now.

[ianbelanger]

In 48073:

Bundled Themes: Twenty Nineteen horizontal rule is very narrow.

Fixes the issue by adding specific styles for the <hr> tag.

Props laurelfulford, nielslange, kjellr, samful, leprincenoir.
Fixes #45912.

[ianbelanger]

Reopening for backport.

[desrosj]

With 5.5 just under 5 weeks away, there is no 5.4.3 planned. Moving back to the 5.5 milestone.

[desrosj]

In 48514:

Bundled Themes: Rebuild Twenty Nineteen’s RTL stylesheet.

This adds the changes from [48073] to the style-rtl.css file.

See #45912.

[SergeyBiryukov]

In 48605:

Bundled Themes: Rebuild Twenty Nineteen’s RTL stylesheet.

This adds the changes from [48073] to the style-rtl.css file.

Previously committed in [48514], accidentally reverted in [48602].

See #45912, #49843.