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

Fix regression with appender. #9782

Merged
merged 2 commits into from Sep 11, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Sep 11, 2018

This PR is a hotfix for a small regression introduced in #9735. Basically the empty "Write your story" placeholder had no top margin, and jumped when clicked. This PR fixes that.

Before:

before

After:

after

Additionally it fixes an issue I think might have regressed with editor styles. The appender height used to be the same as a paragraph height (28px, 56px with margins). But this regressed. This PR adds an explicit height to the appender input field to fix this, noting that a Paragraph is actually a paragraph, whereas the appender is an input field.

height

☝️ in that GIF I type in "Write your story", then delete the block, then use undo/redo to ensure they look identical

Fix regression with appender.
This PR is a hotfix for a small regression introduced in #9735. Basically the empty "Write your story" placeholder had no top margin, and jumped when clicked. This PR fixes that.

@jasmussen jasmussen added this to the 3.9 milestone Sep 11, 2018

@jasmussen jasmussen self-assigned this Sep 11, 2018

@jasmussen jasmussen requested review from kjellr and WordPress/gutenberg-core Sep 11, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 11, 2018

Contributor

Also fixed it for the inbetween appender:

inbetween

Contributor

jasmussen commented Sep 11, 2018

Also fixed it for the inbetween appender:

inbetween

@kjellr

Looks good to me. No more jumping cursor. 👍

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 11, 2018

Contributor

Awesome, thanks so much. Can you approve the PR?

Contributor

jasmussen commented Sep 11, 2018

Awesome, thanks so much. Can you approve the PR?

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Sep 11, 2018

@kjellr

kjellr approved these changes Sep 11, 2018

👏

@jasmussen jasmussen merged commit e7f2803 into master Sep 11, 2018

2 checks passed

codecov/project 49.02% remains the same compared to f86de82
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the fix/appender branch Sep 11, 2018

@websevendev

This comment has been minimized.

Show comment
Hide comment
@websevendev

websevendev Sep 22, 2018

Hello,

is this working as intended?

Previously a nested block had a bunch of extra margin above and below (which I could collapse but I don't mind them since it makes the editor experience easier), but was positioned somewhat realistically compared to the front end. Now, how ever, it has less margin on top and more on bottom which is a completely inaccurate representation:

Although that's not a big deal, since the block appenders tend to also leave a lot of trailing space that's not actually there on the front end.

But also take a look at this use case:

I've got these nested column blocks in a grid block, .editor-block-list__layout is set to display: flex; flex-direction: row; and the first column is now offset by the reduction of first-child margin:

I guess I can manually set a fixed margin, but honestly I think they should be consistent out of the box. I thought .editor-block-list__layout is designed to allow rearranging blocks the way you need them with flex or even CSS grid, so currently it feels a bit inconsistent that the first child margins are altered.

Thanks!

websevendev commented Sep 22, 2018

Hello,

is this working as intended?

Previously a nested block had a bunch of extra margin above and below (which I could collapse but I don't mind them since it makes the editor experience easier), but was positioned somewhat realistically compared to the front end. Now, how ever, it has less margin on top and more on bottom which is a completely inaccurate representation:

Although that's not a big deal, since the block appenders tend to also leave a lot of trailing space that's not actually there on the front end.

But also take a look at this use case:

I've got these nested column blocks in a grid block, .editor-block-list__layout is set to display: flex; flex-direction: row; and the first column is now offset by the reduction of first-child margin:

I guess I can manually set a fixed margin, but honestly I think they should be consistent out of the box. I thought .editor-block-list__layout is designed to allow rearranging blocks the way you need them with flex or even CSS grid, so currently it feels a bit inconsistent that the first child margins are altered.

Thanks!

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 24, 2018

Contributor

Thanks for the report, @websevendev that looks like a regression. Not of this PR, but a related one. I will take a look.

Contributor

jasmussen commented Sep 24, 2018

Thanks for the report, @websevendev that looks like a regression. Not of this PR, but a related one. I will take a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment