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

我已经用Create Guten Block（）创建了一个工作的Gutenberg块。 目前它只适用于内联样式，但作为一项要求，我必须避免使用它们

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

我的块的当前保存函数（block.js）

保存：功能（道具）{
const{attributes:{typetext、infotext、linktext、background\u color、background\u button\u color、text\u color、text\u color\u button}}=props；
返回(

我
{typetext&&！！typetext.length&&(
)}

{infotext&&！！infotext.length&&(
)}
{linktext&&！！linktext.length&&(
)}
);
},

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

---

最好的方法是在页面保存时生成样式表，但在页面加载时也可以。由于这些帖子不会太多，所以性能应该不会有太大问题。

所以在仔细研究之后，我自己已经找到了答案。 以防其他人遇到此问题，以下是解决方案：

首先，必须在

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就不会将该值保存到块对象的属性中。 为了解决这个问题，我们将使用

registerBlockType

中的

save

函数。 （请注意：这不会触发编辑器小部件的默认值，因此您必须更改背景颜色的值，以便在第一次将小部件插入gutenberg编辑器时看到它。若要解决此问题，请在

render（）

函数的开头使用

saveDefaultValue（this.props）

。）

这样我们就可以强制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

变量，我们需要它从当前访问的post获取所有的gutenberg块。 之后，我们需要我们自己的

gutenberg styles.css.php

，它将自动创建我们的样式表，并在下一行排队。 现在将其连接到

wp\u 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\u EOL

来生成换行符，您不必这样做。

---

但是现在您可以使用自定义块访问页面，并将看到

古腾堡样式。css

已加载并应用于您的块。

您真的需要创建样式表，如“创建文件名.css”文件吗？或者，根据块的属性，如果组件具有某种样式就足够了吗？@niklas是的，我想要一个filename.css；如果每次有人访问某个页面时都会生成它，那就更好了。（我知道，这对性能不好）要求“避免内联样式”从何而来。它可能仍然比加载新样式表更有效。

$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)