Size Change: +4.49 kB (0%)

Total Size: 1.05 MB

_{compressed-size-action}

@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:

• Put the button in its own group, so it has separators left and right of the label.
• The modal dialog has a max-width so it defaults to a nice compact size.
• The two Cancel/Convert buttons are right aligned, and have good spacing between them.

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:

// Modal that shows conversion option.
.wp-block-page-list-modal {
	max-width: 400px;
}

.wp-block-page-list-modal-buttons {
	display: flex;
	justify-content: flex-end;

	.components-button {
		margin-left: $grid-unit-15;
	}
}

The behaviour's testing well for me, though!

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?

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.

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.

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.

I sneakily slipstreamed an edit to the original suggested text, apologies for that. Subtle change:

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.