自定义服务器渲染的古腾堡块并不总是渲染

时间:2021-03-31 10:41:51

标签: javascript php wordpress wordpress-gutenberg

我编写了一个插件,它提供了一个自定义的“服务器端块”,该插件使用了在 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;
    },
} );

0 个答案:

没有答案