As a follow-up to our article back in August on Facebook Instant Articles, today we’re sharing our Transformer Rules for the Divi framework. We ended up with the following Custom Facebook Instant Articles Transformer Rules to make Divi acceptable to Facebook Instant Articles markup. You can find the rules already incorporated into the Instant Articles for WP plugin on GitHub. Our list of rules is undoubtedly incomplete, so please use at your own risk ;). We have provided it in the hopes that it will help others working with Divi and WordPress in making their content accessible via FBIA.
In general, you can use the “class”: “PassThroughRule” to pass any Divi style through the Transformer. Just prepend “div.” to the style name in the “selector”: field. Many examples can be found below, and still more examples can be found on GitHub.
You should also note that there is a hierarchy inherent in the rules. The rules are applied in the order of BOTTOM to TOP, which is counterintuitive.
Finally, if appears that you can also prioritize the rules. “selector”: “//a[descendant::img]” appears to be “more precise” than just “selector”: “a[descendant::img].” Thanks to remino on GitHub for these insights!
is more “precise” than just a and therefore should take priority
{
"rules":
[
{
"class": "PassThroughRule",
"selector": "aligncenter wp-image-638 size-full"
},
{
"class": "PassThroughRule",
"selector": "h1.aligncenter"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_section"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_section_0"
},
{
"class": "PassThroughRule",
"selector": "div.et_section_regular"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_row"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_row_0"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_column"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_column_4_4"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_column_0"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_text"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_module"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_text_align_left"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_text_0"
},
{
"class": "PassThroughRule",
"selector": "div.et_pb_bg_layout_light "
},
{
"class": "AnchorRule",
"selector": "a",
"properties": {
"anchor.href": {
"type": "string",
"selector": "a",
"attribute": "href"
},
"anchor.rel": {
"type": "string",
"selector": "a",
"attribute": "rel"
}
}
},
{
"class": "PassThroughRule",
"selector": "//a[descendant::img]"
},
{
"class": "PassThroughRule",
"selector": "pre"
}
]
}
Please leave us a comment below if you find anything we’ve missed.
