JavaScript warning in the Media & Text block

[carolinan]

Description

I am seeing this JavaScript warning in the browser tools console when I add a Media & Text block with an image and enable the option "Crop image to fill entire column".

It is happens on WordPress 6.4 Beta 1 with and without Gutenberg active.
I have been unable to reproduce it on 6.3.x.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at span
    at FormToggle (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:49239:5)
    at div
    at http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:669:66
    at UnconnectedHStack (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:51031:71)
    at div
    at http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:669:66
    at div
    at http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:669:66
    at BaseControl (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:34518:3)
    at ToggleControl (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:66166:3)
    at div
    at UnforwardedPanelBody (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:58638:5)
    at RegisterResetAll (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:41103:3)
    at ToolsPanelInspectorControl (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:41121:3)
    at StyleProvider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:64639:5)
    at Fill (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:63174:5)
    at Fill
    at InspectorControlsFill
    at StyleProvider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:64639:5)
    at InspectorControlsFill (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:41070:3)
    at MediaTextEdit (http://64.local/wp-content/plugins/gutenberg/build/block-library/index.min.js?ver=8576a769ae37778c5712:31992:3)
    at Edit (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:14043:5)
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:57202:11
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:57403:96
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:59327:113
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:62365:30
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:59903:102
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:61921:11
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:60968:11
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:59087:65
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:58034:24
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:58206:5
    at http://64.local/wp-content/plugins/gutenberg/build/edit-post/index.min.js?ver=0433c9f4db8deeece2ac:7920:5
    at http://64.local/wp-content/plugins/gutenberg/build/data/index.min.js?ver=74da85cc6ab9fb380233:1957:82
    at http://64.local/wp-content/plugins/gutenberg/build/data/index.min.js?ver=74da85cc6ab9fb380233:2075:77
    at WithMultipleValidation(WithToolbarControls(WithBlockHooks(WithToolbarControls(WithInspectorControls(WithInspectorControls(WithDuotoneControls(WithToolbarControls(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))))))))) (http://64.local/wp-content/plugins/gutenberg/build/compose/index.min.js?ver=f454b08107cc027ce103:2502:10)
    at FilteredComponentRenderer (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:51712:9)
    at EditWithGeneratedProps (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:14061:5)
    at BlockEdit (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:14138:5)
    at BlockCrashBoundary (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:15055:5)
    at BlockListBlock (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:15439:10)
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:57247:5
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:58566:5
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:58929:5
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:60366:89
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:62409:124
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:59992:79
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:61944:5
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:60990:5
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:61064:5
    at FilteredComponentRenderer (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:51712:9)
    at http://64.local/wp-content/plugins/gutenberg/build/compose/index.min.js?ver=f454b08107cc027ce103:2363:10
    at http://64.local/wp-content/plugins/gutenberg/build/data/index.min.js?ver=74da85cc6ab9fb380233:1957:82
    at http://64.local/wp-content/plugins/gutenberg/build/data/index.min.js?ver=74da85cc6ab9fb380233:2075:77
    at shouldComponentUpdate (http://64.local/wp-content/plugins/gutenberg/build/compose/index.min.js?ver=f454b08107cc027ce103:2496:12)
    at Items (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:15944:3)
    at BlockListItems
    at div
    at Root (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:15862:3)
    at BlockList
    at RecursionProvider (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:48278:3)
    at StyleProvider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:64639:5)
    at body
    at iframe
    at Iframe (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:33836:3)
    at IframeIfReady (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:33990:83)
    at ExperimentalBlockCanvas (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:12860:3)
    at div
    at MotionComponent (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:94135:65)
    at div
    at MotionComponent (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:94135:65)
    at div
    at BlockTools (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:23236:3)
    at VisualEditor (http://64.local/wp-content/plugins/gutenberg/build/edit-post/index.min.js?ver=0433c9f4db8deeece2ac:6860:3)
    at div
    at NavigableRegion (http://64.local/wp-content/plugins/gutenberg/build/edit-post/index.min.js?ver=0433c9f4db8deeece2ac:11340:3)
    at div
    at div
    at div
    at InterfaceSkeleton (http://64.local/wp-content/plugins/gutenberg/build/edit-post/index.min.js?ver=0433c9f4db8deeece2ac:11102:3)
    at Layout (http://64.local/wp-content/plugins/gutenberg/build/edit-post/index.min.js?ver=0433c9f4db8deeece2ac:2988:76)
    at ErrorBoundary (http://64.local/wp-content/plugins/gutenberg/build/editor/index.min.js?ver=ddc87e114bd9c4d5a480:4295:5)
    at BlockRefsProvider (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:47709:3)
    at Provider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:63720:3)
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:47771:5
    at http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:48126:5
    at WithRegistryProvider(Component)
    at BlockContextProvider (http://64.local/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=b2a4a350286837461ba1:13275:3)
    at EntityProvider (http://64.local/wp-content/plugins/gutenberg/build/core-data/index.min.js?ver=1d723e91327bd8304ed8:2274:3)
    at EntityProvider (http://64.local/wp-content/plugins/gutenberg/build/core-data/index.min.js?ver=1d723e91327bd8304ed8:2274:3)
    at http://64.local/wp-content/plugins/gutenberg/build/editor/index.min.js?ver=ddc87e114bd9c4d5a480:11416:3
    at http://64.local/wp-content/plugins/gutenberg/build/editor/index.min.js?ver=ddc87e114bd9c4d5a480:11706:5
    at WithRegistryProvider(Component)
    at SlotFillProvider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:63348:3)
    at SlotFillProvider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:63862:3)
    at Provider (http://64.local/wp-content/plugins/gutenberg/build/components/index.min.js?ver=55394090659a9d86a652:63720:3)
    at Editor (http://64.local/wp-content/plugins/gutenberg/build/edit-post/index.min.js?ver=0433c9f4db8deeece2ac:7425:3)

Step-by-step reproduction instructions

1. Create a new post or page.
2. Add a media & text block. Select or upload an image.
3. Enable the option Crop image to fill entire column
4. View the warning in the console.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.4 beta 1 current nightly using the beta tester plugin.
With and without Gutenberg trunk active.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[carolinan]

I think the imageFill block attribute that is used with the crop control should be updated with a default value set to false.
Current:

		"imageFill": {
			"type": "boolean"
		},

Suggestion:

		"imageFill": {
			"type": "boolean",
			"default": false
		},

Or, the control updated to avoid imageFill being undefined:

				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Crop image to fill entire column' ) }
					checked={ imageFill || false }
					onChange={ () =>
						setAttributes( {
							imageFill: ! imageFill,
						} )
					}
				/>