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

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

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

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

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

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

最佳答案

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

首先，必须在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编辑器中时看到它。要解决此问题，请使用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，这是让它为我工作的唯一方法。

好的，现在我们可以将属性保存到块对象中。
现在我们要创建动态样式表。
为此，我们在以下目录/plugin-dir/src/中创建一个新的.php文件，因为我们正在使用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块。
之后，我们需要自己的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已加载并应用于您的块。