can you use react plugins in custom block types

willdelphia
(@willdelphia)

5 years, 10 months ago

So there is a react package on NPM that I would like to be able to use in a custom block I am trying to create.

https://github.com/securingsincity/react-ace

I have not been able to figure out how to include this package though. Is it even possible to include functionality from react plugins such as this in gutenberg blocks?

Thanks.
-Will

Viewing 9 replies - 1 through 9 (of 9 total)

Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

5 years, 10 months ago

Howdy!

One way I can think of would be simply enqueueing those files much like in the way the ReactJS files are loaded on the editor. Are you looking to only load on the editor or the front end as well?

Thread Starter willdelphia
(@willdelphia)

5 years, 10 months ago

I am only looking to load them in the editor, as part of a (formerly) gutenberg block’s edit() output.

Steven
(@shazahm1hotmailcom)

5 years, 10 months ago

@willdelphia

Take a look at this tutorial on how another dev used react-select in their Gutenblock.

https://mattwatson.codes/articles/add-select2-as-an-inspectorcontrol-in-wordpress-gutenberg/

I suspect you could do the same with react-ace.

Thread Starter willdelphia
(@willdelphia)

5 years, 10 months ago

@shazahm1hotmailcom Just skimming this article it looks like exactly what I am looking for. They mention the “Module not found: Error: Can’t resolve ‘react'” error that I was getting. Thanks for the link.

Steven
(@shazahm1hotmailcom)

5 years, 10 months ago

@willdelphia

No problem! Hope you can work out how to load react-ace in Gutenberg.
Thread Starter willdelphia
(@willdelphia)

5 years, 10 months ago
@shazahm1hotmailcom so after I made this thread I tried to go about enqueuing the ace source on my own, and I came up with a solution that works:

https://github.com/willdelphia/good-html-block

I am still going to try to work out including the react plugin since I think it may handle this more elegantly. Especially because my solution requires assigning each instance of the block a random key as an attribute and then querying the real dom for that key once it has been printed out by react. I use a setTimeout for this and it feels wrong.
- This reply was modified 5 years, 10 months ago by willdelphia.
- This reply was modified 5 years, 10 months ago by willdelphia.
Thread Starter willdelphia
(@willdelphia)

5 years, 10 months ago

Update: I figured out that gutenberg exposes a unique id already in the props object, so that’s cool. But I still have to rely on setTimeout and querySelector to initialize the ace editor.

Thread Starter willdelphia
(@willdelphia)

5 years, 10 months ago

https://wordpress.org/plugins/ace-html-block/

Steven
(@shazahm1hotmailcom)

5 years, 10 months ago

@willdelphia

Neat!

RE: But I still have to rely on setTimeout and querySelector to initialize the ace editor.

I still grappling with Gutenberg, a lot, so this might not even apply. But instead of using setTimeout, perhaps register a data store and then use subscribe/dispatch for the block state.

Or perhaps, in your component, use componentDidMount() to init the block.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘can you use react plugins in custom block types’ is closed to new replies.

can you use react plugins in custom block types

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics