WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 6 months ago

#32228 assigned enhancement

"Page updated" notification should fade as soon as another change is made.

Reported by: nthnldtk Owned by: italianst4
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords: ux-feedback good-first-bug has-patch needs-testing
Focuses: administration Cc:

Description

The "Page Updated" notification can be very misleading if you continue to make changes to a page after updating once.

A solution to this problem would be for the "Page Updated" notification to get cleared as soon as another change to the page is detected.

Attachments (6)

message-fade.32228.diff (909 bytes) - added by dlouwe 2 years ago.
Fades out Updated message upon making further changes to page/post
message-timeago.tiff (24.5 KB) - added by iambriansreed 2 years ago.
Message view
message-timeago.png (18.4 KB) - added by iambriansreed 2 years ago.
Message example
message-timeago.32228.diff (10.9 KB) - added by iambriansreed 2 years ago.
Message timeago. (my first patch)
32228.diff (10.4 KB) - added by Jastuccio 17 months ago.
32228.2.diff (10.3 KB) - added by italianst4 12 months ago.

Download all attachments as: .zip

Change History (22)

#1 @iseulde
2 years ago

  • Component changed from General to Editor
  • Keywords close added
  • Type changed from feature request to enhancement
  • Version 4.2.1 deleted

Thanks for the report and sorry for the late reply.
We have talked about this before. Removing the notification will move the whole page up a bit which would be really annoying if you're interacting with it.

#2 @nthnldtk
2 years ago

  • Keywords 2nd-opinion added

Thank you for your comments.

Is it possible that the problem could be solved in a way that does not create the issue you described?

For example: The notification disappears, but leaves blank space instead of the page jumping up.

OR (my preferred solution): Once the user changes the page, the notification changes from "Page Updated" to "Page changed since last save"

#3 @johnbillion
2 years ago

  • Focuses administration added
  • Keywords ux-feedback good-first-bug needs-patch added; close 2nd-opinion removed

I think fading the notice out (without causing a shift in the page layout) once the user has started typing or making other changes would be a really nice addition to the editing screen.

Should be easy enough to accomplish. Let's try it.

@dlouwe
2 years ago

Fades out Updated message upon making further changes to page/post

#4 @dlouwe
2 years ago

I'm not sure how I feel about the bit of white space that is left over after the fade - especially as it can't be removed (like how it would when dismissing the update manually).

Perhaps as @nthnldtk suggested there is a suitable way to change the message so that it is distinct from the "Just updated" message.

#5 @juliandoucette
2 years ago

There are two good solutions to this in my opinion.

  1. Change the message

Change the message from Green -> "Page updated. View Page." to Orange -> "Page has changed since last updated. Update Page."

Potential issues:

  • The edit page can be modified significantly by themes and plugins. The user experience can be inconsistent if a plugin or theme implements meta boxes or modifications to the edit page that don't trigger this message to change.
  • It could be complicated to determine when to change the message. Is it when the user focuses on a field? Is it when the user changes the field? Note: if the user changes the field, and then changes it back, the message is no longer true.
  1. Change the notification system

In the long run, I believe it would be a better idea to implement a message tray system for these types of notices.

The system could work like this:

  1. A notice appears in a fixed position from the bottom centre of the edit screen
  2. The notice remains until it is cleared or a set amount of time passes
  3. The notice disappears

Notices stack if more than one are visible at a time.

I believe that these notices are better than the notices currently being used for the purpose of status updates like "Published", "Updated", etc.

This experience should be familiar to (at least) Android users.

Last edited 2 years ago by juliandoucette (previous) (diff)

#6 follow-ups: @jaragozzine
2 years ago

A lower tech solution that would eliminate the concern over a fade out leaving white space is to add simple text cues to the display message.

Meaning, change "Page updated. View page" to "Page updated at 2015-11-18 12:56PM - 2 minutes ago", with the latter "minutes ago" ticker updating as time passes.

#7 in reply to: ↑ 6 @nthnldtk
2 years ago

Replying to jaragozzine:

change "Page updated. View page" to "Page updated at 2015-11-18 12:56PM - 2 minutes ago", with the latter "minutes ago" ticker updating as time passes.

Ding Ding! I think this is a winner. Good thinking.

#8 in reply to: ↑ 6 @sdavis2702
2 years ago

@jaragozzine @nthnldtk

I feel like we're ignoring what @juliandoucette mentioned as potential issues with live updating the message. https://core.trac.wordpress.org/ticket/32228#comment:5 Those are pretty important concerns in my opinion.

#9 @iambriansreed
2 years ago

I agree with @jaragozzine @nthnldtk - updating the message with the update time when the form is $dirty is the best solution.

@sdavis2702 I think updating the existing functionality to show when it was last updated is the best next step.

To deal with the good points by @juliandoucette:

Problem:

The edit page can be modified significantly by themes and plugins. The user experience can be inconsistent if a plugin or theme implements meta boxes or modifications to the edit page that don't trigger this message to change.
It could be complicated to determine when to change the message. Is it when the user focuses on a field? Is it when the user changes the field? Note: if the user changes the field, and then changes it back, the message is no longer true.

Proposed solution:

I talked this issue over with @adamsilverstein and we thought we should just use a library like moment.js or timago.js. We don't need to wait for a callback or change to the form. The message you get after save is Page Updated Just Now

Then at a set interval we update Just Now with "1 minute ago", "2 minutes ago".

We have all seen this before in chat or social media comments, etc. Does this make sense?

I have included an example below:

Last edited 2 years ago by iambriansreed (previous) (diff)

@iambriansreed
2 years ago

Message view

@iambriansreed
2 years ago

Message example

@iambriansreed
2 years ago

Message timeago. (my first patch)

#10 @sdavis2702
2 years ago

Nice! I like the time delay idea.

I wasn't able to get the patch to work fully. I tried to apply it from the root of the testing environment (http://glui.me/?i=gl4m6vldl011tse/2015-12-06_at_5.06_PM.png/) locally and it wouldn't work. It may have something to do with where the patch was created from in your development environment. So I just made the edits manually to see how it works.

While I could get Just Now to show just fine, it didn't seem to update after any amount of time. All that aside, I can still give some feedback:

  1. Pages and Posts both would need to be addressed. I'm not sure how this would apply to custom post types but it seems they would need the treatment as well.
  1. Text strings should be translation-ready, like the Just Now text and whatever replaces it over time.

#11 @iambriansreed
2 years ago

This patch uses the jquery plugin timeago (https://github.com/rmm5t/jquery-timeago). The plugin already has translation support its just a matter of bringing that code in.

Would it makes sense to have a built in shortcode like:
[timeago] or [timeago date="1449504353"] and add these to the strings "Post Updated [timeago]".

So when custom post types update the post_updated_messages they can add these in effortlessly.

Potentially we could make lots of admin notices time relevant with this shortcode as well.

Last edited 2 years ago by iambriansreed (previous) (diff)

#12 @juanfra
2 years ago

Nice idea!

I'd use the sprintf() function to format the "Updated Message" string(what you do with $saved_timeago and $messages['post'][1]). You cannot imagine how the sentence structure can vary in many other languages.

Another thing, the strings for the js library must be translated in php and not in js as the library suggest. This would be localizing the js script and sending the variables using the gettext functions.

Still, I'm not sure if including a new library is the best idea. We'll need to, at least, check the strings every time we need to update it.

@Jastuccio
17 months ago

#13 @Jastuccio
17 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

32228.diff Refreshes message-timeago.32228.diff relative to the src directory

@italianst4
12 months ago

#14 @italianst4
12 months ago

I really like this enhancement. I applied the patch to test and similar to @sdavis2702 above, wasn't able to see any updates beyond the initial "Just Now". I noticed a JS file was not pointing to the correct file, which I updated and can now see it working.

I also lowercased "just now" to feel more like a sentence.

I agree that this should be applied to all post types (post, page, custom...), as well as all relevant actions (published, updated, draft updated). I'm going to look a bit further into implementing this.

For now, I've attached a patch to fix the JS error.

#15 @DrewAPicture
6 months ago

  • Owner set to italianst4
  • Status changed from new to assigned

Assigning ownership to mark the good-first-bug as "claimed".

#16 @juanfra
6 months ago

Nice one!

Please take a look that the "just now" message is not translatable. Also for the "Post updated" message you shouldn't concatenate the strings, you never know how other languages manage the same sentence.

I'd do something like this:

$saved_timeago = ' <em><abbr title="' . date( 'c', current_time( 'timestamp' ) ) . '" class="xwp-ui-text-icon timeago"> . __( 'just now' ) . '</abbr></em>';

Perhaps even using kses, and bringing up that string in a better way.

And then for the $messages['post'] array:

1 => sprintf( __( 'Post updated %s' ), $saved_timeago ) . $view_post_link_html; 

Cheers

Note: See TracTickets for help on using tickets.