1

我制作了一个需要一些自定义 css 的自定义块。我不能将此内联作为元素的属性，因为它包含一些条件@media内容。

我想到了使用动作wp_enqueue_scripts或wp_head。

这是我的块回调的简化最后一部分：

    $custom_css = "
        #rtt-row-{$attributes['clientId']}{
            background: 'red';
        }";

    add_action( 'wp_enqueue_scripts', function () use ($custom_css) {
        wp_add_inline_style( 'custom-css', $custom_css );
    });
    
    return sprintf(
        '<div %1$s class="%2$s">
                %3$s
            </div>',

        (array_key_exists('clientId', $attributes) && !empty($attributes['clientId'])) ? 'id="rtt-row-' . $attributes['clientId'] . '"' : '',
        esc_attr(implode(' ', $classes)),
        $content
    );

我试过了

        add_action('wp_head', function () use ($custom_css) {
            echo '<style>';
            echo $custom_css ;
            echo '</style>';
        });

起作用的是回响<style>进入身体。但那是最干净的吗？

    return sprintf(
        '<style type="text/css">%4$s</style>
         <div %1$s class="%2$s">
            %3$s
        </div>',

        (array_key_exists('clientId', $attributes) && !empty($attributes['clientId'])) ? 'id="rtt-row-' . $attributes['clientId'] . '"' : '',
        esc_attr(implode(' ', $classes)),
        $content,
        $custom_css
    );

欢迎任何指点

4

0 回答 0