Skip to content

Try Gutenberg: Image fullscreen preview #12834

Closed
cameronvoell wants to merge 3 commits intodevelopfrom
gutenberg/image-fullscreen-preview
Closed

Try Gutenberg: Image fullscreen preview #12834
cameronvoell wants to merge 3 commits intodevelopfrom
gutenberg/image-fullscreen-preview

Conversation

@cameronvoell
Copy link
Copy Markdown
Contributor

@cameronvoell cameronvoell commented Nov 1, 2019

Implements wordpress-mobile/gutenberg-mobile#1286

**PR is for testing a fullscreen preview, does not include gb-mobile release 1.16.0

Gb-mobile - wordpress-mobile/gutenberg-mobile#1527
Gutenberg - WordPress/gutenberg#17109

To test:

  1. Open article in the block editor.
  2. Navigate to an image block with an image loaded, or add a new image block and add an image
  3. Select the image block and notice the blue border shows around the image
  4. Press the image while the image block is selected and notice the image will be viewed in fullscreen.
  5. Press outside the boundaries of the image in fullscreen mode, or swipe the image down to exit the fullscreen image preview.

Update release notes:

  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Nov 1, 2019

You can test the changes on this Pull Request by downloading it from HockeyApp here. If you need access to this, you can ask a maintainer to add you.

@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Nov 1, 2019

Warnings
⚠️ PR is not assigned to a milestone.

Generated by 🚫 dangerJS

@iamthomasbishop
Copy link
Copy Markdown

Looking good @cameronvoell, nice work! I just have a couple bits of feedback:

  • Sometimes the transition from the canvas to the image preview is abrupt, not using a cross-fade. It seems this usually happens on the first attempt after adding an image to canvas.
  • Can we dismiss the preview on tap? If we were showing information/UI around the image then I'd propose the tap gesture would toggle visibility of that, but since we're not showing anything let's have tap dismiss the preview UI.
  • It'd be great to allow omnidirectional drag to dismiss, but I don't think that's a blocker to ship v1.

@cameronvoell
Copy link
Copy Markdown
Contributor Author

cameronvoell commented Nov 5, 2019

Sometimes the transition from the canvas to the image preview is abrupt, not using a cross-fade. It seems this usually happens on the first attempt after adding an image to canvas.

Notes for future self on things I tried in order to fix this:

  • Tried forcing the image preview to always source from cache and not from the network (https://facebook.github.io/react-native/docs/images#cache-control-ios-only)
  • Tried modal prop useNativeDriver = true
  • Tried updating react-native-modal to latest version: 11.5.3 ( in combination with above as well)
  • Tried tweaking increasing/decreasing times of backdropTransitionInTiming

I'm still working on this. The first couple parameter tweaks etc. did not seem to help. See the video below. I agree it is not a good first animation.
first-transition-pops

@iamthomasbishop
Copy link
Copy Markdown

@cameronvoell One tiny other thing I forgot to mention, is there a way we can remove the image outline (thick blue border) while the upload is progressing? I think the outline should only be applied once the image is successfully uploaded.

@iamthomasbishop
Copy link
Copy Markdown

I also noticed in your last video above that the progress bar jumps to the bottom of the area when, mostly as the upload is finishing.

Separate issue, which I created here: The icon used on the placeholder background could use some tweaks. This is especially jarring because there's some jumpiness in displaying the image.

@cameronvoell
Copy link
Copy Markdown
Contributor Author

Closed in favor of native iOS solution: #12979

@cameronvoell cameronvoell deleted the gutenberg/image-fullscreen-preview branch November 21, 2019 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants