[Gutenberg] Add amp-timeago block

[miina]

Aims to add Gutenberg blocks for the following components:

• amp-timeago
• amp-viz-vega
• amp-fit-text

Edit:
Looks like amp-viz-vega is still experimental and amp-fit-text might make more sense implementing as part of extending core blocks, thus this PR will only cover adding amp-timeago.

Todo:

• Configuration for compiling React / adding necessary libs, etc.
• amp-timeago

[miina]

Should we also add Layout and width and height attributes?

[westonruter]

I think we should .gitignore the complied JS files like assets/js/amp-blocks-compiled.js and instead make compiling them part of the the logic behind npm run build.

[westonruter]

There's surely a better way do do this then I've done here. It probably needs BABEL_ENV=production for example, but also I wonder if grunt-webpack should be used so that it can be called automatically as part of the build task.

[westonruter]

Should there also be a production env here with optimizations for compiling to that target vs development?

[westonruter]

I have a concern about the utility of a standalone timeago block. To me it seems it would make more sense as an inline element rather than a block in itself. For example, as a block this doesn't feel right:

Instead, it feels more natural to me that this would be inserted as some kind of inline element like:

In this case, an inline shortcode would feel more natural than a block. I know that insertion of inline images has been something that Gutenberg has not specifically been targeting. What if there was a new toolbar option added for “time ago” which allowed you to insert an amp-timeago element inside a paragraph?

But then again, it seems amp-timeago doesn't really lend itself well to being used inline if it requires a fixed width and height. I'm having a hard time seeing the normal use cases for an amp-timeago block. 🤔

[westonruter]

@pbakaus Thoughts on intended usage of amp-timeago in a post content context? ☝️

[miina]

@westonruter On being a standalone block -- true that it could likely make more sense as an inline block.
On of the possible uses as a separate block could be within Columns block for example:
Editor:

Frontend:

However, in this case, too, inline shortcode could be used instead. Not sure in which case standalone block would make more sense compared to inline insertion, perhaps if the editor would like to display the time difference separately with set width and height. One option could be adding pre-text and after-text as additional optional attributes.

[pbakaus]

I also think it might not be very useful as standalone block, and would work better as inline block.Are inline blocks not a thing in Gutenberg? Is short code the only solution? If so, short code might be the way to go.

In general, amp-timeago's primary use case is around cases where you're lacking server support to do the same. Rendering the relative time stamp on the server would be greatly recommended. But in the case where WP is heavily cached, this component might make sense.

[westonruter]

@pbakaus It seems difficult to use amp-timeago in an a non-block context, though. Here I'm just talking about block and inline elements, not specifically Gutenberg blocks. For example:

<p>The new year started <amp-timeago width="auto" height="20" datetime="2018-01-01T00:00:00.000Z">January 1st, 2108</amp-timeago> and I am so glad.</p>

Comes out:

And:

<p>The new year started <amp-timeago width="100" height="20" datetime="2018-01-01T00:00:00.000Z">January 1st, 2108</amp-timeago> and I am so glad.</p>

Comes out:

Both of these clearly are not right in an inline context where flowing text is desired. I'm sure it has to do with AMP's need for layout as for why the element has these constraints which make it difficult for use in an inline context. I've noticed a similar issue with amp-mathml, where I'd normally want Math to appear inline, but this again is a challenge for layout.

If these constraints remain, I'm not sure that amp-timeago really makes sense as a Gutenberg block or a shortcode. It would make more sense in the theme templates like for the post's publish time, where it does not exist in the context of flowing text.

[pbakaus]

aaah, that block ;)

Yes, that makes more sense. Actually strange that we don't have an equivalent to inline or inline-block in AMP. I'll try and see if we can do something about it..

[westonruter]

@miina would you resurrect amp-timeago on this branch since it got removed in #1165 with 329d3f4?

[miina]

@westonruter Restored the block on this branch, looks like had to create a new PR (#1168).