GIF Block: Placeholder State

[jeffersonrabb]

Changes proposed in this Pull Request

Initial state of the block is now a Placeholder component and there is no longer a default Giphy image. This brings the block in line with Gutenberg design patterns.

This commit to Jetpack repo is part of the change: Automattic/jetpack@bd0a281

Testing instructions

• Spin up JN instance: https://jurassic.ninja/create?gutenpack&calypsobranch=fix/gif-placeholder&branch=try/giphy
• Connect Jetpack.
• Navigate to Settings->Jetpack Constants and enable JETPACK_BETA_BLOCKS
• Add GIF block. Verify that default state is the Placeholder.
• Type in the field, verify the placeholder is replaced by a GIF.
• Preview or Publish versions of the block with and without an image. If the block is still in Placeholder state the block should be completely suppressed in Publish/Preview.

[matticbot]

Test live: https://calypso.live/?branch=fix/gif-placeholder

[thomasguillot]

1. The form doesn't give me enough time to type what I'm looking for before displaying a GIF. See screen recording: https://cloudup.com/cagftUXpnfT

2. The form's width is not consistent between the placeholder and the iframe:

3. I find it really strange to have a text-align: center on the input text. It's not consistent with the other inputs in Gutenberg.

[sirreal]

Good points @thomasguillot 👍

I've made a few changes:

• Increase automatic search wait time from 250ms to 300ms
• Match placeholder input max-width (400px)
• Match existing padding for consistency
• Left align inputs

Here's what it looks like now, with Form placeholder below for reference:

[sirreal]

👍 This is in a good place, I'll merge it