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 } }
/>