Adding amp-fx to block

  • Resolved rsmith4321

    (@rsmith4321)


    3 years, 1 month ago

    I wanted to add some amp-fx-collection attributes to wordpress blocks. I know how to do this in html, but there really isn’t a way I can figure out to add attributes like this into a block. Would there be a way to filter a wordpress block, for example target a block with a custom class, to add amp-fx-collection attributes? For examples something like this.

    <div class=”wp-block-group alignwide animation-class” amp-fx=”parallax” data-parallax-factor=”1.5″>
    ……….
    </div>`

    Ideally I wish wordpress would allow custom attributes in addition to classes in the editor. Since amp does a lot of thing inline like this.

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

    (@westonruter)

    3 years, 1 month ago

    Good question. Here’s an example plugin which will allow you to add those attributes by “hacking” the block class names: https://gist.github.com/westonruter/9610b49e3138ec95a000590dddd13044

    Plugin Author Weston Ruter

    (@westonruter)

    3 years, 1 month ago

    It would be nice if there was an actual UI to supply the FX properties, but we would want to wait to investigate that further until they are available on non-AMP pages as well via Bento. We want to avoid the current situation where we have some AMP-specific settings in the editor that don’t work on non-AMP pages.

    We considered adding special effects this in the past: https://github.com/ampproject/amp-wp/issues/1257

    Thread Starter rsmith4321

    (@rsmith4321)

    3 years, 1 month ago

    That’s awesome, once I realized not to add the quotes it worked perfectly. I’ve been trying to figure out a way to do that for a while. I assume it doesn’t matter that it also adds the attributes as classes, but they should just be ignored anyway. Everytime I ask a question you have a solution in a few minutes, thanks!

    One issue I noticed, if you want to add two attributes it doesn’t seem to work, for example amp-fx=fade-in fly-in-right. Would this be possible to implement?

    Also I know this is not related to your plugin but do you know if there is a way to disable amp-fx with a media query? For example disabled for mobile widths.

    • This reply was modified 3 years, 1 month ago by rsmith4321.
    • This reply was modified 3 years, 1 month ago by rsmith4321. Reason: Added issue with two attributes
    Plugin Author Weston Ruter

    (@westonruter)

    3 years, 1 month ago

    That’s awesome, once I realized not to add the quotes it worked perfectly.

    Correct, it requires omission of the quotation marks.

    I assume it doesn’t matter that it also adds the attributes as classes, but they should just be ignored anyway.

    Right, they’ll just be extra classes that don’t do anything.

    One issue I noticed, if you want to add two attributes it doesn’t seem to work, for example amp-fx=fade-in fly-in-right. Would this be possible to implement?

    I just adjusted it so that you can supply multiple effects separated by a comma, like so: amp-fx=fade-in,fly-in-right.

    Also I know this is not related to your plugin but do you know if there is a way to disable amp-fx with a media query? For example disabled for mobile widths.

    Good question. I am not sure about that. That would be a good question on Stack Overflow.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding amp-fx to block’ is closed to new replies.