我正在开发一个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
);