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

Add Gallery Block #1498

Merged
merged 52 commits into from Dec 6, 2019
Merged

Add Gallery Block #1498

merged 52 commits into from Dec 6, 2019

Conversation

@mkevins
Copy link
Contributor

mkevins commented Oct 25, 2019

Description

This PR is a first iteration for a semi-cross-platform Gallery block. This adds the gallery block, which should allow viewing, editing, and creating gallery blocks within the editor. In this 1st iteration, upload options are disabled, and new images can only be added via the WordPress Media Library.

Related PRs

gutenberg: WordPress/gutenberg#18265
WordPress-Android: wordpress-mobile/WordPress-Android#10703
WordPress-iOS: wordpress-mobile/WordPress-iOS#12908

Tests

Loading

A post with a gallery block should load normally, and display the gallery block.

Steps:

  • Create a post on web and add a gallery block (add some images, and some captions)
  • Save the post
  • Open the post on the mobile WordPress app

Expected behavior:

  • The gallery should load
  • Captions should be visible
  • Block settings should be preserved

Saving

A gallery created / edited in the mobile WordPress app should be openable on web.

Steps:

  • Open or create a new post in the app
  • Add a gallery block (add some images, and some captions)
  • Save the post
  • Open the post on web

Expected behavior:

  • The gallery should load
  • Captions should be visible
  • Block settings should be preserved

Adding images

You should be able to add images to a gallery from WordPress Media Library.

Note: Upload options should currently be disabled in production.

Steps:

  • Add a gallery block
  • Tap "ADD MEDIA"
  • Tap WordPress Media Library
  • Select some images

Expected behavior:

  • Selected images should load into the gallery
Screencast

Moving images

It should be possible to re-order gallery images.

Steps:

  • Create a gallery
  • Tap an image to select it
  • Tap the left and right arrow buttons to move the image

Expected behavior:

  • The images should move
Screencast

Removing images

It should be possible to remove images from the gallery.

Steps:

  • Create a gallery
  • Tap an image to select it
  • Tap the "X" button to remove it

Expected behavior:

  • The image should be removed from the gallery
Screencast

Columns

The columns setting is used to control the number of columns in the gallery layout. The maximum value for this setting should be limited to 8, or the number of images in the gallery, whichever is smaller.

On mobile, since the viewport width is limited, we also limit displayed columns. The displayed columns maximum should be 2 for portrait mode, and 4 for landscape.

Steps:

  • Create a gallery with several images
  • Tap the settings button (gear at the bottom of the block)
  • Move the columns slider to set different values

Expected behavior:

  • The setting should change
  • The columns displayed should be limited
Screencasts
Portrait Landscape

Captions

It should be possible to add captions on each image in the gallery. Also, it should be possible to add a caption for the whole gallery block.

RichText

It should be possible to add styled text to gallery captions

Steps:

  • Create a gallery
  • Tap an image to select it
  • Tap "Write caption..." placeholder text
  • Write a caption with bold or italic text
  • Tap another image to select it

Expected behavior:

  • The text should be displayed with the appropriate styles
  • Captions should be visible for unselected images
Screencast

Captions grow

Captions should grow to display larger captions

Steps:

  • Tap an image in a gallery
  • Tap the caption
  • Enter a lot of text into the caption

Expected behavior:

  • The caption should grow to accommodate the larger caption
Screencast

Scrollable captions

Large captions should be scrollable

Steps:

  • Tap an image in a gallery
  • Tap the caption
  • Enter a lot of text into the caption

Expected behavior:

  • The caption should be scrollable
Screencast

Orientation change

The caption block should respond well to orientation changes. The displayed columns should adapt to respond to the new viewport width after the orientation change.

Steps:

  • Create a gallery with several images
  • Change the columns setting to larger than 2
  • Rotate the device between portrait and landscape

Expected behavior:

  • The gallery should display properly in different orientations
  • The displayed columns should adapt with orientation changes (max 2 for portrait, 4 for landscape)
Screencast

Crop images

The crop setting should allow you to turn cropping on or off.

Steps:

  • Create a gallery with some images
  • Open the gallery settings (tap the gear icon)
  • Tap "Crop images"

Expected behavior:

  • Images should change their display to cropped (full bleed) or uncropped (fully contained)
Screencast

Note:

Currently, iOS images are displayed with a lower resolution. There is ongoing work to address this in another PR: wordpress-mobile/WordPress-iOS#13042.

Update release notes:

  • If there are user facing changes, I have added an item to RELEASE-NOTES.txt.
@mkevins mkevins force-pushed the try/gallery-draft branch from b14e498 to 873ac6f Nov 5, 2019
@mkevins mkevins mentioned this pull request Nov 7, 2019
2 of 3 tasks complete
pinarol and others added 17 commits Nov 8, 2019
# Conflicts:
#	bundle/android/App.js
#	bundle/android/App.js.map
#	bundle/ios/App.js
#	bundle/ios/App.js.map
#	gutenberg
#	src/initial-html.js
@mkevins mkevins marked this pull request as ready for review Dec 6, 2019
mkevins and others added 2 commits Dec 6, 2019
@mkevins mkevins changed the title Gallery draft Add Gallery Block Dec 6, 2019
pinarol added 2 commits Dec 6, 2019
@mkevins mkevins requested a review from pinarol Dec 6, 2019
# Conflicts:
#	react-native-aztec/ios/Cartfile
#	react-native-aztec/ios/Cartfile.resolved
@pinarol pinarol added this to the 1.19 milestone Dec 6, 2019
@pinarol
pinarol approved these changes Dec 6, 2019
Copy link
Contributor

pinarol left a comment

Working pretty well 🎉 I think this is ready to go!

Tested both on WPiOS & WPAndroid using peril links to make sure I am seeing the release version.

Alternatively I also tested with metro on to be able to catch any potential validation errors&red screens.

Things I've tested:

  • Verified that release version only has WP media library option
  • Tile actions: move left/right, remove
  • Column count setting works ok
  • Slider works smoothly
  • Crop image settings work ok
  • Dark mode looks good on iOS
  • Avoiding of adding multiple images works good
  • VoiceOver works good on iOS
  • Interaction with web works good
  • Portrait landscape modes, with devices and iPad
  • Tested on self-hosted site/premium/atomic

I just spotted one problem about link settings, this is only happening with my premium site, business site works all OK.

  • Change link settings on web(should be a premium site)
  • Open post on mobile
  • It'll show this screen on mobile:

IMG_3075

I think we can iterate on this. Since it is not reproducible on atomic sites, this looks similar to the problem we currently have on Video block where Jetpack changes the output html so maybe it won't have a solution on our side. I'll open an issue to make sure we can track.

@pinarol pinarol merged commit 6573570 into develop Dec 6, 2019
5 checks passed
5 checks passed
ci/circleci: Check Correctness Your tests passed on CircleCI!
Details
ci/circleci: Test Android Your tests passed on CircleCI!
Details
ci/circleci: Test Android on Device Your tests passed on CircleCI!
Details
ci/circleci: Test iOS Your tests passed on CircleCI!
Details
ci/circleci: Test iOS on Device Your tests passed on CircleCI!
Details
@pinarol pinarol deleted the try/gallery-draft branch Dec 6, 2019
@pinarol pinarol mentioned this pull request Dec 6, 2019
1 of 1 task complete
@pinarol

This comment has been minimized.

Copy link
Contributor

pinarol commented Dec 9, 2019

Opened this issue to track that problem about links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.