Add Gallery Block

[mkevins]

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.

[pinarol]

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:

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]

Opened this issue to track that problem about links