将CSS类预置为自定义块/模板

时间：2019-04-29 作者：kevinckc

我正在尝试（&A）；正在学习为Gutenberg构建自定义块/模板，并希望为某些特定块“预设”CSS类。是否可以按如下方式添加？

参考：[模板和块][1]

例如，为其中一个标题定义了CSS类blockHeadStyle: 

function myplugin_register_book_post_type() {
    $args = array(
        \'public\' => true,
        \'label\'  => \'Books\',
        \'show_in_rest\' => true,
        \'template\' => array(
            array( \'core/image\', array(
                \'align\' => \'left\',
            ) ),
            array( \'core/heading\', array(
                \'placeholder\' => \'Add Author...\',
                \'class\' => \'blockHeadStyle\'
            ) ),
            array( \'core/paragraph\', array(
                \'placeholder\' => \'Add Description...\',
            )),
        ),
    );
    register_post_type(\'book\', $args);
}
add_action(\'init\', \'myplugin_register_book_post_type\');

2 个回复
SO网友:mertbizk

如果任何人都在寻找一个不需要添加过滤器和一堆额外代码的答案，您可以直接在模板代码中向块中添加一个类名。这与OP使用的代码相同，只需进行一次小的调整。“class”变为“className”：

function myplugin_register_book_post_type() {
    $args = array(
        \'public\' => true,
        \'label\'  => \'Books\',
        \'show_in_rest\' => true,
        \'template\' => array(
            array( \'core/image\', array(
                \'align\' => \'left\',
            ) ),
            array( \'core/heading\', array(
                \'placeholder\' => \'Add Author...\',
                \'className\' => \'blockHeadStyle anotherClassName\'
            ) ),
            array( \'core/paragraph\', array(
                \'placeholder\' => \'Add Description...\',
            )),
        ),
    );
    register_post_type(\'book\', $args);
}
add_action(\'init\', \'myplugin_register_book_post_type\');
下面是一个屏幕截图，显示了如何在开发工具中呈现此内容：

Here is a screenshot to show how this renders in dev tools

如您所见，我还向h2元素添加了第二个类，只需在由“className”声明的每个类之间添加一个空格

SO网友:Welcher

可以使用block filters API.

下面是向编辑器中的块添加类的示例。


const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        const customClass = \'custom-classname\' );
        return (
            <BlockListBlock { ...props } className={ customClass }/>
        );
    };
}, \'withClientIdClassName\' );

addFilter( \'editor.BlockListBlock\', \'my-plugin/with-client-id-class-name\', withClientIdClassName );
上述代码将添加custom-classname 在编辑器中为块列表中的每个块初始化。

如果您希望只影响特定块，props 有name 可检查的属性：


const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        if( \'core/heading\' === props.name ) {
            const customClass = \'custom-classname\' );
            return (
                <BlockListBlock { ...props } className={ customClass }/>
            );
        } else {
             <BlockListBlock { ...props }/> 
        }
    };
}, \'withClientIdClassName\' );

addFilter( \'editor.BlockListBlock\', \'my-plugin/with-client-id-class-name\', withClientIdClassName );
希望这有帮助！

标签： block-editor   小码农  

相关推荐