Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JavaScript warning in the Media & Text block #54963

Closed
carolinan opened this issue Oct 2, 2023 · 1 comment · Fixed by #55038
Closed

JavaScript warning in the Media & Text block #54963

carolinan opened this issue Oct 2, 2023 · 1 comment · Fixed by #55038
Assignees
@Mamaduka @carolinan
Labels
[Block] Media & Text Affects the Media & Text Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@carolinan
Copy link
Contributor

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 carolinan added [Type] Bug An existing feature does not function as intended [Block] Media & Text Affects the Media & Text Block labels Oct 2, 2023
@carolinan
Copy link
Contributor Author

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

@carolinan carolinan mentioned this issue Oct 2, 2023
Closed
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 2, 2023
@Mamaduka Mamaduka mentioned this issue Oct 4, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Mamaduka Mamaduka

@carolinan carolinan

Labels
[Block] Media & Text Affects the Media & Text Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
No open projects
WordPress 6.4 Editor Tasks
Status: Done
Milestone
No milestone
2 participants
@Mamaduka @carolinan