Project

General

Profile

Actions

Feature #17768

closed

Design/UX #17385: Profile CV & Account Settings

CV Editing and Publishing

Added by Colin McDonald about 1 year ago. Updated 3 months ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Design
Target version:
Start date:
2023-03-04
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Activate gutenberg on main site


Description

Sara is going to post her latest mockups here for the Draft / Save Draft / Publish flow we've been talking about for CVs, including other elements of the publishing and editing sequence. This will be the handover we discussed to begin development while Sara is away through April.

Jeremy especially, let's use this subtask of the main Profile / Settings ticket #17385 to track our progress on this.


Files


Related issues

Related to CUNY Academic Commons - Feature #18192: CV "top" sectionResolvedBoone Gorges2023-08-11

Actions
Related to CUNY Academic Commons - Feature #18193: CV "bottom" sectionResolvedBoone Gorges2023-05-09

Actions
Related to CUNY Academic Commons - Feature #18194: Migration routine for CVsNewBoone Gorges2023-05-09

Actions
Related to CUNY Academic Commons - Feature #18467: "Positions" migration to new CV editorResolvedBoone Gorges2023-07-17

Actions
Actions #2

Updated by Jeremy Felt about 1 year ago

I'm feeling good about how the structure of the editor is working and my next step is to have it actually load on a view like https://commons.test/members/jeremyfelt/, which is powered by CAC Advanced Profiles on top of BuddyPress.

Boone / Ray: Does it make sense to:
  • Override the template provided in CAC Advanced Profiles
  • Remove CAC Advanced Profile's handling of that entirely and override BuddyPress's template
  • Something else?

I'm not familiar enough with CAC Advanced Profiles to know if we'll still need it alongside the new profile information. My gut says removing it would be too much, but I'll lean on you all. :)

Actions #3

Updated by Boone Gorges about 1 year ago

Remove CAC Advanced Profile's handling of that entirely and override BuddyPress's template

Let's do this. The point of CAC Advanced Profiles was (a) to provide richer profile field types, such as "positions", and (b) to provide a front-end interface for editing these new field types and other BP profile fields. Your work will supersede (b), and we can do most of (a) without needing the infrastructure of CAC Advanced Profiles. (Some of the old data can be migrated to something that makes sense in the context of the block editor, while certain structure data like Positions might need a kind of middleware. I will help when we get to this point). But for the purposes of the profile template, we should simply remove CAC Advanced Profiles from the view and instead override the BP template.

Actions #4

Updated by Raymond Hoh about 1 year ago

But for the purposes of the profile template, we should simply remove CAC Advanced Profiles from the view and instead override the BP template.

Agreed. I came across the same thing while implementing the Commons Profile pages. See the bottom of https://redmine.gc.cuny.edu/issues/17769#change-78240.

I didn't want to interrupt how CACAP functioned for the time being, so I disabled how CAC Advanced Profiles overrides the top-level template on Commons Profile pages here: https://github.com/cuny-academic-commons/cac/commit/9b850f33c479ac717b23f639e2b0e960d7b024f2. I specifically disable a case for the Public CV page when determining if we're on a Commons Profile page, but that conditional can be changed if needed: https://github.com/cuny-academic-commons/cac/commit/7fde1a58f765f5568da0214409e5c13554a5e59f#diff-1dfbefc79e2aec9ba9f6839552b623339738cfb8a363fa2da2aff9703244b11dR247

Actions #5

Updated by Jeremy Felt about 1 year ago

I've pushed an initial draft of the CV editor in feature/17768-cv-editor, which I've branched from Ray's feature/17769-commons-profile as there are a couple pieces that are intertwined.

Some initial notes:

  • I've identified members/single/home.php as the place for the profile/editor to appear. I had this mostly working on authenticated and non-authenticated views, but I think Ray's improvements also made some changes there. Is there a different template to override for non-authenticated views or is one of the conditionals overriding CACAP not correct? My awareness of BP views is thin, so I'm hoping Ray spots the issue as soon as he sees it. :)
  • I've left in a very rudimentary way of (1) loading a CV post belonging to the user if it's available and (2) if not, automatically creating an empty CV post and assigning it to the user. It may be that we don't want to auto-create placeholders. I think the next step here is getting some of the buttons/actions flowing properly between the views.
  • Save draft doesn't work, but publish does: even though it doesn't provide great feedback now.

I'm sure I'm forgetting a note, but I'll follow up with some more detail.

Actions #6

Updated by Raymond Hoh about 1 year ago

Is there a different template to override for non-authenticated views or is one of the conditionals overriding CACAP not correct? My awareness of BP views is thin, so I'm hoping Ray spots the issue as soon as he sees it. :)

Thanks for your work on this, Jeremy! I did a partial cherry-pick of your commit to https://github.com/cuny-academic-commons/cac/commit/bfa3661fbcc4d5aa86c6da8800b42d1e2f5b3e08 in the feature/17769-commons-profile branch. Unfortunately, I lost your author commit when I did this. Apologies!

To get something working for now, I've placed the Public CV functionality at the root of a member's URL. For example, /members/admin/. This is accomplished with the index-action-public.php BuddyPress template. (See the BuddyPress template hierarchy codex page for more info -- https://codex.buddypress.org/themes/theme-compatibility-1-7/template-hierarchy/#overview-of-template-hierarchy-in-buddypress .) If a displayed user's CV is empty, we redirect away from the root member's URL to their Activity page (/members/admin/activity/). See https://github.com/cuny-academic-commons/cac/commit/1536511a07abec420f4d1c7289efc74d7e4ed02a for full details.

Work can continue in the feature/17769-commons-profile branch. This is also available for testing on cdev.

Actions #7

Updated by Jeremy Felt about 1 year ago

Thank you, Ray!

One thing that I'd like to establish is when a CV post is created. There may be value in creating the post on user registration so that members/username/ is populated with a basic block template. However, if we're redirecting to the activity page, then creating the post on demand could work as well.

A handful of next step notes that I'm going to start marching through.

CV views

At members/username/, unauthenticated or not authenticated as the user:

  • If a CV post is populated and published, display.
  • If not, redirect to members/username/activity.

At members/username/, authenticated as the user:

  • If a CV post exists, present it in the front-end editor interface.
  • If not, create a CV post and present a template in the front-end editor interface.

Editor interface

  • When the CV is a draft, options for "Save draft" and "Publish" are available.
  • When the CV is published, options for "Switch to Draft" and "Update" are available.
  • When a draft has been saved, display a message above the editor.
  • When a draft has been published, display a message above the editor.

Blocks

  • A context aware profile action block:
    • When unauthenticated "View Commons Activity"
    • When authenticated as another user: "Add Friend", "Send Message", "View Commons Activity"
    • When authenticated as the user: "View Commons Activity", "View Account Settings"
  • Active timestamp block: "Active 20 hrs 3 min ago"
    • This may be a combination of the CUNY shortlink and active timestamp.
  • Pronouns block
Actions #8

Updated by Colin McDonald about 1 year ago

Hi Jeremy, your first two bullets here seem to align with the URL discussion from #17769 and what we were all thinking as far as showing the CV post at /username/ if it exists and is published, and redirecting to /username/activity/ if not.

For your next two bullets, I'm not as sure what you're saying one will see if going to /username/ while logged in as that same user. It seems to me that you should see the same thing at first that anyone else would see, then get into the editor interface if you click an Edit button. I'm also not sure about when a CV post is being created unless you choose to do so.

The other bullets for the interface and blocks all look good to me.

I spent a little time today playing around with the editing interface. I believe I was able to Publish, then make changes and have them saved on my published CV, but it's just all unformatted text right now. I assume that once we get going with different blocks there will be more options for putting a formatted CV together.

Actions #9

Updated by Jeremy Felt almost 1 year ago

I've updated the feature/17769-commons-profile branch with improved handling of the Save Draft / Publish buttons.

These two bullets are now resolved:

When the CV is a draft, options for "Save draft" and "Publish" are available.
When the CV is published, options for "Switch to Draft" and "Update" are available.

I'm also not sure about when a CV post is being created unless you choose to do so.

Thanks for taking a look, Colin. I think you're right. It's probably safer to not automatically create profiles until someone is ready to do so.

I'll get the messages above the editor connected tomorrow morning and then build that "context aware profile action block". I think this will help us dial in how it feels to go back and forth between the various screens.

Actions #10

Updated by Jeremy Felt 12 months ago

I've pushed a handful of changes to the feature/17769-commons-profile branch. Boone / Ray - could one of you please pull that branch over to CDEV?

Notice behavior:
  • On page load, no notice is shown.
  • On save draft or switch to draft, "Your CV Draft is saved. Publish to make live" is shown.
  • On publish or update, "Your CV is published" is shown.
  • Clicking the "X" icon dismisses the notice until the next save action occurs.

One thing we should think through some more is the navigation to "My Account Settings". Right now it is displayed as a link in the notice above the editor only when the editor is saved. Sara's intent may have been that the "View Account Settings" button within the editor could also be used for navigation, but I'm not sure if we want those links clickable. If so, we probably need to display a confirmation message if unsaved content exists.

I'll create an initial skeleton for a Profile Action block as it's a relatively simple context-aware list of links and is probably the most helpful in determining how navigation is feeling:

  • If logged in and editing CV, "View Commons Activity" and "View Account Settings"
  • If logged in on someone else's CV, "Add Friend", "Send Message", and "View Commons Activity"
  • If logged out, "View Commons Activity"
Actions #11

Updated by Raymond Hoh 12 months ago

Boone / Ray - could one of you please pull that branch over to CDEV?

Done!

Notice behavior:

Thanks for the work so far, Jeremy! I've tested the notice changes and they seem to work fine with an administrator account. However, when logged in as a regular user with the subscriber role, there are REST permission errors when attempting to save the CV. Sounds like we just need to pass the appropriate permission caps for the authenticated user. Can you take a look?

Actions #12

Updated by Boone Gorges 12 months ago

Actions #13

Updated by Boone Gorges 12 months ago

Actions #14

Updated by Boone Gorges 12 months ago

Actions #15

Updated by Jeremy Felt 10 months ago

However, when logged in as a regular user with the subscriber role, there are REST permission errors when attempting to save the CV

Thanks for that catch, Ray! This is fixed in the latest feature/17669-commons-profile branch. I've also defaulted to saving as draft now that the saving behavior as a whole is working better.

Boone/Ray when you have a chance, can you please pull that branch over to CDEV?

Actions #16

Updated by Raymond Hoh 10 months ago

Thanks for fixing the REST permission bug, Jeremy!

Boone/Ray when you have a chance, can you please pull that branch over to CDEV?

Done!

Actions #17

Updated by Boone Gorges 9 months ago

  • Related to Feature #18467: "Positions" migration to new CV editor added
Actions #18

Updated by Raymond Hoh 8 months ago

This is just a quick note to Jeremy and Boone that I've moved the CV Editor template from /wp-content/themes/bp-nelo/members/single/index-action-public.php to /wp-content/plugins/cac-cv-editor/includes/template.php. See https://github.com/cuny-academic-commons/cac/commit/c4a338dd34b7123d97b2f5ff3c7005d4e70b366f .

This was done to separate the template from the bp-nelo theme and also so we can deactivate the CAC CV Editor plugin if we needed to fallback to the Public Portfolio functionality from the CAC Advanced Profiles plugin.

Actions #19

Updated by Jeremy Felt 8 months ago

Thanks, Ray! I think that makes sense and it's nice to have that code alongside everything else.

Ray / Boone - The feature/17769-commons-profile has a bunch of new improvements ready for CDEV if one of you can please pull it over.

I've recorded a video showing the current status of the editor: https://www.loom.com/share/6532ad95c0424413bcb1f4b357ee26d4

In a nutshell:
- Things are looking very good. I've been able to match the logged-in/out views pretty well and only have a couple more places that I think need tweaking.
- Profile images and cover images are working. You do need to save the CV and refresh after adding/removing a cover image. I'll fix that JS early next week.
- I think we can improve the placeholder text throughout to better guide folks.

I don't think this is ready for wide testing yet, though we are close. It may be valuable for a few folks to take an initial look and see how things feel.

Actions #20

Updated by Raymond Hoh 8 months ago

Ray / Boone - The feature/17769-commons-profile has a bunch of new improvements ready for CDEV if one of you can please pull it over.

Done. I took a look at the video and things are looking great. Thanks for your work on this, Jeremy!

Actions #21

Updated by Boone Gorges 7 months ago

Hi all - As the editing experience for CVs gets close to complete, I wanted to start a conversation about some of the interface issues that surround CVs creation and use.

First, a summary of how things currently stand on the Commons. Each user has a Public Portfolio. This is the page you see when you visit their main user URL, such as https://commons.gc.cuny.edu/members/boonebgorges. The "Commons Profile" is one level deeper in the hierarchy, at https://commons.gc.cuny.edu/members/boonebgorges/activity/. When a user visits their Public Portfolio, they see the public view of it, and have to click the 'Edit Profile' button to edit, which leads to a URL like https://commons.gc.cuny.edu/members/boonebgorges/profile/edit/group/1/.

With all this in mind, let's think through how the CV flow should work. The critical distinction is that, while all users had a Public Portfolio, not all of them will have a CV. CVs for new users will be opt-in. Here's how it's currently set up in our feature branch:
1. For users with a CV, the CV is available at their main user URL, such as https://commons.gc.cuny.edu/members/boonebgorges/
2. When visiting the user URL of a user who does not have a CV, you are redirected to their Commons Profile, which is as before at [userurl]/activity
3. If you are logged in as a user without a CV, and you visit your main user URL, you are led directly into the CV editing interface. Here you see a blank CV - all the slots are there, but there's nothing filled in.
4. If you are logged in as a user with a CV, and you visit your main user URL, you are led directly into the CV editing interface. There's currently no way to view the non-edit view of your CV (the one that the general public sees) while logged into the site.
5. In the admin bar dropdown at the upper right, users with a CV see 'My Public CV', which leads to the edit view, while users without a CV will see 'Create a CV'.

A few concerns. First, I fear there will be some confusion over the fact that you can't see a non-edit view of your own CV. When visiting my URL I would expect to see something similar to what others would see, but instead I see the edit interface. I wonder if perhaps we need to introduce the idea of an Edit Mode, such that when you visit your URL you see the non-editable version, but you click a button (or whatever) to enable editing.

Second, it's somewhat jarring that visiting your URL if you don't have a CV will lead to the CV editing interface. Users may not know what the CV feature is, even if we improve the experience by pre-filling the Name field. It feels like the process of creating a CV should be more purposeful. So perhaps a user without a CV should be redirected to their Commons Profile /activity/ instead of being placed into CV edit mode, and there would be some sort of obvious way of creating a CV on that Commons Profile page. We may also want to consider that clicking 'Create a CV', either from the admin bar or from some hypothetical button on one's Commons Profile, would lead to an interstitial or a landing page that explains what a CV is.

A related idea is that perhaps we could have some sort of inline help or documentation in the CV editing interface. When editing a CV, either when it's brand new or when it's already got some data in it, perhaps you should see some sort of information near the top of the page along the lines of "Welcome to your CV!", with a sentence or two of orientation, and perhaps a link to a help page. Perhaps right below the Commons logo on cv-edit.png?

Another concern is the Publish vs Draft flow. For users familiar with the WordPress block editor, they may be able to make some guesses about what this means. But even for those users, the use case of a CV edited on the front end is different enough from a Page or a Post that it might not be clear (a) that you must click Publish in order to have your CV publicly viewable, (b) that you can save a draft version, (c) that you can take a public CV and put it back into Draft status, etc etc. I like that we are using WP's default Publish interface, and I don't necessarily think we should change it. But this could be the kind of thing that is documented, however briefly, in the kind of "status" section I suggest in the previous paragraph. Alternatively, or in addition, we could consider some sort of admin-notice-type text, which would change depending on the status of your CV. When creating, it could be yellow, and say "Your CV is in Draft status. When you're ready to make it public, press the Publish button." When it's public, perhaps it'd be green, and it would say "Your CV is published".

As a path forward, we might want to think about the following user flows. What information do each of these users need, and what sequence of events or messages can we give them to help them along?
1. A Commons user who does not have a CV wants to create one. How? What do they do, and what do they see?
2. A Commons user who had filled out their Public Portfolio prior to the introduction of CVs, and we create a CV for them during the migration process. What do they see when they log in and/or visit their URL for the first time?
3. A Commons user who has created a CV wants to edit their CV.

Sorry for the wall of text - I just want to get some of these thoughts out there so we can have a group discussion about how best to integrate the new feature.

Actions #22

Updated by Raymond Hoh 7 months ago

Thanks for correlating all these thoughts, Boone. I had similar feedback as I was stepping through some of the workflows myself. These are all necessary items we need to work through before shipping, so it's good to have a place to talk through all these items here.

First, I fear there will be some confusion over the fact that you can't see a non-edit view of your own CV. When visiting my URL I would expect to see something similar to what others would see, but instead I see the edit interface. I wonder if perhaps we need to introduce the idea of an Edit Mode, such that when you visit your URL you see the non-editable version, but you click a button (or whatever) to enable editing.

I agree that we need two separate pages for the CV -- one for viewing and one for editing. This shouldn't be too hard to implement. The "Edit CV" button would need to be in a good location when in viewing mode.

Second, it's somewhat jarring that visiting your URL if you don't have a CV will lead to the CV editing interface... So perhaps a user without a CV should be redirected to their Commons Profile /activity/ instead of being placed into CV edit mode, and there would be some sort of obvious way of creating a CV on that Commons Profile page.

Agreed. Right now, we are inserting a new CV post for each user with the post's content already prefilled. I would suggest when inserting a new CV post for a user, that we do not add any post content. This will allow us to easily tell if a user's CV is empty or not and we can determine whether the user needs to be redirected to their "Commons Profile > Activity" page. In edit mode, if the CV post content is blank, we can just output the default CV template here . Jeremy, does this sound like a good idea?

A related idea is that perhaps we could have some sort of inline help or documentation in the CV editing interface.

This would be neat. Gutenberg has a Guide component that we could modify. It's the same one that powers the Welcome to the Block Editor one that displays when Gutenberg is launched. Would that be a good starting point? If we want to use another library, ShepherdJS is also a nice way to onboard users.

Another concern is the Publish vs Draft flow.

Do we believe that users will want to save drafts of their CV? To play devil's advocate here, perhaps we can simplify the interface and workflow by not having a draft function similar to how the Public Portfolio currently works.

Also what if a user creates a CV, but then decides to opt-out from having a CV? Do we want to anticipate such a scenario? If so, we will need to add a delete button and some documentation / messaging to outline what will be displayed on a user's profile page if the user decides to remove their CV. Right now for the Public Portfolio, users cannot opt-out from having one so perhaps I'm just overthinking things here!

Actions #23

Updated by Jeremy Felt 7 months ago

First, I fear there will be some confusion over the fact that you can't see a non-edit view of your own CV.

I agree with this. It may be because I'm still used to an old web where things couldn't be edited, but a view mode is a nice way to establish confidence that others are experiencing what you intend.

Second, it's somewhat jarring that visiting your URL if you don't have a CV will lead to the CV editing interface. [....] So perhaps a user without a CV should be redirected to their Commons Profile /activity/ instead of being placed into CV edit mode, and there would be some sort of obvious way of creating a CV on that Commons Profile page.

I think this flow makes sense, or—see my flow guess below—we show a brief guide instead with the option to create a new CV.

For other views, the Figma mockups have View/Edit Public CV on some profile pages. I think we can make that contextual and change it to "Create CV" or "View/Edit CV" depending on the user's current status.

Right now, we are inserting a new CV post for each user with the post's content already prefilled. I would suggest when inserting a new CV post for a user, that we do not add any post content.

The current iteration errors on the side of getting a post setup quickly. I think we can move away from that and not even create a placeholder post when members/name is visited until the user has said "Create CV".

We may also want to consider that clicking 'Create a CV', either from the admin bar or from some hypothetical button on one's Commons Profile, would lead to an interstitial or a landing page that explains what a CV is.

And then, yes—instead of automatically creating the CV and showing the editor, have a paragraph or two that explains what's happening.

Another concern is the Publish vs Draft flow.

One place where I think Draft can be valuable for CVs is for someone who starts theirs for the first time and then realizes it might take them longer than they originally thought. It's nice to offer a way to save progress without fully committing.

Realizing I'm trying new terms for established concepts... maybe the wording can change to "Save Draft / Make Public" and then once published something like "Make Private / Update".

Some possible user flows:

1. A Commons user who does not have a CV wants to create one. How? What do they do, and what do they see?

  • User navigates to members/name. Instead of seeing any editor or view interface, they see an introduction paragraph or few explaining the idea of the CV. There is a link to Create CV which replaces that with the CV Editor and creates their CV draft.
  • If the user navigates to members/name/activity, one of the navigation buttons is to Create CV.

2. A Commons user who had filled out their Public Portfolio prior to the introduction of CVs, and we create a CV for them during the migration process. What do they see when they log in and/or visit their URL for the first time?

  • User navigates to members/name and sees a different version of the introduction paragraph explaining the idea of the CV as an interstitial over the public view of their profile. There are links to View and Edit CV which remove the interstitial and adjust the view as needed.
  • If the user navigates to members/name/activity, one of the navigation buttons is to View CV. This navigates to the public view of members/name.
  • When on the public view of members/name, a link to Edit CV is present at the top. This immediately swaps the public view with the editor interface.

3. A Commons user who has created a CV wants to edit their CV.

  • This is almost identical to the 2nd flow, but does not need the initial interstitial.
Actions #24

Updated by Sara Cannon 7 months ago

I really like the idea of having an explainer dialogue. I'm going to research how this is typically done. Looking forward to talking about it tomorrow!

Actions #25

Updated by Sara Cannon 7 months ago

Attached are the two modal screens I showed in the team meeting to get us started:

1. A Creation Modal - to be shown to users when they first initiate the creation of their CV.

2. A Migration Modal - to be shown to users when they first visit their migrated CV.

Content still needs to be worked on, we can link out to help documentation and create an image example that is not Matt's profile.

Actions #26

Updated by Boone Gorges 6 months ago

  • Target version changed from 2.2.0 to 2.3.0
Actions #27

Updated by Jeremy Felt 6 months ago

Ray / Boone - can you please switch CDEV to the feature/17769-cv-editor branch?

The general flow is in place with the following:

  • We no longer automatically store a new post with CV information when a user first edits their CV. Instead, the CV is displayed in the editor as initially populated with the information we have.
  • Edit and View states are tracked. I've gone with member/name/edit-cv/ as the edit URL.
  • A "View CV" link is now in the top bar when in edit mode.
  • The profile navigation block now has a button for Edit CV/Profile when in view mode if the current user is viewing their own profile.
  • The migration modal displays when a user visits the edit view for their profile.
  • A more general welcome modal displays when a user visits the edit view for a completely new profile.

Once a modal is dismissed, this is stored in a user meta key - _has_dismissed_cv_welcome. I have this currently set to expire every 2 minutes so that it is a bit easier to test.

The migration modal also looks for post meta on the CV - migrated_cv. To test the modal on CDEV now, it should be enough to edit the CV in the classic editor and add a custom field. :)

My next step is make all of this match Sara's designs, but I think we can also get to a place where others can look at the general position/language of the various elements involved, start wordsmithing, and confirm that we're on the right track.

Actions #28

Updated by Jeremy Felt 6 months ago

Here's a more complete description of the flows we're accounting for:

Unauthenticated user:

  • When visiting a published member profile like: /members/jeremyfelt/, show the CV and see a link to "View Commons Activity"
  • When visiting a draft/not-available member profile like: members/jeremyfelt/, redirect to that profile's activity page /members/jeremyfelt/activity/
  • When visiting a member profile's edit view like: /members/jeremyfelt/edit-cv/, redirect to /members/jeremyfelt/
  • When visiting a member's activity page associated with a public profile like: /members/jeremyfelt/activity/, see a link to "View Public CV"
  • When visiting a member's activity page with no (or draft) public profile like: /members/jeremyfelt/activity/, see no link to CV.

Authenticated user not matching the visited profile:

  • When visiting a published member profile like: /members/jeremyfelt/, show the CV and see links to "Add Friend" (or "Cancel Friend Request"), "Send Message", and "View Commons Activity"
  • When visiting a draft/not-available member profile like: members/jeremyfelt/, redirect to that profile's activity page /members/jeremyfelt/activity/
  • When visiting a member profile's edit view like: /members/jeremyfelt/edit-cv/, redirect to /members/jeremyfelt/
  • When visiting a member's activity page associated with a public profile like: /members/jeremyfelt/activity/, see links to "View Public CV", "Add Friend", and "Private Message"
  • When visiting a member's activity page with no (or draft) public profile like: /members/jeremyfelt/activity/, see no link to CV.

New authenticated user matching the visited profile:

  • When visiting a published member profile like: /members/jeremyfelt/, show the CV and see links to "Edit CV/Profile", "View Commons Activity", and "View Account Settings"
  • When visiting the user's own profile for the first time at: /members/jeremyfelt/, redirect to /members/jeremyfelt/edit-cv/ and display a welcome modal unless the modal has previously been dismissed. This modal differs for new/migrated users.
  • When visiting the user's own draft profile like: members/jeremyfelt/, redirect to members/jeremyfelt/edit-cv/
  • When visiting a member's activity page associated with a public profile like: /members/jeremyfelt/activity/, see link to "View/Edit Public CV"
  • When visiting a member's activity page with draft public profile like: /members/jeremyfelt/activity/, see link to "Edit CV Draft"
  • [Not implemented] When visiting a member's activity page with no public profile like: /members/jeremyfelt/activity/, see link to "Create CV"

To clear a CV during testing, navigate to https://commons.gc.cuny.edu/wp-admin/edit.php?post_type=cac-cv and trash/delete your profile.

To see the migrated modal, edit your CV in the classic editor via that same screen and add a custom field of migrated_cv with a value like "yes".

I've noticed a bug in which the member's name isn't populating for a new profile. I'll have that sorted shortly.

Actions #29

Updated by Boone Gorges 6 months ago

Thanks, Jeremy! Cool to see this in action. IMO the flow is much improved. A couple of items I noticed in my testing:

- When viewing your own profile and you have a CV, you see a button 'Edit CV/Profile'. I think this should just say 'Edit CV', since the public CV is all that you edit at that link.
- But this does lead to the question of where true "profile" data is edited. I'm thinking here of the display name, pronouns, and short description that appear in the header area when viewing your Commons Profile. At Account Settings > Profile Visibility I can edit the visibility of these fields (along with a number of others that I think will be removed), but I don't see how to edit these items.
- The 'View CV', 'Add cover image', etc row seems pretty OK to me. The 'Update' button is obviously the most prominent, which seems right to me.

Actions #30

Updated by Sara Cannon 6 months ago

Is this currently being worked on and I should hold off on taking a look? It was slow to load, I could not upload a cover image, and blocks seem to be broken. Also, when I hit "save draft" there was no feedback to let me know if it saved or not. Apologies if I should be holding off!

Actions #31

Updated by Jeremy Felt 6 months ago

Sorry, Sara - that is definitely not intentional. I tested too much as an administrator and not as a subscriber. The permissions are broken for uploading media and for creating new CV (rather than editing existing). I'm working on a fix and I'll have it ready by early Monday.

Actions #32

Updated by Jeremy Felt 6 months ago

WordPress! :)

Ray / Boone - can you please pull the latest feature/17769-cv-editor to CDEV?

  • Subscribers are now able to publish/edit/create as expected
  • Subscribers are now able to dismiss the modal
  • Subscribers are now able to see server-side rendered versions of the last active and profile navigation blocks in the editor
  • Cover image changes are reflected immediately on upload

Sara - once that's been updated on CDEV, the experience should actually work this time.

Actions #33

Updated by Raymond Hoh 6 months ago

Ray / Boone - can you please pull the latest feature/17769-cv-editor to CDEV?

Done!

Actions #34

Updated by Sara Cannon 6 months ago

Amazing! This is looking so good! I do have a few questions:

1. I went to create my new CV. I just filled out a few things then hit publish. A lot of the fields show up blank in my profile. Can we hide the titles of the fields that were not filled out in the published profile ("find me online, education interests, etc)? (attached is the published profile)

2. The short URL: Is this URL already established before editing? mine showed up blank but editable as if you could type it in. When I hit publish, this field still did not visually populate with the URL /scannon but when I went back to the account settings and viewed it, it populated that field.

Great work here and I'll keep poking around!

Actions #35

Updated by Sara Cannon 6 months ago

Here are some screenshots as to what selecting the cover image could look like:

Actions #36

Updated by Sara Cannon 6 months ago

Regarding the buttons that get added to the CV: (view commons activity, add friend, etc) Here is a layout that puts them below the profile pic and out of the way of the editable CV areas. I believe this will help eliminate some confusion.

I also don't think we really need "last active" for simplicity's sake.

Actions #37

Updated by Matt Gold 6 months ago

Looking good!!

Actions #38

Updated by Jeremy Felt 6 months ago

Boone / Ray - When you have a moment, can you please pull the latest feature/17769-cv-editor to CDEV? Thanks!

  • The editor view is feeling much nicer.
  • Rows with placeholder content do not show on the front-end.

Next I'll be tuning the mobile view and getting the welcome modals and cover image interface dialed in.

Actions #39

Updated by Boone Gorges 6 months ago

I've pulled the changes to cdev.

Actions #40

Updated by Jeremy Felt 6 months ago

Once more for tomorrow. Boone / Ray - can you please pull the latest from feature/17769-cv-editor

Actions #41

Updated by Raymond Hoh 6 months ago

Once more for tomorrow. Boone / Ray - can you please pull the latest from feature/17769-cv-editor

Done!

Actions #42

Updated by Colin McDonald 5 months ago

Hi Jeremy, I can go over this on the call shortly, but as a potential heads up, I'm having trouble seeing the editing options for my already-published CV on the dev site. Right now I'm not seeing the top edit bar or any way to get to that, and something similar was happening in the second meeting on Friday. Boone trashed my old dev site CV and I started over in order to do a little bit of a demo. Not sure what the wider problem might be.

I'm also not seeing the Edit Profile tab in Account Settings on the dev site, changed from Profile Visibility as per the screenshot here:

https://redmine.gc.cuny.edu/issues/17769#note-14

Sorry to combine both of these, but I thought it might be helpful if it's one Github branch re-alignment required.

Actions #43

Updated by Jeremy Felt 5 months ago

I'm having trouble seeing the editing options for my already-published CV on the dev site.

It looks like there's a bug in the profile navigation block that's not displaying the edit link properly. I'll take a look at that.

In the meantime, I'm hoping the direct link will work for you: https://commons.gc.cuny.edu/members/colinmcd/edit-cv/

I'm also not seeing the Edit Profile tab in Account Settings on the dev site

We can chat about this one - it may be that something is missing from the branch.

Actions #44

Updated by Raymond Hoh 5 months ago

I'm also not seeing the Edit Profile tab in Account Settings on the dev site, changed from Profile Visibility as per the screenshot here

I haven't worked on changing the "Profile Visibility" page over to the new "Edit Profile" design yet.

Actions #45

Updated by Sara Cannon 5 months ago


Here is an example of a cover image with a caption. We discussed that this will auto-populate on Ryan Seslow's covers. If you upload your own, you can add your own caption in the upload dialog and it will appear in the same place.

Actions #46

Updated by Jeremy Felt 5 months ago

Boone / Ray - can you please update CDEV with the latest from feature/17769-cv-editor?

Colin / Sara - once this is up, the new cover image flow will be available. I've added test images to start with.

Also updated:
  • The edit CV link should display correctly.
  • I've restricted some of the more wild blocks from use in the top area.
Actions #47

Updated by Raymond Hoh 5 months ago

Boone / Ray - can you please update CDEV with the latest from feature/17769-cv-editor?

Done!

Actions #48

Updated by Colin McDonald 5 months ago

Hi Jeremy, thanks for that cover image flow update. It's working well for me. Should there be a way as we discussed to add a credit line when it's your own uploaded image, though?

I've been working through the other pre-testing tweaks (more on that in a second), and I wanted to ask about how to return a CV to the default. Earlier here you said:

To clear a CV during testing, navigate to https://commons.gc.cuny.edu/wp-admin/edit.php?post_type=cac-cv and trash/delete your profile.

To see the migrated modal, edit your CV in the classic editor via that same screen and add a custom field of migrated_cv with a value like "yes".

I'm getting a permission error when I try to load that link, though. Not crucial, but would probably nice to test the different modals and default placeholder text a little more as we go through testing.

I was also looking at Ray's work in #19278 on allowing the editing of profile fields, which for now (see discussion in the ticket) we're building out separately from CV editing. Given that separation, should we have separate links for Edit CV and Edit Profile, rather than the "Edit CV/Profile" link that Jeremy just added back in? From the profile, one should be able to edit the profile fields that Ray is building or edit/create the CV fields, so we should have two different links or buttons, right? Not sure if I'm missing something that's already there for this. We'll definitely work through the different user flows (has prior profile info or not, has CV created or not, etc) in testing.

For language tweaks, I made a rough outline of the different blocks from the List View below and noted some changes to either block name (which I tried to make more consistent) or placeholder text:

CV Top

CV Heading Group

Block name change: CV Group to CV Sub-Heading Group

Placeholder text change: "A biography" to "Short bio"

Section title change: "Find me online" to "Social"

(How do you add/change social icons?)

Block name change: "CV Rows" change to "CV Bottom"

Block name change: "CV Section" change to "CV Bottom Section"

Then here's the full modal texts that I edited a bit:

(profile filled out previously)
Welcome to Your CV!

Our latest release [link to news post] introduces CVs, an extension of your Commons profile that provides a better public showcase of your academic and other credentials. You can add a large cover photo, change your profile image, and use custom blocks we've created to build out your CV.

To help you get started, we've migrated the info from your existing Commons profile fields into the CV's updated design and intuitive editor. Take a look at anything that needs altered or that you'd like to add, and check out our support documentation here (including this walkthrough video) to get the most out of this new feature!

EDIT CV | VIEW PUBLIC CV

(new user or no previous profile info)
Welcome to Your CV!

We're thrilled to announce [link to news post] that Commons users can now create a CV to use as a public showcase of their academic and other credentials.

We've pre-filled your name, photo, pronouns and title from your Commons profile to help you get started. Feel free to alter and add as much as you'd like! Don't forget items such as:

- Cover photo
- Social and other contact info
- Education history
- Academic interests
- Publications
- Current and past positions or experience

You can always come back to make further updates. Check out our support documentation [link] (including this walkthrough video [link]) to get the most out of this new feature!

GET STARTED

Actions #49

Updated by Jeremy Felt 5 months ago

Ray - when you have a moment, can you please pull the latest feature/17769-cv-editor to CDEV? Thanks!

A few changes are in that:

  • To start a CV over from scratch, switch to the code editor (see attached gif), delete everything in the text area, and then update the CV. When you visit /edit-cv/ again, the default template will be loaded.
  • To see the welcome modal, add ?modal=welcome to the end of your edit-cv URL. (e.g. https://commons.gc.cuny.edu/members/jeremyfelt/edit-cv/?modal=welcome)
  • To see the migrated modal, add ?modal=migrated to the end of your edit-cv URL.
  • All of the copy suggestions from Colin have been updated.
Actions #50

Updated by Colin McDonald 5 months ago

Many thanks, Jeremy! Ray, let me know when this is pulled in and I will send out the testing notes.

Actions #51

Updated by Raymond Hoh 5 months ago

Ray - when you have a moment, can you please pull the latest feature/17769-cv-editor to CDEV? Thanks!

Done!

Actions #52

Updated by Jeremy Felt 4 months ago

I've made some good progress on mobile styling for the editor and public views. That's up now in feature/17769-cv-editor

Boone / Ray - can you please pull that to CDEV when you have a moment?

Actions #53

Updated by Raymond Hoh 4 months ago

Boone / Ray - can you please pull that to CDEV when you have a moment?

Done!

Actions #54

Updated by Jeremy Felt 4 months ago

I'm still working through possible fixes, but the CV editor is broken in WordPress 6.4 because of changes to how private APIs are handled.

I misread the changelog for the Isolated Block Editor project when I last looked. It now only supports WordPress with Gutenberg 16.9.

Still digging!

Actions #55

Updated by Jeremy Felt 4 months ago

Okay, things are looking much better. Sorry for the maybe-too-loud alarm.

I've confirmed the latest version of Isolated Block Editor works with WordPress 6.4.x and Gutenberg 17.3.

Once feature/17769-cv-editor is up on CDEV, we'll need to activate Gutenberg on the main site.

I've noticed a minor layout issue that I'll address. Everyone should keep their eyes open for new bugs. :)

Ray/Boone - can one of you get this up on CDEV? Thanks!

Actions #56

Updated by Boone Gorges 4 months ago

Thanks, Jeremy! This is good news.

I've pulled the changes to cdev and activated Gutenberg. On a simple test, CV editing appears to be working.

Actions #57

Updated by Colin McDonald 4 months ago

Thanks, Jeremy. Can you confirm when the cover image uploader is in a good place, as per the latest discussion in #19748 ticket? Then I'll get Scott and others on retesting.

Actions #58

Updated by Boone Gorges 3 months ago

  • Deployment actions updated (diff)
Actions #59

Updated by Boone Gorges 3 months ago

  • Status changed from New to Resolved
Actions

Also available in: Atom PDF