How to use in Block Editor - react-bootstrap?
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 [email protected]
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/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.TitleCard 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=primaryGo 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?
UPDATE:
I try another way to solve this problem. I create another file to make my own component: komponent.js
import Card from 'react-bootstrap/Card';
import React, { Component } from react;
export default class cardcomponents extends Component {
render(){
return (
p {...useBlockProps()}
Card style={{ width: '18rem' }}
Card.Img variant=top src=holder.js/100px180 /
Card.Body
Card.TitleCard 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=primaryGo somewhere/Button
/Card.Body
/Card
/p
);
}
}
then it import to edit.js
just like that import {cardcomponents} from './komponent.js';
and try to render
export default function Edit() {
return (
p {...useBlockProps()}
effectivecards /
panother div/p
/p
);
}
but this show me just another div. somewhere must be a mistake.
Topic block-editor twitter-bootstrap Wordpress
Category Web