web-dev-qa-db-ja.com

グーテンベルク：ServerRenderで属性を保存できない

私はこの問題で3時間以来苦労しています、そして私は終わりを見ません。問題：ServerSideRenderを使用してフロントエンドにpost_meta値を表示しようとしました。値はグーテンベルクエディタに表示されますが、フロントエンドには表示されません。

Problem 

新しいブロックをCreate Guten Blockで足場にします。

私のblock.js

/**
 * BLOCK: bold-blocks
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const {ServerSideRender} = wp.components;


registerBlockType('cgb/block-bold-blocks', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __('bold-blocks - Example Meta Content'), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __('bold-blocks — CGB Block'),
        __('CGB Example'),
        __('create-guten-block'),
    ],

    attributes: {
        metaToDispaly: {
            type: 'string',
            source: 'meta',
            meta: 'werk',
            default: '30'
        }
    },
    edit: function (props) {
        // ensure the block attributes matches this plugin's name
        console.log(props.attributes);
        return (
            <ServerSideRender
                block="cgb/block-bold-blocks"
                attributes={props.attributes}
            />
        );
    },
    save() {
        // Rendering in PHP
        return null;
    },
});

PHP

function bold_blocks_cgb_block_assets()
{
    // Styles.
    wp_enqueue_style(
        'bold_blocks-cgb-style-css', // Handle.
        plugins_url('dist/blocks.style.build.css', dirname(__FILE__)), // Block style CSS.
        array('wp-blocks') // Dependency to include the CSS after it.
    // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
    );
} // End function bold_blocks_cgb_block_assets().

// Hook: Frontend assets.
add_action('enqueue_block_assets', 'bold_blocks_cgb_block_assets');

function bold_blocks_cgb_editor_assets()
{
    // Scripts.
    wp_enqueue_script(
        'bold_blocks-cgb-block-js', // Handle.
        plugins_url('/dist/blocks.build.js', dirname(__FILE__)), // Block.build.js: We register the block here. Built with Webpack.
        array('wp-blocks', 'wp-i18n', 'wp-element'), // Dependencies, defined above.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );

    // Styles.
    wp_enqueue_style(
        'bold_blocks-cgb-block-editor-css', // Handle.
        plugins_url('dist/blocks.editor.build.css', dirname(__FILE__)), // Block editor CSS.
        array('wp-edit-blocks') // Dependency to include the CSS after it.
    // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: filemtime — Gets file modification time.
    );
} // End function bold_blocks_cgb_editor_assets().

// Hook: Editor assets.
add_action('enqueue_block_editor_assets', 'bold_blocks_cgb_editor_assets');


/**************************** MY PART ************************************************/
function bold_register_dynamic_blocks()
{
    register_block_type('cgb/block-bold-blocks', array(
        'attributes' => array(
            'metaToDispaly' => array(
                'type' => 'string',
            ),
        ),
        'render_callback' => function ($attributes) {
            return 'Attributes='. print_r($attributes, true );
        }
    ));

}

add_action('init', 'bold_register_dynamic_blocks');

問題は、属性がpost_contentに追加されていないことです。

これがグーテンベルクが生み出すものです。

<!-- wp:cgb/block-bold-blocks /-->

これがグーテンベルグが生み出すべきだと思うものです（そしてそれをDB分野に入れるとうまくいくでしょう：

<!-- wp:cgb/block-bold-blocks {"metaToDispaly": "C01112107"} /-->

誰かが私がここで間違っていることを知っていますか？

serverblock-editor
1
jsnoob

私は4時間バカトライ＆エラーの後に結果が出ました

フロントエンドでsource meta から値を読み取ることができません。 metaから通常の文字列属性に変数を代入したところ、うまくいきました。イージーピージー。

/**
 * BLOCK: bold-blocks
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const {ServerSideRender} = wp.components;
const {AlignmentToolbar, BlockControls, InspectorControls,} = wp.editor;

const {
    PanelBody,
    PanelRow,
    Fragment
} = wp.element;


registerBlockType('cgb/block-bold-blocks', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __('bold-blocks - Example Meta Content'), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __('bold-blocks — CGB Block'),
        __('CGB Example'),
        __('create-guten-block'),
    ],

    attributes: {
        metaToDisplay: {
            type: 'string',
            source: 'meta',
            meta: 'werk',

        },
        className: {
            type: 'string',
            default: 'fuck'
        },
        werkId: {
            type: 'string',
            value: 'foo',
            default: 'shit'
        }


    },
    edit(props) {
    //    const {attributes: {metaToDisplay, className}, setAttributes, isSelected} = props;

        let metaToDisplay = props.attributes.metaToDisplay;
        let className = props.className;
        props.setAttributes( { werkId: metaToDisplay } );
        props.werkId = props.metaToDisplay;


        return (
            <ServerSideRender
                block="cgb/block-bold-blocks"
                attributes={{
                    metaToDisplay: metaToDisplay,
                    className: className,
                    werkId: metaToDisplay
                }}

            />

        )
            ;

    },


    save: function (props) {
      //  const {attributes: {metaToDisplay, className}, setAttributes} = props;
        // Rendering in PHP
        return null;

    },
});

私はここである種の貨物カルトをやっていると確信しています。誰かが私の問題に対してもっとエレガントな解決策を私に提供することができますか？

0
jsnoob