Gutenberg: Provide a way for users to recognize the changes made in a block

[onuro]

Is your feature request related to a problem? Please describe.
When a block has extensive options, users might get easily overwhelmed and get lost tracking the changes they applied in blocks.

Right now there is no other way figuring out what change has been made on a setting, especially if the PanelBody is set to initialOpen={false}, unless the panel is expanded and settings checked after selecting the block.

Describe the solution you'd like
In this example, we have a block called Kinetic Wrapper, which is a wrapper block for containing other blocks, and it has plenty of settings. But once a setting, such as padding is applied, the panel and the block reflects the change applied to it, the panel displaying a tick/indicator that a setting or change has been applied.

There may be better ways to reflect changes, open for discussion! What do you guys think?

[karmatosed]

Thanks for this @onuro. @jasmussen and @kjellr I would love to get your insights around this.

[jasmussen]

Just to be sure I'm understanding you correctly — the only change you are suggesting is the blue dot on a panel, to indicate it contains non-default user-made changes, correct? The blue color around the paragraph on the left is not part of the suggestion, correct?

---

Interesting idea to have this marker. It reminds me of the "unsaved changes" marker you see in editors like VSCode. Unsaved changes:

No unsaved changes:

It's also the classic pattern for "There's new stuff" serving as notification indicator for things like Instagram and such.

In that vein, the pattern of a dot seems fairly right for the task. I can also see how a collapsed panel with could benefit from some indicator that changes were made. For example a user might have removed a CSS class from a responsive video and now struggling to debug why it isn't working. So from a high level, this makes sense.

However it feels like this dot should be paired with a "reset to default" button, in some way. Otherwise, the point of the dot feels sort of lost: why show that changes were made if I can't revert them?

An alternate solution is that the dot is present ONLY until the chagnes are saved. I.e. it becomes an unsaved changes indicator exactly like how it is in VS Code or others. This would require no additional buttons, which would be a challenge given that every panel would have one.

Would love to hear thoughts from others.

[kjellr]

Hmm interesting. As @jasmussen notes above, I tend to associate those dots with "unsaved" changes, not necessarily "something has changed". To that end, I think something like this would make more sense to me:

An alternate solution is that the dot is present ONLY until the chagnes are saved. I.e. it becomes an unsaved changes indicator exactly like how it is in VS Code or others. This would require no additional buttons, which would be a challenge given that every panel would have one.

... but I'm not sure that actually solves the problem at hand.

The way Gutenberg tends to handle this now, is through the use of "Reset" buttons within each panel:

But as I noted in https://github.com/WordPress/gutenberg/issues/8179, those labels aren't consistent. They also appear whether or not you've made any changes in the panel.

I wonder if a more complete solution to this issue would be to standardize reset buttons across all panels?

[jasmussen]

... but I'm not sure that actually solves the problem at hand.

Insofar as the use case I described of figuring out which user made change is messing things up, absolutely right.

I wonder if a more complete solution to this issue would be to standardize reset buttons across all panels?

Very good call surfacing those clear and reset buttons. I wonder if a single unified _reset_ button could _appear_ in a consistent panel place, as soon as a change is made? In a way it makes sense for most panels.

[onuro]

I think there's more way to get before GB gets to this.

The unification of reset/clear was actually existent in earlier GB versions, can't pin point an SS right now. The hyperlink clear/resets came after 5+ GB updates.

Other than that, I think this type of indicator feature needs existence as a GB extension/component rather than as a core feature to assist plugin developers like us.

Because right now I really can't point a single core block that needs this feature deadly, but is it super necessary? Well Would be cool! :).

[mapk]

The Design Team in slack thought this is a good issue to leave open right now. Some ideas and concepts are being explored around this. One example related to responsive previews: https://github.com/WordPress/gutenberg/pull/19082#issuecomment-567508590

Let's see how this pans out and if there are learnings there that can help inform design here.

[jasmussen]

There are some additional mockups that leverage the "unread dot" here: https://github.com/WordPress/gutenberg/issues/19909

[mapk]

Raised this in today's slack meeting with the Design Team again.

Adding block-by-block indicators feel like a lot of notifications that may not be all too beneficial. Gutenberg offers a way to see revisions and undo changes, but this request feels like an overwhelming amount of communication.

Do indicators appear when users are just adding text to a Paragraph block? Or do they appear when text is made bold? What sort of block changes warrant a "change" indicator?

Do these indicators persist through an auto-save event? Or do they reset once auto-save occurs?

It feels that an indicator that notifies the user that the document as a whole has changed fits better. I'm going to close this in favor of the explorations being done in #19909, but if anyone feels this should be opened up, please do so.