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

Try: Reduced specificity base block margins. #22051

Merged
merged 1 commit into from
May 4, 2020

Conversation

jasmussen
Copy link
Contributor

This is a simple change that benefits themes. It reduces the specificity of the rule that provides a baseline block margin.

The baseline block margin is the margin above and below every block, which these blocks are born with.

In master, this rule is so specific that it overrides many editor styles that should work.

Before:

before

After:

Screenshot 2020-05-03 at 10 19 46

Note how this theme provides 1em margins through the following editor style:

p {
	margin-top: 1em;
	margin-bottom: 1em;
}

Screenshot 2020-05-03 at 10 19 00

This overrides the baseline rule, as it should:

Screenshot 2020-05-03 at 10 19 40

It also seems to work fine for TwentyTwenty and TwentyNineteen:

Screenshot 2020-05-03 at 10 20 48

Screenshot 2020-05-03 at 10 21 04

@jasmussen jasmussen added [Type] Code Quality Issues or PRs that relate to code quality [Feature] Custom Editor Styles Functionality for adding custom editor styles labels May 3, 2020
@jasmussen jasmussen requested review from kjellr and ellatrix May 3, 2020 08:25
@jasmussen jasmussen self-assigned this May 3, 2020
@github-actions
Copy link

github-actions bot commented May 3, 2020

Size Change: -16 B (0%)

Total Size: 825 kB

Filename Size Change
build/block-editor/style-rtl.css 10.2 kB -7 B (0%)
build/block-editor/style.css 10.2 kB -7 B (0%)
build/block-library/editor-rtl.css 7.08 kB -1 B
build/block-library/editor.css 7.08 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.6 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-editor/index.js 107 kB 0 B
build/block-library/index.js 115 kB 0 B
build/block-library/style-rtl.css 7.22 kB 0 B
build/block-library/style.css 7.23 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 179 kB 0 B
build/components/style-rtl.css 16.9 kB 0 B
build/components/style.css 16.9 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 4.05 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/edit-post/index.js 28.1 kB 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/index.js 11.4 kB 0 B
build/edit-site/style-rtl.css 5.18 kB 0 B
build/edit-site/style.css 5.18 kB 0 B
build/edit-widgets/index.js 7.77 kB 0 B
build/edit-widgets/style-rtl.css 4.67 kB 0 B
build/edit-widgets/style.css 4.66 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 44.3 kB 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.63 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

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

This seems a step in a good direction. I would love if this rule could be removed entirely though. What blocks us to do that?

@jasmussen
Copy link
Contributor Author

Yes this rule need eventually be removed entirely.

A lot of core blocks rely on and assume the presence of these margins. These blocks need to be able to work without them, or we need something else to take it's place.

For example anything wrapped in a figure element could probably work without them, but anything just in a div either need some margins in style.scss or theme.scss.

We also need to handle the vanilla styles; what you see in the editor when your theme doesn't style it. There needs to be some margin rhythm for that.

Some blocks compensate for these margins, i.e. with negative margins. Those need to me refactored.

And finally, all the above needs good testing with themes and plugins, so that the breakage is acceptable.

We should totally do it, but there are a few steps to get there. I wonder if a global style block margin has value? Probably not but something to think about.

Thanks for the review!

This is a simple change that benefits themes. It reduces the specificity of the rule that provides a baseline block margin.

The baseline block margin is the margin above and below every block, which these blocks are born with.

In master, this rule is so specific that it overrides many editor styles that should work.
@jasmussen jasmussen force-pushed the try/reduced-specificity-block-margins branch from 0f3a384 to 99ec348 Compare May 4, 2020 08:20
@jasmussen
Copy link
Contributor Author

Tested this again with a couple of themes, and block nesting, and there appears to be no side effects that I an discern. Rebased and marging when the checks pass.

@jasmussen jasmussen merged commit def8dd2 into master May 4, 2020
@jasmussen jasmussen deleted the try/reduced-specificity-block-margins branch May 4, 2020 09:00
@github-actions github-actions bot added this to the Gutenberg 8.1 milestone May 4, 2020
@jasmussen
Copy link
Contributor Author

I created #22208 as a place to start the discussion of removing the baseline margin entirely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Custom Editor Styles Functionality for adding custom editor styles [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants