Address console warning for Image block inside Column block

[kienstra]

Description

There is a console warning that sometimes appears when adding an Image block inside a Column block.

We also saw this with the Image block inside custom block: ampproject/amp-wp#2194 (comment)

This PR usually prevent this error locally. But the warning still appears sometimes with it.

I'm not sure if it's the right approach, or if it has side-effects.

This is modeled after a few fixes for similar warnings, like #5443.

Steps To Reproduce:

1. Create a post
2. Add a "Columns block"
3. Add an "Image" block inside it
4. Click "Media Library" and select an image
5. A console warning appears:

react-dom.165d5c53.js:500 Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input
    in div (created by De)
    in div (created by De)
    in De
    in Unknown (created by WithInstanceId(Component))
    in WithInstanceId(Component) (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody) (created by t)
    in t (created by Context.Consumer)
    in se (created by InspectorControlsSlot)
    in InspectorControlsSlot
    in div
    in Unknown (created by n)
    in n (created by Context.Consumer)
    in WithSelect(Component)
    in div (created by t)
    in t (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody)
    in div (created by sn)
    in sn
    in div (created by sn)
    in sn (created by n)
    in div (created by n)
    in n (created by Context.Consumer)
    in Unknown (created by b)
    in b
    in t (created by Context.Consumer)
    in se (created by SidebarSlot)
    in SidebarSlot
    in div (created by t)
    in t
    in Unknown (created by n)
    in n (created by Context.Consumer)
    in WithViewportMatch(Component) (created by NavigateRegions(WithViewportMatch(Component)))
    in div (created by NavigateRegions(WithViewportMatch(Component)))
    in NavigateRegions(WithViewportMatch(Component)) (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(NavigateRegions(WithViewportMatch(Component))) (created by n)
    in n (created by Context.Consumer)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Component)))) (created by t)
    in t (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(t)
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithDispatch(t)) (created by t)
    in t (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(t) (created by n)
    in n (created by Context.Consumer)
    in WithSelect(WithDispatch(t)) (created by t)
    in StrictMode (created by t)
    in t (created by n)
    in n (created by Context.Consumer)
    in WithSelect(t)

How has this been tested?

• Performing the steps above, and observing that there usually isn't a console warning
• Still, this could use feedback, as I'm not sure this is the best approach

Screenshots

Before PR:

Types of changes

Bug fix: This sets a default value of 0 for width and height.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[swissspidy]

I just tested the following and it seems to work:

diff --git packages/block-library/src/image/edit.js packages/block-library/src/image/edit.js
index 91eeb5a40..645248bc7 100644
--- packages/block-library/src/image/edit.js
+++ packages/block-library/src/image/edit.js
@@ -482,7 +482,7 @@ class ImageEdit extends Component {
 									type="number"
 									className="block-library-image__dimensions__width"
 									label={ __( 'Width' ) }
-									value={ width !== undefined ? width : imageWidth }
+									value={ width || imageWidth || '' }
 									min={ 1 }
 									onChange={ this.updateWidth }
 								/>
@@ -490,7 +490,7 @@ class ImageEdit extends Component {
 									type="number"
 									className="block-library-image__dimensions__height"
 									label={ __( 'Height' ) }
-									value={ height !== undefined ? height : imageHeight }
+									value={ height || imageHeight || '' }
 									min={ 1 }
 									onChange={ this.updateHeight }
 								/>

[kienstra]

Thanks, @swissspidy! Feel free to push that to this branch if possible. Otherwise, I'll push it and credit you.

[swissspidy]

@kienstra If that change works for you, feel free to #shipit 🙂

[kienstra]

Thanks, @swissspidy! I just committed your change. Though it looks like the build failed, with a failed E2E test. I'm looking at that.

[kienstra]

Would you be able to restart the build, to see if it'll pass? Thanks!

[youknowriad]

LGTM, Thanks for the fix