Edit site title. I want to edit tagline too but the popup guide blocks the tagline

Automattic / wp-calypso

The JavaScript and API powered WordPress.com

https://developer.wordpress.com

GNU General Public License v2.0

12.42k stars 1.99k forks source link

Edit site title. I want to edit tagline too but the popup guide blocks the tagline #55513

Closed autumnfjeld closed 2 years ago

autumnfjeld commented 3 years ago

TODO: Autumn will finish this description

jordesign commented 3 years ago

ooh - yes please. This is a real 'back to basics' one...

That being said - Is this step of the checklist something we should revisit the idea of sending folks to the Customizer to change (as we investigated in the My Home pod)?

autumnfjeld commented 3 years ago

Is this step of the checklist something we should revisit the idea of sending folks to the Customizer to change (as we investigated in the My Home pod)?

Yes. https://github.com/Automattic/wp-calypso/issues/53434 should be considered in finding a solution.

tyxla commented 2 years ago

Marking this as a good first issue.

Just to clarify, this is easy to reproduce by going to: /settings/general/:site?tour=checklistSiteTitle where :site is the slug/domain of your site.

spraveenitpro commented 2 years ago

I am looking at this @autumnfjeld @tyxla

tyxla commented 2 years ago

Awesome, @spraveenitpro! Feel free to reach out to me if you need any help with it.

spraveenitpro commented 2 years ago

Here is what I am planning to implement:

Direct Link

Here is the original:

Direct Link

Moving the popup upwards, creates the space for the site tag line, hope that is fine.

@tyxla

arthur791004 commented 2 years ago

I'm not sure but I think if we have a sort of educational tour, we should only allow the user to edit the target element. That being said, the user should only fill out the site title and click the “All done, continue” button and follow the next educational tour. I'm okay to adjust the popup position for now.

tyxla commented 2 years ago

I think this is a solid solution @spraveenitpro! I'll review the PR code-wise, but will also ping folks from @Automattic/ganon who own the onboarding flows and should give the final call on it.

spraveenitpro commented 2 years ago

Hi @autumnfjeld

The Popup guide is blocking the Site Tagline at this moment, here is my thinking:

If we place the popup guide above the Site title then on the mobile layout it will be forced to be placed below causing it to again go over the Site Tagline in the mobile layout
Placing it beside is not encouraged as it will not work well on the mobile layout, more on that here
What do you think about this proposal: Place the popup guide below the Site Tagline input which would look like this on the desktop layout:

On the mobile layout, it will look like this - again not overlapping on the Site Tagline:

Let me know your thoughts on this. Ccing @tyxla

autumnfjeld commented 2 years ago

@spraveenitpro

Place the popup guide below the Site Tagline input I think your proposal is better than the existing situation, in which the tagline field is blocked. 👍

We could also update the copy (but I think it is ok if we don't): "Update the Site title and tagline fields to let visitors clearly identify your site."

bitmoji

spraveenitpro commented 2 years ago

Great, updated the copy, so let me know if any changes:

On Desktop:

Direct Link

On Mobile:

Direct Link

🙏🏼 @autumnfjeld

enejb commented 2 years ago

If we do this do we cover up the Site icon UI on mobile web? cc: @spraveenitpro

spraveenitpro commented 2 years ago

@enejb As the real estate is limited, it is going to cover something on the mobile layout. As soon as the user clicks on the All done, Continue button, it will go away. :)

tyxla commented 2 years ago

My $0.02 on the latest solution: I find the fact that the step is below the tagline field confusing. As a user, I'm confused whether I have to fill the site title field or the site tagline one.

autumnfjeld commented 2 years ago

A couple suggestions for the copy in the popup guide:

match the capitalization that is in the UI , meaning only Site is capitalized, while title and tagline are not capitalized.
instead of "...Site tagline and title...", use "...Site tagline and Site title...". (repeat the word Site for added clarity and to match the UI)
use bold font for both "Site title" and "Site tagline" to emphasize these are fields the user can edit

Hopefully this will reduce the confusion you mentioned @tyxla . :) Thank you!

spraveenitpro commented 2 years ago

Thank you, @autumnfjeld @tyxla

[x] match the capitalization that is in the UI , meaning only Site is capitalized, while title and tagline are not capitalized.
[x] instead of "...Site tagline and title...", use "...Site tagline and Site title...". (repeat the word Site for added clarity and to match the UI)
[x] use bold font for both "Site title" and "Site tagline" to emphasize these are fields the user can edit
[x] I find the fact that the step is below the tagline field confusing. As a user, I'm confused whether I have to fill the site title field or the site tagline one.

Here is what we have at this moment:

Direct Link

autumnfjeld commented 2 years ago

Looks great!! Nice work!

bitmoji