Gallery block: add toolbar button to convert old galleries to new format #34606
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
glendaviesnz
added
[Type] Enhancement
|
Size Change: +4.49 kB (0%) Total Size: 1.05 MB
ℹ️ View Unchanged
|
|
@jasmussen Do you have any thoughts on this approach from a UX perspective? |
|
Awesome, excited to upgrade my old galleries! Thanks for all your work on the new gallery, and for this followup. Figma has this approach for when you need to update to a new version of "auto layout":
We could potentially have something similar, and use the card below the classic gallery to put a button right there. Here:
However a button in the toolbar has precedence in the Classic block, and even the Page List as used inside a Navigation block:
So that could work as well. However we'd want the treatment to be just right. Here's the Page List toolbar:
Here's the conversion dialog:
Some of the details worth adopting:
If you could adopt those tweaks by copying the structure of the page list conversion dialog, we'd be closer. The other part is the verbiage. Here's the current dialog:
Can we try: "Update gallery" "Updating to the new format adds the ability to use custom links or styles on individual images in the gallery, and makes it easier to add or move them around." And instead of "Convert", should we try "Update"? |
|
Nice idea to have a dedicated modal for the conversion @glendaviesnz, and thanks for adding the feedback, Joen, I was just going to add that it'd be good to copy the CSS rules from the Convert to links modal, that sets the min-width and right aligns the buttons: The behaviour's testing well for me, though! |
andrewserong
reviewed
Sep 7, 2021
|
Honestly most modals like this one should look virtually identical by default. Is there an opportunity to adjust the component itself for when it acts as a "confirm", it appears like this by default? |
That's a great idea, it'd make it easier to add in additional modals whenever we need them. |
|
We also have another PR (#34153) exploring the custom Confirm component. I think design feedback from this issue might be useful there as well. |
|
Thanks for the feedback @jasmussen and @andrewserong I have made all of the suggested changes, looks much better I think. As noted it would be good if the confirm dialog had better defaults, but I think that should be handled separately to this PR. |
andrewserong
reviewed
Sep 8, 2021
There was a problem hiding this comment.
This is testing well for me @glendaviesnz, the Toolbar item doesn't show when the experiment is switched off, and the styling changes look really nice:
Just left a comment for the failing lint CI job, but otherwise this LGTM!
| .wp-block-update-gallery-modal-buttons { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
|
|
There was a problem hiding this comment.
Tiniest of nits: the linting step is failing because of a single whitespace character on this line 😄
andrewserong
approved these changes
Sep 8, 2021
7 tasks
|
Thanks @andrewserong linting issue hopefully fixed - something is broken with my local linting, must try and get that sorted! |
|
Just from looking at the images, things are looking good. I still think we should reduce the text, though, I had some suggestions in #34606 (comment) to simplify. Keeping in mind you can always undo or restore a page revision, feels like there's no reason to be too verbose here. |
Good point @jasmussen, I have removed that extra wording, now looks like:
|
|
Looks beautiful. I sneakily slipstreamed an edit to the original suggested text, apologies for that. Subtle change: "Updating to the new format adds the ability to use custom links or styles on individual images in the gallery, and makes it easier to add or move them around." ☝️ I removed a duplicate "add" and "images". Should we also update the heading to simply "Update gallery"? Appreciate the back and forth. In my experience, the fewer words you can use to convey the same, the faster it is to read. |
No worries at all, happy to take the time to refine this. Wording now as suggested:
|
|
Lovely, ship it. We can always tune and tweak. |
7 tasks
14 tasks
7 tasks
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds an 'Update' button to any galleries in the old format to allow conversion to the new innerBlocks format.
The reason for doing this rather than adding a transformation is because a straight transformation is confusing in the transform menu, as it shows transform Gallery -> Gallery, which gives user no indication of what that means. This PR introduces a modal that can provide some explanation to the user.
To Test
Updatebutton showingUpdatebutton should now show, and when clicked will show a modal that allows conversion to the new gallery format - be brave and click it, and see if the block is converted correctlyScreenshots