Support » Plugin: WP Native Articles - Facebook Instant Articles Plugin for WordPress » Unsupported Class: unsupported class value in the class=op- tag.

  • Hello,

    I’m seeing an error in articles with recipes, using WP Recipe Maker. The error started appearing in posts around November 9th. The error says:

    “Unsupported Class: The <figure> element has an unsupported class value in the class=op- tag. For more information on the class values supported in <figure> element you’re using, refer to the Format Reference of the Instant Articles documentation.”

    And this HTML in the article is highlighted:
    <figure class="op-interactive"></figure><figure class="op-interactive"><iframe>

    This code comes right before WPRM styling.

    When comparing the HTML to previous articles which were working, I noticed a difference in the markup. The broken article has extra <figure> wrappers, the <iframe> tag is missing a class, and there’s a missing stylesheet wrapper.

    Broken HTML:

    <figure class="op-interactive"></figure><figure class="op-interactive"><iframe>
    	.wprm-nutrition-label, html body .wprm-recipe-container .wprm-nutrition-label {
    		max-width: 100%;
    		width: 350px;
    		padding: 5px;
    		margin: 0 auto;
    	}
    </iframe></figure><figure></figure>

    Previous working HTML:

    <figure class="op-interactive"><iframe class="column-width">
    <link rel="stylesheet" type="text/css" href="https://cdn.modernfarmer.com/wp-content/plugins/wp-recipe-maker-premium/assets/css/public/public.min.css">
    <style>
    	.wprm-nutrition-label, html body .wprm-recipe-container .wprm-nutrition-label {
    		max-width: 100%;
    		width: 350px;
    		padding: 5px;
    		margin: 0 auto;
    	}
    </style>
    </iframe></figure>
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author OzTheGreat

    (@ozthegreat)

    Hi Emma,

    Thanks for getting in touch. We are aware there’s a small bug with the Nutrition Label parsing for WPRM. It only happens for some Nutrition Labels though and we’re not quite sure what triggers it yet. We’re actually re-doing it for the next version, currently we use an iFrame so we can use non-IA elements and embed the stylesheet so it can try to reproduce the label exactly as it is on the main site, but, as you can see, it doesn’t quite work as well as we’d like. Instead we’re going to ditch the iFrame and brake it down and just re-format it using only allow valid IA elements. It’ll look different but it will stop the formatting errors

    The next version is ~ 2weeks though I’m afraid. If you’d like, in the meantime I can send you some code that will remove the Nutrition Label From IA and just provide a link back to the full Web Article?

    Also, may I ask if you’re using the Advanced Nutrition Plugin as well or just the standard one?

    All the best

    Wow, Glad to hear you guys are already on it! We can wait for the update. 🙂

    We don’t have the Advanced Nutrition add-on. We have WPRM and WPRM Premium.

    Thanks for the awesome support!

    Emma

    Plugin Author OzTheGreat

    (@ozthegreat)

    Ok great, thanks for the info and no problem 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Unsupported Class: unsupported class value in the class=op- tag.’ is closed to new replies.