我正在尝试使用 @wordpress/blocks 的 rawHandler 将原始 HTML 代码从外部源转换为 Gutenberg-Blocks。
示例 HTML:
<h2>Video-Titel</h2><video controls preload="auto" autoplay poster="preview.png" src="video.mp4"></video>
实际输出:
<!-- wp:paragraph -->
<p><video controls="" preload="auto" autoplay="" poster="preview.png" src="video.mp4"></video></p>
<!-- /wp:paragraph -->
预期输出:
<!-- wp:video -->
<figure class="wp-block-video"><video controls poster="preview.png" preload="auto" src="video.mp4"></video></figure>
<!-- /wp:video -->
将此配置用作 convert.js:
/**
* Load Browser-like environment with `window` and `document`
*/
require('jsdom-global')()
// noinspection JSUnusedLocalSymbols,JSDuplicatedDeclaration
global.CSS = {
escape(ident) { return '' },
supports(property, value) { return true },
supports(conditionText) { return true }
};
/**
* Load polyfills required for WordPress Blocks loading
*/
require('polyfill-library/polyfills/__dist/matchMedia/raw')
require('polyfill-library/polyfills/__dist/requestAnimationFrame/raw')
/**
* WordPress Blocks dependencies
*/
const { registerCoreBlocks } = require('@wordpress/block-library')
const { rawHandler, serialize } = require('@wordpress/blocks')
registerCoreBlocks();
const yargs = require('yargs/yargs')
const { hideBin } = require('yargs/helpers')
const args = yargs(hideBin(process.argv)).argv
// noinspection JSUnresolvedVariable
if( args.html ){
let content = args.html;
// noinspection JSUnresolvedVariable
if( args.isBase64 ){
content = decodeURIComponent(escape(atob( content )));
}
const blocks = rawHandler({
HTML: content
});
// noinspection JSCheckFunctionSignatures
const serialized = serialize(blocks);
console.log(serialized);
}
运行此命令:
node /path/to/convert.js --html='PGgyPlZpZGVvLVRpdGVsPC9oMj48dmlkZW8gY29udHJvbHMgcHJlbG9hZD0iYXV0byIgYXV0b3BsYXkgcG9zdGVyPSJwcmV2aWV3LnBuZyIgc3JjPSJ2aWRlby5tcDQiPjwvdmlkZW8+' --isBase64=1
所有其他块转换,如图像或段落都可以正常工作。只有视频什么都不做。
为什么?