Custom Fields option: Add confirmation step #15688

marekhrabe · 2019-05-16T21:40:04Z

"Custom Fields" in Options modal requires a full page reload in order to toggle the option. Currently, this happens instantly after clicking the checkbox.

This PR changes the flow to add an inline confirmation step:

see the latest version #15688 (comment)

marekhrabe · 2019-05-25T11:25:55Z

Update:

This PR shows additional message about a reload and a confirmation button to proceed. This additional UI only shows when a reload action is required and disappears when you change your mind and toggle the option back without a confirmation. It is additionally announced with spoken messages to differentiate the tickbox from all others which save options instantly.

It's not well styled and polished at this point. Let's figure out a proper interaction first.

Question: Do spoken messages make sense here? If so, what would their formulations be? I'm sure I haven't came up with the most ideal copy.

If we confirm this approach is a way forward, I can take a look at styling, making string translatable etc…

noisysocks · 2019-05-27T01:24:44Z

I can't answer the question about using speak(), but functionally I think this is the right approach!

I added the Needs Design label so that the design team can offer some suggestions. ~~Personally I'd advocate for something relatively inline and unobtrusive.~~

~~(The link would be a <Button> with isLink.)~~

EDIT: @mapk shared a much nicer design in #15320 (comment).

mapk · 2019-05-29T13:59:57Z

Oh dang, turns out I added a redesign to the issue and not the PR. In case people don't want to click around, here's the proposed redesign.

I'm not entirely sure if the notification should be blue or yellow. Any thoughts on that?

mapk · 2019-05-29T17:11:06Z

Okay, because this is more of a warning notification, let's go with a yellow version.

afercia · 2019-06-07T14:40:56Z

Discussed during today's accessibility bug scrub. Quick feedback: if there’s text with relevant information and if the button says “Save and Reload” there’s no need for a spoken message.

talldan · 2019-07-25T04:17:27Z

Agree that adjusting the wording would be a good compromise to get this merged. I like @marekhrabe's suggestions in the comment above, or just shortening it to 'Reload' / 'Reload now'.

Could it also be worth adding something to the main part of the message? e.g. 'A page reload is required for this change, please save any changes to your content before reloading.'

Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>

mapk · 2019-07-26T00:41:49Z

"Enable & Reload" or "Disable & Reload"

Oh, I missed these. I prefer them over my suggestions. Thanks!

Could it also be worth adding something to the main part of the message? e.g. 'A page reload is required for this change, please save any changes to your content before reloading.'

If handling the save of the document automatically before reloading gets tricky, this seems like the right solution. And if they miss that text and trigger the reload anyways, alerting them with an "Are you sure" message as @marekhrabe suggested works too.

marekhrabe · 2019-07-27T16:41:20Z

"Enable & Reload" or "Disable & Reload"

I have implemented these in 8320d22

And if they miss that text and trigger the reload anyways, alerting them with an "Are you sure" message as @marekhrabe suggested works too.

"Are you sure" functionality is done on a global level and it is already triggering for this option.

I have added an extra sentence to the info message about saved content.

Current State

With unsaved content:

marekhrabe · 2019-08-01T00:02:04Z

All tests now account for new labels. Are we good to go with this state #15688 (comment)?

noisysocks

The code changes look good, and this tests well. Thanks for the assist @marekhrabe!

I'll leave it for @mapk to give the final say on whether the design and copy are ready to be merged.

packages/edit-post/src/components/options-modal/options/enable-custom-fields.js

Co-Authored-By: Robert Anderson <robert@noisysocks.com>

mapk · 2019-08-06T00:20:45Z

I gave it another go. The added sentence looks great! Thanks everyone for helping out with this one.

mapk

Looks good!

marekhrabe · 2019-08-06T04:29:06Z

This PR has truly been a journey 😀Thanks everybody!

* Add confirmation step to Custom Fields option Add a confirmation step to the Custom Fields option so that the page doesn't reload without warning. Co-authored-by: Marek Hrabe <marekhrabe@me.com> * Update E2E tests for new Custom Fields setting flow * Remove notice in favor of plain text. * Custom Fields option: Adjust margin to align text * update description Co-Authored-By: Daniel Richards <daniel.richards@automattic.com> * simplify change handler * add dynamic button based on the next state to be saved * add notice about saved content and make sure it won't expand modal * update snapshot with new button label and confirm msg * make button label in test dynamic * simplify condition for determining label Co-Authored-By: Robert Anderson <robert@noisysocks.com> * use willEnable as the prop name

marekhrabe · 2019-10-14T14:59:17Z

I just saw this featured as one of the tips about Gutenberg on Twitter 😀

https://twitter.com/editorskit/status/1178693225923497984

marekhrabe requested review from karmatosed, sarahmonster and noisysocks May 16, 2019 21:40

marekhrabe requested review from talldan and youknowriad as code owners May 16, 2019 21:40

marekhrabe mentioned this pull request May 16, 2019

Custom field check box automatically changes the context on user focus #15320

Closed

marekhrabe force-pushed the try/custom-fields-toggle-deferred branch from ff0a5a3 to 77d3e11 Compare May 25, 2019 11:17

marekhrabe changed the title ~~Custom Field check box - try using DeferredOption~~ Custom Field check box - try using confirmation button May 25, 2019

noisysocks added Needs Accessibility Feedback Need input from accessibility Needs Design Needs design efforts. labels May 27, 2019

karmatosed requested a review from mapk May 28, 2019 15:09

mapk added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels May 29, 2019

afercia removed the Needs Accessibility Feedback Need input from accessibility label Jun 7, 2019

noisysocks self-assigned this Jul 4, 2019

noisysocks force-pushed the try/custom-fields-toggle-deferred branch from 77d3e11 to a51bf94 Compare July 5, 2019 02:40

marekhrabe requested review from aduth, ajitbohra, chrisvanpatten and gziolo as code owners July 5, 2019 02:40

marekhrabe and others added 3 commits July 25, 2019 18:45

update description

6be6aea

Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>

simplify change handler

03227a6

add dynamic button based on the next state to be saved

8320d22

add notice about saved content and make sure it won't expand modal

4079f80

marekhrabe added 2 commits July 27, 2019 09:47

update snapshot with new button label and confirm msg

db87de7

make button label in test dynamic

bba485f

gziolo removed this from the Gutenberg 6.2 milestone Jul 30, 2019

marekhrabe requested a review from talldan August 1, 2019 00:02

noisysocks approved these changes Aug 1, 2019

View reviewed changes

packages/edit-post/src/components/options-modal/options/enable-custom-fields.js Outdated Show resolved Hide resolved

packages/edit-post/src/components/options-modal/options/enable-custom-fields.js Outdated Show resolved Hide resolved

marekhrabe and others added 2 commits July 31, 2019 21:01

simplify condition for determining label

9bf2985

Co-Authored-By: Robert Anderson <robert@noisysocks.com>

use willEnable as the prop name

929aeaf

mapk approved these changes Aug 6, 2019

View reviewed changes

marekhrabe added this to the Gutenberg 6.3 milestone Aug 6, 2019

marekhrabe merged commit c5d573a into master Aug 6, 2019

marekhrabe deleted the try/custom-fields-toggle-deferred branch August 6, 2019 04:29

marekhrabe mentioned this pull request Aug 6, 2019

Custom Fields: Update test snapshot with the new checkbox implementation #16918

Merged

snyk-io bot mentioned this pull request Aug 13, 2024

[Snyk] Upgrade @wordpress/element from 5.28.0 to 6.3.0 Playgirlkaybraz11/wp-xeet#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Fields option: Add confirmation step #15688

Custom Fields option: Add confirmation step #15688

marekhrabe commented May 16, 2019 •

edited

Loading

marekhrabe commented May 25, 2019

noisysocks commented May 27, 2019 •

edited

Loading

mapk commented May 29, 2019

mapk commented May 29, 2019

afercia commented Jun 7, 2019

talldan commented Jul 25, 2019

mapk commented Jul 26, 2019

marekhrabe commented Jul 27, 2019

marekhrabe commented Aug 1, 2019

noisysocks left a comment

mapk commented Aug 6, 2019

mapk left a comment

marekhrabe commented Aug 6, 2019

marekhrabe commented Oct 14, 2019

Custom Fields option: Add confirmation step #15688

Custom Fields option: Add confirmation step #15688

Conversation

marekhrabe commented May 16, 2019 • edited Loading

marekhrabe commented May 25, 2019

noisysocks commented May 27, 2019 • edited Loading

mapk commented May 29, 2019

mapk commented May 29, 2019

afercia commented Jun 7, 2019

talldan commented Jul 25, 2019

mapk commented Jul 26, 2019

marekhrabe commented Jul 27, 2019

Current State

marekhrabe commented Aug 1, 2019

noisysocks left a comment

Choose a reason for hiding this comment

mapk commented Aug 6, 2019

mapk left a comment

Choose a reason for hiding this comment

marekhrabe commented Aug 6, 2019

marekhrabe commented Oct 14, 2019

marekhrabe commented May 16, 2019 •

edited

Loading

noisysocks commented May 27, 2019 •

edited

Loading