Skip to content

Site Editor: Fix Invisible Template Previews in the Sidebar#26424

Merged
Copons merged 4 commits into
masterfrom
update/fse-sidebar-template-previews
Oct 23, 2020
Merged

Site Editor: Fix Invisible Template Previews in the Sidebar#26424
Copons merged 4 commits into
masterfrom
update/fse-sidebar-template-previews

Conversation

@Copons

@Copons Copons commented Oct 23, 2020

Copy link
Copy Markdown
Contributor

Description

A recent change on the FSE navigation sidebar's overflow accidentally hid the templates (and template parts) previews that were supposed to appear when hovering on the sidebar items.

This PR moves the preview SlotFill outside of the sidebar hidden overflow, and reposition it accordingly.

How has this been tested?

  • Open the Site Editor.
  • Open the navigation sidebar.
  • Enter either the Templates or Template Parts menu.
  • Move the mouse over a template (or part).
  • Make sure the template preview is visible, just below the header, and doesn't have z-index issues.

Screenshot

Screenshot 2020-10-23 at 16 28 56

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

@github-actions

github-actions Bot commented Oct 23, 2020

Copy link
Copy Markdown

Size Change: +8 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/edit-site/index.js 22.1 kB -3 B (0%)
build/edit-site/style-rtl.css 3.79 kB +6 B (0%)
build/edit-site/style.css 3.79 kB +5 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.54 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 667 B 0 B
build/block-directory/index.js 8.59 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 130 kB 0 B
build/block-editor/style-rtl.css 11 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 8.93 kB 0 B
build/block-library/editor.css 8.93 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.75 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.77 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/compose/index.js 9.63 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data-controls/index.js 684 B 0 B
build/data/index.js 8.63 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 569 B 0 B
build/dom/index.js 4.43 kB 0 B
build/edit-navigation/index.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.37 kB 0 B
build/edit-post/style.css 6.35 kB 0 B
build/edit-widgets/index.js 26.6 kB 0 B
build/edit-widgets/style-rtl.css 3.09 kB 0 B
build/edit-widgets/style.css 3.09 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.6 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.45 kB 0 B
build/escape-html/index.js 733 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 622 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 709 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.45 kB 0 B
build/primitives/index.js 1.35 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.61 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.75 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.23 kB 0 B

compressed-size-action

@mattwiebe

Copy link
Copy Markdown
Contributor

Found an immediate z-index issue - might be hard to see, but it's the Post Title bleeding over.
Screen Shot 2020-10-23 at 10 51 13

Still digging in but thought I'd put this in right away.

@vindl vindl left a comment

Copy link
Copy Markdown
Member

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 and tests well. 👍

I noticed something unrelated to this PR that we might want to follow up on: the content section is not displaying previews.

Comment thread packages/edit-site/src/components/navigation-sidebar/index.js
Comment thread packages/interface/src/components/interface-skeleton/style.scss Outdated
@Addison-Stavlo

Copy link
Copy Markdown
Contributor

This is working well on my end as well. I couldn't repro the z-index issue before, but it looks like the update should hopefully fix what @mattwiebe was noticing?

@mattwiebe

Copy link
Copy Markdown
Contributor

It looks as though it's a conflict with the Cover block in my testing:

Screen Shot 2020-10-23 at 11 02 49

@Copons

Copons commented Oct 23, 2020

Copy link
Copy Markdown
Contributor Author

@mattwiebe I can't repro the z-index issues as well, but I've raised the preview's from 1 to 30 (same as the interface skeleton header), which I hope is enough...
It's kinda hard to play around with z-index in the editor... 😕

@mattwiebe

Copy link
Copy Markdown
Contributor

@Copons - can confirm that it's working as expected now, sits on top of Cover and everything in it.

Screen Shot 2020-10-23 at 11 10 55

@vindl

vindl commented Oct 23, 2020

Copy link
Copy Markdown
Member

Nice catch @mattwiebe!

@Copons Copons merged commit c27c907 into master Oct 23, 2020
@Copons Copons deleted the update/fse-sidebar-template-previews branch October 23, 2020 16:57
@github-actions github-actions Bot added this to the Gutenberg 9.3 milestone Oct 23, 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.

4 participants