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

Preview cards should not render Warnings or other interactive UIs that are not a preview #68131

Open
2 of 6 tasks
afercia opened this issue Dec 19, 2024 · 2 comments · May be fixed by #68701
Open
2 of 6 tasks

Preview cards should not render Warnings or other interactive UIs that are not a preview #68131

afercia opened this issue Dec 19, 2024 · 2 comments · May be fixed by #68701
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

@afercia
Copy link
Contributor

afercia commented Dec 19, 2024

Description

Reported by @t-hamano on #67433 (comment)

The editor uses 'preview cards' in a few places. For example the list of Patterns 9In the inserter and other places) shows a 'card' with the pattern preview.

These previews are the actual rendering of the patterns. As such, they also render warnings and potentially other UIs that aren't really part of the preview.

For example, when a Pattern contains a block with invalid markup, it makes perfectly sense to show the Warning in the editing view. Screenshot:

Image

However, it doesn't make any sense showing the Warning in the card preview. Screenshot:

Image

Such a warning rendered there is hardly usable and I guess it also breaks the accessibility and semantics of the preview card.

Step-by-step reproduction instructions

  • Go to the Site editor > Patterns > and edit one of your custom patterns under 'My patterns'.
  • Switch the editor to the 'code' view and alter the markup to intentionally make one of the pattern's block invalid.
  • Switch the editor back to the 'visual' view.
  • Observe the editor renders the Block contains unexpected or invalid content. warning.
  • Click 'Open naavigation' at the toop left of the screen and go to 'My patterns'.
  • Observe the pattern card preview renders the Warning in the preview.

Screenshots, screen recording, code snippet

No response

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. labels Dec 19, 2024
@afercia afercia changed the title Preview cards should not render Warnings or other intereactive UIs that are not a preview Preview cards should not render Warnings or other interactive UIs that are not a preview Dec 19, 2024
@karmatosed
Copy link
Member

I agree that showing the warnings in the preview is an issue but my concern is going to be how it looks without the warning. Does it look broken without knowing a reason for example? That said, the warning looks unexpected so I do agree and for now will remove the feedback label to have a suggestion to remove in PR.

@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label Jan 10, 2025
@yogeshbhutkar
Copy link
Contributor

If we choose not to display the warnings, the interface will appear similar to how it looks within the pattern editor for that specific pattern, except the background color applied by the has-warning class will be omitted, and the warning itself will be hidden.

Before After
Image Image

However, the warning will be displayed as usual within the editor page for that pattern.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 16, 2025
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
Development

Successfully merging a pull request may close this issue.

3 participants