How to create custom embed block in gutenberg wordpress

This is… nothing that can be answered in a few sentences. I will try to help.

1.: Make yourself comfortable with the way blocks are built, especially using node and webpack. I found a pretty good tutorial here: https://css-tricks.com/learning-gutenberg-1-series-intro/

2.: Write down what kind of additional controls outside of the Embed URL you want to use. Use an InspectorControl for that (the sidebar of your block)

3.: Look up how wordpress does it. You can find the source code of the native embed block here: https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/embed

4.: If there is a block plugin that does similar things, but not quite what you need, look up if they are on github. Most of these Plugins upload there source (precompiled) files. Even if you can’t copy/paste the code, you can find info how to do specific things.

5.: Try to start small, like “put in the url and then show the video”, then add feature for feature. Test in your wordpress and look into the browsers console window for errors.

6.: This is not black magic. I started 2 Months ago knowing absolutely nothing about REACT and the WordPress Javascript Libraries and am now building custom blocks nearly daily.

Happy Coding!