Update query block creation and replacement flows #38997
Conversation
|
Size Change: +1.17 kB (0%) Total Size: 1.22 MB
ℹ️ View Unchanged
|
|
Nice, it's working as advertised 🙂 Something about the 'replace' label doesn't work as well here as it does on the template part block. It may be time to consider moving this button to the transform menu like in the designs here, and updating the label for non-template-part blocks to say something like "View patterns". The three column pattern layout in the modal is less successful here as well. The thumbnails feel too small to give a useful preview:
I appreciate this may be subjective, but to me suggests that we should consider some view options in the modal. Obviously this is something we can handle separately. |
annezazu
added
[Block] Query Loop
Want to give a +1 to this feedback as it also came up around the current template part modal in the latest FSE Outreach Program call for testing. |
|
I opened #39308 to explore the modal design in more detail. Besides that, I still think the 'Replace' language and position feel a bit off here. |
|
Thank you for working on this Jorge! I mentioned the same issue with the modul being too small here: The Replace button works nicely! It is helpful to be able to go back and choose another Query Loop layout. One thing I am wondering about. Replacing a layout, Page template/pattern, Query Loop template/pattern and other kinds of templates/patterns that will show up. I assume that there should be one method to replace the current selected pattern/template. Should we have one method consistent of various patterns/templates reflected in the sidebar to replace the layout? Should Replace instead be in the sidebar top area below the description of a Query Loop? |
|
It seems this issue is very much also associated with this PR. [Query loop block] Display an option to "Replace" |
Yes you're right. I tested and it fix the issue you mentionned. |
jorgefilipecosta
force-pushed
the
update/query-loop-patterns
branch
from
7e12806
to
8125f78
Compare
|
@jorgefilipecosta do you think could still land until Wednesday next week to be included in WordPress 6.0 release? To increase visibility, we can add it to the WordPress Editor 6.0 project board. |
|
This PR was updated following a @mtias suggestion to keep the option to choose between carousel and grid views:
I think this PR should be part of 6.0. |
jorgefilipecosta
force-pushed
the
update/query-loop-patterns
branch
from
912e9cf
to
5efdc34
Compare
|
Retesting. Before: After - in a modal: After choosing a pattern it is seen on the canvas.
The flow works, but I am just hesitant in moving it into a modal. |
|
I think the design could use some massaging in order to work better in the modal. One thing that stands out: the previews in the carousel are less successful than the grid due to the missing background color... it's not clear where the UI ends and the pattern begins. I'm going to explore how we can optimise the other details. |
jorgefilipecosta
force-pushed
the
update/query-loop-patterns
branch
from
5efdc34
to
31d0bd2
Compare
jorgefilipecosta
requested review from
TimothyBJacobs and
spacedmonkey
as code owners
jorgefilipecosta
force-pushed
the
update/query-loop-patterns
branch
from
31d0bd2
to
aff9fb7
Compare
|
In case it's useful here, I've tried some CSS to enable a masonry grid of patterns in #40034 (comment). |
|
Here's a take on how we might update the modal: modal.mp4
|
This modal looks really nice 👍 Thank you @jameskoster I'm working on updating this PR to match the design :) |
Ensure the actions are positioned at the bottom of the modal, even in grid view.
jorgefilipecosta
force-pushed
the
update/query-loop-patterns
branch
from
ae7d56c
to
459dcf3
Compare
Co-authored-by: James Koster <james@jameskoster.co.uk>
gziolo
removed
the
Backport to WP Beta/RC
|
This PR was cherry-picked for Gutenberg plugin release v13.0 and WordPress 6.0 Beta 1. |
|
@jorgefilipecosta should we migrate this behaviour to the template part replacement flow as well? :) |
|
A few notes on this one, apologies if late: The interface now is optimizing for single/grid view, and the carousel UI (arrows) are downplayed (both visually and in location), perhaps it should be the other way around? Have we tried to have only one bar that hosts all interactions in a single line avoiding the sandwich effect? The toolbar says Replace, then the modal titles Choose patterns, and the button says choose. It sounds disconnected verbally. If we say replace, perhaps we title Select another pattern, and button insert? |
|
Thanks @pablohoneyhoney, not too late at all – these are the kind of things we can refine in the run up to 6.0. I think this PR was mostly about migrating the existing interface from the canvas to a modal, and in that spirit we moved the actions to the bottom of the UI in order to be consistent with other modals. Combining all interaction elements in a single row might be a tall order, but perhaps we could place the pagination arrows either side of the pattern, and remove the confirmation button in favor of a click on the pattern itself? pattern-modal.mp4I find the additional distance between back/forward arrows quite taxing on my wrist as a trackpad user, but perhaps it's worth the trade-off. |
I'm not sure, I think the template part shows the patterns grouped by template part type, eg: header, footer etc. |
|
Regarding the UI, I think the modal component does not support adding additional buttons there, but that is not a blocker if we want to add the button there we can look into ways to do it. |
I'm referring to this modal, which appears if you select a Template Part and click "Replace":
It would benefit from the carousel / grid options, as well as the larger dimensions etc. |
part of #28737
Now the query block starts with a placeholder allowing to pick a pattern or staring blank:
And there is also a "Replace" button on the toolbar that allows to totally replace an existing query block with a pattern:
Testing Instructions