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

Reduce gap between block library and preview #20777

Merged

Conversation

enriquesanchez
Copy link
Contributor

Description

Closes #20747. These are minor CSS changes that reduce the gap between the block library and the preview popover.

It also adds border radius and box shadow to the preview popover.

Screenshots

Before:
Screen Shot 2020-03-10 at 16 03 02

After:
Screen Shot 2020-03-10 at 16 03 25

Types of changes

CSS changes.

@github-actions
Copy link

github-actions bot commented Mar 10, 2020

Size Change: +414 B (0%)

Total Size: 864 kB

Filename Size Change
build/block-editor/style-rtl.css 10.6 kB +29 B (0%)
build/block-editor/style.css 10.6 kB +28 B (0%)
build/block-library/editor-rtl.css 7.23 kB -13 B (0%)
build/block-library/editor.css 7.24 kB -13 B (0%)
build/block-library/index.js 115 kB +276 B (0%)
build/blocks/index.js 57.7 kB +5 B (0%)
build/components/style-rtl.css 15.6 kB +49 B (0%)
build/components/style.css 15.6 kB +53 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 105 kB 0 B
build/block-library/style-rtl.css 7.38 kB 0 B
build/block-library/style.css 7.39 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/index.js 191 kB 0 B
build/compose/index.js 5.75 kB 0 B
build/core-data/index.js 10.6 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 91.3 kB 0 B
build/edit-post/style-rtl.css 8.64 kB 0 B
build/edit-post/style.css 8.64 kB 0 B
build/edit-site/index.js 4.64 kB 0 B
build/edit-site/style-rtl.css 2.48 kB 0 B
build/edit-site/style.css 2.48 kB 0 B
build/edit-widgets/index.js 4.44 kB 0 B
build/edit-widgets/style-rtl.css 2.58 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 381 B 0 B
build/editor/editor-styles.css 382 B 0 B
build/editor/index.js 43.8 kB 0 B
build/editor/style-rtl.css 3.98 kB 0 B
build/editor/style.css 3.97 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.09 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 1.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.49 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 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 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 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.54 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 780 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.55 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@enriquesanchez
Copy link
Contributor Author

@jasmussen I'd love to know if there's a better way to add the border radius and box-shadow styles from .components-popover__content.

I attempeted to add .components-popover__content to the block-editor-inserter__menu-help-panel component, but that just messed up the position of the preview in a big way.


@include break-medium {
position: absolute;
top: 0;
left: calc(100% + 20px);
top: -1px;
Copy link
Contributor

Choose a reason for hiding this comment

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

You could do -$border-width here instead of -1px, because the reason it's offset by one is because of the border, as best I can tell, that helps "document" the code.

top: 0;
left: calc(100% + 20px);
top: -1px;
left: calc(100% + 12px);
Copy link
Contributor

Choose a reason for hiding this comment

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

You can use $grid-unit-15here instead of 12px, as it's part of the grid spacing!

Because it's part of a calc rule, you may have to do this: left: calc(100% + #{$grid-unit-15});

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.

I left two followup comments to fix. But this is very nice work! Well done. Ship it!

@enriquesanchez
Copy link
Contributor Author

Thank you so much @jasmussen!

@enriquesanchez enriquesanchez merged commit 34afbfd into master Mar 11, 2020
@enriquesanchez enriquesanchez deleted the try/bring-block-preview-popover-closer-to-library branch March 11, 2020 18:06
@github-actions github-actions bot added this to the Gutenberg 7.8 milestone Mar 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Preview feels disconnected from Block inserter
2 participants