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

kjellr
Copy link
Contributor

@kjellr kjellr 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 An existing feature does not function as intended label May 28, 2019
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

Thanks for the fix @kjellr

@kjellr
Copy link
Contributor Author

kjellr 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
@kjellr kjellr deleted the update/default-appender-vertical-alignment branch May 29, 2019 12:19
@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
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants