为WordPress Gutenberg创建条件块

时间：2018-11-22 作者：Matthew Brown aka Lord Matt

我一直在复习古腾堡创建块的教程，但我不清楚如何处理特定的用例-条件块。

我正在考虑创建一个自定义帖子类型，我将为其注册自己的block类型。仅当某些条件为真时，才会显示这些块。这些条件将是布尔标志或整数比较（值来自wither自定义用户变量（meta）或会话值）。

如果所有条件均为true，则应渲染块，但如果一个或多个条件为false，则（显然）不会显示任何内容。

我不太明白我该把逻辑放在哪里。诚然，我对这个新的古腾堡系统的掌握有点不稳定，这可能就是我需要一些帮助的原因。

例如：

<p logic="IF(is_logged_in,SHOW,HIDE)">My wonderful secret bit just for members.</p>

3 个回复

SO网友:SkyShab

在自定义块的编辑方法中，渲染组件时，可以使用“条件+&；amp图案：

    <PanelBody title={ __( \'My Panel\' ) } >

        { myCustomBool &&
            <MyComponent
                value={theValue}
                onChange={ value => {
                    myChangeCallback(value);
                } }
            />
        }
        { \'marmots\' !== myCustomThing &&
            <MyOtherComponent
                value={theValue}
                onChange={ value => {
                    myOtherCallback(value);
                } }
            />
        }

    </PanelBody>

在上面的示例中，在“&；amp；”之前的条件将确定是否渲染后面的组件。

这有时被称为“短路条件”。

SO网友:Morgan

我在条件块方面做了很多工作，最困难的部分是从古腾堡开始。

您需要使用JavaScript向每个块添加自定义属性（设置）。所有内容都存储在块属性中。

下面是向现有块添加其他设置的一个很好的示例。https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

属性保存到块后，您可以在PHP中使用；render\\u block“；过滤器挂钩。每个块都将运行此过滤器，您可以根据属性更改块内容。

https://developer.wordpress.org/reference/hooks/render_block/

下面是一个非常简单的示例。$block_content 将显示的html。$block 包含块数据。

function my_conditional_render( $block_content, $block ) {
    if ( $block[\'attrs\'][\'myCustomToggle\'] === true ) {
      return \'\'; // Don\'t render this block.
    }
 
    return $block_content;
}
 
add_filter( \'render_block\', \'my_conditional_render\', 10, 2 );

这个方法与我创建插件的方式非常相似https://conditionalblocks.com/ 有一系列预先设定的条件

SO网友:David

如果您想让编辑器控制向登录用户显示或不显示哪些块，可以使用此插件：https://wordpress.org/plugins/block-options/

然后，您不需要将其编码到您的块中，因为每个块都可以选择是否仅用于您的成员。

结束

标签： custom-post-types block-editor 小码农

小码农CODE

为WordPress Gutenberg创建条件块

例如：

相关推荐