crs1138
commented
5 months ago This ticket is based on the recommendation at https://github.com/Automattic/isolated-block-editor/issues/248#issuecomment-2047583401 to open a new separate ticket.
Open crs1138 opened 5 months ago
crs1138
commented
5 months ago This ticket is based on the recommendation at https://github.com/Automattic/isolated-block-editor/issues/248#issuecomment-2047583401 to open a new separate ticket.
manutheblacker
commented
4 months ago Have you tried to run your component in client only mode ?
i'm trying something similar too, here is the code i've used so far :
import {React} from 'react';
import { useState, useEffect } from 'react';
import '@automattic/isolated-block-editor/build-browser/core.css';
import '@automattic/isolated-block-editor/build-browser/isolated-block-editor.css';
import IsolatedBlockEditor, { EditorLoaded, DocumentSection, ToolbarSlot } from '@automattic/isolated-block-editor';
function App() {
return (
<>
<IsolatedBlockEditor
settings={ settings }
onSaveContent={ ( html ) => saveContent( html ) }
onLoad={ ( parse ) => loadInitialContent( parse ) }
onError={ () => document.location.reload() }
>
<EditorLoaded onLoaded={ () => {} } onLoading={ () => {} } />
<DocumentSection>Extra Information</DocumentSection>
<ToolbarSlot>
<button>Beep!</button>
</ToolbarSlot>
</IsolatedBlockEditor>
</>
)
}
export default App
Context of my problem
I am trying to use the Gutenberg Block Editor within a React/NextJS-based application as a UI for a headless CMS. Here is a link to the repo that I used to create a very simplified version of our project. However, I couldn't get this to work.
To reproduce the problem in detail, please clone the repository and checkout the
install-isolated-block-editorbranch. Then follow the installation instruction as described in the/README.mdDetails about implementation
As the '@automattic/isolated-block-editor
does not have any package-lock.json (or its equivalent) the dependencies specified in thepackage.jsondo not get installed if the repo itself is used as a dependency. Thus I tried recreated the@automattic/isolated-block-editor/src/index.jsascrs1138/turborepo-nextjs-with-isolated-block-editor/packages/block-editor/IsolatedBlockEditor.tsxand installed all the dependencies imported in this file. This is then re-exported as a simple React component and used on the pagegbof theatlas-editor` web app. Once you have the local development server running you can access this page at http://localhost:3001/gb.Problem
Upon compilation of the http://localhost:3001/gb the following error is displayed.
Please, help me to get to understand what is the problem and provide a direction in what it could be resolved.
The full stack that can be found in the terminal: