Like block: Make the block docs open in the Help Center sidebar

[ivan-ottinger]

Let's make the Like block docs open in the Help Center sidebar.

Context: pdtkmj-2jH-p2#comment-4251

Current doc we can use:

	'jetpack/like': {
		link: 'https://wordpress.com/support/likes/',
		postId: 7294,
	},

ETK file: apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-description-links/src/block-links-map.ts docs: PCYsg-ly5-p2.

We will need to consider what to do with the JP sites - maybe display simple link (that already exists) to JP docs (ref. projects/plugins/jetpack/extensions/blocks/like/edit.js).

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] pdtkmj-2jH-p2#comment-4251

[ivan-ottinger]

Hey, @donalirl 👋🏼

I started working at this and it looks like we may want to first create a dedicated Like block support page - that has formatting suitable for that Help Center. 🤔

Because with the current support page (https://wordpress.com/support/likes/) it would load like this:

https://github.com/Automattic/wp-calypso/assets/25105483/655fd759-3ced-4e2b-94d8-f0b555a4260e

[donalirl]

@ivan-ottinger Darn it. I used tabs to keep the block theme + classic theme instructions neat, but didn't realize it looked like this in the Help Center. I've removed the tab layout from the doc so it should be ok now.

cc @escapemanuele I've just realized we can't use tabs on /support due to how they render in the Help Center. Just putting this on your radar in case there's a quick fix.

[ivan-ottinger]

I used tabs to keep the block theme + classic theme instructions neat, but didn't realize it looked like this in the Help Center.

Yes, I like the tab layout. It would be great if it worked in the Help Center as well.

I've removed the tab layout from the doc so it should be ok now.

Thank you! 🙂 I will work on the PR for the Like block this week.

[escapemanuele]

@donalirl, how are the articles with tabs structured in /support?

Meaning, would it be ok if we remove the tab when rendering in the Help Center? I can think of a CSS solution to be a easy fix for this, but you'd lose the tab content on HC.

This is just an initial idea, so you don't have to remove Tabs while a better solution is implemented.

[donalirl]

@escapemanuele I just reverted the doc back to the tabbed version so you can take a look: https://wordpress.com/support/likes/#display-the-like-button

I think it would be ideal to keep the tabbed layout in the HC so that the information is neater and it avoids a long scroll on the article.

On the other hand, the HC window is small so perhaps it's best to avoid requiring the user to click on more UI elements like tabs (even though the instructions in first tab is what appeals to most users, while we keep the second tab for less-common instructions like classic themes.)

Feel free to implement a quick solution as opposed to the most ideal solution. The most important thing would be to ensure the content is readable in the HC, whether or not in keeps the tabbed layout.

[ivan-ottinger]

Here is the PR that adds the doc to the Like block: https://github.com/Automattic/wp-calypso/pull/87419. It is not ready to be merged yet - as we will need to make a change to the block itself on the Jetpack side as well (to remove the old link from the block sidebar).

[escapemanuele]

Ok @donalirl, this https://github.com/Automattic/wp-calypso/pull/87425 will hide the tab list for now. We'll need to study something for the tab component.

[ivan-ottinger]

We now have the link in the sidebar of the Like block, I just noticed a couple of formatting issues. It seems to me it might be possible to address these issues by editing the support page itself. 🤔

Here's the screen recording:

https://github.com/Automattic/wp-calypso/assets/25105483/0c11bbcb-19ba-4e1b-a656-b956ff2107b9

[donalirl]

@ivan-ottinger Of the two issues you've highlighted, not much can be done by editing the doc itself:

• Captions appear narrow - this is how image captions are rendered in the help center for all docs that I can see.
• Images are too wide for the window - I checked both images and they're inserted as normal, no custom width set or anything like that.

Interestingly, the images appear fine for me in Calypso:

but then when I view the doc in the editor's Help Center (is that a different instance?) the issue appears:

cc @escapemanuele

[ivan-ottinger]

Of the two issues you've highlighted, not much can be done by editing the doc itself

Thanks for sharing, Donal!

[escapemanuele]

I wrote a long post to show that on my end it was all correct, and then realized you pointed me to the editor. Indeed there the errors appear!

It is due to some errors in editor CSS sneaking into the Help Center, like for .wp-block-image.aligncenter>figcaption. We'll fix this :)

[ivan-ottinger]

Just noting that I am closing this task - since it is related to making the block docs open in the Help Center sidebar.

It is due to some errors in editor CSS sneaking into the Help Center, like for .wp-block-image.aligncenter>figcaption. We'll fix this :)

Thank you, Emanuele! 🙇

Do you have a dedicated task for this issue? 🙂 Just checking whether we should create it.

[escapemanuele]

Hey @ivan-ottinger, this issue should have been fixed! Let me know if you don't see the changes ✌️

[ivan-ottinger]

Hey @ivan-ottinger, this issue should have been fixed! Let me know if you don't see the changes ✌️

When checking the formatting, it seems to be the same as @donalirl observed earlier - everything is looking good when opening the Help Center in Calypso, but not when opening it in the editor:

Calypso	Editor

[escapemanuele]

Hey @ivan-ottinger, you're right, we fixed another issue and I got confused! @renancarvalho will take a look at this as soon as possible 👍

[ivan-ottinger]

Thank you, Emanuele and Renan!

[escapemanuele]

@ivan-ottinger, could you please check again?

[ivan-ottinger]

It is looking great! 😎 Thank you very much, Emanuele!