1

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.

3 Answers 3

2

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!

1
  • Thanks for your reply, i have checked the native embed block on github and realised that it uses a form on a placeholder. Now my question is how can i hide the placeholder with the URL input and show the video itself?
    – Thami Bn
    Feb 15, 2019 at 7:11
1

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/-----"

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.