Skip to content

Add mobile and tablet screenshots in previews and thumbnails#15688

Merged
mkevins merged 18 commits intodevelopfrom
feature/hpp-mobileThumbnails
Jan 28, 2021
Merged

Add mobile and tablet screenshots in previews and thumbnails#15688
mkevins merged 18 commits intodevelopfrom
feature/hpp-mobileThumbnails

Conversation

@mkevins
Copy link
Copy Markdown
Contributor

@mkevins mkevins commented Jan 22, 2021 •
edited
Loading

Fixes: wordpress-mobile/gutenberg-mobile#2978, wordpress-mobile/gutenberg-mobile#2977

Related PR

WordPressKit-iOS: wordpress-mobile/WordPressKit-iOS#330

Description

This PR adds mobile and tablet previews and thumbnails to the site design steps, and also adds the same options in the post editor preview.

Testing steps

To start the Home Page Picker screen
  1. Start the site creation flow (e.g. Choose site > Add button)
  2. Select the Create WordPress.com site option

Site design thumbnails

Tests

Initial Mode on a Phone

  1. Start the Home Page Picker on a phone
  2. Verify that mobile thumbnails are displayed

Initial Mode on a Tablet

  1. Start the Home Page Picker on a tablet
  2. Verify that tablet thumbnails are displayed

Thumbnail options availability

  1. Start the Home Page Picker on a phone
  2. Verify that there is a thumbnail button at the left of skip
  3. Press the thumbnail button
  4. Verify that three options are displayed: Mobile, Tablet, Desktop

Change to Tablet

  1. Start the Home Page Picker on a phone
  2. Press the thumbnail button (at the left of skip)
  3. Select Tablet
  4. Verify that tablet thumbnails are displayed

Change to Desktop

  1. Start the Home Page Picker on a phone
  2. Press the thumbnail button (at the left of skip)
  3. Select Desktop
  4. Verify that desktop thumbnails are displayed

Change to Mobile

  1. Start the Home Page Picker on a phone
  2. Change to Desktop as above
  3. Press the thumbnail button (at the left of skip)
  4. Select Mobile
  5. Verify that mobile thumbnails are displayed

Site design previews

Tests

Preview options availability

  1. Start the Home Page Picker
  2. Select a design
  3. Press the Preview button
  4. Verify that there is a preview mode button at the top right of the screen
  5. Press the preview mode button
  6. Verify that three options are displayed: Mobile, Tablet, Desktop

Mobile preview

  1. Start the Home Page Picker
  2. Select a design
  3. Press the Preview button
  4. Press the preview mode button
  5. Select Mobile
  6. Verify that a mobile preview is displayed

Tablet preview

  1. Start the Home Page Picker
  2. Select a design
  3. Press the Preview button
  4. Press the preview mode button
  5. Select Tablet
  6. Verify that a tablet preview is displayed

Desktop preview

  1. Start the Home Page Picker
  2. Select a design
  3. Press the Preview button
  4. Press the preview mode button
  5. Select Desktop
  6. Verify that a desktop preview is displayed

Mode between steps

Tests

Change mode on the preview screen

  1. Start the Home Page Picker on a phone
  2. Select a design
  3. Press the Preview button
  4. Press the preview mode button
  5. Select Desktop
  6. Verify that desktop mode is displayed
  7. Close the preview screen (back or swipe down)
  8. Verify that desktop thumbnails are displayed

Change mode from the design screen

  1. Start the Home Page Picker on a phone
  2. Press the preview mode button
  3. Select Desktop
  4. Select a design
  5. Press the Preview button
  6. Verify that a desktop preview is displayed

Preview in the editor

Tests

Opening the editor preview

  1. Open a post in the editor
  2. Tap the post menu button (upper right corner)
  3. Tap "Preview"

Initial Mode on a Phone

  1. Start the editor preview on a phone
  2. Verify that mobile preview is displayed

Initial Mode on a Tablet

  1. Start the editor preview on a tablet
  2. Verify that tablet preview is displayed

Change modes in the editor on a phone

  1. Try mobile, tablet, and desktop preview modes
  2. Verify that the previews are displayed correctly

Change modes in the editor on a tablet

  1. Try mobile, tablet, and desktop preview modes
  2. Verify that the previews are displayed correctly
  3. The phone preview should not be full-width on a tablet

PR submission checklist:

  • I have considered adding unit tests where possible.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@mkevins mkevins added this to the 16.6 milestone Jan 22, 2021
@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Jan 22, 2021 •
edited
Loading

You can trigger an installable build for these changes by visiting CircleCI here.

houndci-bot
houndci-bot reviewed Jan 22, 2021
View reviewed changes
@mkevins mkevins mentioned this pull request Jan 22, 2021
Merged
1 task
@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Jan 22, 2021 •
edited
Loading

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

@mkevins mkevins requested a review from antonis January 22, 2021 01:05
@mkevins mkevins marked this pull request as ready for review January 22, 2021 01:39
antonis
antonis suggested changes Jan 22, 2021
View reviewed changes
Copy link
Copy Markdown

@antonis antonis left a comment

Choose a reason for hiding this comment

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

Great work @mkevins 👍
This PR actually resolves three issues: wordpress-mobile/gutenberg-mobile#2978, wordpress-mobile/gutenberg-mobile#2977 and part of wordpress-mobile/gutenberg-mobile#3009 🎉

I tested on an iPhone SE 2020 with iOS 14.2 and on iPad simulator and the app behaves as expected 👍
The code is consistent and LGTM 🎉

  • I notice a minor issue (probably unrelated with this PR). When you open the preview and get back the selection overlay is missing. I feel that this is the only thing that would be nice to be resolved before merging.
selectionoverlay.mov

  • On Android I used a preview mode indication (at the bottom right corner) on the HPP preview screen but I don't think it is necessary

  • Regarding the code duplication in the popover delegate methods we discussed, I don't see an easy way to avoid it. I made a draft attempt to extract the logic in a separate class but I feel it gets too complicated and does not worth it.

@mkevins
Copy link
Copy Markdown
Contributor Author

mkevins commented Jan 25, 2021

  • I notice a minor issue (probably unrelated with this PR). When you open the preview and get back the selection overlay is missing. I feel that this is the only thing that would be nice to be resolved before merging.

Good catch Antonis! This was happening when the collectionView was reloaded (the selection was lost). It also happened when changing the device. I've pushed an update to address it.

Also, previously, the content collection view was not updating to the device mode selected in the preview screen when the preview was dismissed by swiping down. It only updated when tapping the close button. I've pushed changes to address this as well. Thanks for reviewing and testing! Ready for another look.

@antonis antonis self-requested a review January 25, 2021 06:52
@antonis
Copy link
Copy Markdown

antonis commented Jan 25, 2021

Hello @mkevins 👋

Good catch Antonis! This was happening when the collectionView was reloaded (the selection was lost). It also happened when changing the device. I've pushed an update to address it.

Thank you for looking into this. I noticed a minor related issue with the checkmark disappearing after the re-selection of the design.

checkmark.mov

I think this might be some kind of synchronisation issue between animations. Setting the animate=false here seems to make this work 🤷

@jkmassel
Copy link
Copy Markdown
Contributor

jkmassel commented Jan 25, 2021

👋 Howdy! We are cutting the 16.6 release today.

Because of that, this PR will be bumped to 16.7. If you need it to be part of 16.6, please merge it into the release/16.6 branch and DM me – I'll be happy to cut a new beta release!

@jkmassel jkmassel modified the milestones: 16.6, 16.7 Jan 25, 2021
@mkevins
Copy link
Copy Markdown
Contributor Author

mkevins commented Jan 27, 2021

Setting the animate=false here seems to make this work

You are right that there was a synchronization issue. I didn't encounter it at first, but after trying a few times, I observed the same. The animation completion for the checkmark is setting "stale" values for isHidden, which should be !isSelected. I was able to fix this missing checkmark by making the animation completion reference the current selection state, that way the animations can still be enabled: (f563138).

Thanks for reviewing again. Ready for another look. 😄

antonis
antonis approved these changes Jan 27, 2021
View reviewed changes
Copy link
Copy Markdown

@antonis antonis left a comment

Choose a reason for hiding this comment

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

Hey @mkevins 👋
Thank you for the fix 🙇
I tested it on an iPhone SE 2020 (iOS 14.2) and everything works as expected 🎉

@mkevins mkevins merged commit a6ac0a9 into develop Jan 28, 2021
@mkevins mkevins deleted the feature/hpp-mobileThumbnails branch January 28, 2021 06:56
@mkevins
Copy link
Copy Markdown
Contributor Author

mkevins commented Jan 28, 2021

Thank you Antonis for reviewing and testing. 😄

@antonis antonis mentioned this pull request Feb 11, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@houndci-bot houndci-bot houndci-bot left review comments

@antonis antonis antonis approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Site Creation

Projects

None yet

Milestone

16.7

Development

Successfully merging this pull request may close these issues.

[Layout Switching] Add mobile/tablet/desktop thumbnails in HPP design selection screen

4 participants

@mkevins @antonis @jkmassel @houndci-bot