Data views: quick-editing

[jameskoster]

Table and Grid layout

In these layouts, we can use the same UI as the full-screen editor to toggle the visibility of the Inspector panel:

table-quick-edit.mp4

List layout

In List layout it feels important that the preview remains visible. Instead of exposing a dedicated panel, the Inspector contents are loaded into the content frame via drilldown pattern:

list-quick-edit.mp4

---

This feature would be equivalent to the quick edit experience in wp-admin:

Original issue

Inline editing has considerable overlap with quick-actions (https://github.com//issues/55096). For example most quick-actions for pages (https://github.com//issues/55628) could also be accessed by clicking on values in the table directly. So for the initial implementation we might reuse where possible. Hopefully this mockup captures that:

Incidentally the "Author" menu in the above concept should be virtually the same as the one that has already been implemented for filtering, so hopefully some legwork is already done 🤞 :

One exception we might make straight away is boolean values, e.g. whether comments are enabled or not. In this case the cell can probably contain a Toggle.

[jameskoster]

Noting that the work in #59689 can unlock using the Inspector as a bulk/quick edit interface:

[seifeldinio]

I've explored this solution for quick-editing within the inspector panel, here's the prototype for it:

demo.mp4

Mockups:

Single Page Selection

Focus on Edit Modal: When a user clicks on an option to edit, the table view lessens in opacity to focus on the edit modal. This guides the user's attention with a dark overlay, allowing them to focus on the content at hand.

Editing options:

Multiple Page Selection

Editing options for multiple page selection:

Quick Editing for Media Files

A similar quick-editing approach can be applied to media files

Would love to hear your feedback on this!

[jasmussen]

This is looking pretty solid. A couple of details to figure out across the inspector itself, but high level that seems to capture the instincts I've had for this interaction. Would be good to hear from others in @WordPress/gutenberg-design as well!