DigiPress

Highly Flexible WordPress Theme

メニュー

Gutenberg の RangeControl のリセットボタンで初期値に戻す方法

WordPress のブロックエディター(Gutenberg)のアドオン開発では、独自ブロックを追加して様々なコントローラー(コンポーネント)を利用できますが、その中でも、スライダーバーで値を変更できる RangeControl にはリセットボタンを表示できます。

RangeControl でリセットボタンを表示

RangeControl に allowReset={ true } を指定すると、リセットボタンを表示できます。

リセットボタンを表示する場合
<RangeControl
 label="Font Size"
 value={ fontSize }
 min={ 10 }
 max={ 100 }
 allowReset={ true }  // リセットボタンを表示
 onChange={ fontSize  => props.setAttributes( { fontSize } ) }
/>
RangeControl のスライダー

しかし、このリセットボタンの表示を有効にしてクリックしただけでは値が初期値に戻りません。

リセットボタンを押しても初期値に戻らない

リセットボタンで値を初期値に戻す方法

RangeControl には initialPosition というプロパティがありますが、これに初期値を指定してもリセットボタンには反映されません。

そこで、RangeControl のソースコードをみてみると、このリセットボタンが実行された際は、resetValue 関数が実行され、中身は resetCurrentInput という関数が実行されているのですが、ここではただ値を空(null)にしているだけなので、当然初期化されません。

続けて onChange が実行されていて、結局リセットボタンで初期値に戻すには、onChange値がない場合の規定値をセットしておくことが必要でした。

初期値に戻すコード
<RangeControl
 label="Font Size"
 value={ fontSize }
 min={ 10 }
 max={ 100 }
 allowReset={ true }
 initialPosition={ 16 }  // リセットボタンとは関係なし
 onChange={ newVal  => props.setAttributes( { fontSize : newVal ? newVal : 16 } }
/>
リセットボタンで初期値に戻す

Gutenberg 6.7.0 時点での動作なのでこの仕様は今後変更されるかもしれませんが、リセットボタンを表示できるのに、中身は結局 onChange が実行されているだけで、ここに値が無効な場合に初期値を割り当てるという処理を自前で挟まなければいけないのは なんだかなぁ、という感じでした。

「リセットボタン押したら initialPosition の値に戻す」なんてことは全然大した処理じゃないので、将来的に修正してほしいですね。。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE