block: setting sidebar options

in block.json:

{ ...
  "attributes": {
    "foo": {
      "type": "string",
      "default": "bar"
    }
  }
}

in render.php, the data is accessible simply with echo $attributes['foo'];

In edit.js

import { TextControl, Panel, PanelBody } from '@wordpress/components';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';

export default function Edit( { attributes, setAttributes } ) {
	const blockProps = useBlockProps();

	return (
		<p { ...blockProps }>
			<InspectorControls key="setting">
				<Panel>
					<PanelBody title="Champs" initialOpen={true}>
						<TextControl className="blocks-base-control__input"
							label={"Foo"}
							value={attributes.foo}
							onChange={(val) => setAttributes({foo: val})}
						/>
					</PanelBody>
				</Panel>
			</InspectorControls>
			{ attributes.heading }
		</p>
	);
}

Adding toggle button, for an attribute defined as { foo: { type: "boolean", default: true } }

 <ToggleControl
    label="Toggle Content"
    checked={ showContent }
    onChange={ (newValue) => setAttributes( { foo: newValue } )  }
/>

A range button :

<InspectorControls>
    <PanelBody>
        <RangeControl
            label="Columns"
            value={ columnCount }
            onChange={ onChangeColumnCount }
            min={ 2 }
            max={ 6 }
         />
   </PanelBody>
</InspectorControls>

NB: To extend useBlockProps hooks, just send new data as parameter:

{ ...useBlockProps( { style: columnStyles } ) }

Sources: