How to use in Block Editor – react-bootstrap?
Question
I want to use in Guttenberg block some of tools used in react-bootstrap but something not work in my code property.
First I npm install react-bootstrap bootstrap15eme Doctor.1.3
the newest version, and this is register in package.json as well. Then in edit.js I try to import all dependencies:
import { useBlockProps, InnerBlocks } from 'wordpress user/block-editor';
import Card from 'react-bootstrap/Card';
import React, { Component } from "react";
import { IWPGBlock } from 'react-gutenberg/'
import * as React from 'react'
and for sure that I made it correctly use an example from react’s page.
export default function Edit() {
return (
<p {...useBlockProps()}>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</p>
);
}
unfortunetelly, it did not work. I have no clue what I should change, can you give me a feedback?
0
11 months
2022-03-08T18:42:42-05:00
2022-03-08T18:42:42-05:00 0 Answers
0 views
0
Leave an answer