Skip to content

Document Actions: Fix Block Editor Inserter Overlap with Document Titles #25801

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
Merged
jeyip merged 2 commits into from
Oct 3, 2020
Merged

Document Actions: Fix Block Editor Inserter Overlap with Document Titles #25801

jeyip merged 2 commits into from
Oct 3, 2020

Conversation

@jeyip
Copy link
Contributor

@jeyip jeyip commented Oct 3, 2020 •
edited
Loading

Description

When scrolling through the block editor, if a sibling inserter is being displayed, it will overlap the document actions labels.

How has this been tested?

  1. Set up the site editor locally
  2. Navigate to the site editor
  3. Hover over a sibling inserter
  4. Scroll down through the editor until the inserter would overlap the document actions labels
  5. Verify that there is no visual overlap

Screenshots

Before

Screen Shot 2020-10-02 at 5 06 04 PM

After

2020-10-02 17 08 00

Types of changes

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.

@jeyip jeyip requested a review from youknowriad as a code owner October 3, 2020 00:00
@jeyip jeyip added [Type] Bug An existing feature does not function as intended [Feature] Full Site Editing labels Oct 3, 2020
@github-actions
Copy link

github-actions bot commented Oct 3, 2020 •
edited
Loading

Size Change: +12 B (0%)

Total Size: 1.18 MB

Filename Size Change
build/edit-site/style-rtl.css 3.84 kB +6 B (0%)
build/edit-site/style.css 3.84 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.52 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.55 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 129 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 8.6 kB 0 B
build/block-library/editor.css 8.6 kB 0 B
build/block-library/index.js 135 kB 0 B
build/block-library/style-rtl.css 7.66 kB 0 B
build/block-library/style.css 7.65 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.5 kB 0 B
build/components/index.js 169 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.42 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 685 B 0 B
build/data/index.js 8.6 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.7 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.27 kB 0 B
build/edit-site/index.js 20.4 kB 0 B
build/edit-widgets/index.js 21.1 kB 0 B
build/edit-widgets/style-rtl.css 3 kB 0 B
build/edit-widgets/style.css 3 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Addison-Stavlo
Addison-Stavlo reviewed Oct 3, 2020
View reviewed changes
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

It fixes it under document actions, but I think we may want to set this color for the entire header in edit-site (as opposed to just the document-actions area)?

For instance, with the block toolbar issue we were also talking about, if we lower its z-index under the header, it still shows up under other sections of the header that are still transparent:

Screen Shot 2020-10-02 at 8 08 50 PM

@jeyip
Copy link
Contributor Author

jeyip commented Oct 3, 2020

Note:

The block toolbar overlaps as well, but it is a separate issue with a separate cause. We're only addressing the inserter bug in this PR.

Addison-Stavlo
Addison-Stavlo approved these changes Oct 3, 2020
View reviewed changes
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

This looks good to me. Thanks for jumping on it! 😁

@jeyip
Copy link
Contributor Author

jeyip commented Oct 3, 2020

Thanks Addie! Waiting on specs to pass and then I'll merge it.

@jeyip jeyip self-assigned this Oct 3, 2020
noahtallen
noahtallen approved these changes Oct 3, 2020
View reviewed changes
Copy link
Member

@noahtallen noahtallen left a comment

Choose a reason for hiding this comment

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

Code looks good to me!

@jeyip jeyip changed the title Add background color to document actions element Document Actions: Fix Block Editor Inserter Overlap with Document Actions Labels Oct 3, 2020
@jeyip jeyip changed the title Document Actions: Fix Block Editor Inserter Overlap with Document Actions Labels Document Actions: Fix Block Editor Inserter Overlap with Document Titles Oct 3, 2020
@jeyip jeyip merged commit 6079a55 into master Oct 3, 2020
@jeyip jeyip deleted the fix/document-actions-inserter-overlap-bug branch October 3, 2020 00:45
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@noahtallen noahtallen noahtallen approved these changes

@Addison-Stavlo Addison-Stavlo Addison-Stavlo approved these changes

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees

@jeyip jeyip

Labels

[Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 9.2

Development

Successfully merging this pull request may close these issues.

4 participants

@jeyip @noahtallen @Addison-Stavlo