Launch Bar: Implement new design of the front-end launch bar.

[kwight]

Blogger Flow v1: Launch Bar on Front-End

This is iteration 5 in production of Blogger Flow v1. 👏

As part of the Blogger Experience pod, @ollierozdarz has tweaked the design for the front-end launch bar.

Before	After

The My Home link is technically a duplication of the My Sites button, but may assist users getting to where they need to be.

Details

Project Thread: pdgK6S-78-p2
Figma designs
This is iteration 5: pdgK6S-78-p2 /#launch-bar

User Facing Specs (also verify against specs in the Project Thread):

• Dismissal behaviour (when clicking the x) will remain the same.
• The Change Theme button points to the Theme Showcase.
• The Edit Post button loads the current post in the editor.
• The Edit Post button becomes an Edit Page button for pages (and opens the page in the editor).
• The Edit Post button is not rendered on archive views (eg. post list views).
• The My Home link send the user to My Home for the current site.

Dev Checklist

List out tech tasks and/or PRs that will fulfill the criteria above

• Move existing inline JS to its own enqueued file in wp-content/blog-plugins/launch-banner/. D68364-code
• Add a blog sticker check for early testing (see the anchor-fm-dev sticker and blog RC integration). D68351-code
• Implement the new bar. D68102-code
• Persist the dismissal choice. D68402-code
• Add nonce checks. Launch Bar: Implement new design of the front-end launch bar. #56769 (comment)
• Verify all Atomic behaviour and wpcomsh code. See: pdgK6S-ck-p2
• Add Tracks events for all buttons (one event with a button property). D68473-code
• Verify layout with different themes (focussing on the Recommended themes in the Showcase).

Related

Blogger Experience Goals: p9Jlb4-2Sr-p2
Blogger Flow v1: p9Jlb4-31T-p2
Figma designs

[kwight]

@ollierozdarz @ianstewart a couple of questions:

The Edit Post button would be Edit Page if appropriate, and would not display at all if on an archive page.

Does that seem reasonable?

Also, the one redeeming quality of the original version is that it clearly tells the user that their site is not launched – that's not at all obvious in the new version (particularly for a new user that doesn't really know what that means). Should we have a short description, or other treatment to make it more understandable?

[ollierozdarz]

@kwight nice work!

That sums it up perfectly. While we're not telling the user their site isn't launched in a paragraph, I'm happy to ride it out to see what a different providing these options make. I think it's too early to push launching so heavily (as we've been doing) in this bar, so I'm happy if we capitalize on that later in the flow (i.e. through Launchpad or My Home).

[blackjackkent]

Made good progress on this this week and it's just about done. WIP diff is up at D68102-code. Remaining work is to implement the icons and the somewhat fiddly work around whether to display/link to edit post vs page.

[blackjackkent]

Diff is now ready for review at D68102-code. I left a question for @ollierozdarz on Slack regarding the bar's behavior post-launch, to wit:

The existing logic of the launch bar accounts for the possibility that the user has already launched the site once, but that they then set the privacy back to "Coming Soon"; in this case, the launch bar button displays "Update Visibility" instead, and links to the site privacy settings. Are we good with maintaining that behavior for the new button? (I've implemented it this way currently, but thought I should verify. 😄

[blackjackkent]

(Per conversation with Kirk - going to do further work around this, setting up a blog sticker feature flag and doing some other cleanup around Tracks events and other code modernizations.)

(Also Ollie has affirmed the behavior mentioned above for already-launched Coming Soon sites.)

[kwight]

@ollierozdarz For the < My Home link, do you have any specifics for the chevron and spacing? Is it intended to mirror the block editor sidebar link for Dashboard?

[ollierozdarz]

@kwight, I've dropped a screenshot below. I'm don't think we should try to emulate what's in the Editor (your screenshot) since that looks a little off to me. For the launch bar updates, I've given it a 20px margin to the left and right of the launch banner, then 6px between the chevron and label.

Note: I also considered matching the admin bar above, but it's far too tight.

[kwight]

Order or work:

1. Blog sticker deployed.
2. Blog sticker check and new function deployed.
3. Add an empty enqueued JS file.
4. Fix dismissal onclicks.
5. Fix the inline script tag.
6. Add Tracks events.

The nonce fixing can happen at any point after step 2.

[blackjackkent]

1 - D68351-code
2 - D68102-code

I have also added a diff at D68364-code which addresses 3 and 5 simultaneously, as it seemed easiest to do them both at the same time. (This is not ready for testing until D68102 is merged. I can also update it so 3 and 5 are separate commits if we would prefer.)

Once that is approved, the way should be clear for 4 and 6 to be completed. I can start working on Tracks stuff, since @kwight, you said you were going to do the dismissal behavior.

@andres-blanco is going to work on fixing nonce checking and other PHP linting errors once D68102 is merged as well.

[kwight]

@ianstewart @ollierozdarz How would we like to handle dismissal? As it is right now, the dismissal only lasts for the current page load, because it's not persisted in any way. Would you like to keep it that way (seems kinda pointless to me), or we could dismiss it for a week, or month maybe?

[kwight]

Add nonce checks.

The nonce checks flagged by the linter are all checks to return early; we don't need to add any nonce behaviour in this case.

[jordesign]

My 2c on dismissal would be to have it persistent in some way. I'm not fussy on how long - but a week seems reasonable. If we're reminding users weekly that launching is a good idea - that seems reasonable.

[ollierozdarz]

@ianstewart @ollierozdarz How would we like to handle dismissal? As it is right now, the dismissal only lasts for the current page load, because it's not persisted in any way. Would you like to keep it that way (seems kinda pointless to me), or we could dismiss it for a week, or month maybe?

Because this now houses some really handy actions, I'd say something along the lines of dismissal only lasts for their current session (if that's an option?).

[kwight]

Because this now houses some really handy actions, I'd say something along the lines of dismissal only lasts for their current session (if that's an option?).

What's your definition of a session? Cookie options are the following as defined in MDN:

• Session cookies are deleted when the current session ends. The browser defines when the "current session" ends, and some browsers use session restoring when restarting. This can cause session cookies to last indefinitely.
• Permanent cookies are deleted at a date specified by the Expires attribute, or after a period of time specified by the Max-Age attribute.

We could just leave it as-is: persist only for the current page load (this just always feels like the worst option to me – refresh the page, it's back again). I'm happy to do whatever others think is best, but let's decide today so that we have time to do it before next week's testing and launch.

[kwight]

@ollierozdarz The chevron was fixed in D68431-code. 👍

[ianstewart]

We could just leave it as-is: persist only for the current page load (this just always feels like the worst option to me – refresh the page, it's back again). I'm happy to do whatever others think is best, but let's decide today so that we have time to do it before next week's testing and launch.

Leave as-is is great for launch. Improving it can be a separate issue. Not sure about other time lengths for session. 2–4 hours? Not longer than 12.

[jordesign]

I've gone ahead and opened a task/checklist for testing the launch bar across our recommended themes:
#57143

I'm figuring we can hold off on this until the work is finalised?

[simison]

Here's a nice example for permanent dismissal guidance from Squarespace:

[kwight]

I'm figuring we can hold off on this until the work is finalised?

Oh, I'd say sooner is better (it's 98% there already) – go for it!

[kwight]

This was deployed to Simple sites today. The last remaining tasks to close this umbrella issue are:

• Add Atomic support (765-gh-Automattic/wpcomsh).
• Rename the stylesheet (Launch Bar: Move styles to style.css. #57162).
• Remove the /sites redirect (D68756-code).
• Only render an Edit button when valid post data is present (Launch Bar: 404 pages show an Edit button with an invalid link. #57202).
• Verify the bar looks good with our recommended themes (Launch Bar: Test our recommended themes. #57143).

[jordesign]

Have tested this across all our recommended themes - with only thing to note. Not even really a bug - just an oddity in the way the fixed menu of Rockfield is managed.
#57143 (comment)

[kwight]

This was deployed to Atomic sites today, wrapping up the project. ✨