Footnotes is not AMP compatible

Hi @psykonevro

Thank you for your appreciation, and for drawing our attention on AMP. After trying hard to make some sense of the concept, I must confess that I’m unable to take action. That may be due to my status and level; I’ve only joined in recently as a maintenance programmer (not plugin author as WordPress decided to mislabel any plugin committer; that issue has been reported on Meta Trac: https://meta.trac.wordpress.org/ticket/5553#ticket), and I never really used WordPress earlier than this year.

I noticed that AMP plugin complains about footnotes not being AMP compatible.

It seems like there were two different AMP plugins. I’ve tried them both. Which one are you quoting?

One of them, authored by the AMP project, lists plugins, among which Footnotes, and proposes to disable them while it’s still unable to produce the least accusation against any of them. The status of Footnotes as well as of all other plugins in the list is:

“No validation errors yet detected.”

May you please post the exact message you get, because I’m unable to reproduce it although I’ve run the test in a live sandbox hosted on powerful servers (powered with 100% renewable energy).

More precisely, with respect to the theme and the Footnotes plugin, this AMP plugin proposes to switch to a damaged page format where the design is destroyed and the functionality is completely pulled down. I can figure out that such pages load faster, but not, to what avail.

Reading your blog posts takes much more time than loading them even without AMP, and I think it’s worth the waiting. So my current suggestion based on ignorance is that instead of compromising your website’s quality, you just uninstall any AMP plugin.

Having said that, I take the subject very seriously. It raises much concern. At Footnootes I see a problem with wasteful code as the tooltip script is inserted in extenso at each instance instead of being centralized like the scroll script. But obviously there was no other way to get these jQuery tooltips to work. If you are interested in lean tooltips and zero script libraries loaded specifically for footnotes, then I’d suggest to enable alternative tooltips, in Footnotes’ dashboard > Referrers and tooltips > Tooltips > Display alternative tooltips. Currently tooltips although enabled seem inhibited. Some themes inhibit jQuery tooltips, but in OceanWP they work fine. Perhaps the issue is with site caching. The caching plugin that may be used seems to disable loading the libraries needed for the tooltips to show up.

Thanks again for bringing up all these issues. I’m looking forward to additional information, and I’m hoping that your website will get fixed in the process.

Best regards.

• This reply was modified 3 years, 4 months ago by pewgeuges. Reason: clarify my status and level; my problem is not to be a maintenance programmer, but to ignore many aspects of WordPress; sorry for that
• This reply was modified 3 years, 4 months ago by pewgeuges. Reason: “current suggestion” instead of “current advice”, given I’m not in a position to give advice!

@psykonevro

Thank you for the info about which plugin you are using. I just went through the setup and was given the option to re-enable all invalid elements, among which things like the “onclick” attribute, and when lean tooltips are enabled, the “onmouseover” and “onmouseout” along with the very small script firing up the tooltips:

<script content="text/javascript">
    function footnoteTooltipShow(footnoteTooltipId) {
        document.getElementById(footnoteTooltipId).classList.remove('hidden');
        document.getElementById(footnoteTooltipId).classList.add('shown');
    }
    function footnoteTooltipHide(footnoteTooltipId) {
        document.getElementById(footnoteTooltipId).classList.remove('shown');
        document.getElementById(footnoteTooltipId).classList.add('hidden');
    }
</script>

Even that bit of JavaScript is forbidden in AMP.

Also, now, Footnotes is having a validation error: “invalid inline script”. In comparison, Elementor has 22 validation errors, all about invalid scripts, script elements and inline script.

For Footnotes, AMP boils down to not having tooltips, and needing hard links to scroll back and forth (more accurately: forth and back). For that sake, we could also add an option to have those basic tooltips displaying the “title” attribute of a hovered element.

If I fix it by bulk-keeping and marking as reviewed all “invalid” instances, the page won’t be AMP compatible any more:

AMP is disabled because some invalid markup has been kept. To enable AMP to be served, either mark the invalid markup as “removed” or provide an AMP-compatible fix that eliminates the invalid markup from being generated in the first place.

Okay, if that’s our roadmap, and it meets user demands, we’ll try and hopefully make a better plugin — the other way around. Because it would be irresponsible to not provide the needed features now that so many writers are stuck with WordPress.

Beside that, the tooltips are still not working on your website. It’s not the theme (some themes disable Footnotes’ jQuery tooltips, and some even disable CSS transitions). That poses the question whether tooltips are desired at all. If not, best is to disable them in Footnotes’ dashboard’s Referrers and tooltips tab > Tooltips > Display tooltips. That avoids loading as many instances of the not AMP compatible inline tooltip script. Some other footnotes plugins use basic tooltips as browsers display them by default (with content loaded as value of the “title” attribute). Are you interested in these basic tooltips?

Plus: Before heading into AMP, please read also this:

https://www.polemicdigital.com/google-amp-go-to-hell/

After all, we on Footnotes can weaponize AMP to reinstate hard links… These don’t hinder scroll animation.

Thanks!

• This reply was modified 3 years, 4 months ago by pewgeuges. Reason: completed parenthetical, was: “(some themes disable tooltips)”
• This reply was modified 3 years, 4 months ago by pewgeuges. Reason: Added Plus
• This reply was modified 3 years, 4 months ago by pewgeuges.
• This reply was modified 3 years, 4 months ago by pewgeuges.

@martinneumannat

Many thanks, also for your initial request, that I’d respond to once done with re-adding the hard links. Sorry for removing them since 2.0.4 (reverting to the pre-2.0.0 status).

I’m glad that now the point of disabling JS is established. Indeed with JS enabled, scroll animation works, and without JS, hard links work. What I missed out by that time is on implementing the offset in CSS. The scroll offset is important as many websites have fixed headers, so disabling JS destroys UX: footnotes are hidden behind the header, referrers too, unless we manage to get a scroll offset with CSS.

The tooltip implementation the AMP way seems impossible until support for Element.classList.add and Element.classList.remove is added, see just opened issue https://github.com/ampproject/worker-dom/issues/1015 Currently only Element.classList is allowed, or I’m missing something.

The few lines of JavaScript quoted above are forbidden unless we use this: https://amp.dev/documentation/components/amp-script/

Thanks for the amp_is_request() to be used; this adds a 1800 extra lines of PHP, to no avail since the onmouseover and onmouseout attributes are prohibited anyway, leaving no chance.

I think the AMP approach is missing the point. Including those few innocuous snippets in the chase seems somewhat overkill.

@psykonevro @martinneumannat

After releasing 2.3.0 with an option to enable hard links for AMP compatibility (https://wordpress.org/support/topic/making-it-amp-compatible/#post-13851902), we’d need to underscore how hard it is for footnotes and tooltips to become AMP compatible. While the scrolling and its offset are feasible, the styled tooltips with hyperlinks in them, and a hyperlinked Read-on button, seem impossible without at least a bit of JavaScript including the prohibited (by AMP) onmouseover and onmouseout events. The issue I opened on GitHub to get support for adding and removing classes is still unanswered (https://github.com/ampproject/worker-dom/issues/1015). What can be done with CSS, including colorful transitioning tooltips (https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag), seems deprived of the ability to have clickable elements, giving an incomplete idea of the footnote text unless HTML markup is shown in the plain text.

Moreover, on smartphones the jQuery tooltips don’t adapt to the screen edge, unlike what is seen on desktop, at least in Chrome (needs to test in Brave and Opera for Android, that are also able to load fully fledged pages by AJAX, where Chrome, Edge and Firefox are failing). As a consequence, on smartphones we’d better ditch tooltips, so that AMP dumbed-down pages are expected to be just fine with Footnotes 2.3.0.

The shortcode balance validation feature and some announced styling settings are not present yet; hopefully they will be in one of the next releases. This one really needed to become available before this evening when many writers may have time to check out Footnotes’ new 2.3.0 under COVID lockdown.

Many thanks for your requests and cooperation! Stay safe and happy Holidays.

Edit: The extra templates should probably be shipped with a future version along with the request function needed prior to loading them. Thank you for linking this resource. Hopefully meanwhile the AMP plugin can make the necessary changes as of removing JavaScript, assisting Footnotes while I’m unsure whether the needed time will be available.

• This reply was modified 3 years, 3 months ago by pewgeuges.

Thank you!

The global brainstorming depends on everybody putting their knowledge on the table. WordPress with footnotes capability is key in this process.

Safe and healthy new year!