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

Block Styles: Remove the block margin in the style selector #19983

Merged
merged 2 commits into from
Mar 19, 2020

Conversation

scruffian
Copy link
Contributor

Description

This removes margins on the block preview when used in the styles selector.

This is being added here:

.editor-styles-wrapper .block-editor-block-list__block {

but it doesn't make much sense for previews in the block style selector.

How has this been tested?

In chrome

Screenshots

Before:
Screenshot 2020-01-31 at 15 29 40

After:
Screenshot 2020-01-31 at 15 38 29

Types of changes

Bug fix

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .

@scruffian
Copy link
Contributor Author

scruffian commented Feb 12, 2020

I added stye variations to the media and text block and tested with and without this patch:

before:
Screenshot 2020-02-12 at 14 38 36

after:
Screenshot 2020-02-12 at 14 37 01

The patch reduces the space at the top.

@scruffian
Copy link
Contributor Author

scruffian commented Feb 12, 2020

I also tested this for the columns block, which behaves similarly:

before:
Screenshot 2020-02-12 at 14 47 48

after:
Screenshot 2020-02-12 at 14 49 37

@pento
Copy link
Member

pento commented Mar 17, 2020

This looks good to me, but I'd like design feedback on it. @jasmussen, do you have thoughts?

@jasmussen
Copy link
Contributor

Yeah, this is kind of an unfortunate challenge of this. The preview is literally the block, identical to what it is in the post content. And right now the baseline of margin is just applied to every single block, affecting this preview as well. Which is kind of unfortunate.

The thing we want to continue to move towards, is a place where no such baseline margin exists at all, and is instead applied by each block individually. This requires a lighter DOM with fewer React fragments, which Ella is working on. And it's actually coming down the pike.

That's a long-winded way of saying: yes, I think it's fine to ship this PR as is (👍 👍) — but also that there's a very high probability that this particular CSS will at some point grow stale/die off and need to be changed. If you need to merge this, then it looks like a good improvement, but please keep an eye on Ella's doing, notably PRs like this one: #19912

@pento pento removed the Needs Design Feedback Needs general design feedback. label Mar 19, 2020
@pento pento added this to the Gutenberg 7.8 milestone Mar 19, 2020
Copy link
Member

@pento pento left a comment

Choose a reason for hiding this comment

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

🎉

@pento pento changed the title Block Styles: Remove margins Block Styles: Remove the block margin in the style selector Mar 19, 2020
@pento pento merged commit 414ae54 into WordPress:master Mar 19, 2020
@scruffian scruffian deleted the update/block-preview-styles branch March 26, 2020 15:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Theme Style Variations Related to style variations provided by block themes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants