I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing React project.

Upon inspecting the official repository, I came across a "storybook" directory containing a React component at "storybook/stories/playground/index.js":

/**
* WordPress dependencies
*/
import "@wordpress/editor"; // This should ideally not be required

import { useEffect, useState } from "@wordpress/element";
import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, BlockInspector, WritingFlow, ObserveTyping } from "@wordpress/block-editor";
import { Popover, SlotFillProvider, DropZoneProvider } from "@wordpress/components";
import { registerCoreBlocks } from "@wordpress/block-library";
import "@wordpress/format-library";

/**
* Internal dependencies
*/
import "./style.scss";

function App() {
    const [blocks, updateBlocks] = useState([]);

    useEffect(() => {
        registerCoreBlocks();
    }, []);

    return (
        <div className="playground">
            <SlotFillProvider>
                <DropZoneProvider>
                    <BlockEditorProvider
                        value={blocks}
                        onInput={updateBlocks}
                        onChange={updateBlocks}
                    >
                        <div className="playground__sidebar">
                            <BlockInspector />
                        </div>
                        <div className="editor-styles-wrapper">
                            <BlockEditorKeyboardShortcuts />
                            <WritingFlow>
                                <ObserveTyping>
                                    <BlockList />
                                </ObserveTyping>
                            </WritingFlow>
                        </div>
                        <Popover.Slot />
                    </BlockEditorProvider>
                </DropZoneProvider>
            </SlotFillProvider>
        </div>
    );
}

export default {
    title: "Playground|Block Editor"
};

export const _default = () => {
    return <App />;
};

This React component seemed like a good candidate for modification into a standalone component. I made some adjustments so it could function within a new create-react-app project:

import React from "react";
import "@wordpress/editor"; // This should ideally not be required

import { useEffect, useState } from "@wordpress/element";
import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, BlockInspector, WritingFlow, ObserveTyping } from "@wordpress/block-editor";
import { Popover, SlotFillProvider, DropZoneProvider } from "@wordpress/components";
import { registerCoreBlocks } from "@wordpress/block-library";
import "@wordpress/format-library";

import "./style.scss";

export default function App() {
  const [blocks, updateBlocks] = useState([]);

  useEffect(() => {
    registerCoreBlocks();
  }, []);

  return (
    <div className="playground">
      <SlotFillProvider>
        <DropZoneProvider>
          <BlockEditorProvider value={blocks} onInput={updateBlocks} onChange={updateBlocks}>
            <div className="playground__sidebar">
              <BlockInspector />
            </div>
            <div className="editor-styles-wrapper">
              <BlockEditorKeyboardShortcuts />
              <WritingFlow>
                <ObserveTyping>
                  <BlockList />
                </ObserveTyping>
              </WritingFlow>
            </div>
            <Popover.Slot />
          </BlockEditorProvider>
        </DropZoneProvider>
      </SlotFillProvider>
    </div>
  );
}

I noticed that the component referred to a "style.scss" file (which included 'editor-styles.scss' and 'reset.scss'). Therefore, I copied these files into my new React project as well:

https://i.sstatic.net/olCoK.png

In the Gutenberg repository's "package.json" file, all the Wordpress dependencies were sourced from a "packages" directory, for instance:

"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
"@wordpress/base-styles": "file:packages/base-styles",

To resolve this, I copied the "packages" folder from Gutenberg into my new React project and added all Wordpress dependencies to my "package.json" file:

// Dependencies section...

After running "npm i", my React application was able to import Wordpress packages through import statements.

However, upon launching the application with "npm start," the Gutenberg editor displayed without any CSS or styles:

https://i.sstatic.net/EJaEh.png

Despite the editor's functionality being intact, the absence of styles posed an issue. I attempted compiling the existing SCSS files using the following commands within package.json:

"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./packages src packages node_modules -o src --recursive --watch",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./packages -o src --watch"

Unfortunately, importing the resulting style.css file into my index.html did not rectify the style-related issues. Any guidance in resolving this matter would be greatly appreciated.