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.

Sign up for GitHub

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

Jump to bottom

Incorrect BaseControl margin #17984

Closed
chrisvanpatten opened this issue Oct 17, 2019 · 2 comments
Closed

Incorrect BaseControl margin #17984

chrisvanpatten opened this issue Oct 17, 2019 · 2 comments
Assignees
@chrisvanpatten
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system

Comments

@chrisvanpatten
Copy link
Contributor

Describe the bug

Currently there is CSS applying a margin-bottom to every BaseControl which follows another BaseControl (so effectively the margin is for everything but the first element).

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/base-control/style.scss#L24-L26

This causes inconsistent margins between BaseControls; I believe this is intended to be a margin-top instead.

This was observed in WordPress 5.3 RC1, and the problematic CSS is currently in master.

Screenshots

Before:

Screen Shot 2019-10-16 at 9 30 05 PM Screen Shot 2019-10-16 at 9 30 56 PM

After:

Screen Shot 2019-10-16 at 9 32 33 PM Screen Shot 2019-10-16 at 9 32 39 PM

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Chrome
  • Version 77.0.3865.120
@chrisvanpatten chrisvanpatten added [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system labels Oct 17, 2019
@chrisvanpatten chrisvanpatten self-assigned this Oct 17, 2019
chrisvanpatten added a commit that referenced this issue Oct 17, 2019
@chrisvanpatten
Change BaseControl sibling selector to use margin-top (fixes #17984)
2657071
@chrisvanpatten chrisvanpatten mentioned this issue Oct 17, 2019
Closed
5 tasks
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 17, 2019
@chrisvanpatten
Copy link
Contributor Author

My proposed solution in #17985 didn’t quite past muster for the various reasons that @ItsJonQ pointed out on the PR. It’s the right move, but the fundamental issue persists.

It might be best to approach the problem more holistically, perhaps as part of a greater effort to rework the Gutenberg grid in the G2 efforts or the Emotion experiments.

@chrisvanpatten chrisvanpatten removed the [Status] In Progress Tracking issues with work in progress label Jan 22, 2020
@skorasaurus skorasaurus added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Dec 17, 2021
@mirka
Copy link
Member

mirka commented Feb 11, 2022

We'll be addressing this in #38730

@mirka mirka closed this as completed Feb 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chrisvanpatten chrisvanpatten

Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Change BaseControl sibling selector to use margin-top WordPress/gutenberg
3 participants
@mirka @skorasaurus @chrisvanpatten