Fix sample code on InputControl docs

[flexseth]

What?

InputControl code samples broken - the useState package has moved from wordpress/compose to wordpress/element

How?

When trying to use an InputControl, I found that many of the Gutenberg package imports had been updated, but not those for the InputControl component. This affects the Developer Documentation and also Storybook.

There were three declarations that needed to be changed in the Gutenberg folder. Search & Replace in VS Code worked to fix the code and this PR represents the updated Gutenberg codebase with changes to the developer documentation.

Testing Instructions

1. npx @wordpress/create-block input-control-block
2. Start the build to watch for changes
3. Activate the Input Control Block plugin
4. Add an input control block to a new post
5. Modify the edit function with the sample code, see steps below
6. Add the import headers above the Edit() function

import { __experimentalInputControl as InputControl } from '@wordpress/components';
import { useState } from '@wordpress/compose';

7. Change the Edit function to match sample code

export default function Edit() {
	const [ value, setValue ] = useState( '' );
	
	return (
		<InputControl
			value={ value }
			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
		/>
	);
};

8. At this point the block breaks

console error shown below

Testing the broken interface

1. In Edit.js
   change

import { useState } from '@wordpress/compose';

to

import { useState } from '@wordpress/element';

3. Save changes
4. Refresh the page or post where you inserted the block
5. The block should now show an input box

About this PR

This PR simply changes the location of the package imports, so no one else runs into this when trying to work with the InputControl component.

Screenshots included

• UI when not working
• Error code
• Functional UI

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: flexseth <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: tyxla <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR! Looking at #54908, it seems that it is currently recommended to use react instead of @wordpress/element 🤔

cc @youknowriad @tyxla

[flexseth]

Thanks for the PR! Looking at #54908, it seems that it is currently recommended to use react instead of @wordpress/element 🤔

cc @youknowriad @tyxla

Thank you for bringing this up @t-hamano! I have seen the packages imported this way and never thought about the distinction until just now.

More info on the changes in React abstraction

• Update the default JSX pragma to React instead of @wordpress/element #54494

Possible reason to use wordpress/element

There may be some additional controls offered for the InputControl component over the native React.js input component (see attributes), such as

• prefix
• suffix
• _next40pxDefaultSize

Explanation of controls

• set text to display before input field
• set text to display after input field
• make the input a little larger

Testing these controls with react import value

I will do some testing to see if I can use these controls without importing the package from Gutenberg.

[flexseth]

Checked InputControl component with
import {useState} from 'react'

This abstraction works. There may be additional features of useState that are advanced and customized for the useState hook for WordPress. If this is the case, the block will break and the user will have to import the package directly from WordPress to use this functionality. This is a known limitation per

• Reconsider @wordpress/element as a React wrapper and use React more directly. #54074

Note that we do have some functions in @wordpress/element that are additional like renderToString or createInterpolateElement...

[youknowriad]

There's strictly no difference between @wordpress/element and react for these React APIs. I think we should just make sure that we're consistent in our code base.

It seems that right now:

• For documentation purpose, we use react
• For code, we're still using @wordpress/element

So let's just maintain that status-quo for now. which I guess mean ship this PR.

[youknowriad]

This should be "react" I think.

[flexseth]

Changed import declaration to react.

This is sample code in the documentation, the code is wrapped in Markdown syntax representing JSX

```jsx

see notes on codebase consistency

[t-hamano]

It has already been mentioned, but isn't it "react" instead of "element"?

[flexseth]

I will look into it. It's possible when I was making changes it wasn't syncing to the correct branch.

Still getting familiar with the workflow of Git and contributing upstream vs. local working copy.

Will report back, @t-hamano

[flexseth]

This should be resolved now.

[tyxla]

It seems that right now:

For documentation purpose, we use react
For code, we're still using @wordpress/element

Riad put it really well. On top of that, other than another minor CHANGELOG correction, think this should be good to go - thanks!

[flexseth]

Thank you @youknowriad, @t-hamano and @tyxla for support! I will update and squash the commits to clean this up. This has been a great exercise in understanding commit history and the upstream flow, so I really do appreciate your feedback and direction!

[flexseth]

Thank you for the support on this @t-hamano.

Successfully rebased and updated refs/heads/docs/update-code-samples.

• Commits rebased
• Followed message standards for final commit
• Some checks are not passing but are related to other packages - useEffect - mostly

Thanks again! This was by far the most challenging software thing I've ever wrestled with 😄

Requesting final review @tyxla - thanks for the help on the CHANGELOG update.

[flexseth]

@tyxla - I tried to change the commit message and somehow added quite a few more commits. Please hold off on reviewing. I'll get some help from my mentor after they return from WC Asia.

[flexseth]

/assign

[youknowriad]

Don't worry too much about commit messages, the person merging the PR will change and adapt it properly.

[t-hamano]

LGTM! I only deleted unnecessary spaces in CHANGELOG.

[flexseth]

Thank you everyone for helping out on this!