Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertically center default appender controls. #15868

Merged
merged 1 commit into from May 29, 2019

Conversation

Projects
None yet
3 participants
@kjellr
Copy link
Contributor

commented May 28, 2019

Currently, the controls to the left and right of the default appender rely on the text being ~16px tall. This works well in themes where that's the case, but not so well in themes with larger text, like Twenty Nineteen. This PR vertically vertically aligns the appender controls so they more regularly fall in alignment with the text.

Screens under 600px are unaffected by this PR. The inserter control doesn't quite line up there either, but it's less obvious because it only appears on hover, and mobile devices usually don't have that capability.

I've tested in:

  • The Gutenberg Starter theme (unstyled)
  • Twenty Nineteen
  • Twenty Seventeen
  • Twenty Sixteen
  • Twenty Fifteen

... and it seems to behave as expected.


Here's Twenty Nineteen, which uses a 22px font size:

Before

before

After

after


Note that if a theme uses a super-large text size, and the text has to wrap on screens above 600px wide, the controls will now be centered vertically. I think this seems fine given the larger win here:

Before

Screen Shot 2019-05-28 at 3 57 41 PM

After

Screen Shot 2019-05-28 at 3 49 12 PM

@kjellr kjellr added the [Type] Bug label May 28, 2019

@kjellr kjellr requested review from youknowriad and jasmussen May 28, 2019

@kjellr kjellr requested review from ellatrix, gziolo and talldan as code owners May 28, 2019

@jasmussen
Copy link
Contributor

left a comment

Nice. Looks good in vanilla and twenty nineteen:

Screenshot 2019-05-29 at 08 27 57

Screenshot 2019-05-29 at 08 30 35

Code looks good. You'll want the tests to pass though.

The text is a LEEEDL up high in Twenty Nineteen, but I suspect that's the font.

On a separate note that I'm pretty sure is completely unrelated, Twenty Nineteen seems to have an issue with the default appender — the one that sits on a blank fresh page:

Screenshot 2019-05-29 at 08 25 45

It's indented from the left.

Screenshot 2019-05-29 at 08 26 34

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented May 29, 2019

Thanks for the fix @kjellr

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented May 29, 2019

On a separate note that I'm pretty sure is completely unrelated, Twenty Nineteen seems to have an issue with the default appender — the one that sits on a blank fresh page:

Ugh yes, I see that too. It only happens on initial load — if you click in and out again, the text is positioned as it should be. 😩 I'll dig into that after merging this.


I'm also seeing a little position change in Safari when you hover over the appender icon. This doesn't appear in Chrome.

dark-mode

This also existed before this PR, so I'll look into that separately too.

@kjellr kjellr merged commit 45cd52d into master May 29, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@kjellr kjellr deleted the update/default-appender-vertical-alignment branch May 29, 2019

@youknowriad youknowriad added this to the Gutenberg 5.9 milestone Jun 7, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.