The Youtube Gutenberg block makes you enter a Youtube Url, then shows the video... until you select it and select "edit" on the toolbar, see the url and change if you want. I understand the edit experience is from the edit function and save function creates the fallback html in case the plugin fails or isn't installed...

Most of the howtos I have found don't include that preview/edit part - is there example source code to make it not only save but then show preview, then allow a toolbar to go back to editor from wysiwyg?

1 Answer 1


The goodness of Open Source Softwares is that you can always look into the source code. You can find the source code of embed block of Gutenberg from here https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/embed. It will be complex as it's a combination of multiple embeds so be careful by studying it.

  • Right, I looked through the code and didn't see any obvious live/edit changer. In fact sometimes in that code it's just real confusing like here where it apparently has invalid js without strings in quotations. return ( <figure className={ classnames( className, 'wp-block-embed', { 'is-type-video': 'video' === type } ) }>
    – NoBugs
    Commented Feb 27, 2019 at 15:52
  • Actually it's not invalid JS, it is JSX that is introduced by React.js and on the other side classnames is a React.js library. What is JSX? ... in short it can help you write JavaScript expressions inside HTML using { curly brackets }. What is classname library? ..... you can concatenate classes easily based on conditions. For more info about these please look at React docs and classnames docs. The actually meaning of expression you shared is conatenate className with wp-embed-block only if type is video else the value will be className as other expression evaluate to false. Commented Feb 27, 2019 at 17:42

Your Answer

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

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