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

Inline popover hides behind metabox #62998

Closed
t-hamano opened this issue Jun 30, 2024 · 4 comments · Fixed by #63939
Closed

Inline popover hides behind metabox #62998

t-hamano opened this issue Jun 30, 2024 · 4 comments · Fixed by #63939
Assignees
Labels
[Package] Editor /packages/editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@t-hamano
Copy link
Contributor

t-hamano commented Jun 30, 2024

Description

When meta boxes are enabled, if you try to highlight text, for example in the last paragraph block, the popover will be hidden behind the meta box.

This problem may be related to #62681. Disabling isolation:isolate, which was added in #62681, will resolve this problem.

Step-by-step reproduction instructions

  • Enable custom fields.
  • Insert a few paragraphs and apply a highlight to the text of the last paragraph.
  • Open the custom field panel if it is closed.
  • Scroll your browser so that the popover appears below the text.
  • The popover will now be hidden behind the meta box.

Screenshots, screen recording, code snippet

dc1351052563a7031f5cb1de3e263ba0.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Package] Editor /packages/editor labels Jun 30, 2024
@t-hamano
Copy link
Contributor Author

t-hamano commented Jun 30, 2024

After a bit of research, I found that this problem might be solved by applying isolation: isolate to .interface-interface-skeleton__body or .interface-interface-skeleton__content instead of .editor-visual-editor. This is because these two containers are the parents of both the editor canvas and the meta box.

@stokesman
Copy link
Contributor

stokesman commented Jun 30, 2024

Great catch Aki! Everything you’ve noted is accurate from my testing.

As for how to resolve it the way you mentioned works. I thought of and experimented with another way:

.edit-post-layout.has-metaboxes .edit-post-visual-editor {
    z-index: 1;
}

That selector is already in use and we could add the z-index rule to it:

.edit-post-layout.has-metaboxes .edit-post-visual-editor {
flex: 1 0 auto;
height: auto;
}

To me it still makes sense to keep the isolation on VisualEditor because the Format library popover is a child just like the block toolbar and various other popovers. Though, that’s just my first thought and I'm not convinced it’s an important factor in how to resolve this.

@t-hamano
Copy link
Contributor Author

t-hamano commented Jul 1, 2024

I thought of and experimented with another way:

This approach makes sense to me because the impact is limited and predictable.

In 3D mode in Edge browser, the layers change like this:

Before

before

After

after

@talldan
Copy link
Contributor

talldan commented Jul 23, 2024

This was also reported in #63795

There are a couple of PRs proposing fixes - #63809 and #63834

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Editor /packages/editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
3 participants