Support » Plugin: footnotes » References section not expanding with Elementor Accordion

  • Resolved morsagmon

    (@morsagmon)


    When using Foornotes with Elementor Accordion element, the “+” button to expand the list of references at the bottom of every accordion section, only works in the FIRST accordion section but not in any of the other sections.

    1. Preferably, I’d rather have those references at the bottom of the POST for all accordion sections, not independently for every accordion section.

    2. If not possible, at least fix so that referenced can be expanded for every section.

    WordPress 5.5.3
    PHP 7.3.23 (64bit)

    Activated Plugins:
    Duplicate Page 4.3
    Duplicate Page and Post 2.6.3
    eStore Credit Card Default PayPal Checkout Option 1.1
    Extra Shortcodes for WP eStore 5.1.9
    footnotes 2.1.1
    Media Library Folders for WordPress 6.0.4
    PDF Embedder 4.6.1
    PDF Poster 1.6.3
    SG Optimizer 5.7.6
    SmartVideo 2.0.19
    TablePress 1.12
    UpdraftPlus – Backup/Restore 1.16.35
    WP eMember 10.1.7
    WP eStore 8.0.7
    WP Maintenance Mode 2.2.4
    Elementor 3.0.13
    Elementor Pro 3.0.5
    Yoast SEO 15.3

Viewing 15 replies - 1 through 15 (of 21 total)
  • Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon

    Thank you for adding your voice to this thorny issue. We’re about to reach out and welcome any feedback to gain priority at Elementor. The more threads we can link to, the better are the odds to raise concern and obtain a solution.

    1. Preferably, I’d rather have those references at the bottom of the POST for all accordion sections, not independently for every accordion section.

    That is also what I’d expect. Footnotes uses the WordPress hook the_content. According to WordPress’s design, the_content encompasses a page or post, to which Footnotes appends the reference container. AFAICS this design is broken as every accordion section is passed over as if it was the_content.

    2. If not possible, at least fix so that referenced can be expanded for every section.

    @docteurfitness implemented a similar fix for autoload / infinite scroll. In the appended pages/posts, the Footnotes scripts to expand and collapse the reference container and to scroll back and forth between footnote referrers and backlinks only work when the functions are disambiguated by adding the post ID to the function names. WordPress provides a function and an object to generate this ID.

    About Elementor, we know that it assigns each accordion section a section ID. But, to get those IDs, I didn’t find any method/function in Elementor’s API as it is documented https://developers.elementor.com/elementor-pro-apis/ I only find the function to get the section name: Element_Section::get_name() https://code.elementor.com/?s=section Perhaps this will do; next development version shall include experimental support for this.

    We’ll add this thread to our upcoming request to get support from Elementor should nothing work so far.

    Looking forward,
    Best regards

    Related: https://wordpress.org/support/topic/reset-footnotes-to-1/

    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon
    Our new, currently distributed bugfix release 2.1.2 https://downloads.wordpress.org/plugin/footnotes.2.1.2.zip includes support for the Elementor get section name function:

    
    // post ID to make everything unique wrt infinite scroll and archive view
    global $l_int_PostId;
    // add support for Elementor section names:
    // Element_Section::get_name()
    // see <https://code.elementor.com/?s=section>
    if (function_exists('Element_Section::get_name')) {
        $l_int_PostId = Element_Section::get_name();
    } else {
    // work in WordPress mode:
        $l_int_PostId = get_the_id();
    }
    

    Normally this should fix it, but it needs to be tested if it fulfills.

    Thread Starter morsagmon

    (@morsagmon)

    Thanks, @pewgeuges for your support on this,

    Upgraded to 2.1.2 in the admin panel, did not fix it.
    I wanted to verify the above code has been introduced, which file and folder in the footnotes plugin does this code go into?

    Mor

    • This reply was modified 4 months, 3 weeks ago by morsagmon.
    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon

    Sorry please for not being specific. The code is in wp-content/plugins/footnotes/class/task.php in 2 instances: lines 377..387 and 548..558.

    Also we just checked in a test page using Elementor accordion, and the function as you reported doesn’t work.

    We’re investigating further on the issue. Apologies for not having completed yet.

    @pewgeuges

    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon
    We need the tab index 'tabindex' => $id_int . $tab_count to disambiguate the functions added to the page source by Footnotes. The snippet quoted in https://code.elementor.com/methods/elementor-widget_tabs-render/ doesn’t show how these variables are defined, yet we need to define them in Footnotes’ task.php.

    Per includes/widgets/tabs.php:336 we have:

    
    $id_int = substr( $this->get_id_int(), 0, 3 );
    

    But $tab_count is just the index+1, and Footnotes seems to have no means to know what index it is currently in.

    I don’t understand why Footnotes stops parsing and starts appending the reference container at each section end.

    Any idea?

    Plugin Author pewgeuges

    (@pewgeuges)

    Footnotes relies on WordPress the_content() (class/task.php:254):

    
    @param string $p_str_Content Page/Post content
    @return string Content with replaced footnotes
    

    The content is what the reference container is appended to (class/task.php:351):

    
    // append the reference container
    if ($p_bool_OutputReferences) {
        $p_str_Content = $p_str_Content . $this->ReferenceContainer();
    }
    

    We should know how Elementor delimits the content in a page and chops it into multiple units, then work around it.

    Thread Starter morsagmon

    (@morsagmon)

    Sounds like a matter of negotiating with the Elementor team to resolve the ambiguity issue.
    I trust you will work out a solution.

    Thanks!

    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon

    Thank you for your confidence.

    Our current best pick is to set Footnotes priority level to 0 (or somewhat lower, say 1000) for the the_content hook, in Footnotes’ dashboard under the Expert mode tab (enable Expert mode at the bottom of the Settings tab, then reload the page).

    The problem that caused many issues with positioning the reference container or even with the plugin to barely work (when conflicting e.g. with a specific glossary plugin) is priority levels. They were hard-coded to lowest (PHP_INT_MAX) in class/task.php:61-121 (now).

    Since our current v2.1.2, there is a priority level setting for each hook that has a checkbox under the Expert tab. The most important priority level is the one for the_content. They all still default to lowest (PHP_INT_MAX), but raising the default to 10 seems worth considering for the Footnotes plugin.

    What I’d suggest is that you set the_content priority level to 0, then look whether the reference container lands at the bottom of the content, with all footnotes in it.

    Thanks for giving it a try. Hopefully that will solve the issue!

    Sorry for not testing it myself. I’m unable to use Elementor, due to a system requirements mismatch.

    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    • This reply was modified 4 months, 3 weeks ago by pewgeuges.
    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon

    Per elementor/includes/frontend.php:31, Elementor grants itself priority level 9 on the_content. The only levels left to others are 8, 7, 6, 5, 4, 3, 2, 1 and the highest possible: 0 (out of 9 223 372 036 854 775 808 levels).

    The conception that there is a need to negotiate with the Elementor team is not far from reality.

    After you’ve had a chance to test what Footnotes does at one of the priority levels enumerated above, please let us know, no matter whether it fails or succeeds.

    Thank you in advance.

    Plugin Author pewgeuges

    (@pewgeuges)

    It depends on the theme. Sadly you need to change for another theme until it works. Twenty Twenty is a good pick with this respect.

    I’ve had the chance to test a theme that even tripled every accordion I dropped into the canvas. And messed with the footnotes the way that you’ve reported. Then I switched to Twenty Twenty, and everything worked fine. Footnotes of the entire page in a single container as intended.

    Please forget about everything else I wrote in this thread. Priority level does nothing to it. A level of 0 through 9 only prevents Footnotes from working in Elementor, I’ve become able to see (after changing my HDD for Windows 10 and installing latest Chrome; forgot that it was so easy).

    Themes are crucial. Best is to choose an Elementor-ready theme. The first item of Elementor’s FAQ is:

    **With Elementor, do I still need a theme?**

    Yes. Think of it like this: a theme is like the frame of the picture, and Elementor is the tool to paint the picture inside the frame.

    Moreover, a theme is the very canvas that you are going to paint on. If the canvas is broken, your website will be, too. That is no news, but I need to point out that even a good-looking theme may have hidden defects. These won’t matter unless a critical feature is used. I didn’t suspect that themes have the opportunity to split the reference container into multiple units in a single page, but some themes indeed are doing this, while others don’t.

    That makes choosing a theme even more complex. I’d love to fix your theme, and I hate to dismiss requests, but sadly I currently cannot do anything about it; also I see it as a rabbit hole. Best is to choose a rock-solid theme that everything will work fine in.

    Sorry for taking all that time to come up with so simple a solution.

    Thread Starter morsagmon

    (@morsagmon)

    Hi and thank for your update.

    Selecting a theme is indeed a huge task for us.
    It’s not that trivial at all, as our site is RTL, with over 150 posts/articles and already designed with Elementor.

    We are using the Elementor Theme (child).

    Elementor offers highly popular products used by many customers. What are they saying about this mismatch? Have you discussed this with theme?

    Plugin Author pewgeuges

    (@pewgeuges)

    Hi @morsagmon,

    Thank you for your feedback. I’m saddened that you are having this trouble with the very Elementor theme, and that your website is already established. I feared it but hoped that eventually you are in the process of building it, where themes can still be switched easily.

    Sadly we did not yet reach out to Elementor, as we were still in the process of setting up a test, but now definitely I need to email or post, whatever is offered. Probably open an issue on GitHub, since that is the place where Elementor invites to join in.

    Yes Elementor has five million users, only we didn’t check it out yet.

    Given you are using a child theme, did you make many changes or CSS only? Would you like to clone your website into a sandbox and try out how it works when using Elementor theme vs WordPress Twenty Twenty theme? With an online sandbox you might share a link to Elementor and document how it disturbs a big website, so as to put pressure for the issue to be raised to top priority!

    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon

    Sorry I fail to retrieve the Elementor theme.

    Elementor team uses Hello Theme to test Elementor: https://elementor.com/hello-theme/

    Elementor teammate Ariel K. (@arielk-1) recommends using WordPress default theme as part of the assessment process prior to launching a new support thread: https://wordpress.org/support/topic/please-read-before-you-post-an-issue/

    The test page I made up in WordPress TwentyTwenty has a paragraph of text with a footnote numbered 1, an accordion with two headings and a footnote in each one’s text, numbered 2 and 3, some text as a plain paragraph with a footnote numbered 4, and a second accordion with two headings and a footnote in each one’s text, numbered 5 and 6. The single reference container below contains six footnotes, is collapsed by default and expands and collapses on mouse click next to [+].

    The first problem on your website is that there are multiple reference containers in the same page. Such multiple containers not expanding on click is only the consequence of them being multiple, as the related JavaScript functions all have the same name and the same argument. In fact, a click on the [+] of the supplemental containers causes the first one to expand, which is normal behavior of JavaScript under these circumstances.

    The problem is now identified as a bug of the theme, in relationship with Elementor accordions and Footnotes reference containers.

    You have three options:

    1. Report the bug at Footnotes;
    2. Report the bug at Elementor;
    3. Report the bug at the Theme Author.

    #1 is done. #2 is to do the same on the Plugin’s Forum, after gathering the required supplemental information. For #3 we need to know the theme’s handle and whether it offers support on the WordPress forum or elsewhere.

    At this point, Elementor’s GitHub repository (that I’ve mentioned) is not an option because it is dedicated to development. Basically, after handling the bug as a bug, and depending on the resulting fix, it may turn into a feature request as of bullet-proof theme support.

    That however seemingly isn’t the way Elementor works. Elementor doesn’t seem to adapt to themes. Instead, Elementor recommends a number of themes as fully supporting Elementor.

    As the bug doesn’t occur when I use TwentyTwenty, Elementor may eventually dismiss the issue as theme dependent. In order for us to nevertheless request support, I need to run more tests, this time using the exact same theme as you are using. That is also the precondition for me to try to get a workaround tailored to your needs, although I have little hope to get there.

    Otherwise you may still try and request support from Elementor and/or from your Theme Authors; but given the above, sadly Footnotes may not follow up.

    Looking forward,

    Best regards,
    @pewgeuges

    Thread Starter morsagmon

    (@morsagmon)

    Thanks for the update and detailed assessment.
    Our website is still not in production. It is designed and in the process of uploading content.

    I’m comfortable of letting you in to see this first hand with the active theme.

    Send me your email address and I’ll create an account for you.

    You can send to: mor.sagmon@gmail.com

    Thanks!

    Plugin Author pewgeuges

    (@pewgeuges)

    @morsagmon

    I’m relieved that your website is not in production yet, and changing things won’t hurt visitors.

    So let’s try to get a solution.

    Just sent you an email of this content.

    Best regards,

    @pewgeuges
    On behalf of the Footnotes WordPress plugin

Viewing 15 replies - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.