Gutenbergで要素にインラインスタイルを出力する

Gutenbergでオリジナルのブロックを作る場合、設定値からインラインスタイルを作る作業が必要になります。その時の書き方の覚書です。ブロックを自作したい人向けの内容です。

インラインスタイルの書き方

Gutenbergである要素の背景色をサイドパネルから変更できるようにしたい場合、インラインで出力するスタイルを次のように定義します。

// backColor :背景色が設定された変数

const boxStyle = {
			backgroundColor: backColor || undefined,
		}

return(
    <div className={'box'} style={boxStyle}>
		<InnerBlocks.Content />
    </div>
);

backColor= '#fff'の場合、出力されるＨＴＭＬは次のようになります。

<div class="box" style="background-color:#fff">
コンテンツ
</div>

ここで、backgroundColorの設定値がbackColor || undefinedとなっていますが、これはbackColorの値が空の場合にインラインスタイルを表示しないようにするための書き方です。もし下記のように|| undefindを付けずに書くと、

const boxStyle = {
			backgroundColor: backColor,
		}

出力されるＨＴＭＬは次のようになり不要な属性値が追加された状態になってしまいます。

<div class="box" style="background-color:">
コンテンツ
</div>

条件分岐がある場合のスタイルの書き方

他の変数の値によってＣＳＳのプロパティの内容を変える条件分岐が必要な場合の書き方をご紹介します。

例えば、デフォルトで背景にグラデーションが適用されているボックスの色を変更する場合を考えてみましょう。こんなＣＳＳが適用されていることを想定しています。

.box {
		background-color:#efefef;
		background-image: linear-gradient(-45deg, #67922e, #a6da62);
}

この場合、background-colorを指定するだけではbackground-imageで設定しているグラデーションは変化しないため意図した色にはなりません。色の指定があるときだけbackgroud-image:noneもインラインで出力するようにする必要があります。そのためのコードは次のようになります。

const boxStyle = {
		backgroundColor: backColor || undefined,
		backgroundImage: backColor && 'none' || undefined,
}

return(
    <div className={'box'} style={boxStyle}>
		<InnerBlocks.Content />
    </div>
);

これで次ぎのようなＨＴＭＬが出力され意図した色に変更できます。

<div class="box" style="background-color:#fff;background-image:none">
コンテンツ
</div>

ここで出てきたbackColor && 'none' || undefinedはbackColorの値が空白でなければ&&の後の処理（’none’を出力）、無ければ||の後の処理（undefinde、プロパティを表示しない）をするという意味です。この書き方に慣れると条件分岐がシンプルに書けるので便利です。