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

kwight · 2017-01-10T22:47:54Z

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:

Previous discussion: p6nuNy-18d-p2

matticbot · 2017-01-10T22:47:55Z

Test live: https://calypso.live/settings?branch=add/settings-theme-setup

melchoyce · 2017-01-12T17:01:54Z

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

michelleweber · 2017-01-12T19:12:05Z

@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 · 2017-01-12T19:38:30Z

Thank you! 🙇

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

melchoyce · 2017-01-13T19:55:51Z

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 · 2017-01-16T20:50:13Z

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

a8ci18n · 2017-01-16T22:20:03Z

client/my-sites/site-settings/theme-setup/index.jsx

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


Alternate string suggestion:

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

PR translation status page

kwight · 2017-01-16T23:34:39Z

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

folletto · 2017-01-17T15:52:24Z

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 · 2017-01-17T15:54:35Z

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

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

folletto · 2017-01-17T15:56:55Z

Good one, yes 👍

a8ci18n · 2017-01-17T17:46:32Z

client/my-sites/site-settings/theme-setup/index.jsx

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


Alternate string suggestion:

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

PR translation status page

kwight · 2017-01-17T22:13:03Z

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?..

folletto · 2017-01-18T12:50:25Z

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:

melchoyce · 2017-01-18T15:15:49Z

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

kwight · 2017-01-18T19:20:23Z

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 · 2017-01-18T19:24:20Z

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.

a8ci18n · 2017-01-19T00:36:16Z

client/my-sites/site-settings/theme-setup/theme-setup-card.jsx

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


Alternate string suggestion:

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

PR translation status page

kwight · 2017-01-19T00:36:53Z

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.

folletto · 2017-01-19T17:40:59Z

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 · 2017-01-19T17:44:29Z

Looks good to me, too 👍

kwight · 2017-01-20T21:24:33Z

@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").

a8ci18n · 2017-01-25T00:13:15Z

client/my-sites/site-settings/theme-setup/theme-setup-card.jsx

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


Hi! I've found a possible matching string that has already been translated 3 times:
translate( 'This cannot be undone' ) ES Score: 5.17

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

custom definition since `scary` isn't supported.

`THEME_SETUP_TOGGLE_DIALOG` action.

Part of implementing #10542 for Automattic internal testing. Will not be active until #11914 .

kwight · 2017-03-10T21:15:32Z

Replaced by:

#11762
#11802
#11803
#11806
#11812
#11914
#11925

kwight added [Status] In Progress [Feature] Site Settings All other general site settings. labels Jan 10, 2017

kwight force-pushed the add/settings-theme-setup branch from 219296d to ddd1d25 Compare January 11, 2017 22:00

a8ci18n reviewed Jan 16, 2017

View reviewed changes

a8ci18n reviewed Jan 17, 2017

View reviewed changes

kwight force-pushed the add/settings-theme-setup branch from 08b7a7a to 97262a5 Compare January 17, 2017 21:23

a8ci18n reviewed Jan 19, 2017

View reviewed changes

kwight force-pushed the add/settings-theme-setup branch from d172e85 to 8886ad0 Compare January 24, 2017 17:24

a8ci18n reviewed Jan 25, 2017

View reviewed changes

kwight force-pushed the add/settings-theme-setup branch 2 times, most recently from a3281d1 to 2dd21b8 Compare January 31, 2017 21:12

kwight added 17 commits March 6, 2017 13:42

Use property initializers to bind this to the input handler.

1d353d1

Simplify the two resulting action types into just THEME_SETUP_RESULT.

f249ece

Add basic result dialogs.

dd6f6d2

Simplify button definitions for the dialog. deleteContent stays a

cb3495e

custom definition since `scary` isn't supported.

Add themeSetup key to the state UI reducer test.

eeb3814

Correct a rebasing goof.

d189541

Remove the option to delete content.

9530974

Simplify and clarify dialog text and headings.

a9396eb

Remove Delete Content from the dialog component.

cc05cdb

Remove unused modules.

f7adc40

Remove saveExisting from the theme-setup endpoint call.

a794cca

Remove unused saveExisting prop in ThemeSetupDialog.

d218062

Remove saveExisting from runThemeSetup().

7e82bc1

Remove saveExisting from openDialog().

6d339ae

Handle opening and closing the dialog with one

1f38c30

`THEME_SETUP_TOGGLE_DIALOG` action.

Remove extra runThemeSetup() from rebasing.

0e9b845

Remove unused saveExisting state.

f7bcc58

kwight force-pushed the add/settings-theme-setup branch from b706fab to f7bcc58 Compare March 6, 2017 21:43

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Mar 6, 2017

kwight added a commit that referenced this pull request Mar 9, 2017

Settings: Add the ThemeSetupDialog component. (#11812)

773c72d

Part of implementing #10542 for Automattic internal testing. Will not be active until #11914 .

kwight closed this Mar 10, 2017

kwight deleted the add/settings-theme-setup branch March 10, 2017 21:15

matticbot removed the [Status] In Progress label Mar 10, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kwight commented Jan 10, 2017 •

edited

Loading

matticbot commented Jan 10, 2017 •

edited by folletto

Loading

melchoyce commented Jan 12, 2017

michelleweber commented Jan 12, 2017

melchoyce commented Jan 12, 2017

melchoyce commented Jan 13, 2017

kwight commented Jan 16, 2017

a8ci18n Jan 16, 2017

kwight commented Jan 16, 2017 •

edited

Loading

folletto commented Jan 17, 2017

melchoyce commented Jan 17, 2017

folletto commented Jan 17, 2017

a8ci18n Jan 17, 2017

kwight commented Jan 17, 2017 •

edited

Loading

folletto commented Jan 18, 2017

melchoyce commented Jan 18, 2017

kwight commented Jan 18, 2017 •

edited

Loading

folletto commented Jan 18, 2017

a8ci18n Jan 19, 2017

kwight commented Jan 19, 2017

folletto commented Jan 19, 2017

melchoyce commented Jan 19, 2017

kwight commented Jan 20, 2017

a8ci18n Jan 25, 2017 •

edited

Loading

kwight commented Mar 10, 2017

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

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

Conversation

kwight commented Jan 10, 2017 • edited Loading

matticbot commented Jan 10, 2017 • edited by folletto Loading

melchoyce commented Jan 12, 2017

michelleweber commented Jan 12, 2017

melchoyce commented Jan 12, 2017

melchoyce commented Jan 13, 2017

kwight commented Jan 16, 2017

a8ci18n Jan 16, 2017

Choose a reason for hiding this comment

kwight commented Jan 16, 2017 • edited Loading

folletto commented Jan 17, 2017

melchoyce commented Jan 17, 2017

folletto commented Jan 17, 2017

a8ci18n Jan 17, 2017

Choose a reason for hiding this comment

kwight commented Jan 17, 2017 • edited Loading

folletto commented Jan 18, 2017

melchoyce commented Jan 18, 2017

kwight commented Jan 18, 2017 • edited Loading

folletto commented Jan 18, 2017

a8ci18n Jan 19, 2017

Choose a reason for hiding this comment

kwight commented Jan 19, 2017

folletto commented Jan 19, 2017

melchoyce commented Jan 19, 2017

kwight commented Jan 20, 2017

a8ci18n Jan 25, 2017 • edited Loading

Choose a reason for hiding this comment

kwight commented Mar 10, 2017

kwight commented Jan 10, 2017 •

edited

Loading

matticbot commented Jan 10, 2017 •

edited by folletto

Loading

kwight commented Jan 16, 2017 •

edited

Loading

kwight commented Jan 17, 2017 •

edited

Loading

kwight commented Jan 18, 2017 •

edited

Loading

a8ci18n Jan 25, 2017 •

edited

Loading