Issue on AMP stylesheets sanitizing

PenciDesign replied

5 years ago

Staff Reply

Hi,

No - I can confirm our AMP plugin doesn't render the code:

<style id="" media="all">

Our AMP plugin will render the fonts by structure:

<link rel="stylesheet" href="link_to_google_fonts">

And it is valid for AMP and doesn't caused any issue like that.

I can sure 90% you're using a caching plugin with optimize google fonts option and it auto cover the google fonts from our stylesheet:

<link rel="stylesheet" href="link_to_google_fonts">

to:

<style id="" media="all">

You can check it again with your caching pluginIt seems it apply for google fonts for AMP also.

Best Regards,

PenciDesign

JohnDF replied

5 years ago

Customer Reply

This is not a support ticket :) this is just an advice.

Check both websites now:

- https://knitmuch.com/amp/multi-seasonal-knitting-with-wool-pop/
- https://quiltsocial.com/amp/introducing-the-new-baby-in-my-quilt-life-oliso-mini-project-iron/

The errors are gone.

I just comment the line #10 at includes/amp-post-template-actions.php.

There is an error in the "penci_amp_post_template_add_fonts" function. The stylesheets sanitizer has a bug but it's looks like it's not neccesary to fonts so please bypass this in the next update :)

PenciDesign replied

5 years ago

Staff Reply

Hi,

I just checked on https://knitmuch.com/amp/knitting-a-top-this-hat/ and I see the issue gone now. The stylesheet has render correctly now. Strange, have you edited the AMP files or deactivate plugins?

Best Regards,

PenciDesign

JohnDF replied

5 years ago

Customer Reply

Hi there,

Those lines werent' added by us.

It happened in both websites, quiltsocial.com and knitmuch.com, at the same time after the latest update.

Check my previous comment. The root of the issue is in includes/amp-post-template-actions.php, in the following add_action:

add_action( 'penci_amp_post_template_head', 'penci_amp_post_template_add_fonts' );

PenciDesign replied

5 years ago

Staff Reply

Hi,

This issue caused by you've used Custom CSS here:

http://prntscr.com/v1ptz5

Please note that: Google AMP doesn't allow for custom CSS by use the code like:

<style id="" media="all">

AND Important: It's limit the CSS size to be loaded.

Check more here:

https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/

So, please remove all your custom css and use options from Appearance > Customizer AMP > Typography Options

Best Regards,

PenciDesign

JohnDF started the conversation

5 years ago

Conversation Start

Hi there,

The stylesheets sanitizer is not working properly. See the attached screenshots, the same happens in all the AMP pages.

The root of the issue is at includes/amp-post-template-actions.php.

The stysheets added by penci_amp_post_template_add_fonts action are not being sanitized the right way. If the comment the following line at the function "penci_amp_post_template_init_hooks", the warnings are gone but the pages loads without any font:

add_action( 'penci_amp_post_template_head', 'penci_amp_post_template_add_fonts' );

I tried to fix this sanitizing the CSS fonts manually with it looks like amp-custom can be added only once to the DOM. I'm not too familiar with AMP tagging.

Find more URLs with the same problem below:

- https://knitmuch.com/amp/knitting-a-top-this-hat

- https://knitmuch.com/amp/tag/wacki-saki/

- https://quiltsocial.com/amp/diy-shaggy-tuffet-in-a-day

- https://quiltsocial.com/amp/spectrum-qal-2020-block-2-benartex-wave-texture/

IMPORTANT: We are using the latest version of Soledad and AMP plugin.

Let me know if there is something that we can help.