Blogger Experience - Initial component implementation of onboarding video UI #57324

blackjackkent · 2021-10-25T15:46:13Z

Changes proposed in this Pull Request

This PR adds a component file that will contain the implementation of the onboarding video UI described in pdgK6S-ck-p2. It does not currently load the UI anywhere, but will be usable in the work going on in Videos UI: Add a new card to the My Home carousel for our MVP. #57326

Testing instructions

N/A

Related to #56888

matticbot · 2021-10-25T15:46:21Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-17691
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-17691&env=jetpack

github-actions · 2021-10-25T15:46:34Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-a4726f853e7162e4d648f98f2add953e74c22649
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-a4726f853e7162e4d648f98f2add953e74c22649&env=jetpack
(These links may take a few minutes to be available)

a8ci18n · 2021-10-25T15:55:00Z

client/my-sites/customer-home/cards/education/onboarding-video-ui/index.jsx

+							</span>
+						</div>
+						<div className="onboarding-video-ui__chapter">
+							2. { translate( 'Write a blog post' ) }{ ' ' }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 27 times:
translate( 'Write a Blog Post' ) ES Score: 6

a8ci18n · 2021-10-25T15:55:01Z

client/my-sites/customer-home/cards/education/onboarding-video-ui/index.jsx

+							</span>
+						</div>
+						<div className="onboarding-video-ui__chapter">
+							4. { translate( 'Social icons' ) }{ ' ' }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 107 times:
translate( 'Social Icons' ) ES Score: 10
See 1 additional suggestions in the PR translation status page

a8ci18n · 2021-10-25T15:55:02Z

client/my-sites/customer-home/cards/education/onboarding-video-ui/index.jsx

+								</p>
+								<button type="button" className="onboarding-video-ui__play-button">
+									<Gridicon icon="play" size={ 12 } />
+									{ translate( 'Play video' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 50 times:
translate( 'Play Video' ) ES Score: 11

matticbot · 2021-10-25T15:57:04Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

kwight · 2021-10-25T19:25:37Z

A few quick first notes:

This needs to be a standalone component, that has nothing to do with My Home (meaning, it could be pulled in and used anywhere). I'd expect it to be in /client/components.
Only the card from Videos UI: Add a new card to the My Home carousel for our MVP. #57326 should be within My Home code.
We can remove the feature flag – since we're launching quickly, we'll need to rely on Videos UI: Add a new card to the My Home carousel for our MVP. #57326 and its calypso.live link for testing.

blackjackkent · 2021-10-26T21:37:04Z

As discussed above - updated the component to be standalone in client/components and removed feature flags and initial references.

a8ci18n · 2021-10-26T21:42:28Z

client/components/onboarding-video-ui/index.jsx

+							</span>
+						</div>
+						<div className="onboarding-video-ui__chapter">
+							2. { translate( 'Write a blog post' ) }{ ' ' }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 27 times:
translate( 'Write a Blog Post' ) ES Score: 6

a8ci18n · 2021-10-26T21:42:29Z

client/components/onboarding-video-ui/index.jsx

+							</span>
+						</div>
+						<div className="onboarding-video-ui__chapter">
+							4. { translate( 'Social icons' ) }{ ' ' }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 107 times:
translate( 'Social Icons' ) ES Score: 10
See 1 additional suggestions in the PR translation status page

a8ci18n · 2021-10-26T21:42:31Z

client/components/onboarding-video-ui/index.jsx

+								</p>
+								<button type="button" className="onboarding-video-ui__play-button">
+									<Gridicon icon="play" size={ 12 } />
+									{ translate( 'Play video' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 50 times:
translate( 'Play Video' ) ES Score: 11

kwight · 2021-10-26T21:48:58Z

@blackjackkent Let's just call it videos-ui, not onboarding-video-ui – the component has nothing to do with onboarding.

blackjackkent · 2021-10-26T23:05:13Z

@blackjackkent Let's just call it videos-ui, not onboarding-video-ui – the component has nothing to do with onboarding.

Good call - updated!

a8ci18n · 2021-10-26T23:12:26Z

client/components/videos-ui/index.jsx

+							</span>
+						</div>
+						<div className="videos-ui__chapter">
+							2. { translate( 'Write a blog post' ) }{ ' ' }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 27 times:
translate( 'Write a Blog Post' ) ES Score: 6

a8ci18n · 2021-10-26T23:12:27Z

client/components/videos-ui/index.jsx

+							</span>
+						</div>
+						<div className="videos-ui__chapter">
+							4. { translate( 'Social icons' ) } <span className="videos-ui__duration">03:18</span>{ ' ' }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 107 times:
translate( 'Social Icons' ) ES Score: 10
See 1 additional suggestions in the PR translation status page

a8ci18n · 2021-10-26T23:12:28Z

client/components/videos-ui/index.jsx

+								</p>
+								<button type="button" className="videos-ui__play-button">
+									<Gridicon icon="play" size={ 12 } />
+									{ translate( 'Play video' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 50 times:
translate( 'Play Video' ) ES Score: 11

kwight · 2021-10-27T19:11:38Z

client/components/videos-ui/style.scss

@@ -0,0 +1,71 @@
+.onboarding-video-ui {


These would all need to be changed too.

kwight · 2021-10-27T19:13:10Z

client/components/videos-ui/style.scss

+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 0.875rem;


There should be variables for these (I don't think we should ever be hard-coding literal font size values). Just use the one closest. 👍

kwight · 2021-10-27T19:15:33Z

client/components/videos-ui/style.scss

+				font-size: 0.875rem;
+			}
+			h2 {
+				font-family: 'Recoleta', 'Noto Serif', Georgia, 'Times New Roman', Times, serif;


Are these values needed? Is there another way to use existing values? (I honestly don't know, but I'm assuming there are app-wide declarations, and a way to trigger them.)

kwight · 2021-10-27T19:18:06Z

@blackjackkent Just add a screenshot to the description, then go a head and merge – you can make followup issues from my last notes, and we'll go from there. 👍

kwight

This is fine for us to get something in place, then start tweaking. 👍

a8ci18n · 2021-10-27T20:16:56Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/6915723

Thank you @blackjackkent for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2022-12-26T20:34:02Z

Translation for this Pull Request has now been finished.

Initial UI implementation (incomplete) of onboarding video UI

a4726f8

blackjackkent added the Blogger Experience Pod label Oct 25, 2021

blackjackkent self-assigned this Oct 25, 2021

blackjackkent requested a review from a team as a code owner October 25, 2021 15:46

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 25, 2021

a8ci18n reviewed Oct 25, 2021

View reviewed changes

Moving UI to standalone component and removing feature flags

3dea31e

blackjackkent changed the title ~~Blogger Experience - Initial UI implementation of onboarding video UI (WIP)~~ Blogger Experience - Initial component implementation of onboarding video UI Oct 26, 2021

a8ci18n reviewed Oct 26, 2021

View reviewed changes

blackjackkent added 2 commits October 26, 2021 18:02

Updating videos UI namespace

2c8cafa

Adding missing files

7482eff

a8ci18n reviewed Oct 26, 2021

View reviewed changes

kwight reviewed Oct 27, 2021

View reviewed changes

client/components/videos-ui/style.scss Outdated

@@ -0,0 +1,71 @@

.onboarding-video-ui {

Copy link

Contributor

kwight Oct 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These would all need to be changed too.

kwight reviewed Oct 27, 2021

View reviewed changes

kwight approved these changes Oct 27, 2021

View reviewed changes

Fixing style classnames

3b32e86

blackjackkent merged commit 982f855 into trunk Oct 27, 2021

blackjackkent deleted the blogger-experience-onboarding-video-ui branch October 27, 2021 19:51

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 27, 2021

blackjackkent mentioned this pull request Oct 27, 2021

Videos UI: Use existing variables for font sizes and fonts. #57404

Open

This was referenced Oct 27, 2021

Finalizing styles for video UI layout and chapter display #57406

Merged

Fixing style variable usage in videos UI #57443

Merged

Adding conditional logic for top links in videos UI #57572

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blogger Experience - Initial component implementation of onboarding video UI #57324

Blogger Experience - Initial component implementation of onboarding video UI #57324

blackjackkent commented Oct 25, 2021 •

edited

matticbot commented Oct 25, 2021 •

edited

github-actions bot commented Oct 25, 2021

a8ci18n Oct 25, 2021

a8ci18n Oct 25, 2021

a8ci18n Oct 25, 2021

matticbot commented Oct 25, 2021 •

edited

kwight commented Oct 25, 2021

blackjackkent commented Oct 26, 2021

a8ci18n Oct 26, 2021

a8ci18n Oct 26, 2021

a8ci18n Oct 26, 2021

kwight commented Oct 26, 2021

blackjackkent commented Oct 26, 2021

a8ci18n Oct 26, 2021

a8ci18n Oct 26, 2021

a8ci18n Oct 26, 2021

kwight Oct 27, 2021

kwight Oct 27, 2021 •

edited

kwight Oct 27, 2021

kwight commented Oct 27, 2021

kwight left a comment

a8ci18n commented Oct 27, 2021

a8ci18n commented Dec 26, 2022

Blogger Experience - Initial component implementation of onboarding video UI #57324

Blogger Experience - Initial component implementation of onboarding video UI #57324

Conversation

blackjackkent commented Oct 25, 2021 • edited

Changes proposed in this Pull Request

Testing instructions

matticbot commented Oct 25, 2021 • edited

github-actions bot commented Oct 25, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matticbot commented Oct 25, 2021 • edited

kwight commented Oct 25, 2021

blackjackkent commented Oct 26, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwight commented Oct 26, 2021

blackjackkent commented Oct 26, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwight Oct 27, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwight commented Oct 27, 2021

kwight left a comment

Choose a reason for hiding this comment

a8ci18n commented Oct 27, 2021

a8ci18n commented Dec 26, 2022

blackjackkent commented Oct 25, 2021 •

edited

matticbot commented Oct 25, 2021 •

edited

matticbot commented Oct 25, 2021 •

edited

kwight Oct 27, 2021 •

edited