0

我正在尝试使用 @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

所有其他块转换,如图像或段落都可以正常工作。只有视频什么都不做。

为什么?

4

0 回答 0