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"
}