Spotlight Mode does not work as expected in mobile viewports

[yogeshbhutkar]

Description

In the mobile view, the Spotlight Mode (or Focus Mode) does not function as expected. While it successfully highlights one block at a time and reduces the opacity of surrounding blocks on desktop, this behavior is not replicated on mobile viewports.

I believe this issue qualifies as a bug for the following reasons:

1. The Spotlight Mode toggle is visible in mobile view, but activating it has no effect, which can confuse users regarding its intended functionality.
2. The desktop and mobile views should exhibit similar behavior for features that are enabled in both.

This was first introduced in this PR: #30130

Refactoring the code here should fix the problem:

gutenberg/packages/block-editor/src/components/block-list/index.js

Line 108 in b54d1fe

'is-focus-mode': isFocusMode && isLargeViewport,

Proposed Solution:

We should either ensure that the Spotlight Mode Toggle on the mobile viewport functions as intended or hide the Toggle altogether from the mobile interface. Displaying the Toggle without the corresponding functionality may lead to a suboptimal user experience.

Step-by-step reproduction instructions

1. Navigate to the Post Edit screen and enable Spotlight Mode.
2. In a viewport size corresponding to a mobile device, observe that enabling Spotlight Mode has no visible effect.

Screenshots, screen recording, code snippet

bug-report.mov

Environment info

• WordPress Version: 6.7.1
• Gutenberg Plugin Version: 19.8.0-rc.1

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure