Add View Certificate Link to Course List templates

[alexsanford]

Part of https://github.com/Automattic/sensei/issues/6292

Also see https://github.com/Automattic/sensei/pull/6296

Changes proposed in this Pull Request

Add "View Certificate" button to the Course List block templates.

Notes

This was trickier than it seemed at first. In order to add the View Certificate button through a filter, we need to:

• Add the "View Certificate" block to the (locked) block template and the "allowed blocks" list of the Course Actions block. Note that the "View Certificate" block is actually a "button" block variation inside of a "buttons" block variation.
• In addition to the above (which allows the View Certificate block within the Course Actions block), we also need to filter the Course List block patterns (which is a PHP string containing the rendered output for the block content of each pattern) to include the View Certificate block with all of its appropriate styling.

This is a bit ugly tbh, but I'm not sure there a better way to do it. There are some implications of doing it like this:

• Since it's added to the pattern, if the Course List is already being used, the pattern will have to be reapplied in order to get the View Certificates blocks.
• Because the blocks are added unconditionally, and shown conditionally, there is a quirk: if the pattern is applied, and then the Certificates plugin is disabled, then the pattern shows a View Certificate button (which does nothing) on every Course in the list.
• That said, the assumption is that the Course List is probably not used in a lot of places on the site. The above problems should not be hard for users to fix if needed.

Testing instructions

• Enable this branch of Sensei (if the PR isn't merged yet) and this PR's branch of Certificates.
• Create some courses. Ensure that one is unstarted, one is started but not completed, one is completed without a certificate, and one is completed with a certificate.
• Create a page and add the Course List block.
• Try the different patterns for the block. For each one, ensure that the View Certificate button appears on the frontend only for the course which is completed and has a certificate.
• After testing, deactivate Certificates, remove the block, and add it again.
• As above, test with the different patterns, and ensure they work properly.

Design notes

cc @Luchadores

• For technical reasons, I adjusted the "List" pattern such that each button is the same width. This greatly simplified getting it to work well when adding the second button to come entries. Here is a screenshot, LMK what you think.

---

• This is the "Grid" pattern. I don't really like how it looks with the two buttons. Any suggestions?

[Luchadores]

Hey Alex 👋

First of all, this is nice! I wonder if View Certificate should be a primary CTA at all. Now we would have two buttons with the same importance on one card, and that doesn't look right.

Question: Is it essential to have "Show Certificate" right in the Course List block? What happens when I click View Results? Where does it send the user? Maybe we can have the "Show Certificate" there? I wanted to tag Ronnie also on this, but for some reason, I cannot find his handle.

Lastly, I would make sure the buttons align at the bottom perfectly in the row. What I mean by that is that I would align "Start Course" with "View Certificate" in all the columns.

[burtrw]

I think I asked for it, and I would prefer to link to it directly from the block :)

Aligning the buttons is an ongoing issue, though. What about if the course is complete we change to text links for Visit Results and View Certificate?

[burtrw]

Maybe like we have the 'Course Overview' link option?

[alexsanford]

@Luchadores I can definitely align the buttons to the bottom to fix that issue.

What are your thoughts on changing them to links instead of buttons as @burtrw suggested? Alternatively, I could change the certificate button to use the "outline" style instead of "fill" (see below for how this would look in Twenty Twenty-Three). Would that work?

[Luchadores]

What do you both think about this? @burtrw

Having "View Certificate" as a link under the Course Overview makes more sense to me.

[burtrw]

I like matching the Course Overview link - too many themes probably won't have the outline button style :(

[jom]

Hi Alex! Just checking some things.

• If I add the course list block before activating Certificates, when I do activate certificates the View Certificates button doesn't show up.
• If I click inside to add the View Certificates button manually, on the frontend after it shows up twice for completed course (did it partially fix on save?).
• If I then replace the block with the pattern again (with Certificates active), it works as currently designed.

[alexsanford]

@Luchadores @burtrw I've changed the design in the latest iteration to use a link, inserted under the "Course Overview" link. Here's how it looks now in my dev environment (note that "Course 1" is the only one that has a certificate):

Grid

List

[alexsanford]

@jom

If I add the course list block before activating Certificates, when I do activate certificates the View Certificates button doesn't show up.

That's correct. It's because the template is applied when the block is first added, and so we don't actually add the block. The user would have to remove the Course List block and re-add it.

If I click inside to add the View Certificates button manually, on the frontend after it shows up twice for completed course (did it partially fix on save?). ... If I then replace the block with the pattern again (with Certificates active), it works as currently designed.

Could you test again? I've changed how the link is added, so this behaviour should be fixed. I just tested and can't reproduce.