Gallery Block Refactor: Features and functionality to test during CFT #29882

glendaviesnz · 2021-03-16T02:36:34Z

A lot has changed with the gallery during its refactoring to use nested images blocks. It would be good to ensure we get a sufficiently broad range of features and functionality tested during the community call for testing.

This issue is meant to be a living checklist of things that require testing.

Gallery Creation

Add a gallery via block inserters
Add gallery via drag and drop of varying number of images (inc. invalid files) into the editor
- Single image
- Multiple images
- With invalid files.
- Positioning of image insertions
Copy an existing gallery block

Gallery Deletion

Remove a gallery via block controls or delete keyboard shortcut
Undo addition of gallery block

Image Ordering

Reorder images within gallery
- Using block controls
- Via drag and drop of image blocks

Adding Images

Updating/Removing Images

Transforming Gallery

Test migrating new and old galleries to and from Jetpack tiled and slideshow galleries, and to and from core image blocks
Test transforming a gallery shortcode to the new gallery block

Gallery Rendering

Ensure gallery renders and functions on the frontend
Ensure that an existing gallery that has not been migrated still displays correctly on the front end
Test frontend rendering in default themes
Ensure rendering is correct within Reader

Compatibility

Test all the above with different plugins and themes active
Test gallery within the editor and frontend across all supported browsers

paaljoachim · 2021-03-24T17:14:46Z

Using WP 5.7.
The special Gutenberg plugin that contains the new Gallery PR.
Twenty Twenty One.

Chrome
A local test site.

Gallery Creation

1- Added the new gallery with the Add block and the inpage inserter. Worked.
2- Initially I dragged and dropped without first adding the Gallery block. That did not work. I then added the Gallery block dropping 4 images onto the placeholder. Works fine. I removed all the images inside the Gallery block, so no images remained. I then encountered an error.

2A- Drag and drop of single image.
Worked.
2B- Drag and drop of multiple images.
Worked.
2C- Drag and drop of multiple images + invalid files.
Valid images were uploaded others were not.
2D- Positioning of image insertions.
---> Not sure what this means.... Not able to test at the moment.

3- Copy an existing gallery block
Deactivated the special Gutenberg plugin. Went to a page to create a gallery block.
I also added a caption during the add/edit gallery. The caption showed in the Gutenberg layout screen. It did not do so for the updated Gallery block. Copied the old gallery block. Activated the special Gutenberg plugin. Went to a page. Pasted in the old gallery block. It showed the old gallery block. I expected an option under the 3 dots drop down menu to convert the old gallery block to become a new gallery block. Btw captions are seen. I also added another this time new gallery block and the captions are also seen here. It seems that on the first run through with creating a new gallery block on a new page that captions will not show up. Upon publishing they seem to show up. This is a bit tricky. Sometimes they show up and sometimes not.

Gallery Deletion

1- Remove a gallery via block controls or delete keyboard shortcut
I can remove the gallery via the 3 dots drop down menu.
Hmm now clicking the parent icon works.... it did not earlier. Maybe some caching thing going on...
I am able to select parent icon and see the blue border around the Gallery block and then press delete or backspace key.

2- Undo addition of gallery block
NB. Not able to undo addition of gallery block..
--> Undo icon becomes unresponsive.

Image Ordering

Reorder images within gallery
Using block controls
Via drag and drop of image blocks
--> Both worked.

Adding Images

1- Insert images via placeholder upload
--> Worked.

2- Insert images via media library
--> Worked

3- Insert images via inserter
Not sure about this one...

4- Insert images via drag & drop between images
--> Worked. From an Image block on the page and externally drag and drop.

5- Single image
--> Worked.

6- Multiple images
--> Worked.

7- With invalid files.
---> Drag and drop from external desktop. 2 jpg images and a mp4. No files were added.
I have earlier been able to add only allowed images, but this time no images were added.

8- Positioning of image insertions
This might mean alignment....
Aligned left.
---> Looked fine backend and frontend.
Aligned center.
---> Looked fine backend and frontend.
Aligned right.
---> Looked fine backend and frontend.
Aligned wide.
---> Looked fine backend and frontend.
Aligned full width.
---> Looked fine backend and frontend.

Linking
Linked one image to another post.
Linked one image to the attachment page.
Linked one image to the media file.
--> Worked fine

Updating/Removing Images
1- Replace image by dropping replacement on original
I tried dropping an image from the desktop and onto of an image in the Gallery block.
Result is that the newly dropped image was added to the Gallery Block.

2- Remove an image from the gallery
Removed with selecting block and pressing del or backspace on the keyboard.
I also tested using the 3 dot drop down menu to remove block.
--> Both worked fine.

3- Change image block style selections
Changed to rounded, borders and frame on various images inside the Gallery Block.
--> Worked fine.

4- Apply gallery settings to all child images
Added link to media file for all child images. -> Worked.
Added image size Full Size. --> Looked like it work on the frontend. All images looked sharper. Backend all images reflected that Full Size was in use.

5- Set link destination and target
Added open in new tab to one image, and not the rest.
Worked fine.

6- Set image size
---> Worked.

7- Test applied image link destinations work
---> Worked.

8- Confirm thumbnails and sizes render correctly
---> Hard to say as the image stay the same size in the backend and frontend. Selecting thumbnail for some images just showed a blurred image.

9- Ensure new gallery images pick up the gallery’s currently selected options
---> Worked from upload and media library.

10- Check image customisations introduced outside of Gutenberg still work e.g. Duotone
---> Not checked.

Migrating Old Gallery Versions

1- Load a post with an old gallery created prior to the gallery refactoring
---> Worked.

2- Test migrating old galleries by pasting old content into the code editor, confirming visual results and console log
---> Worked. Uses the old Gallery settings when selecting Image block.

3- Test transforming a gallery shortcode to the new gallery block
Ahh. I clicked the Block transform and transformed it into the new Gallery block.
I selected a new Image block inside the converted to new Gallery block. Then clicked the "Change block or style" and expected to be able to convert one image block inside the gallery to a single image block

Gallery Rendering

1- Ensure gallery renders and functions on the frontend
---> Works.

2- Ensure that an existing gallery that has not been migrated still displays correctly on the front end
---> I believe it did. I tried undoing back to before I had converted to new but that did not work.

3- Test frontend rendering in default themes
---> Works.

4- Ensure rendering is correct within Reader
---> Not tested. Not sure how to test it.

Compatibility

1- Test all the above with different plugins and themes active
Needs more testing here....

2- Test gallery within the editor and frontend across all supported browsers
Tested a bit with Safari. That seemed to work alright. Used Twenty Twenty One.

glendaviesnz · 2021-03-30T03:53:49Z

Thanks for all the testing @paaljoachim

dropping 4 images onto the placeholder. Works fine. I removed all the images inside the Gallery block, so no images remained. I then encountered an error.

@paaljoachim, I wasn't able to replicate this - are you able to provide a screen capture of the full add and delete process, and a copy of any error messages that show in browser console when the error occurs please?

I expected an option under the 3 dots drop down menu to convert the old gallery block to become a new gallery block.

To convert an old gallery block to a new one you need to use the Transform menu and select the option to transform to 'Gallery' - it would be nice if we could make this 'New Gallery', but the block transform framework doesn't allow us to specify a custom name here unfortunately:

Then clicked the "Change block or style" and expected to be able to convert one image block inside the gallery to a single image block

Currently you need to drag an image out of the gallery in order to transform it to a single block. I don't think there is currently a way to handle this from the transforms menu, but you could add an issue for this if you think it would be a useful future enhancement.

NB. Not able to undo addition of gallery block..

There is an issue at #30001 for undo issues, feel free to update this if you don't think it covers your use case.

with creating a new gallery block on a new page that captions will not show up

Thanks for adding #30196 for this - I have dragged it into the project board

paaljoachim · 2021-04-01T19:32:47Z

Using WordPress 5.7
Special Gutenberg plugin. (Only plugin activated)
Twenty Twenty One.

Retesting this aspect:
Initially I dragged and dropped without first adding the Gallery block. That did not work. I then added the Gallery block dropping 4 images onto the placeholder. Works fine. I removed all the images inside the Gallery block, so no images remained. I then encountered an error.

I dragged and dropped 4 images onto the placeholder at first it looked like I missed with the images as the first image is seen in the browser, so I had to use the browser back arrow to get back to the Gallery placeholder. Then I added the images again and made sure that I was inside the placeholder when I dropped the images. Selecting the first image and press the backspace/delete key produced the error.

Delete-image-error.mp4

Console errors seen:

Delete-image-error-seen-in-console.mp4

mkevins · 2021-09-21T06:06:17Z

annezazu · 2022-02-07T04:15:10Z

I'm assuming this can be closed due to merging in 5.9. I'm going to close it out as a result but obviously feel free to re-open.

glendaviesnz added the [Block] Gallery Affects the Gallery Block - used to display groups of images label Mar 16, 2021

This was referenced Aug 17, 2021

Gallery block refactor: Console errors thrown in some instances when replacing images via Media Library #34098

Closed

Gallery block: Media library button opens upload modal then causes an empty white modal #34099

Closed

annezazu closed this as completed Feb 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gallery Block Refactor: Features and functionality to test during CFT #29882

Gallery Block Refactor: Features and functionality to test during CFT #29882

glendaviesnz commented Mar 16, 2021 •

edited

Loading

paaljoachim commented Mar 24, 2021

glendaviesnz commented Mar 30, 2021 •

edited

Loading

paaljoachim commented Apr 1, 2021 •

edited

Loading

mkevins commented Sep 21, 2021 •

edited

Loading

annezazu commented Feb 7, 2022

Gallery Block Refactor: Features and functionality to test during CFT #29882

Gallery Block Refactor: Features and functionality to test during CFT #29882

Comments

glendaviesnz commented Mar 16, 2021 • edited Loading

Gallery Creation

Gallery Deletion

Image Ordering

Adding Images

Updating/Removing Images

Transforming Gallery

Gallery Rendering

Compatibility

paaljoachim commented Mar 24, 2021

glendaviesnz commented Mar 30, 2021 • edited Loading

paaljoachim commented Apr 1, 2021 • edited Loading

mkevins commented Sep 21, 2021 • edited Loading

Mobile Testing Checklist

The Gallery New Format Feature Flag

Gallery Creation

Gallery Deletion

Image Ordering

Adding Images

Updating/Removing Images

Gallery Rendering

Compatibility

annezazu commented Feb 7, 2022

glendaviesnz commented Mar 16, 2021 •

edited

Loading

glendaviesnz commented Mar 30, 2021 •

edited

Loading

paaljoachim commented Apr 1, 2021 •

edited

Loading

mkevins commented Sep 21, 2021 •

edited

Loading