Enable contextual content editing from within the site editor

[jarekmorawski]

What problem does this address?

Users expect to be able to edit certain content while updating their page design. For instance, they may notice a typo in the title of a blog post displayed in the Query Loop block in the Blog Home template.

Or they noticed an outdated price on a WooCommerce product they're about to feature on a new landing page.

Ideally, users could edit basic item details without leaving the site editor. Given we're working on merging the site and post editor, establishing a logical connection between the two can help smoothen out some of these flows.

What is your proposed solution?

We already have a pattern for editing embedded content in the site editor. When the user adds a synced pattern or a template part, we display an Edit button in the toolbar. Clicking it takes the user to an isolated editing view.

Editing content could work similarly. When the user clicks Edit, we'd take them to the post editor (or any other editor, like the product form in WooCommerce) where they can update the content.

Query Loop

https://github.com/WordPress/gutenberg/assets/79307566/2d4e18bb-ca74-48aa-b9e3-f31867672965

Product Collection (WooCommerce)

https://github.com/WordPress/gutenberg/assets/79307566/a6755d6f-cac6-4f40-81aa-6f10aa98e747

The Edit button would only be visible for inner blocks containing the actual content. In the Query Loop example, that would be Post Template as well as Title, Excerpt, Featured Image, etc.

Any changes they make would be queued with the rest of their site updates and surfaced in the pre-publish modal.

Later on, we'd explore displaying the content in the Inspector to surface more granular controls, like status, author, etc.

[jameskoster]

Is there a more light-weight way to provide inline-editing? The context shift is quite a heavy interaction that isn't always necessary.

Clicking 'Edit' could spotlight the block and enable direct manipulation of content. I could see this working well for simple blocks like Title in a Query Loop.

[jarekmorawski]

Thanks for the comment, Jay. I explored a lighter approach (see below) but per @jasmussen's comment, I decided to stick to a bit simpler solution that we'd test faster. There's also the matter of context: inline editing may work for simple data like post titles or even tags but in many cases, users will need to go to a separate screen or app to edit item details (like Woo's product form).

It'd be great if we could keep the experience consistent but flexible.

[jameskoster]

Yup, I think we need to offer both; quick inline edits and go to the full edit view. I suppose the quick-edit affordance can be explored separately.