Add GIF badge to GIFs in editor

[iamthomasbishop]

In Aztec, we showed a [GIF] badge over the top of .gif's – let's add that, and in the process set ourselves up for future badge re-use :)

Coverage:

• Image block
• Gallery block
• Media&Text block
• ?

Here's what it looks like on a variety of backdrops:

Specs:

• Positioning: 10px from top left corner
• Background color: #1A1A1A 50% alpha
• Border-radius: 6px
• Internal Padding: 3px 6px
• Font-family: Sans-serif
• Font-size: 14px
• Font-weight: Semi-bold
• Text-transform: Uppercase
• Background Blur (iOS): 5pt

[kmdupr33]

Linking updated styles that @iamthomasbishop linked to in #gutenberg-mobile.

[SergioEstevao]

@iamthomasbishop I just implemented animated GIFs for the GB editor on the WPiOS app: wordpress-mobile/WordPress-iOS#14238

On Android the GIF already plays while on the GB editor.

Do you think we still need the GIF badge if the editor plays the animation?

[iamthomasbishop]

Do you think we still need the GIF badge if the editor plays the animation?

@SergioEstevao Yea, I think the badge should always be displayed, even while it's animated.

[hypest]

Looks like the badge is not displaying in various cases of the Gallery Block or a Media&Text block so, reopening this ticket to track.

[thehenrybyrd]

Related, we have this older issue for Image Gallery: #1715

[hypest]

👋 @illusaen , since you recently worked on adding the GIF badge, can you have another look to see how to have all types of image blocks display it? Thanks!