Allow users to run Headstart on a site through Calypso. #10542

Open
wants to merge 22 commits into
from

Projects

None yet

6 participants

@kwight
Member
kwight commented Jan 10, 2017 edited

Headstart is the WordPress.com feature that sets up a new site on signup according to the selected theme. This gives a new user a great start towards having their "site look like the demo".

This PR would allow "Headstart on Demand": a user can choose to have Headstart run on one of their existing sites, aiding in setup any time a user switches themes.

Beginning mockup:

screen shot 2017-01-10 at 10 27 05 am

Previous discussion: p6nuNy-18d-p2

@melchoyce
Contributor

@michelleweber Can we get your feedback on copy here? ❤️

@michelleweber
Member

@melchoyce, of course. Here's a revision, in which I:

  • Took the negative out of the first sentence.
  • Took the hypen out of Setup -- it's not needed/correct in this usage.
  • Took out the "Start from scratch" because I'm not sure how that internationalizes -- if you've determined that's not an issue, feel free to add it back!
  • Tried to avoid the word "content" in favor of being more specific.
  • Tried to explain the placeholder a bit more.

We can still probably improve this a little, but wanted to present a slightly different take.

_Want your site to look like the demo? Use Auto Setup to automatically apply the demo site's settings to your site.

You can apply Auto Setup to your current site and keep all your posts, pages, and widgets, or use it for a fresh start and delete everything currently on your site. In both cases, placeholder text will appear on your site -- some themes need certain elements to look like the demo, so Auto Setup adds those for you. Please customize it!_

@melchoyce
Contributor

Thank you! 🙇

@kwight — I'll get you some design feedback this afternoon or tomorrow morning.

@melchoyce
Contributor

Good use of is-scary on the Set Up From Scratch button. I agree with @kathrynwp that "Set Up and Keep Content" should be on the left, and I think we should probably add is-primary to that button to further call it out as the "safer," primary option.

I'll hold off on more feedback until you have more of a chance to build it out. Want to ping me when you want me to review?

@kwight
Member
kwight commented Jan 16, 2017

@michelleweber done, thanks! I've also started calling it "Theme Setup", instead of "Auto Setup" – thoughts?

+ page( '/settings/general/' + activeSiteDomain );
+ };
+
+ const noticeText = site && isJetpack ? translate( 'This feature is currently unavailable for Jetpack sites.' ) : translate( 'This action cannot be undone.' );
@a8ci18n
a8ci18n Jan 16, 2017

Alternate string suggestion:

  • translate( 'This cannot be undone' )— translations: 3.

PR translation status page

@kwight
Member
kwight commented Jan 16, 2017 edited

As of f1b085d. Patch is also done for the Customizer link (D4018).

screen shot 2017-01-16 at 3 28 53 pm

screen shot 2017-01-16 at 3 33 21 pm

screen shot 2017-01-16 at 3 35 38 pm

@folletto
Member

Design wise seems good. I'd personally try to avoid having the yellow notice bar inside a card, but I think here it works. :y:

Tiny thing, can we add a border to the thumb image to avoid the whites to wash out on the white card? Like border: 1px solid lighten( $gray, 30% );

@melchoyce
Contributor

Yeah, was also thinking a border and maybe changing up the theme label styles a bit:

screen shot 2017-01-17 at 10 52 16 am

Copying the "CURRENT THEME" styling on https://calypso.live/design/:

screen shot 2017-01-17 at 10 54 22 am

@folletto
Member

Good one, yes 👍

+ <ActionPanelBody>
+ <ActionPanelTitle>{ translate( 'Theme Setup' ) }</ActionPanelTitle>
+ <Notice status={ 'is-warning' } showDismiss={ false }>
+ { translate( 'This action cannot be undone.' ) }
@a8ci18n
a8ci18n Jan 17, 2017

Alternate string suggestion:

  • translate( 'This cannot be undone' )— translations: 3.

PR translation status page

kwight added some commits Jan 10, 2017
@kwight kwight Add a stub page to Site Settings for theme setup (Headstart on Demand). 106db25
@kwight kwight Add the basic Theme Setup card and content. 3e9c63f
@kwight kwight Activate the Back link. 6b9e79c
@kwight kwight Use `connect()` to access the store for theme and site info. c8d30d7
@kwight kwight Ensure the Theme Setup panel renders cleanly from a cold start. 100cb3f
@kwight kwight Query for the site's current theme info. f098055
@kwight kwight Leave buttons disabled unless full site info is available (we need the
selected site ID to be able to run Headstart).
ff39fc3
@kwight kwight Add missing tracking method. 215273c
@kwight kwight Keep buttons disabled and update the notice if the site is a Jetpack
site (Headstrt does not support Jetpack sites).
658a3c3
@kwight kwight Add the active theme screenshot component. 7d2bad5
@kwight kwight Remove the screenshot placeholder for simplicity. e000e6b
@kwight kwight Correct button spacing. dfd7b67
@kwight kwight Fix theme name display under the screenshot. 9da3437
@kwight kwight Add in a placeholder for the theme screenshot. c27d5f7
@kwight kwight Improve content. 650e1d8
@kwight kwight Swap button positions, improve labels, and make the "save content"
option the primary button.
e1d4d4c
@kwight kwight Add a link to Theme Setup in the theme activation Thanks Modal. 6207b40
@kwight kwight Only display the Theme Setup link in the thanks modal for WordPress.com
sites.
14e2f1a
@kwight kwight Don't display the Theme Setup card for Jetpack sites. The Delete Site
section of Settings is hidden anyways for Jetpack sites.
97262a5
@kwight kwight Correct (I think?) class names and add styling for the theme screenshot.
690b1e3
@kwight
Member
kwight commented Jan 17, 2017 edited

Cool, design notes done.

When loading the URL from a cold start (so no site info available yet), I've got a pulsing placeholder for the theme screenshot. But this means both the screenshot and the current site in the sidebar are going (oh, so much throbbing). @melchoyce @folletto Is there a better way design-wise to handle this?..

screen shot 2017-01-17 at 2 06 37 pm

@kwight kwight Get font-size to ~12px, to match with the current theme label on
/design.
fab736a
@folletto
Member

When loading the URL from a cold start (so no site info available yet), I've got a pulsing placeholder for the theme screenshot. But this means both the screenshot and the current site in the sidebar are going (oh, so much throbbing). @melchoyce @folletto Is there a better way design-wise to handle this?..

If I'm not mistaken, the entire UI is unusable until the site loads. In that case I'd just use the skeleton-loading animation on the entire card instead of just the theme, as no action can be taken until that loads.

Something like:

screen shot 2017-01-18 at 12 49 48

@melchoyce
Contributor

Yeah, think we're just going to have to deal with excessive throbbing.

@kwight
Member
kwight commented Jan 18, 2017 edited

If I'm not mistaken, the entire UI is unusable until the site loads. In that case I'd just use the skeleton-loading animation on the entire card instead of just the theme, as no action can be taken until that loads.

@folletto @melchoyce That seems like a lost opportunity to me. Even though the Theme Setup UI is in-actionable until site/theme info arrives (buttons are disabled, no screenshot), at least the user can read the related text and see possible actions while waiting. Having even more throbbing with less info seems a step backward to me.

Of course, I'm happy to defer to design decisions, or if it's a Calypso consistency thing – just curious of the thinking behind it :)

@folletto
Member

It's just that skeletons usually apply to the entire block, and we tend to do the same in Calypso. I'm not entirely against it, it's just that for consistency I'd keep the loading always at card-level, not more granular than that.

@kwight kwight Move placeholder pulsing behaviour up to the card level, splitting the
active card and the placeholder card between two new components.
d172e85
+ <ActionPanelBody>
+ <ActionPanelTitle>{ translate( 'Theme Setup' ) }</ActionPanelTitle>
+ <Notice status={ 'is-warning' } showDismiss={ false }>
+ { translate( 'This action cannot be undone.' ) }
@a8ci18n
a8ci18n Jan 19, 2017

Alternate string suggestion:

  • translate( 'This cannot be undone' )— translations: 3.

PR translation status page

@kwight
Member
kwight commented Jan 19, 2017

New card-level skeleton. I just left the p blocks full-width, as getting the image in there too meant adding a bunch more CSS to behave properly at different breakpoints.

screen shot 2017-01-18 at 4 28 04 pm

@folletto
Member

I just left the p blocks full-width, as getting the image in there too meant adding a bunch more CSS to behave properly at different breakpoints.

Good point. Simpler is better.

It's 👍 for me.

@melchoyce
Contributor

Looks good to me, too 👍

@kwight
Member
kwight commented Jan 20, 2017

@michaeldcain noted that we should make it clear to the user that we're making live changes to the front-end (not just "trying out" or "previewing").

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment