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

Cover Image: Block toolbar overlaps with inline toolbar when there is a lot of text. #9974

Closed
kjellr opened this issue Sep 17, 2018 · 4 comments
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Blocks Overall functionality of blocks [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Bug An existing feature does not function as intended
Milestone

Comments

@kjellr
Copy link
Contributor

kjellr commented Sep 17, 2018

Describe the bug

When a cover image wraps onto many lines (or contains many line breaks), the inline edit toolbar gets obscured by the block toolbar:

screen shot 2018-09-17 at 12 48 15 pm

To Reproduce

  1. Add a cover image block.
  2. Add at least 7 lines of text to it.
  3. Move your cursor over the block, so the block toolbar displays.
  4. See error.

Tested with:
Gutenberg 3.8

Originally reported by @bph

@kjellr kjellr added [Type] Bug An existing feature does not function as intended [Feature] Blocks Overall functionality of blocks labels Sep 17, 2018
@kjellr kjellr mentioned this issue Sep 17, 2018
7 tasks
@youknowriad
Copy link
Contributor

What's the solution, a higher z-index for the inline toolbar?

@kjellr
Copy link
Contributor Author

kjellr commented Sep 18, 2018

Almost! But it'll actually need to be just a little more complicated: right now, there's no way to dismiss the inline toolbar, which means that if it were above the block toolbar, users would never get a chance to click on the block toolbar items that'd be obscured. 😞 Users can remove the blinking cursor from the cover image by clicking outside the text area, but it doesn't hide the controls.

So a complete solution would need to:

  • Adjust the z-index of the inline toolbar so it floats above the block toolbar.
  • Also hide the block toolbar when someone clicks out of the editing field.

@youknowriad
Copy link
Contributor

Also hide the block toolbar when someone clicks out of the editing field.

I thought it was already the case, must be a regression :)

@mtias mtias added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later labels Nov 12, 2018
@mtias mtias added this to the WordPress 5.0.x Follow Ups milestone Nov 12, 2018
@jorgefilipecosta
Copy link
Member

As a side effect of merging nesting in cover block this issue got solved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Blocks Overall functionality of blocks [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

4 participants