Separator: Remove appearance of "inset" style. #43948
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jasmussen
added
[Type] Enhancement
|
Size Change: +17 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
|
I'm not sure why, but I haven't been able to reproduce the original behavior. I tried using Chrome, Firefox, Safari with TT2 and TT3, but for some reason I couldn't see the left and right borders. The fix makes sense, though. |
|
It may be a Chrome issue... are you on Safari? |
|
No, I use Chrome, but I ran the That said, I know what happened: I was looking at the separators in the Post editor. I can see the original problem in the Site editor. And once I apply your fix, I see nice-looking separators. |
jameskoster
approved these changes
Sep 7, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
By default, the
hrtag is styled to appear inset by the browser. The browser does this by painting 4 different border colors. For block themes that style the Separator block using theme.json, usually just the color or border width is styled, and it looks good when small:But if we zoom in, we can see something is off:
This is more visible if we change the height of the separator in the inspector:
We can here see two borders, left and right, indicating an inset style with a top left light source. An easier way to see this is to use the following in theme.json:
Then we get this:
This PR unsets the left and right border for the separator by default, so the line will always look like a solid line:
You can still set left and right borders of the separator if you like. It just isn't there by default.
Why?
This feels a more reasonable default to offer.
Testing Instructions
Insert a separator in a block theme like TT2 or TT3. Customize theme.json as outlined above, and with this PR applied you should see a square separator.