How to wrap the Gutenberg editor in a custom React component?

[willem-aart]

Motivation

For the custom Gutenberg blocks I'm creating, I'd like to use React components from a third party UI library. These components depend on a shared ContextProvider being available somewhere high up in the component tree.

Problem

How to wrap the Gutenberg editor (within WordPress, if that makes any difference) in a ContextProvider, or any other component for that matter?

[Bowriverstudio]

@willem-aart any luck with this?

[willem-aart]

@Bowriverstudio not yet. Are you trying to accomplish the same?

[Bowriverstudio]

Yes, I'm using Chakra-ui and want to wrap everything with

<ChakraProvider resetCSS={false} theme={{ ...overrides }}></<ChakraProvide>

I'll let you know if I come up with something.

[UranymusDev]

Any Updates? I am trying the very same thing. One idea i might try next is to disable the core version of gutenberg and adding it via a plugin so i can edit the code... Does this make sense to try?

[ernstoarllano]

Yes, I'm using Chakra-ui and want to wrap everything with

<ChakraProvider resetCSS={false} theme={{ ...overrides }}></<ChakraProvide>

I'll let you know if I come up with something.

You ever find a way to accomplish this?

[UranymusDev]

Hello Ernesto,

yes sort of, it’s a bit hackish but it works:

import { ChakraProvider } from @.***/react';

// Don't try this at home. // Only way to get whole Gutenberg Wrapped into ChakraProvider as of now. // We override the global ReactDOM Method and check for the editor, then we Wrap Chakra around. const oldRender = window.ReactDOM.render; window.ReactDOM.render = function( element, container, callback ) {     // Only override #editor to get rendered into gutenberg, and minimize sideeffects.     //console.log( 'OVERRIDE REACT"', element, container, callback );     if ( 'editor' === container.id ) {         return oldRender(                             {element}             ,             container,             callback,         );     }

    return oldRender( element, container, callback ); };

export default ChakraProvider;

Kind regards, Julian

Von: Ernesto Arellano Gesendet: Mittwoch, 25. Mai 2022 01:23 An: WordPress/gutenberg Cc: UranymusDev; Comment Betreff: Re: [WordPress/gutenberg] How to wrap the Gutenberg editor in acustom React component? (#27174)

Yes, I'm using Chakra-ui and want to wrap everything with <ChakraProvider resetCSS={false} theme={{ ...overrides }}></ I'll let you know if I come up with something. You ever find a way to accomplish this? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>