Refine "Page Break" Block designs

[iamthomasbishop]

Current

Currently, the Page Break Block looks like this:

Proposal

Let's clean up the design a bit. It should look like this:

Specs

• Text color: $gray aka #87a6bc
• Font-family: Roboto on Android, SF Pro Text on iOS
• Spacer around text-label: 16pt padding on each side (see example below) with white bg
• Border color: $gray-lighten-20 aka #c8d7e1
• Border width: 2pt
• Border style: dashed
• Border dash: 4pt
• Border gap: 4pt

Spacer example

Notes

Note: this same design should also apply to the more block when we build it.

[koke]

If someone picks this up, there's a refactor in progress of nextpage: WordPress/gutenberg#14175

[koke]

I prepared some quick improvements in WordPress/gutenberg#14826

A couple notes on the rest:

• A dashed line is not currently supported with the library we're using. We can get it done in a different way, but it'll take more time. I'm also working on extracting a Separator component that works across platforms (Extract separator component out of nextpage block WordPress/gutenberg#14175), so I might be able to make some progress as part of that.
• For the font, we're using $default-regular-font (serif on Android, Noto Serif on iOS). I think we'll eventually have to consolidate our custom variables with those from Gutenberg. I see _variables.scss using -apple-system, ..., Roboto, but it seems our SCSS processor chokes on that (maybe the -apple-system?)

I'm moving this to the Future column, since the remaining bits seem high effort for a small refinement, but let's keep the conversation going and see how to make progress in those two fronts.