ブロックエディタ全盛ですが、これはブロックエディタのカラーピッカーについての記事ではありません。
独自の管理画面にカラーピッカーを設置する際の話です。
初期化時のオプションについてのリファレンスを見つけるのに苦労したのでここに記します。
まず設置方法
PHPで admin_enqueue_scripts フィルターフックを使ってwp-color-picker スタイルをエンキューします。
Color Picker はカスタマイザーなどでも使われるので、管理画面ではデフォルトで読み込まれているんですかね、多分。
スタイルを読み込むだけで使えるようになります。
スタイルはデフォルトではないんだ、とちょっと思いました。
add_action( 'admin_enqueue_scripts', function(){
wp_enqueue_style( 'wp-color-picker' );
} );
次に、HTML中にカラーピッカーを適用するinput要素を追加します。
<input type="text" class="color-picker">
クラス名にcolor-pickerを追加していますが、これは次にやるカラーピッカーの初期化でinput要素を指定するためだけで、セレクタで選択できればクラスでなくてもなんでもいいです。
次に、JavaScript で input 要素に対してカラーピッカーを適用します。
jQuery(function($){
$('.color-picker').wpColorPicker();
});
できました。
これが表示されたときの私の感想を一言で言い表すと、
「葬式やないか・・・」
ということです。
何かデフォルトでぱぁーっとしたカラーを選択できるようにはできないんでしょうか。
できます。
対象のinput要素に最初から色を設定しておけばいいのです。
<input type="text" class="color-picker" value="#FF0000">
しかし、私の意図としては別に最初から色が選択された状態にはしなくていいのです。
カラーピッカーを開いた時に選択されていればいいので、最初から値がinputに入っていてほしくはないのです。
そんなことができるのかどうか（できないですが）、カラーピッカーの設定についていろいろ調べた軌跡です。
カラーピッカーの設定
defaultColor
まず、インターネットで検索すると、 defaultColorというオプションがあるようです。
しかしこれは、カラーピッカーに「デフォルト」というボタンを追加して、それを押せばセットされる色を設定するものです。
var defaults = {
defaultColor: '#00FF00',
};
$('.color-picker').wpColorPicker( defaults );
つまり、input要素に設定のデフォルト値を最初から入れておき、何かに変更しても「デフォルト」ボタンを押せば最初の値に戻せるよ、ということですね。
この値はwpColorPickerのオプションとしてではなく、input 要素の data-default-color属性の値としても渡せます。
その方がinput要素ごとに変更が容易ですので実用的だと思います。
全てのオプションはどこにあるのか
オプションの全て（と＋α）はここにあります。
Iris A(n awesome) Color Picker. ( automattic.github.io )Iris をダウンロードできるので、WordPress とは関係がない、自分のプロジェクトにこのカラーピッカーを導入することができます。
この Iris とWordPress のカラーピッカーとの関連は私に聞かないでおいていただきたいですが、Color Picker の中身は Iris のようですよ ( github.com )。
さて、先ほどの automattic.github.io にあるオプション類を確認してみましょう。
color
いきなり、
「最初にHTMLエレメントのvalue属性の値を取得しますが、この属性でセットすることができます」 （意訳）
といったことが書かれています。
ほほう・・・できそうです。できるんじゃないだろうか。
ただ、出来そうなだけで、できません。
さきほどの github のソースを見てみましょう。colorはどこから来ているのか・・・
color = 'hsl(' + el.val() + ', 100, 50)';
Iris に渡している color は常に HTMLエレメント（el）から取得されています。
今回の調査は終了しました。
とは言え
他のオプションも確認してみましょう。
WordPress の カラーピッカーではどのようなオプションが使えるのでしょうか。
WordPress の githubのソースによると、以下のとおりです。
options: {
defaultColor: false,
change: false,
clear: false,
hide: true,
palettes: true,
width: 255,
mode: 'hsv',
type: 'full',
slider: 'horizontal'
},
ほとんどのオプションの説明は Iris のページにあるので、そちらを参照すれば設定できそうです。
しかし、type と slider は Iris には無いので、WordPress独自のオプションのようです・・・と思いきや、WordPress ではそれらのオプションもしれっと Iris に渡しています。
こんどは Iris のソースコードを確認してみます・・・
options: {
color: false,
mode: 'hsl',
controls: {
horiz: 's', // horizontal defaults to saturation
vert: 'l', // vertical defaults to lightness
strip: 'h' // right strip defaults to hue
},
hide: true, // hide the color picker by default
border: true, // draw a border around the collection of UI elements
target: false, // a DOM element / jQuery selector that the element will be appended within. Only used when called on an input.
width: 200, // the width of the collection of UI elements
palettes: false // show a palette of basic colors beneath the square.
},
そのようなオプションは無いようでございます。
Iris は jQuery UI の slider コンポーネントに依存しているということなので、どこかの何かでそちらに行くことになっているのかもしれませんが、slider を ‘vertical’ に設定してみても、何かが変わった感じはありません。
調査は以上になっております。