Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile: Prompt to keep or replace Featured Image when replacing Image block media that is set as the Featured Image #34429

Closed
dcalhoun opened this issue Aug 31, 2021 · 5 comments · Fixed by #34666
Assignees
Labels
[Block] Image Affects the Image Block Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@dcalhoun
Copy link
Member

What problem does this address?

This enhancement request builds on the work done to implement a "set as featured" button in the image block's settings in wordpress-mobile/gutenberg-mobile#1011.

After setting an Image block as the post's Featured Image, if one replaces the media for that Image block, there is a disconnect as to what occurs to the post's Featured Image. Currently, taking this action causes the original image to remain as the Featured Image, even though the media is no a part of the post content. While this outcome could be perceived as correct, it could also cause confusion if the user expects the Featured Image to update as well.

What is your proposed solution?

From team discussions, the first thought was that we should default to maintaining the “featured” status even after an image is replaced, but upon further digging we think our suggestion would be to give the option to do one of the following—either:

  1. Keep the current featured image (“detach” the image block’s connection with the featured status), or
  2. Replace the current featured image (apply the new image as the featured image)

In theory, that part of the flow could look like this:

featured-image-block-replace-media-flow

In this example, the top row is what you’d see in the editor UI, on canvas. The bottom row is the featured image setting “behind the scenes”.

Alert/Dialog messaging

We noticed that we already have an ActionSheet implemented that shows a similar message when a user has an existing featured image and tries to apply an image as featured from an Image block’s settings—we can probably re-use that Alert/Dialog in this part, but suggest we refine the messaging a little bit to something like the following:

  • Alert/dialog title: Replace current featured image?
  • Alert/dialog body: You already have a featured image set. Do you want to replace it with the new image?
  • Action 1: Keep current featured image
  • Action 2: Replace with new image
@dcalhoun dcalhoun added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Aug 31, 2021
@dcalhoun dcalhoun self-assigned this Sep 1, 2021
@dcalhoun dcalhoun added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block labels Sep 2, 2021
@dcalhoun
Copy link
Member Author

dcalhoun commented Sep 2, 2021

@iamthomasbishop I notice the proposed solution includes what appears to be "A" and "B" image thumbnails, showcasing the current and potential replacement Featured Images respectively.

Our current implementation relies upon the default—and fairly rudimentary—Android Dialogs and iOS Action Sheets to display this prompt. The former is not easily capable of displaying an image—at least from the React Native context. The latter is not capable of displaying images. In order to display images within the prompt, we would need to complete a fair amount of refactoring, including updating iOS to use an Alert rather than an Action Sheet.

Given that, I propose we focus this Issue on updating the flow to include Keep or Replace choices only. We could repurpose #30410 to focus on adding image thumbnails to all Featured Image prompts. WDYT?

@iamthomasbishop
Copy link

Our current implementation relies upon the default—and fairly rudimentary—Android Dialogs and iOS Action Sheets to display this prompt. The former is not easily capable of displaying an image—at least from the React Native context.

Ah, that's right, totally forgot about this constraint. In that case, would it be possible to move to a BottomSheet in this context? As I understand it, that would be a lot more flexible and a natural extension of the ActionSheet.

In the immediate term, I'm fine with implementing the "keep/replace" messaging within a Dialog/Alert as you mentioned (without images, of course), with the preference of moving over to using BottomSheet so that we can take advantage of its flexibility.

What do you think, @dcalhoun ?

@dcalhoun
Copy link
Member Author

dcalhoun commented Sep 3, 2021

In that case, would it be possible to move to a BottomSheet in this context? As I understand it, that would be a lot more flexible and a natural extension of the ActionSheet.

Definitely. The BottomSheet is completely custom UI, which would allow us to render images.

One caveat is that we will have to dismiss the Image block BottomSheet in order to display the Featured Image replacement BottomSheet. The BottomSheet relies upon react-native-modal, which is incapable of displaying multiple modals simultaneously. We ran into this issue with the Cover block media settings as well. If you look closely at the following video, you will notice the first BottomSheet closes before the Media Picker opens.

Cover block - Add image or video
cover-block-mutliple-modals.MP4

Because the "Set as Featured Image" button resides within a BottomSheet, we will have a similar limitation in this instance. We must close the Image block BottomSheet before opening the Featured Image BottomSheet. Do you feel this caveat is acceptable?

Image block - Set as Featured Image

image-block-featured-image-button

Edit: We should be able to rely upon navigation within the BottomSheet to display this prompt. I.e tapping the "Set as Featured Image" button will transition to reveal the "keep/replace" prompt within the same Bottom Sheet.

In the immediate term, I'm fine with implementing the "keep/replace" messaging within a Dialog/Alert as you mentioned (without images, of course), with the preference of moving over to using BottomSheet so that we can take advantage of its flexibility.

What do you think, @dcalhoun ?

That makes sense to me. I'll update this issue to focus on the "keep/replace" messaging. I will update #30410 to focus on leveraging a BottomSheet so that we render images within all Featured Image prompts.

One clarifying point from your last quote—you mention "Dialog/Alert." Did you intend to say "Dialog/Action Sheet" (the UI we use currently) or were you hoping to migrate iOS from Action Sheet to Alert in this work?

Thanks @iamthomasbishop!

@dcalhoun dcalhoun changed the title Mobile: Improve clarity when replacing media for an Image block that is set as the post's Featured Image Mobile: Replacing Image block media that is set as the Featured Image prompts to keep or replace Featured Image Sep 8, 2021
@dcalhoun dcalhoun changed the title Mobile: Replacing Image block media that is set as the Featured Image prompts to keep or replace Featured Image Mobile: Prompt to keep or replace Featured Image when replacing Image block media that is set as the Featured Image Sep 8, 2021
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Sep 8, 2021
@iamthomasbishop
Copy link

iamthomasbishop commented Sep 10, 2021

Apologies for the delay @dcalhoun ! That all makes sense, let's give it a try and see how it looks.

One clarifying point from your last quote—you mention "Dialog/Alert." Did you intend to say "Dialog/Action Sheet" (the UI we use currently) or were you hoping to migrate iOS from Action Sheet to Alert in this work?

Yea, my bad. I had forgotten we were using ActionSheet for this on iOS; my brain went to the Alert, bc it's the iOS equivalent of Android's Dialog component 🤦‍♂️

@dcalhoun
Copy link
Member Author

@iamthomasbishop thanks! I opened #34666 and will await your design feedback before moving forward. Please review whenever you can. 🙇🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
2 participants