search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Cover Block: Hover Reveal style does not reveal text on mobile device #96070

Open lizswafford opened 6 hours ago

lizswafford commented 6 hours ago

Quick summary

When using the Cover Block, you can add text and select the style called "Hover Reveal". The background will first appear with no text. On mouse over text is revealed. The editor will show the preview of text being revealed on the mobile screen size. However, this does not happen on a mobile device. The text with a link is there, and clickable, but the text is not revealed. Tapping on the image inside the Cover Block reveals the text. Clicking on the invisible link will send you to the page. But, you don't know which page because the text with the title is not visible.

Steps to reproduce

  1. On desktop - Add a Cover Block to a page or post
  2. Add an image for the background
  3. Make the Cover Block full-width
  4. Add text, and create a link to a different page
  5. Select "Hover Reveal" from the Cover Block Styles
  6. Note that the text is hidden and only the background image is visible.
  7. Save the changes and publish the page
  8. Set the editor to mobile view, notice that you can mouse over the image and the text will appear
  9. Open the page on a mobile device, notice that you have to tap on the image to reveal the text
  10. On mobile, you can also scroll past the image and no text is revealed.

Image of the page editor with the block styles open on the right sidebar. Image

Example of mobile view - Cover Block image is visible, but the text is not. Image

What you expected to happen

On a mobile browser I expect to see the text revealed as I scroll past the Cover Block. If I don't click on the image I don't know that text is there.

What actually happened

It is possible to scroll past all the Cover Blocks without knowing that there is text on the block.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

Not really a workaround - you can simply choose not to use the Hover Reveal to guarantee that the text is visible.

Platform (Simple and/or Atomic)

Simple

Logs or notes

(8981310-zd) Tested on iPhone Safari browser

github-actions[bot] commented 6 hours ago

Support References

This comment is automatically generated. Please do not edit it.

renatho commented 3 hours ago

I could reproduce it using the Dalston theme.