WordPress.org

Ready to get started?Download WordPress

Forums

wp stripping tags added by my plugin... where? how? why? (7 posts)

  1. pm0kjp
    Member
    Posted 5 months ago #

    Hi,

    I have a very thin plugin that takes the code from http://www.pebbleroad.com/labs/glossarizer and wraps it in a plugin. There's no admin panels or anything advanced... Just a JQuery plugin that looks for terms from a json list, and if it finds them, wraps them in an <abbr> with the title attribute being equal to the corresponding definition found in the json file.

    When I dump document.body.innerHTML to the console log, I can see that the plugin gets entered and indeed wraps the terms in those tags. But between the time my code executes and dumps that successful HTML to the console and the final delivery to the browser, the tags are removed.

    This is on a development site so I can't give access, it's behind a firewall currently. The plugin php is below:

    <?php
    /*
    Plugin Name: Glossarizer
    Plugin URI: http://www.research.chop.edu
    Description: This plugin wraps terms
    Author: Joy Payton
    Version: 1.0
    Author URI: http://www.research.chop.edu
    */
    
    // This allows <abbr> to appear in posts, or should.
    // when I dump these arrays I can tell that the changes below
    // do indeed change the globals... but I wonder if I'm missing
    // some other filtering mechanism?!?
    global $allowedposttags;
    $allowedposttags["abbr"] = array(
     "title" => true,
     "tabindex"=> true,
     "class" => true
    );
    global $allowedtags;
    $allowedtags["abbr"] = array(
     "title" => true,
     "tabindex"=> true,
     "class" => true
    );
    
    function glossarizer_js() {
    
    	wp_enqueue_script( 'jquery' );
    	wp_enqueue_script('gloss-tooltip', plugins_url() . '/glossarizer/tooltip/tooltip.js', array('jquery'), '1.2.3', true);
    	// gloss-tooltip'is currently unused but will eventually take the wrapped terms and drop a jQuery tooltip there.
    	wp_enqueue_script('glossarizer', plugins_url() .  '/glossarizer/jquery.glossarize.js', array('gloss-tooltip'), '1.2.3', true);
    	// glossarizer does the heavy lifting of traversing the dom, finding terms that are part of the glossary, and wrapping them in tags
    	// that include a title attribute equal to the matching definition
    	wp_enqueue_script('glossy', plugins_url() . '/glossarizer/glossy.js', array('glossarizer'), '1.2.3', true);
    	// glossy is what calls glossarizer for a given dom element, in this case a div with a specific ID
    
    }
      add_action('wp_enqueue_scripts', 'glossarizer_js');  // queuing up
      add_action('wp_print_scripts', 'glossy'); // not sure this is necessary?
    
    ?>

    Additionally, here is "glossy". The other two files are essentially unchanged from the glossarizer homepage.

    jQuery(document).ready(function ($) {
    
          jQuery('#article-wrapper').glossarizer({
            sourceURL: '/roadmap/wp-content/plugins/glossarizer/glossary.json',
            callback: function(){
              console.log(document.body.innerHTML);
              // when I dump the console log, the tags are there
    
             // new tooltip();  not using tooltips until I can make the tags stick!
           }
          });
    
          });

    Lastly, here's an example of what comes up in my console log as part of the document.body.innerHTML dump:

    <p>It happens to almost every parent of a <abbr tabindex="0" class="glossarizer_replaced" title="A smallish human">child</abbr> with <abbr tabindex="0" class="glossarizer_replaced" title="Definition here">Autism</abbr> Spectrum Disorder (ASD) at some point. You are in a grocery store, at the park, or a restaurant. Your <abbr tabindex="0" class="glossarizer_replaced" title="A smallish human">child</abbr> with ASD is not having a great day. Maybe<span class="ellipsis">…</span> </p><div class="read-more"><a href="/roadmap/cant-you-control-your-child-ways-to-respond/">Read more ›</a></div>

    HOWEVER, the final document does *not* have the tags! For example, the paragraph above renders thus:

    <p>It happens to almost every parent of a child with Autism Spectrum Disorder (ASD) at some point. You are in a grocery store, at the park, or a restaurant. Your child with ASD is not having a great day. Maybe<span class="ellipsis">…</span>
    </p>
  2. nickohrn
    Member
    Posted 5 months ago #

    If you're transforming the HTML on the frontend, there's no way that WordPress's filtering system would be interfering with what you're doing.

    How are you getting that final paragraph's source? Are you looking int he web inspector or using "View Source"? "View Source" won't reflect changes made to the DOM.

    Bring up the web inspector and run the following:

    jQuery('#article-wrapper').find('abbr').size();

    That should at least let you know if the abbr tags have been inserted appropriately.

  3. pm0kjp
    Member
    Posted 5 months ago #

    Hi Nickohrn,

    Thanks for your help. The final paragraph's source comes from Chrome's inspector... so I get the correctly marked up paragraph from the console, and the paragraph that's not marked up from the "inspect element" contextual link in Chrome.

    When I run
    jQuery('#article-wrapper').find('abbr').size(); I get '0' as the result.

    Could my changes that are getting dumped to the console log and look good be made in a shadow dom, and that's why they aren't showing up? I'm very confused! This is my first jQuery plugin and I wonder if that's a complication and if I shouldn't just do it as a callable function instead.

    Joy Payton

  4. nickohrn
    Member
    Posted 5 months ago #

    This is an interesting issue! I'm not sure how much help I can be without seeing the theme itself, but let me think about it. I'll try to post back within the next 24 hours.

  5. pm0kjp
    Member
    Posted 5 months ago #

    Thanks for putting your thinking cap on. Meantime, I'm reading http://jdmweb.com/how-to-turn-any-jquery-plugin-into-a-wordpress-one and also disabling all the other plugins I can in case there's a naming collision or some other nefarious behavior happening.

    Joy

  6. pm0kjp
    Member
    Posted 5 months ago #

    Holy s**t, after DAYS of hammering against this I realize that on single posts, it works... it's only in collated post snippets that it doesn't, and that's an ajaxing issue.

    Thanks for being a sounding board, it helped me organize my thinking. Now I can breathe again.

    Joy

  7. nickohrn
    Member
    Posted 5 months ago #

    Glad you figured it out :)

Reply

You must log in to post.

About this Topic