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 には 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 の値に戻す」なんてことは全然大した処理じゃないので、将来的に修正してほしいですね。。