如何在古腾堡块中创建多个元字段

Posted 2023-02-19

【中文标题】如何在古腾堡块中创建多个元字段

【英文标题】：How to create multiple meta fields in gutenberg block

【发布时间】：2019-12-31 01:26:11

【问题描述】：

我需要创建一个 wordpress Gutenberg 块，它允许我插入一些数据，如姓名、公司名称、参考文献中的最佳句子。

到目前为止，我设法创建了一个保存一个文本字段的 Gutenberg 块。

dc-references-block.php

// register custom meta tag field
function dcr_register_post_meta() 
    register_post_meta( 'page', 'dc_references_block_field', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );

add_action( 'init', 'dcr_register_post_meta' );


function dcr_enqueue() 
    wp_enqueue_script(
        'dc-references-block-script',
        plugins_url( 'dc-references-block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-components' )
    );

add_action( 'enqueue_block_editor_assets', 'dcr_enqueue' );

dc-references-block.js

( function( wp ) 
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;
    var TextControl = wp.components.TextControl;


    registerBlockType( 'dc-references-block/dc-references-block', 
        title: 'Title',
        icon: 'edit',
        category: 'common',

        attributes: 
            blockValue: 
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field'
            
        ,

        edit: function( props ) 
            var className = props.className;
            var setAttributes = props.setAttributes;

            function updateBlockValue( blockValue ) 
                setAttributes( blockValue );
            

            return el(
                'div',
                 className: className ,
                el( TextControl, 
                    label: 'write here name of company',
                    value: props.attributes.blockValue,
                    onChange: updateBlockValue
                
              )

            );
        ,

        save: function() 
            return null;
        
     );
 )( window.wp );

每当我尝试向块添加第二个文本字段或文本区域时，我都会收到错误消息“站点不支持此块”。

谁能向我解释，在这种情况下，如何正确地将多个文本字段和文本区域添加到块中？

【参考方案1】：

如果您包含不起作用的代码会更好。无论如何，我通过添加另一个文本输入和一个文本区域（在属性和元中包含相关条目）来更改您的代码。

这是修改后的代码。此外，我还更改了一些代码，使其更具可读性。

javascript

( function( wp ) 
    const el = wp.element.createElement;
    const registerBlockType = wp.blocks.registerBlockType;
    const TextControl = wp.components.TextControl;
    const TextareaControl = wp.components.TextareaControl;

    registerBlockType( 'dc-references-block/dc-references-block', 
        title: 'Title',
        icon: 'edit',
        category: 'common',

        attributes: 
            blockValue: 
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field'
            ,
            // Add two new attributes
            name: 
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field_name'
            ,
            desc: 
                type: 'string',
                source: 'meta',
                meta: 'dc_references_block_field_desc'
            
        ,

        edit: function( props ) 
            const className = props.className;
            const setAttributes = props.setAttributes;

            // Original element with onChange event as an anonymous function
            const text = el( TextControl, 
                label: 'write here name of company',
                value: props.attributes.blockValue,
                key: 'companyName',
                onChange: function( value ) 
                    setAttributes(  name: value  );
                
             );

            //Add two new elements
            const secondText = el( TextControl, 
                label: 'Write your name',
                value: props.attributes.name,
                key: 'username',
                onChange: function( value ) 
                    setAttributes(  name: value  );
                
             );

            const textArea = el( TextareaControl, 
                label: 'Write a description',
                value: props.attributes.desc,
                key: 'desc',
                onChange: function( value ) 
                    setAttributes(  desc: value  );
                
             );

            return el(
                'div',
                 className: className ,
                // Children of the main div as an array
                [ text, secondText, textArea ]
            );
        ,

        save: function() 
            return null;
        
     );
( window.wp ) );

PHP

register_post_meta( 'page', 'dc_references_block_field', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );

   // register two new meta corresponding to attributes in JS
    register_post_meta( 'page', 'dc_references_block_field_name', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );

    register_post_meta( 'page', 'dc_references_block_field_desc', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );

【讨论】：

我还有一个问题。有没有办法只为特定的自定义字段显示块？

我不关注。您是指一个自定义字段的多个输入吗？

在古腾堡之前通过添加一个元框，您可以决定它是否将显示在管理面板中，用于add_meta_box( 'name_meta_box', // $id 'title', // $title 'show_name_meta_box', // $callback 'custom-post-name', // $screen 'normal', // $context 'high' // $priority); 的帖子、页面或自定义帖子，这仍然可能吗？

Gutenberg 块依赖于用户交互。它们仅显示用户是否添加它们。 Metabox 显示不管。如果您希望用户只能在页面屏幕中选择块，您会看到以下答案：wordpress.stackexchange.com/a/243738/35871