Thanks for raising this. I can indeed see this is a bug, and a challenging one given how stylesheets are processed by the AMP plugin.
You can see that the inline style
was extracted and replaced with a custom class name amp-wp-1527650
:
<span class="cat amp-wp-1527650"><span class="cat-name">{{category.name}}</span></span>
Nevertheless, when the color value of {{category.color}}
was attempting to be put into the stylesheet, it naturally failed because of a syntax error and it’s no longer in a template.
One option would be to switch to use some category.slug
as a CSS class name and then have the category/color mapping in the page. This will introduce other challenges, however, as the tree-shaker will want to remove those style rules.
I suppose the quickest solution is to avoid extracting style
attributes from elements that appear inside of a template
. AMP now allows such inline style
attributes, as long as you don’t use !important
. We’ll have to work out a patch for the plugin to fix this issue for you.
Thread Starter
Artneo
(@artneo)
Awesome! Thank you so much for the reply!
Thread Starter
Artneo
(@artneo)
I just checked it and it’s rendering the inline style just fine. Thank you Weston for the quick response and solution.
Hi Andre,
Was looking at your website, and it is a great AMP-first site. Great work!
Best regards.
Thread Starter
Artneo
(@artneo)
Thank you Alberto! I felt in love with the speed and all AMP’s components functionalities. So I’m trying to create my own WordPress themes focusing on AMP and I’m learning a lot along the way. Now I’m creating websites only with AMP for my new clients and your plugin does help me a lot with comments, forms and Gutenberg compatibility. Looking forward to your future plugin updates and news. Thank you again!
@artneo We added your site to the Showcases Section of the Official AMP plugin site:
https://amp-wp.org/showcase/artneo/
Looking forward to adding more great themes from you 🙂