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

Remove WordPress.com tour banner from view in UBE #4820

Merged
merged 5 commits into from
May 10, 2022

Conversation

SiobhyB
Copy link
Contributor

@SiobhyB SiobhyB commented May 3, 2022

Fixes #4079

What?

This PR removes the WordPress.com tour banner that sometimes pops up when opening the unsupported block editor (UBE).

Before After

Note, the cookie banner remains as I'm assuming it'd be necessary to get the thumbs up from legal before hiding it and it's not as disruptive as the tour banner.

Why?

The tour banner is specific to the web version of the editor, it's therefore confusing and distracting within the UBE.

How?

Previously, as part of the changes in #4352, the external-style-overrides.css file was created for the purpose of "housing" CSS that didn't belong in the Gutenberg repository. It has a Gutenberg equivalent here.

Following the approach we've taken to hide other elements in the UBE, this PR adds CSS to the external-style-overrides.css that targets the tour banner and hides it from view.

Testing Instructions

This may be only reproducible on a new WordPress.com site, since the popup might only be shown once.

  1. Locate a post that contains an unsupported block (e.g. Calendar at time of writing)
  2. Open the post and expect to see the block rendered as a placeholder with the text "Unsupported"
  3. Tap the (?) icon and expect the option to edit the block in a web browser to be shown
  4. Tap the edit in a web browser button and expect the block to be shown, confirm that the "Welcome to WordPress!" banner is no longer visible

PR submission checklist:

  • I have considered adding unit tests where possible.
  • I have considered if this change warrants user-facing release notes more info and have added them to RELEASE-NOTES.txt if necessary.

@peril-wordpress-mobile
Copy link

peril-wordpress-mobile bot commented May 3, 2022

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

As spaces between selectors are removed as part of the Gutenberg Mobile bundling process, ".wpcom-tour-kit .tour-kit-frame__container" would become ".wpcom-tour-kit.tour-kit-frame__container" and not work as expected. As such, the selector has been changed to ".tour-kit-frame__container" with this commit. This will ensure the CSS works as expected.
@SiobhyB SiobhyB requested review from jhnstn and mchowning May 3, 2022 22:16
@SiobhyB SiobhyB marked this pull request as ready for review May 3, 2022 22:17
@mchowning
Copy link
Contributor

👋 @SiobhyB ! I'm having some trouble testing this. When I create a new free WordPress.com site, I'm not seeing any "Welcome to WordPress" banner either on the web when I start a new post or in the app (without the changes from this PR applied) when I edit an unsupported block. I know I've seen it before, but I don't know if there's something I'm doing wrong now to keep it from showing up. Any ideas?

@SiobhyB
Copy link
Contributor Author

SiobhyB commented May 6, 2022

Thanks for taking a look at this, @mchowning! I did some digging and found there's an option to enable the Welcome Guide under the editor's settings on the web:

Screenshot 2022-05-06 at 11 30 16

I think if you enable it there, you should then be able to see it within the UBE on the app. Would you be able to give that a try to see if it works for you?

Copy link
Contributor

@mchowning mchowning left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this fix @SiobhyB . I updated the gb-mobile reference in WPAndroid and saw that this change works perfectly.

If I use metro though (instead of the bundle), then the display property doesn't get applied and the popup still appears. I'm not sure exactly why that is, but I noticed you had to make a tweak to get this to work in the bundle—maybe that made it so that it didn't work in metro? Anyway, I'll go ahead and approve since it is the bundle that is the most important. If there were a way to get this to work both with metro and the bundle that would be great though.

@SiobhyB
Copy link
Contributor Author

SiobhyB commented May 10, 2022

Thanks @mchowning! 🙌

If I use metro though (instead of the bundle), then the display property doesn't get applied and the popup still appears.

I only able to get the fix working with metro if I restarted the activity and re-ran the app in Android, it didn't automatically update like other changes to Gutenberg do (I think that's expected with UBE changes). Perhaps that's related? I'll go ahead to merge the PR as I believe it will work as expected with metro with a fresh install/restart. Let me know if there's still problems that I'm missing, though.

@SiobhyB SiobhyB merged commit 5ce602e into trunk May 10, 2022
@SiobhyB SiobhyB deleted the remove-unwanted-ube-popup branch May 10, 2022 10:21
@jhnstn jhnstn mentioned this pull request May 11, 2022
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unwanted popup shown in Unsupported Block Editor
2 participants