Site icon Hip-Hop Website Design and Development

@wordpress/parts Button variants not styled

At any time when I import the Button element…

import { Button } from "@wordpress/components";

…after which use it with a variant:

if (attributes.imageId) {
  return (
    <Button variant="secondary" onClick={open}>
      Change picture
    </Button>
  );
}
return (
  <Button variant="secondary" onClick={open}>
    Choose picture...
  </Button>
);

It by no means renders because the variant:

I am sure this must be rendering in a different way based mostly on these docs:

https://developer.wordpress.org/block-editor/reference-guides/parts/button/

It ought to look one thing like this:

It additionally would not work if I exploit variant="primary"

Lastly, the button is considerably styled. That’s, if I do that:

<Button>Take a look at</Button>
<button>Take a look at</button>

You may see the default button vs the wordpress button:

What am I doing mistaken?

Package deal.json dependencies:

"dependencies": {
    "@wordpress/block-editor": "^7.0.2",
    "@wordpress/blocks": "^11.1.0",
    "@wordpress/i18n": "^4.2.2"
},
"devDependencies": {
    "@wordpress/scripts": "^18.0.1"
}