jcpacelli

You’re right, they don’t. I finally got to the bottom of how they work on my site. The was I understand it is this:
Instant Articles match a lot of default WordPress functions so they display properly. But, a lot of themes don’t adhere to the default WordPress functions. Therefore, Instant Articles has no idea what “awesome-gallery-edit-wrapper” is (in the OP’s case).
So to allow compatibility with most themes, classes, shortcodes, etc., they created the ability to make Custom Transformer Rules which tell Instant Articles what “awesome-gallery-edit-wrapper” is.
So, in my case, Instant Articles didn’t know what a couple of my shortcodes were, so I had to tell it what they were or simply tell them to ignore it. You match your selectors to their predefined Transformer Rules

Here are my custom transformer rules:

{ "rules": [ { "class": "PassThroughRule", "selector" : "span.dropcap" }, {
 "class": "AnchorRule",
 "selector": "a",
 "properties" : {
   "anchor.href" : {
     "type" : "string",
     "selector" : "a",
     "attribute": "href"
   }
 }
}, {
        "class": "LineBreakRule",
        "selector": "br"
    }, { "class": "SlideshowImageRule", "selector" : "dl.gallery-item",
 "properties" : { "image.url" : { "type" : "string",
 "selector" : "img", "attribute": "src" },
 "image.caption" : { "type" : "element", "selector" : "gallery-caption" } } } ] }

So, to explain that code, the first one is only telling Instant Articles to ignore my span.dropcap selector, using the PassThroughRule. The second one is telling IA that my a is a link, using their AnchorRule. Notice there are also properties associated with that portion of code. Some of IA’s rules take parameters, and in this case, all that is doing is specifying what the type is, etc. Third one is just telling IA that my br selector = LineBreakRule. The fourth one is just like the AnchorRule from above. It’s just telling IA that my dl.gallery-item is a slideshow image using IA’s SlideshowImageRule. The properties of that one just define which selector = the image.url and the image.caption.

It seems a lot more complicated than it really is. Just pay attention to the syntax when making your custom transformer rules. ie, “class” is not your CSS class, it’s IA’s predefined Transformer Rule.

Any updates to this? Also having shortcode issues. Theyre displaying as straight text.

Did you ever find a solution to this? I too would like to accomplish something similar.

-John