是否可以打印无类别的Gunteberg块的输出？

时间：2020-02-11 作者：Old Nick

下面的代码来自Gutenberg Block的一个官方示例。块非常简单，只需创建一个可编辑字段，输出p 要素

registerBlockType( \'gutenberg-examples/example-03-editable-esnext\', {
    title: __( \'Example: Editable (ESNext)\', \'gutenberg-examples\' ),
    icon: \'universal-access-alt\',
    category: \'layout\',
    attributes: {
        content: {
            type: \'array\',
            source: \'children\',
            selector: \'p\',
        },
    },
    edit: ( props ) => {
        const { attributes: { content }, setAttributes, className } = props;
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },
    save: ( props ) => {
        return <RichText.Content tagName="p" value={ props.attributes.content } />;
    },
} );

如果使用，此块将生成p 具有如下类的元素：

<p class="wp-block-gutenberg-examples-example-03-editable-esnext"></p>

我想这是建立在registerBlockType 参数

我的问题是：是否可以在没有任何类规范的情况下打印自定义块的输出？

edit: Wordpress docs say 有一个过滤器可以更改默认类名，即：

wp.hooks.addFilter(
  \'blocks.getBlockDefaultClassName\',
  \'my-plugin/set-block-custom-class-name\',
  setBlockCustomClassName
);

现在，这个代码到底去了哪里？在文档中找不到它。

2 个回复

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

文档中的代码是JavaScript。您必须设置Webpack并构建这种类型的JS。因此，您可以使用类似创建Guten块的东西来设置构建过程，然后用文档中的js替换“Block.js”的内容。（我当然希望他们能改进文档，让这样的事情更清楚。）

或者，您可以选择使用PHP进行过滤，它不会首先阻止添加类，而是处理保存在数据库中的数据，并可以去掉CSS类。（如果您想包含核心类，只需删除过滤器，它们就会全部出现，因为它们仍然保存在数据库中。）你会这样做

<?php
add_filter(\'render_block\', function($block_content, $block) {
    // Only affect this specific block
    if(\'gutenberg-examples/example-03-editable-esnext\' === $block[\'blockName\']) {
        $block_content = str_replace(\'class="wp-block-gutenberg-examples-example-03-editable-esnext"\', \'\', $block_content);
    }
    // Always return the content
    return $block_content;
}, 10, 2);
?>

在自定义插件或自定义/子主题的函数中。php文件。

或者，您可以随时返回并编辑块本身，在这种情况下，您需要再次设置构建过程。我有点困惑save() 函数实际上不引用任何className, 但看起来如果你改变了edit() 使其不再具有className, 这可能会删除该类。

SO网友:Old Nick

既然@WebElaine没有指定js方式，我将自己添加它。要添加的完整代码如下：

function setBlockCustomClassName( className, blockName ) {
    return blockName === \'gutenberg-examples/example-03-editable-esnext\' ? //this is the block identifier, taken from the registerBlockType
        \'new class name\' :  //this is class name we want to associate by default to the block, in my case it\'s an empty string since I don\'t want any class 
        className;
}

wp.hooks.addFilter(
    \'blocks.getBlockDefaultClassName\',
    \'gutenberg-examples/example-03-editable-esnext\', //this is again the block identifier, taken from the registerBlockType
    setBlockCustomClassName
);

总而言之，完整代码是：

registerBlockType( \'gutenberg-examples/example-03-editable-esnext\', {
    title: __( \'Example: Editable (ESNext)\', \'gutenberg-examples\' ),
    icon: \'universal-access-alt\',
    category: \'layout\',
    attributes: {
        content: {
            type: \'array\',
            source: \'children\',
            selector: \'p\',
        },
    },
    edit: ( props ) => {
        const { attributes: { content }, setAttributes, className } = props;
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };
        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },
    save: ( props ) => {
        return <RichText.Content tagName="p" value={ props.attributes.content } />;
    },
});
//Old code ended here
function setBlockCustomClassName( className, blockName ) {
    return blockName === \'gutenberg-examples/example-03-editable-esnext\' ? //this is the block identifier, taken from the registerBlockType
        \'new class name\' :  //this is class name we want to associate by default to the block, in my case it\'s an empty string since I don\'t want any class 
        className;
}
wp.hooks.addFilter(
    \'blocks.getBlockDefaultClassName\',
    \'gutenberg-examples/example-03-editable-esnext\', //this is again the block identifier, taken from the registerBlockType
    setBlockCustomClassName
);

对于一个简单的块，所有这些内容都会进入主js文件（通常是index.js) 与插件关联。

小码农CODE

是否可以打印无类别的Gunteberg块的输出？

相关推荐