[ブロック開発]Cannot read properties of undefined (reading ‘orientation’) エラーの対処方法

WordPress のブロック開発(Gutenberg)にて、WordPress が提供するコンポーネントを操作している最中に、コンソールに以下のエラーが発生したときの備忘録。

エラーメッセージ

TypeError: Cannot read properties of undefined (reading ‘orientation’)

このエラーは、GradientPicker コンポーネントでグラデーションを設定しようとしたときに発生することがたまにあります。

@storybook/cli – Storybook

https://wordpress.github.io/gutenberg/?path=/docs/components-gradientpicker–docs

原因

これは、GradientPicker コンポーネントの value プロパティに undefined が渡されたとき、つまり値の初期化を行っていない場合に発生します。

対処

GradientPicker を利用するデータ(変数)には、デフォルト(グラデーションのCSS)の値を与えておくか、value プロパティの値が有効値でない場合は、null を渡すことでグラデーションが未選択の状態として処理されます。

<GradientPicker
    value={ gradient || null } // -> gradient　には初期値を与えておくか、null を渡す
    onChange={ ( newGradient ) => setAttributes( newGradient ) }
    gradients={ [
        {
            name: 'JShine',
            gradient:
                'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
            slug: 'jshine',
        },
        {
            name: 'Moonlit Asteroid',
            gradient:
                'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
            slug: 'moonlit-asteroid',
        },
        {
            name: 'Rastafarie',
            gradient:
                'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
            slug: 'rastafari',
        },
    ] }
/>