Question

我已经使用创建Guten块（https://github.com/ahmadawais/create-guten-block）创建了一个可用的Gutenberg块。目前，它仅适用于内联样式，但是作为一项要求，我必须避免使用它们。

因此，我想在保存帖子时创建一个帖子/页面样式表，包括我的图块的样式设置（例如background-color，color，font-size ...）

我的块的当前保存功能（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>
        );
    },

最好的解决方案是为整个页面/帖子生成某种样式表，并使用所有块中的所有设置。

最好的方法是在页面保存时进行样式表生成，但是在页面加载时进行也可以。由于这些职位不会太多，因此性能不应该成为问题。

Answer 1

因此，在深入研究之后，我自己弄清楚了。万一有人遇到这个问题，这是解决方案：

首先，必须在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中的registerBlockType函数。（有关此内容的简短说明：这不会触发编辑器小部件的默认值，因此，您始终必须更改background_color的值才能在首次将小部件插入gutenberg编辑器中时看到它。要解决此问题，请使用{{1} }放在saveDefaultValue(this.props)函数的开头。）

render()

为此，我们迫使wordpress保存默认值。可以肯定的是，有一个更好的解决方案，但是由于我刚开始使用react / Gutenberg，这是让它为我工作的唯一方法。

好吧，现在我们可以将属性保存到块对象中。现在我们要创建动态样式表。为此，由于我们使用create-guten-block，因此在以下目录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'; } }中创建一个新的.php文件。名称无关紧要，但是我用与样式表相同的方式命名。 `gutenberg-styles.css.php``

每次有人访问该帖子时，/plugin-dir/src/将稍后创建一个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);变量，我们需要它来从当前访问的帖子中获取所有gutenberg块。之后，我们需要自己的global $post，它将自动创建我们的样式表，该样式表将在下一行入队。现在，将其连接到gutenberg-styles.css.php（您也可以将其连接到wordpress保存操作，但是您需要做更多工作来排入样式表）

最后看看我们的wp_head：

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已加载并应用于您的块。

动态块-如何在发布后保存/加载时创建动态样式表

1 个答案: