WP视频嵌入块每次加载相同的视频

时间:2019-02-25 09:54:21

标签: javascript wordpress gutenberg-blocks video-embedding

我正在开发一个WP插件,用于将视频( ex.youtube )嵌入到帖子中,一旦提交了第一个视频,在创建新块并尝试加载新视频后,它将显示第一个视频一个嵌入。

我在这件事上经验不足,所以可能会出现一些错误。

(function(blocks, element){
      var el = element.createElement
  
  function embedVideo(props){
        var src = 'http://www.youtube.com/embed/' + props.content;//video id value for testing: EKmxtMexL8E / _9nYnqsVXyY   
                                                             
        return el(
          'iframe',{
          class: "vid-player",
          src: src,
          alt: props.content,
          width: 560,
          height: 315,
          frameborder: "0",    
          },
          
        )    
      }
      
      blocks.registerBlockType('example/example-vid-embed', {
        title: 'Example Embed Video',
        icon: 'controls-play',
        category: 'common',
        attributes: {
          content: {
              type: 'string',
              source: 'attribute',
              attribute: 'alt',
          }
        },
      
        edit: function(props){
          var content = props.attributes.content,
              children = [];

          children.push(
            //embed single video form
            el('h3',{}, "Insert Single Video"),
            el('input', { class:"id-input", id:"id-input", value: content, placeholder:"Insert Video ID             to embed"}),
            el('button', {class:"id-submit", id:"id-submit", type: "submit", width:50}, "Embed"),
          );
          console.log(children);
          
          function setInput(event){
            var url = document.getElementsByTagName("input")[0].value;
            props.setAttributes({content: url});
            event.preventDefault();
          }
          
          if ( content ) {
            children.push( embedVideo({content: content})); 
          }
          
          return el('form', {onSubmit: setInput}, children);
        },
        
        save: function(props){
          return embedVideo({content: props.attributes.content});
        },
      });
      
      })(
  window.wp.blocks,
  window.wp.element
);
print screen of the problem

0 个答案:

没有答案