BoxControl component issue

  • Resolved Kiyaanix

    (@kiyaanix)


    1 year, 4 months ago

    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. 


    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/scripts and @wordpress/components.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Jayson Gumanid

    (@jaygumanid)

    1 year, 4 months ago

    Hey @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

    (@kiyaanix)

    1 year, 4 months ago

    Hi @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.

    "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

    (@kiyaanix)

    1 year, 4 months ago

    Sorry, I was using this on Block Editor instead of Gutenberg. Now the issue is resolved.

    Many Thanks!

    jlongbrake

    (@jlongbrake)

    1 year, 4 months ago

    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

    (@kiyaanix)

    1 year, 4 months ago

    @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