search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 799 forks source link

WhatsApp Button Block Hover Causes Block Inserter to Collapse #30879

Open john-legg opened 1 year ago

john-legg commented 1 year ago

Impacted plugin

Jetpack

Quick summary

While using the side panel block inserter, hovering over the icon for the WhatsApp Button causes the panel to collapse.

https://github.com/Automattic/jetpack/assets/96805492/7c00032f-e2b5-4542-b157-52bbfc154a7a

Steps to reproduce

  1. Create or edit an existing post or page.
  2. Click the block inserter icon at the top left of the editor to open up the side panel.
  3. Explore or search for the WhatsApp Button block.
  4. Hover your mouse over the icon and the panel should collapse. This happens either immediately or after a few seconds.

A clear and concise description of what you expected to happen.

The block inserter panel to remain open, allowing the user to properly click on the WhatsApp Button icon.

What actually happened

The block inserter panel collapses. Sometimes before a user is able to select the block for insertion.

Note: users can still insert the block via the inline block inserter, which doesn't appear to have this issue.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

Logs or notes

I first discovered it while testing Jetpack 12.2-a.13 on self-hosted and simple. @anomiex was able to replicate it on a self-hosted site with 12.1. Here's the conversation for context:

p8oabR-1du-p2#comment-7332

john-legg commented 1 year ago

📌 REPRODUCTION RESULTS

Tested on Simple – Replicated Tested on Atomic – Replicated Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

After testing this on different browsers, it appears to be a Firefox-only issue. The block inserter panel doesn't collapse on Simple, Atomic, and self-hosted when using Chrome and Safari. Mobile doesn't seem to be a factor since it doesn't have a hover state. All of the sites were on Jetpack 12.1.

https://github.com/Automattic/jetpack/assets/96805492/d9c5c34e-1b21-4176-bf08-2f09108925b6

📌 ACTIONS

Assigned to @Automattic/jetpack

github-actions[bot] commented 11 months ago

This issue has been marked as stale. This happened because:

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.