Open guarani opened 3 years ago
enejb
commented
3 years ago @kyleaparker and @iamthomasbishop Maybe we can add some of the changes to this that were done on .com
For example, they show a preview image of what the end result might look like based on the choice that you are making. To clarify the choice to the user.
See
They also include some helpful links. That update based on the selection. See
kyleaparker
commented
3 years ago This would be a great addition to the work being done over here https://github.com/wordpress-mobile/WordPress-Android/pull/15055! The "Preview" button in the mockups was intended to render how the homepage would look depending on the option selected.
guarani
commented
3 years ago 👋 @hallee, since you're doing this issue, would you be able to share your thoughts on the above comments so we can gauge whether these changes will be part of this issue?
hallee
commented
3 years ago Hi! Based on some discussion earlier this year it looks like there isn't yet a way to fetch a preview of a site with a different theme.
I'm not sure how long that backend functionality will take, so we may want to split this feature into two stages: first, we could build the flow as designed but without the "Preview" button, and the "Activate" button being full-width. Second, once we have an API to preview themes (or generate URLs for live previews), we can introduce the "Preview" button.
The two stage approach also gives us time to decide how that "Preview" screen would look, since I'm not sure whether or not that screen has been designed.
As a first step, would a full-width "Activate" button work for you @kyleaparker, or would you want a different design in that case?
hallee
commented
3 years ago @enejb Is my assumption correct that an endpoint has not been created for fetching preview URLs for a given site homepage & theme combination? Would you be able to point me to where this was implemented for the web?
antonis
commented
3 years ago Hey @hallee 👋
Thank you for sharing your thoughts and questions on this 🙇
Would you be able to point me to where this was implemented for the web?
You can see how this works on the web by selecting Appearance>Themes. The activate option on each theme shows the previews as @enejb mentioned above. My understanding is that this functionality is not exposed through an api call yet. @enejb has better view on this but he is not available to respond this week.
The two stage approach also gives us time to decide how that "Preview" screen would look, since I'm not sure whether or not that screen has been designed.
I would agree with a two step approach. If an API call is not available on time we may even follow an alternative approach and use the existing preview screen. @kyleaparker suggested some tweaks on the Android PR here to make it fit in the new flow.
kyleaparker
commented
3 years ago As a first step, would a full-width "Activate" button work for you @kyleaparker, or would you want a different design in that case?
This works and matches what we did on Android 👍
enejb
commented
3 years ago @hallee as far as I can tell the preview URL is not provided by API.
You should be able to construct it like this. (
siteurl?theme=(stylesheet)&hide_banners=true&preview_overlay=true
For example: example.wordpress.com?theme=pub%2Ftwentytwentyone&hide_banners=true&preview_overlay=true
You can see the preview if you are logged in and have access change the theme (an Admin).
On the web, we use an iframe to display the preview.
Description
When someone decides to change their theme, they may have already customized the homepage. Instead of automatically overwriting it, we need to give them an option to keep their existing one.
To achieve this we will add one more step after the user chooses to activate a new theme. This will prompt the user to select between two options:
The user may press the Preview button to view the new theme in action. Hitting the Activate button will apply the new theme respecting the user's choice.
Note that this functionality already exists on the web.
Design
The new step will be presented as a bottom sheet sliding from the bottom. The design below depicts the theme change flow with the addition of the new step.
There is a matching Android issue here.