我正在关注；Store Post Meta with a Block"E；来自官方块编辑器手册的指南，使用提供的示例代码添加自定义post元块（如下所示）。但是，块不会加载，并且Uncaught SyntaxError: Cannot use import statement outside a module 错误显示在myguten.js 加载块编辑器页面时控制台中的文件。
如何解决此问题？WordPress块编辑器手册代码是否不正确？
myguten-meta-block.php:
// register custom meta tag field
function myguten_register_post_meta() {
register_post_meta( \'post\', \'myguten_meta_block_field\', array(
\'show_in_rest\' => true,
\'single\' => true,
\'type\' => \'string\',
) );
}
add_action( \'init\', \'myguten_register_post_meta\' );
function myguten_enqueue() {
wp_enqueue_script(
\'myguten-script\',
plugins_url( \'myguten.js\', __FILE__ ),
array( \'wp-blocks\', \'wp-element\', \'wp-components\', \'wp-data\', \'wp-core-data\', \'wp-block-editor\' )
);
}
add_action( \'enqueue_block_editor_assets\', \'myguten_enqueue\' );
myguten.js:
import { registerBlockType } from \'@wordpress/blocks\';
import { TextControl } from \'@wordpress/components\';
import { useSelect } from \'@wordpress/data\';
import { useEntityProp } from \'@wordpress/core-data\';
import { useBlockProps } from \'@wordpress/block-editor\';
registerBlockType( \'myguten/meta-block\', {
title: \'Meta Block\',
icon: \'smiley\',
category: \'text\',
edit( { setAttributes, attributes } ) {
const blockProps = useBlockProps();
const postType = useSelect(
( select ) => select( \'core/editor\' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( \'postType\', postType, \'meta\' );
const metaFieldValue = meta[ \'myguten_meta_block_field\' ];
function updateMetaValue( newValue ) {
setMeta( { ...meta, myguten_meta_block_field: newValue } );
}
return (
<div { ...blockProps }>
<TextControl
label="Meta Block Field"
value={ metaFieldValue }
onChange={ updateMetaValue }
/>
</div>
);
},
// No information saved to the block
// Data is saved to post meta via the hook
save() {
return null;
},
} );
SO网友:0Seven
我发现这是因为我在使用提供的ESNext JavaScriptcode from the guide.
虽然在；使用块“存储Post Meta”；指导this page in a later section 确认ESNext代码必须为；“已编译”；在它可以使用之前。
使用中的示例ES5代码this page of the guide 作品
( function ( wp ) {
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var TextControl = wp.components.TextControl;
var useSelect = wp.data.useSelect;
var useEntityProp = wp.coreData.useEntityProp;
var useBlockProps = wp.blockEditor.useBlockProps;
registerBlockType( \'myguten/meta-block\', {
title: \'Meta Block\',
icon: \'smiley\',
category: \'text\',
edit: function ( props ) {
var blockProps = useBlockProps();
var postType = useSelect( function ( select ) {
return select( \'core/editor\' ).getCurrentPostType();
}, [] );
var entityProp = useEntityProp( \'postType\', postType, \'meta\' );
var meta = entityProp[ 0 ];
var setMeta = entityProp[ 1 ];
var metaFieldValue = meta[ \'myguten_meta_block_field\' ];
function updateMetaValue( newValue ) {
setMeta(
Object.assign( {}, meta, {
myguten_meta_block_field: newValue,
} )
);
}
return el(
\'div\',
blockProps,
el( TextControl, {
label: \'Meta Block Field\',
value: metaFieldValue,
onChange: updateMetaValue,
} )
);
},
// No information saved to the block
// Data is saved to post meta via attributes
save: function () {
return null;
},
} );
} )( window.wp );
