amp-autocomplete inline style not rendering

  • Resolved Artneo

    (@artneo)


    5 years, 3 months ago

    API: https://neoblog.artneo.com.br/wp-json/neoblog/v1/search/

    When the template mode is set to Standard, the amp-autocomplete inline style doesn’t render at all.

    <amp-autocomplete …>
<!-- Display autocomplete results -->
<template type="amp-mustache" id="search-template" class="search-template">
   <ul class="search-item" data-value="{{title}}">
      <li>{{title}}</li>
      <span class="cat" style="color: {{category.color}}"><span class="cat-name">{{category.name}}</span></span>
   </ul>
</template>
</amp-autocomplete>

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    5 years, 3 months ago

    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)

    5 years, 3 months ago

    Awesome! Thank you so much for the reply!

    Plugin Author Weston Ruter

    (@westonruter)

    5 years, 3 months ago

    @artneo Please test: https://github.com/ampproject/amp-wp/pull/4374#issuecomment-597244079

    Thread Starter Artneo

    (@artneo)

    5 years, 3 months ago

    I just checked it and it’s rendering the inline style just fine. Thank you Weston for the quick response and solution.

    Plugin Author Alberto Medina

    (@albertomedina)

    5 years, 3 months ago

    Hi Andre,

    Was looking at your website, and it is a great AMP-first site. Great work!

    Best regards.

    Thread Starter Artneo

    (@artneo)

    5 years, 3 months ago

    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!

    Plugin Author Alberto Medina

    (@albertomedina)

    5 years, 3 months ago

    @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 🙂

    Thread Starter Artneo

    (@artneo)

    5 years, 3 months ago

    Awesome, thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘amp-autocomplete inline style not rendering’ is closed to new replies.