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