古登堡区块不保存富文本内容

时间：2021-03-25 作者：Renan Bessa

我无法上班。发布内容时，innerContent属性未保存。这是我试过的。

block.js

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

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( \'hall/block-server-side-render\', {
    title: __( \'Server Side Rendering\' ),
    icon: \'shield\',
    category: \'common\',
        keywords: [
        __( \'Server Side Rendering\' )
    ],
    attributes: {
      innerContent: {
          type: \'array\',
              source: \'children\',
              selector: \'p\'
      }
    },
   edit: function( props ) {
       function onChangeContent( content ) {
            props.setAttributes( { innerContent: content } );
        }

    return (
        <div className={ props.className }>
                   <div class="gray-bg">
                      <RichText tagName="p" role="textbox" aria-multiline="true" value={props.attributes.innerContent} onChange={onChangeContent} />
                   </div>
        </div>
        );
    },
    save: function( props ) {
        return null;
    },
} );

init.php

register_block_type( \'hall/block-server-side-render\', array(
    \'render_callback\' => \'hall_render_inner_content\',
    \'attributes\' => array(
        \'innerContent\' => array(
            \'type\' => \'array\'
        )
    )
));

function hall_render_inner_content( $attributes ) {
    $innerContent = $attributes[\'innerContent\'];
    return \'<div class="inner-content">\' . $innerContent . \'</div>\';
}

2 个回复

最合适的回答,由SO网友:Sally CJ 整理而成

Short Answer: 保存属性时，始终遵守属性type。所以如果你的属性是array 键入，然后将值另存为数组，例如。props.setAttributes( { innerContent: [ content ] } ).

回答更长的问题register_block_type() 呼叫缺少editor_script 参数请参见块编辑器handbook 有关详细信息，但基本上，您需要：

function hall_register_block() {
    wp_register_script(
        \'hall-block-server-side-render\',
        \'/path/to/block.js\',
        array( \'wp-i18n\', \'wp-blocks\', \'wp-block-editor\' ),
        \'1.0\'
    );

    register_block_type( \'hall/block-server-side-render\', array(
        \'render_callback\' => \'hall_render_inner_content\',
        \'attributes\'      => array(
            \'innerContent\' => array(
                \'type\'    => \'array\',
                // You should set a default value:
                \'default\' => array(), // if the attribute is an array
//              \'default\' => \'\',      // if the attribute is a string
            ),
        ),
        // Here, your code is missing the block\'s script:
        \'editor_script\'   => \'hall-block-server-side-render\',
    ) );
}
add_action( \'init\', \'hall_register_block\' );

innerContent 属性作为数组，因此需要保存它（通过props.setAttributes()) 作为阵列：

function onChangeContent( content ) {
    // Save the value as an array.
    props.setAttributes( { innerContent: [ content ] } );
}

并忽略属性的source 和selector 属性，以便将属性保存到块的comment delimiter.

attributes: {
    innerContent: {
        type: \'array\',
        // No need for these two:
//      source: \'children\',
//      selector: \'p\'
    }
},

但是，在块渲染回调中(hall_render_inner_content()), 您还需要在属性值中解析HTML（这不是一个简单的数组，例如[ \'HTML here\', \'another HTML here\', \'etc etc\' ]), 请注意，在该回调中$content 是（或应该是）数组而不是字符串。

所以你应该change the attribute type to string, i、 e.只需更改以上内容type: \'array\', 到type: \'string\',. 这样，就不需要将属性保存为数组。

您应该导入RichText 从…起wp.blockEditor 而不是wp.editor:

const { RichText } = wp.blockEditor; // use this
const { RichText } = wp.editor;      // not this

SO网友:Lovor

您应该像前面的回答一样使用字符串作为属性类型，并可能在Richtext上将multiline属性设置为true，并在attributes中使用multiline参数，如下所述。https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#html

如果要使用多行，请确保在您的情况下将“div.gray-bg”设置为选择器。

小码农CODE

古登堡区块不保存富文本内容

相关推荐

Wp-config.php文件中的错误：PHP致命错误：未捕获错误：未知命名参数(PHP 8.0)