Blocks: Update placeholders to use the withNotices HOC

[Copons]

Changes proposed in this Pull Request:

• Update the Amazon, Calendly, Google Calendar, and OpenTable blocks to use the withNotices HOC instead of manually handling the error notices.

Pros: it's the Core Gutenberg way of handling placeholder notices; manual notices are incorrectly positioned on recent Gutenberg versions (see #14833 for a CSS-only fix).

Cons: notices created with withNotices are always dismissable, while all our manual notices aren't. I don't think it's a big deal to be honest.

Note

Other blocks already use the withNotices HOC, but some in a slightly peculiar way.
According to the Gutenberg docs, withNotices exposes a noticeUI prop that is passed to the Placeholder through the notices prop.
E.g.

<Placeholder notices={ props.noticeUI } />

Some blocks instead use the noticeUI outside the Placeholder (the notice would appear above the block content—but still inside its container), while passing a notices prop to the Placeholder notices prop.
E.g.

<Fragment>
  { props.noticeUI }
  <Placeholder notices={ props.notices } />
</Fragment>

jetpack/extensions/blocks/map/edit.js

Line 399 in 0fd1874

notices={ notices }

jetpack/extensions/blocks/map/edit.js

Line 492 in 0fd1874

{ noticeUI }

I'm not exactly sure why this happens, and for example why this doesn't end up displaying two notices, one in the Placeholder, and one above the block content.
I've chosen to not touch these blocks, to avoid unexpected regressions.

Testing instructions:

• Insert the Amazon, Calendly, Google Calendar, and OpenTable blocks, and try triggering an error notice by inserting an incorrect URL or embed code.
• Make sure the notice still works and is positioned consistently.

Proposed changelog entry for your changes:

• Update the Amazon, Calendly, Google Calendar, and OpenTable blocks to use the withNotices higher-order component.

[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: April 7, 2020.
Scheduled code freeze: March 31, 2020

Generated by 🚫 dangerJS against 078f7cf

[pablinos]

This looks good to me. I forgot to take a screenshot, but with Gutenberg 7.3 and WordPress 5.2 the notice was still indented. That's an odd combination though.

Vanilla WordPress 5.2 looks like this:

WordPress 5.3 looks like this:

And with the latest Gutenberg, it looks as in the screenshots above.

These all seem acceptable to me, and the indentation I was seeing with an older version of Gutenberg is probably not an issue.

[scruffian]

Should we also update the Eventbrite and Pinterest blocks?

We should also update the block scaffolding...

[scruffian]

We should also update the block scaffolding...

Done in #14895

[scruffian]

Should we also update the Eventbrite and Pinterest blocks?

Tracking this in #14896

[jeherve]

As I noted here, I wonder if we should extract this into a shared function maybe?

#14895 (comment)

[scruffian]

I think this is a good idea, but lets do it in another PR. I have created an issue to track it here: #14899

[jeherve]

This looks good! 👍

[matticbot]

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

[Copons]

r203925-wpcom