ブロック設定パネル（色設定）

Contents

色設定
サンプル
ブロック制御コメント

色設定

背景色

p.has-background {
    padding:20px 30px
}
:root .has-pale-pink-background-color {
    background-color:#f78da7
}

:root .has-vivid-red-background-color {
    background-color:#cf2e2e
}

:root .has-luminous-vivid-orange-background-color {
    background-color:#ff6900
}

:root .has-luminous-vivid-amber-background-color {
    background-color:#fcb900
}

:root .has-light-green-cyan-background-color {
    background-color:#7bdcb5
}

:root .has-vivid-green-cyan-background-color {
    background-color:#00d084
}

:root .has-pale-cyan-blue-background-color {
    background-color:#8ed1fc
}

:root .has-vivid-cyan-blue-background-color {
    background-color:#0693e3
}

:root .has-vivid-purple-background-color {
    background-color:#9b51e0
}

:root .has-very-light-gray-background-color {
    background-color:#eee
}

:root .has-cyan-bluish-gray-background-color {
    background-color:#abb8c3
}

:root .has-very-dark-gray-background-color {
    background-color:#313131
}

文字色

:root .has-pale-pink-color {
    color:#f78da7
}

:root .has-vivid-red-color {
    color:#cf2e2e
}

:root .has-luminous-vivid-orange-color {
    color:#ff6900
}

:root .has-luminous-vivid-amber-color {
    color:#fcb900
}

:root .has-light-green-cyan-color {
    color:#7bdcb5
}

:root .has-vivid-green-cyan-color {
    color:#00d084
}

:root .has-pale-cyan-blue-color {
    color:#8ed1fc
}

:root .has-vivid-cyan-blue-color {
    color:#0693e3
}

:root .has-vivid-purple-color {
    color:#9b51e0
}

:root .has-very-light-gray-color {
    color:#eee
}

:root .has-cyan-bluish-gray-color {
    color:#abb8c3
}

:root .has-very-dark-gray-color {
    color:#313131
}

例外ブロック

見出し
文字色のみで背景色は無し

プルクオート
背景色なしで、メインカラー（ボーダーカラー）と文字色の設定になり、メインカラーはインラインCSSで挿入される。

表
表の色設定はパステル調の4色となり、ここの色設定とは異なる。

グループ
グループは背景色のみ

サンプル

色設定 / 背景色と文字色

ブロック制御コメント

<!-- wp:paragraph {"textColor":"very-light-gray","backgroundColor":"very-dark-gray"} -->
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"vivid-red","backgroundColor":"very-light-gray"} -->
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"very-dark-gray","backgroundColor":"luminous-vivid-amber"} -->
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"pale-pink","backgroundColor":"very-dark-gray"} -->
<!-- /wp:paragraph -->