Title: BoxControl component issue
Last modified: January 28, 2025

---

# BoxControl component issue

 *  Resolved [Kiyaanix](https://wordpress.org/support/users/kiyaanix/)
 * (@kiyaanix)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/)
 * It would be great if someone help me to resolve this issue. I am trying to create
   a gutenberg block and having some issue to use the BoxControl component.
 *     ```wp-block-code
       import { useState } from "@wordpress/element";import { BoxControl } from '@wordpress/components';function TestComponent() {	const [padding, setPadding] = useState({ top: '10px', bottom: '10px' });	return (		<BoxControl			label="Padding"			values={padding}			onChange={(value) => setPadding(value)}		/>	);}export default TestComponent;
       ```
   
 * Error: type is invalid — expected a string (for built-in components) or a class/
   function (for composite components) but got: undefined
 * I tried to console the BoxControl component and i get undefined.
 * I am using latest version of the followings WordPress, [@wordpress](https://wordpress.org/support/users/wordpress/)/
   scripts and [@wordpress](https://wordpress.org/support/users/wordpress/)/components.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Jayson Gumanid](https://wordpress.org/support/users/jaygumanid/)
 * (@jaygumanid)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/#post-18272068)
 * Hey [@kiyaanix](https://wordpress.org/support/users/kiyaanix/)
    1. Are you using the latest version of `@wordpress/components`?
    2. What version of WordPress and Gutenberg are you using? BoxControl was introduced
       in WordPress 5.9. If you’re using an older version, it may not be available.
    3. Can you console log `BoxControl` before rendering? Try adding:`console.log(BoxControl);`
       If it logs `undefined`, it likely means the package is missing or outdated.
    4. Have you tried using the full padding object (including left & right)? Sometimes
       an incomplete object structure can cause issues.
 * Let me know how it goes
 *  Thread Starter [Kiyaanix](https://wordpress.org/support/users/kiyaanix/)
 * (@kiyaanix)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/#post-18272387)
 * Hi [@jaygumanid](https://wordpress.org/support/users/jaygumanid/)
 * Thank you for your response.
    1. Yes, I am using latest version of `@wordpress/components` , as you can check
       the package.json file at the bottom.
    2. I am using the latest version of WordPress(6.7.1), I don’t understand the latest
       version of Gutenberg (I assume it comes with the latest version of WordPress?)
    3. Yes i tried to console.log the `BoxControl` and do get the `undefined`.
    4. Yes, i tried with full padding object.
 * Please have a look to package.json file.
 *     ```wp-block-code
       "devDependencies": {  "@wordpress/scripts": "^30.9.0",  "grunt": "^1.6.1",  "grunt-wp-i18n": "^1.0.3",  "grunt-wp-readme-to-markdown": "^2.1.0"},"dependencies": {  "@wordpress/components": "^29.2.0"}
       ```
   
 *  Thread Starter [Kiyaanix](https://wordpress.org/support/users/kiyaanix/)
 * (@kiyaanix)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/#post-18276250)
 * Sorry, I was using this on Block Editor instead of Gutenberg. Now the issue is
   resolved.
 * Many Thanks!
 *  [jlongbrake](https://wordpress.org/support/users/jlongbrake/)
 * (@jlongbrake)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/#post-18281963)
 * Can you explain more what you did to resolve this? BoxControl keeps showing undefined
   for me and I can’t figure out why.
 *  Thread Starter [Kiyaanix](https://wordpress.org/support/users/kiyaanix/)
 * (@kiyaanix)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/#post-18282083)
 * [@jlongbrake](https://wordpress.org/support/users/jlongbrake/) The default editor
   for WordPress is Block Editor, not the Gutenberg that is why it return `undefined`,
   To use BoxControl you have to install Gutenberg plugin.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘BoxControl component issue’ is closed to new replies.

## Tags

 * [gutenberg](https://wordpress.org/support/topic-tag/gutenberg/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 5 replies
 * 3 participants
 * Last reply from: [Kiyaanix](https://wordpress.org/support/users/kiyaanix/)
 * Last activity: [1 year, 4 months ago](https://wordpress.org/support/topic/boxcontrol-component-issue/#post-18282083)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics