How to create custom embed block in gutenberg wordpress

Question

Can someone please help me out here.

How can i create a custom embed block in WordPress(Gutenberg blocks), the block should ask the user the URL of the video to embed and some few options like auto play, after the user clicked the embed button it should display the video on the block.

I have already created a plugin and a basic block that allows a user to enter content on it and display it in front-end. Now i want to customize my block to allow video embeds.

Answer 1

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!

Answer 2

in the objects "attributes" section add this declaration, I named mine videoURL:

videoURL: {
            type: 'string',
            source: 'attribute',
            selector: 'iframe',
            attribute: 'src',
        }

then in the "edit" section add this (and dont' forget to add videoURL declaration to your attributes object in the edit section )

const onChangeVideoURL = (value) => {
            setAttributes({ videoURL: value });
        };

now return this block of code in the "return" section of the "edit" block - note the "src" for video:

<h3>{__('Link to video', 'In the Media')}</h3>
                <RichText
                    tagName="div"
                    multiline="iframe"
                    src={videoURL}
                    className="wp-block-embed is-type-video is-provider-youtube"
                    placeholder={__(
                        'Link to video url',
                        'In the Media'
                    )}
                    value={videoURL}
                    onChange={onChangeVideoURL}
                />

then in the "save" section add this block of code (don't forget to add your declared videoURL to the attributes object):

<h3>{__('Video Link', 'gutenberg-examples')}</h3>
                <RichText.Content
                    tagName="iframe"
                    className="video"
                    value={videoURL}
                    src={videoURL}
                />

I'm using the YT url with the "embed" option in the url, as in "https://www.youtube.com/embed/-----"

Answer 3

Watch this tutorial and you will know basics of creating Gutenberg blocks. It also comes with a boilerplate code. I suggest you creating a custom block of an Embed category.