2

我用 Create Guten Block ( https://github.com/ahmadawais/create-guten-block ) 创建了一个工作 Gutenberg Block。目前它只适用于内联样式，但作为一项要求，我必须避免使用它们。

因此，我想在保存帖子时创建一个帖子/页面样式表，包括我的块的样式设置（例如背景颜色、颜色、字体大小......）

我的块的当前保存功能（block.js）

save: function( props ) {
        const { attributes: { typetext, infotext, linktext, background_color, background_button_color, text_color, text_color_button }} = props;
        return (
            <div id="cgb-infoblock" className="cgb-infoblock">
                <div className="cgb-infoblock-body" style={{
                    backgroundColor: background_color,
                    color: text_color,
                }}>
                    <div className="cgb-infoblock-type">
                        <p>
                            <span className="cgb-infoblock-icon"><i>i</i></span>
                            { typetext && !! typetext.length && (
                                <RichText.Content
                                    tagName="span"
                                    className={ classnames(
                                        'cgb-infoblock-type-text'
                                    ) }
                                    style={ {
                                        color: text_color
                                    } }
                                    value={ typetext }
                                />
                            )}
                        </p>
                    </div>
                    <div className="cgb-infoblock-text">
                        { infotext && !! infotext.length && (
                            <RichText.Content
                                tagName="p"
                                style={ {
                                    color: text_color
                                } }
                                value={ infotext }
                            />
                        )}
                    </div>
                </div>
                <div className="cgb-infoblock-button" style={{
                    backgroundColor: background_button_color,
                    color: text_color_button,
                }}>
                    { linktext && !! linktext.length && (
                        <RichText.Content
                            tagName="p"
                            style={ {
                                color: text_color_button
                            } }
                            value={ linktext }
                        />
                    )}
                </div>
            </div>
        );
    },

最好的解决方案是为整个页面/帖子生成某种样式表，其中包含来自所有块的所有设置。

最好的方法是样式表生成发生在页面保存时，但如果它发生在页面加载时也可以。由于这些帖子不会很大，因此性能应该不是那么大的问题。

4

1 回答 1

2

所以在四处挖掘之后，我自己弄清楚了。以防万一其他人遇到此问题，这是解决方案：

首先，必须在registerBlockType函数中定义属性

registerBlockType( 'cgb/your-block-type', {
title: __( 'Your Block Name' ),
icon: 'shield',
category: 'maybe-a-category',
keywords: [
    __( 'some keywords' ),
],

attributes: {
    background_color: {
        type: 'string',
        default: 'default' //we will use the "default"-value later
    },
},

所以现在 Wordpress 知道您要保存哪些属性。现在的问题是，只要“默认”值没有被覆盖，Wordpress 就不会将该值保存到块对象的属性中。为了解决这个问题，我们将使用save函数 from registerBlockType。（对此的快速说明：这不会触发编辑器小部件的默认值，因此您必须在第一次将小部件插入古腾堡编辑器时更改背景颜色的值才能看到它。要解决此问题，saveDefaultValue(this.props)请在开始时使用你的render()功能。）

    save: function( props ) {

    saveDefaultValues(props);

    const { attributes: {background_color}} = props;
    return (
        //... here's your html that's beeing saved
    );
},

function saveDefaultValues(props) {
    if(props.attributes.background_color === 'default'){
        props.attributes.background_color = '#f1f6fb';
    }
}

有了这个，我们强制 wordpress 保存我们的默认值。很确定有一个更好的解决方案，但由于我刚开始使用 react / Gutenberg，这是唯一让它为我工作的东西。

好的，现在我们可以将属性保存到块对象中。现在我们要创建我们的动态样式表。为此，我们正在以下目录中创建一个新的 .php 文件，/plugin-dir/src/因为我们使用的是 create-guten-block。名称无关紧要，但我以与样式表相同的方式命名它。`gutenberg-styles.css.php`

gutenberg-styles.css.php以后gutenberg-styles.css每次有人访问该帖子时都会创建一个文件。但首先我们正在查看plugin.php文件。添加以下代码：

function create_dynamic_gutenberg_stylesheet() {
    global $post;
    require_once plugin_dir_path( __FILE__ ) . 'src/gutenberg-styles.css.php';

    wp_enqueue_style('cgb/gutenberg-styles', plugins_url( 'src/gutenberg-styles.css',  __FILE__ ));
}
add_action('wp_head', 'create_dynamic_gutenberg_stylesheet', 5, 0);

此代码访问global $post变量，我们需要它从当前访问的帖子中获取所有古腾堡块。之后，我们需要我们自己gutenberg-styles.css.php的样式表，它将自动创建我们的样式表，该样式表将在下一行中排队。现在将其连接到wp_head（您可能也可以将其连接到 wordpress 保存操作，但是您必须做更多的工作来将样式表排入队列）

最后看看我们的gutenberg-styles.css.php：

$styleSheetPath = plugin_dir_path( __FILE__ ) . 'gutenberg-styles.css';
$styleSheet = '';
$blocks = parse_blocks($post->post_content);

//loop over all blocks and create styles
foreach($blocks as $block) {
    $blockType = $block['blockName'];
    $blockAttributes = $block['attrs']; //these are the attributes we've forced to saved in our block's save function

    //switch case so you can target different blocks
    switch ($blockType) {
    case 'cgb/your-block-type':
        $styleSheet .= '.your-block-class {'.PHP_EOL
        $styleSheet .= 'background-color: '.$blockAttributes['background_color'].';'.PHP_EOL
        $styleSheet .= '}'.PHP_EOL
        break;
    }
}

file_put_contents($styleSheetPath, $styleSheet); //write css styles to stylesheet (creates file if it not exists)

我PHP_EOL在每一行都添加了生成换行符，你不必这样做。但是现在您可以使用自定义块访问页面，并且会看到gutenberg-styles.css已加载并应用于您的块。

于 2019-06-24T06:35:13.220 回答