弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。
まずは残念ながら現状の WordPress の機能ではありません。
と、言いますか私もそれは既にできるようになったと思っていました。
ただ、要望の多い機能かと思いますので、WordPress 本体の方で改善されるとは思います。
裏技的な感じですが、
外観 > エディタ > テンプレート > (適当にテンプレート選ぶ) > グローバルスタイルボタン > ブロック > 見出し
からなら色は指定できるのですが、見出しレベル毎に指定できないので意味がありません。
やはり一般的に
外観 > エディタ > テンプレート > 適当にテンプレート選ぶ) > グローバルスタイルボタン > 3点アイコンから追加CSS に
h2 {
background-color:var(--wp--preset--color--bg-secondary, #efefef);
padding:.6em .7em .5em;
border-radius: 4px;
}
h3 {
border-bottom: 1px solid #333;
padding:.6em 0 .5em;
}
のように書くのが一番てっとり早いのが現状です。
ちなみに別の回りくどいやりかたとしては
以下のようなコードを my-block-theme-plugin.php など適当な名前で保存して zip に圧縮して、
プラグイン > 新規追加 からアップロード&有効化するという方法もあります。
<?php
/*
Plugin Name: My Block Theme Plugin
Description: A custom plugin for block theme enhancements.
Version: 0.0.0
Author:
License: GPL2 or later
*/
// theme.json スタイル設定を上書き
add_filter( 'wp_theme_json_data_user', function( $theme_json ) {
$data = $theme_json->get_data();
// h2 の背景色を上書き
$data['styles']['elements']['h2']['color']['background'] = 'var(--wp--preset--color--bg-secondary, #efefef)';
$data['styles']['elements']['h2']['spacing']['padding'] = '.6em .7em .5em';
$data['styles']['elements']['h2']['border']['radius'] = '4px';
// h3 の下線(ボーダー)を3pxの黒線に
$data['styles']['elements']['h3']['border']['bottom']['color'] = '#333';
$data['styles']['elements']['h3']['border']['bottom']['width'] = '1px';
$data['styles']['elements']['h3']['border']['bottom']['style'] = 'solid';
$data['styles']['elements']['h3']['spacing']['padding'] = '.6em 0 .5em';
$theme_json->update_with( $data );
return $theme_json;
});
Attachments:
You must be
logged in to view attached files.