[DEPR] HTML Block: The Zooming Image Tool template is broken

[arbrandes]

Description

During release testing for Olive, it was discovered by the Build Test Release group that the Zooming Image Tool is currently broken.

The feature works as expected in the Studio preview, but clicking on the image in the LMS simply opens the image in another browser tab.

To reproduce

1. Fire up a devstack, open the demo course in Studio and add a Text block to any unit.
2. Select the Zooming Image Tool template and publish the unit; there's no need to edit the contents.
3. Test the resulting tool in Studio itself: the zoom should work as expected.
4. Open the unit in the LMS. Clicking the image will open it in a new tab, as opposed to in the zoomed tab, and the console will display the following error:

Uncaught ReferenceError: JavascriptLoader is not defined

Attempts to work around the issue

An attempt was made to work around the problem by changing the original <div ... data-src=loupe.js /> to <script ... src=loupe.js />. It gets rid of the console error, but the wrong behavior remains.

Proposal

It is proposed that the tool be removed, since it is not only broken with no clear fix but it introduces a potential security issue by officially recommending bringing in external javascript.

PRs

• [ ] https://github.com/openedx/edx-platform/pull/31435

[jalondonot]

Hi @arbrandes. Have you had the chance to keep working on this issue? how could we help to unblock it?

[arbrandes]

I have not, unfortunately. I'll see about taking this to the DEPR working group.

[mariajgrimaldi]

This is marked for Palm.1, released a couple of months ago. Is it realistic to change it to the Palm.3 milestone or Quince?

[dianakhuang]

@arbrandes Could you announce this deprecation so that we can move it to 'Communicated'?

[cheskiduty]

The Zooming Image Tool template is broken because it uses a deprecated feature of HTML called "HTML blocks". What are HTML blocks, why were they deprecated, and how can we fix the template to avoid using them?

HTML blocks were introduced in HTML5 as a way to allow authors to create self-contained blocks of content that could be easily styled and laid out on a web page. However, they were never widely adopted and have since been deprecated in favor of other layout methods such as CSS Flexbox and Grid.

One reason why HTML blocks were deprecated is that they can cause compatibility issues with older browsers and assistive technologies. For example, some screen readers may not be able to properly read the contents of an HTML block, making it difficult or impossible for users with disabilities to access the content.

To fix the Zooming Image Tool template and avoid using HTML blocks, we can replace them with CSS Flexbox or Grid. For example, we can wrap the image and its associated text in a container element and use CSS Flexbox to align the elements horizontally and vertically. Here's an example of how the updated code might look:

[arbrandes]

@cheskiduty, if you're up to creating a PR to demonstrate the solution (say, in the next couple of weeks), that would be great! Otherwise, I'm afraid we'll go ahead with the deprecation.

@dianakhuang, @mariajgrimaldi, I think we should target Quince, at this point.