我编写了一个插件,它提供了一个自定义的“服务器端块”,该插件使用了在 PHP 中定义的回调,该回调应该呈现一些 HTML。
在某些情况下呈现正确的标记,但在其他情况下,我只得到注释 <!-- wp:nai/serverside /-->
。
这主要发生在我将其他块放在页面中,或者我将自定义块放在另一个块中时。
怎么了?为什么我不能在不破坏它的情况下把它放在任何我想要的地方?
代码如下:
plugin.php
:
<?php
/**
* @package MyPlugin
*/
/*
Plugin Name: My Plugin
Version: 1.7.2
*/
function gutenberg_examples_01_register_block() {
// automatically load dependencies and version
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
wp_register_script(
'serverside',
plugins_url( 'build/index.js', __FILE__ ),
$asset_file['dependencies'],
$asset_file['version']
);
wp_register_style(
'herverside',
plugins_url( 'style.css', __FILE__ ),
array( ),
filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
);
register_block_type('nai/serverside', array(
'editor_script' => 'serverside',
'render_callback' => 'render_callback',
'attributes' => array(
'images' => array(
'type' => 'array'
)
)
)
);
function render_callback( $attributes ){
//$images = $attributes[ 'images' ];
return '<div>Test</div>';
}
}
add_action( 'init', 'gutenberg_examples_01_register_block' );
src/index.tsx
:
declare var wp;
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
registerBlockType( 'nai/serverside', {
title: __( 'Server Side Block', 'text-domain' ),
icon: 'networking',
category: 'common',
attributes: {
images : {
default: [],
type: 'array',
}
},
edit({attributes, setAttributes, className, focus, id}) {
return (
<div style={ blockStyle }>
Not visible in editor mode.
</div>
);
},
save({attributes, className}) {
/*return (
<div style={ blockStyle }>
Hello World, step 1 (from the frontend).
</div>
);*/
return null;
},
} );