Contact form block - add example

[MichaelArestad]

• props @gravityrail

Master issue: #13510

Changes proposed in this Pull Request:

• Added an example preview to the block in the Inspector.
• Also resolves the white form field title background and title/"required" text alignment issue, which Fixes Jetpack Contact Form block - fix gap between field name and required text #13648

Before

After

Before/After of the field text alignment and bg color fixes:

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• If you're an Automattician, include a shortlink to the p2 discussion with Jetpack Product here.

Testing instructions:

• Create a new post
• Click the + to open the Inserter in the top bar
• Hover over Form

Proposed changelog entry for your changes:

• None needed

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello MichaelArestad! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D33495-code before merging this PR. Thank you!

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: November 5, 2019.
Scheduled code freeze: October 29, 2019

Generated by 🚫 dangerJS against 1b8b359

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[MichaelArestad]

This seems to now work (even though I can't get it to work). I'll take another shot at it in the morning and stub out all the fields to match the mockup.

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[MichaelArestad]

There appears to be a display bug for blocks with innerblocks. There's a negative left/right margin set that makes the preview look not so great.

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[MichaelArestad]

Added style overrides to core styles. Creating an issue in Gberg shortly and will link to it, but this will work in the meantime.

[MichaelArestad]

Gutenberg issue:
WordPress/gutenberg#17760

[joanrho]

Looks great and works as expected!

[jeherve]

The @wordpress/block-editor package used in this PR was only added to WordPress in version 5.2:
https://core.trac.wordpress.org/ticket/46429

Since Jetpack is currently compatible with WordPress 5.1, we can't use this just yet.

However, and as per the discussion in #13620, we should be able to update that requirement to WP 5.2 in the release after the next, once WordPress 5.3 is released for everyone.

Should we wait to merge this until Jetpack 8.0 and our new compatibility change?

Another alternative would be to up our version requirement to WP 5.2 in this release already, but I am afraid this could be problematic for all the folks that still run WordPress 5.1.

[MichaelArestad]

@jeherve Ah! I had no idea. I was just trying to fix some warnings. I'll revert those changes.

[matticbot]

MichaelArestad, Your synced wpcom patch D33495-code has been updated.

[MichaelArestad]

@jeherve fixed

[jeherve]

This looks good to me. Merging!