Convert EmbedPreview component to functional component

[louwie17]

What?

This PR converts the EmbedPreview component to a functional component.

Why?

React class components are outdated and functional components are encouraged, this is part of the #22890 to convert all class components to functional components.

How?

Converts EmbedPreview component to a functional component.

Testing Instructions

1. Open a Post or Page
2. Add an Embed block
3. Grab a link from YouTube or Tumblr or any of the sites listed here: https://wordpress.org/documentation/article/embeds/#list-of-sites-you-can-embed-from and add it to the Embed component
4. Make sure it saves correctly and no new errors are shown in the console.
5. Do a smoke test to make sure it continues to work as before ( changing the width in the toolbar, or changing the url, clicking around in the video/image to make sure things are interactive.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

N/A

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @louwie17! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ntsekouras]

Thanks for the PR @louwie17! This looks good except for my small comment.

[t-hamano]

Hi @louwie17,

I found this PR when trying to resolve some of the issues in #65179. If you have time to work on this issue, could you rebase this PR to resolve the conflicts?

Thank you!

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @louwie17.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: louwie17.

Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[louwie17]

Hi @louwie17,

I found this PR when trying to resolve some of the issues in #65179. If you have time to work on this issue, could you rebase this PR to resolve the conflicts?

@t-hamano I had forgotten about this PR, I should be able to resolve the conflicts.

[louwie17]

I found this PR when trying to resolve some of the issues in #65179. If you have time to work on this issue, could you rebase this PR to resolve the conflicts?

The PR is updated.

@ntsekouras, @kevin940726 sorry for the very long delay in addressing the PR feedback, but it has been addressed. This PR is ready for a re-review.

[t-hamano]

LGTM! Thanks for the update 👍

The overlay is also working correctly. That is, the first time the block is clicked, elements in the iframe document do not react the first time the block is clicked, but only when the block is selected:

a15cad4f5bfa3f44f1c9065f142ff9d5.mp4

[louwie17]

Thanks for the quick review @t-hamano, I don't have permission to merge, so I will leave that up to you or any of the other reviewers :)

[github-actions]

Congratulations on your first merged pull request, @louwie17! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!