WordPress のダイナミックブロックでサポートしたマージンやパディングなどのスタイル情報を取得できる wp_style_engine_get_styles がインラインスタイルの出力に便利

2025年12月19日

例えば、次のようなダイナミックブロック（カスタムブロック）を作り、マージンが設定できるようサポートしていたとします。

上下のマージン設定をサポートした場合

次に、フロントエンドでの HTML 出力を PHP 側のメソッドに委ねるため、register_block_type_args の引数 $args[‘render_callback’] のコールバック関数内で wp_style_engine_get_styles を次のように使ってみましょう。

if ( ! empty( $attributes['style'] ) ){
 $style = wp_style_engine_get_styles( $attributes['style'] );
}

格納した $style を dump すると、次のようなデータが取得できます。

array(2) {
  ["css"]=>
  string(87) "margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);"
  ["declarations"]=>
  array(2) {
    ["margin-top"]=>
    string(30) "var(--wp--preset--spacing--50)"
    ["margin-bottom"]=>
    string(30) "var(--wp--preset--spacing--50)"
  }
}

「--wp--preset--〜」は、theme.json で定義している CSS 変数です。

ブロックに関する用語、コード、関数などが並んで複雑に見えてしまうかもですが「ダイナミックブロックでサポートされているマージンのスタイル情報が取得できる」ってところがポイントです。

取得したデータを加工して、ダイナミックブロック出力時にインラインスタイルとして適用する時に使っています。

本記事公開時点では、日本国内でこの関数に触れられているネット上の記事は見つからなかったので、あまり知られていないかもしれない・・・ですが「これ便利で使っています」的なノリで書きました。

何かのご参考となりましたら幸いです。