Issue with Sensei Image Hotspot blocks

westnz commented 9 months ago

Description

When editing specific lessons in a course, I encounter an issue where certain blocks do not display correctly in the backend, accompanied by the message: 'This block contains unexpected or invalid content.'

Step-by-step reproduction instructions

Please list the steps needed to reproduce the bug. For example:

Go to https://learn.wordpress.org/wp-admin/post.php?post=32842&action=edit
Scroll down to the examples where image hotspots have been used.

Please note, this is only one example but also happens with other blocks such as Flashcard block: https://learn.wordpress.org/wp-admin/post.php?post=32844&action=edit & even the Video block: https://learn.wordpress.org/wp-admin/post.php?post=12045&action=edit

Expected behaviour

The blocks appear correctly.

Actual behaviour

The block needs to be recovered and you see the message: 'This block contains unexpected or invalid content.' You can recover the block, but it appears incorrectly again when you refresh or return to the lesson at a later stage.

Screenshots or screen recording (optional)

Environment information

Browser(s) are you seeing the problem on: Chrome
Device you are using: Macbook Pro

jonathanbossenger commented 9 months ago

Thanks for logging @westnz. To debug and replicate the issue, we need a link to an existing lesson where this is happening. Are you able to share such a link?

westnz commented 9 months ago

Ah, I did originally fill in the reproduction steps. Fixed! ⏫

jonathanbossenger commented 9 months ago

Thanks @westnz, I have also been able to replicate this on a test lesson

https://learn.wordpress.org/wp-admin/post.php?post=50087&action=edit

@adamwoodnz After looking into this, it looks like the Sensei image hotspot block sets a tabindex of -1 to the a tag used inside the image hotspot block, and somewhere along the line, this tabindex is removed.

Content generated by `save` function:

<div class="wp-block-sensei-pro-image-hotspots-hotspot" data-sensei-block-id="efad44b7-2ecc-4942-8316-b68f62cbe2e2" data-sensei-wp-block="{&quot;blockId&quot;:&quot;efad44b7-2ecc-4942-8316-b68f62cbe2e2&quot;,&quot;draft&quot;:false,&quot;x&quot;:55.53571428571429,&quot;y&quot;:24.136904761904763}"><button class="sensei-lms-image-hotspots__hotspot-marker" style="left:55.53571428571429%;top:24.136904761904763%"><a tabindex="-1"></a></button><div class="sensei-lms-image-hotspots__hotspot-tooltip wp-block-sensei-pro-image-hotspots-hotspot" style="--y:24.14%;--x:55.54%"><span class="sensei-lms-image-hotspots__hotspot-tooltip-arrow"></span><!--sensei:inner-blocks-->

<!--/sensei:inner-blocks--></div></div>

Content retrieved from post body:

<div class="wp-block-sensei-pro-image-hotspots-hotspot" data-sensei-block-id="efad44b7-2ecc-4942-8316-b68f62cbe2e2" data-sensei-wp-block="{&quot;blockId&quot;:&quot;efad44b7-2ecc-4942-8316-b68f62cbe2e2&quot;,&quot;draft&quot;:false,&quot;x&quot;:55.53571428571429,&quot;y&quot;:24.136904761904763}"><button class="sensei-lms-image-hotspots__hotspot-marker" style="left:55.53571428571429%;top:24.136904761904763%"><a></a></button><div class="sensei-lms-image-hotspots__hotspot-tooltip wp-block-sensei-pro-image-hotspots-hotspot" style="--y:24.14%;--x:55.54%"><span class="sensei-lms-image-hotspots__hotspot-tooltip-arrow"></span><!--sensei:inner-blocks-->

<!--/sensei:inner-blocks--></div></div>

What's interesting is that when I test this on my local development environment, I cannot replicate this error, which makes me think it's either to something elsewhere in the .org codebase and not something in the wporg-learn theme or plugin.

WordPress / Learn