Replace isolated-block-editor in favor of @wordpress/block-editor

Despite the fact that Gutenberg developers did not care at all about
uses of this library outside WordPress until last year[0], and that it
is almost impossible to do something that goes beyond the very basic
without using “private APIs”, they insist that the isolated block
editor should be “deprecated”[1].

I do not particularly care much about the isolated block editor, as it
_does_ use all these private APIs and, thus, it is very difficult to
use unless you use the exact same dependencies, otherwise it emits a
weird error regarding “unlocking” things that are not “locked” (i.e.,
the new-fangled way of “protecting” private APIs[2]).  And,
apparently, things got easier with Gutenberg 18.5 with the
introduction of the BlockCanvas.

However, it is still a very frustrating experience, and the
documentation for most components and packages is next to
non-existent.

Nevertheless, i managed to get a barely functional editor that still
has some missing features, like the color of rich texts’ highlight
format[3], but it i believe it is a good base to grow the custom
editor on top of.

[0]: https://github.com/WordPress/gutenberg/issues/53874
[1]: https://github.com/WordPress/gutenberg/issues/57672#issuecomment-1883119040
[2]: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/
[3]: https://github.com/WordPress/gutenberg/issues/55036

.gitignore

@@ -1,5 +1,5 @@
 /node_modules/
 /po/*.pot
-/web/static/editor.css
+/web/static/index.html
-/web/static/editor.js
+/web/static/assets/
 /web/static/*.json

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

.idea/dataSources.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="tipus@localhost" uuid="f4f01e13-e150-41a5-ac76-faf86346280d">
-      <driver-ref>postgresql</driver-ref>
-      <synchronize>true</synchronize>
-      <jdbc-driver>org.postgresql.Driver</jdbc-driver>
-      <jdbc-url>jdbc:postgresql://localhost:5432/tipus</jdbc-url>
-      <working-dir>$ProjectFileDir$</working-dir>
-    </data-source>
-  </component>
-</project>

.idea/magento2plugin.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Magento2PluginSettings">
-    <option name="defaultLicenseName" value="Proprietary" />
-  </component>
-</project>

.idea/markdown.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MarkdownSettings">
-    <enabledExtensions>
-      <entry key="MermaidLanguageExtension" value="false" />
-      <entry key="PlantUMLLanguageExtension" value="false" />
-    </enabledExtensions>
-  </component>
-</project>

.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/tipus.iml" filepath="$PROJECT_DIR$/.idea/tipus.iml" />
-    </modules>
-  </component>
-</project>

.idea/sqldialects.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="SqlDialectMappings">
-    <file url="PROJECT" dialect="PostgreSQL" />
-  </component>
-  <component name="SqlResolveMappings">
-    <file url="file://$PROJECT_DIR$" scope="{&quot;node&quot;:{  &quot;@negative&quot;:&quot;1&quot;,  &quot;group&quot;:{   &quot;@kind&quot;:&quot;root&quot;,   &quot;node&quot;:{    &quot;name&quot;:{     &quot;@qname&quot;:&quot;f4f01e13-e150-41a5-ac76-faf86346280d&quot;    },    &quot;group&quot;:{     &quot;@kind&quot;:&quot;database&quot;,     &quot;node&quot;:{      &quot;name&quot;:{       &quot;@qname&quot;:&quot;tipus&quot;      },      &quot;group&quot;:{       &quot;@kind&quot;:&quot;schema&quot;,       &quot;node&quot;:{        &quot;name&quot;:{         &quot;@qname&quot;:&quot;auth&quot;        },        &quot;name&quot;:{         &quot;@qname&quot;:&quot;public&quot;        },        &quot;name&quot;:{         &quot;@qname&quot;:&quot;tipus&quot;        }       }      }     }    }   }  } }}" />
-    <file url="PROJECT" scope="{&quot;node&quot;:{  &quot;@negative&quot;:&quot;1&quot;,  &quot;group&quot;:{   &quot;@kind&quot;:&quot;root&quot;,   &quot;node&quot;:{    &quot;@negative&quot;:&quot;1&quot;   }  } }}" />
-  </component>
-</project>

.idea/tipus.iml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="Go" enabled="true" />
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/web" type="java-resource" />
-      <excludeFolder url="file://$MODULE_DIR$/po/src" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CommitMessageInspectionProfile">
-    <profile version="1.0">
-      <inspection_tool class="BodyLimit" enabled="true" level="WARNING" enabled_by_default="true" />
-      <inspection_tool class="SubjectBodySeparation" enabled="true" level="WARNING" enabled_by_default="true" />
-      <inspection_tool class="SubjectLimit" enabled="true" level="WARNING" enabled_by_default="true" />
-    </profile>
-  </component>
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

babel.config.js

@@ -1,13 +0,0 @@
-module.exports = (api) => {
-    api.cache(true);
-
-    return {
-        plugins: [
-            [
-                "@wordpress/babel-plugin-makepot",
-                {"output": "po/editor.pot"}
-            ],
-        ],
-		presets: ['@wordpress/babel-preset-default'],
-    };
-};

editor/BlockEditor.jsx

@@ -0,0 +1,11 @@
+import { useSelect } from '@wordpress/data';
+import { BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';
+
+export default function BlockEditor({ rootClientId }) {
+		const styles = useSelect(( select ) => {
+				const { getSettings } = select( blockEditorStore );
+				return getSettings().styles;
+		});
+		console.log(styles);
+		return <BlockCanvas height="100%" styles={styles} />
+}

editor/Editor.jsx

@@ -0,0 +1,33 @@
+import { useState } from '@wordpress/element';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+
+import BlockEditor from './BlockEditor';
+
+import './editor.scss';
+
+import blockLibraryCommon from '@wordpress/block-library/build-style/common.css?inline';
+import blockLibraryEditor from '@wordpress/block-library/build-style/editor.css?inline';
+import blockLibraryStyle from '@wordpress/block-library/build-style/style.css?inline';
+import componentsStyle from '@wordpress/components/build-style/style.css?inline';
+import formatLibraryStyle from '@wordpress/format-library/build-style/style.css?inline';
+
+export default function Editor() {
+		const [ blocks, updateBlocks ] = useState();
+
+		return <BlockEditorProvider
+							 value={ blocks }
+							 onInput={ updateBlocks }
+							 onChange={ updateBlocks }
+							 settings={ {
+									 styles: [
+											 { css: componentsStyle },
+											 { css: blockLibraryCommon },
+											 { css: blockLibraryStyle },
+											 { css: blockLibraryEditor },
+											 { css: formatLibraryStyle },
+									 ],
+							 } }
+					 >
+							 <BlockEditor/>
+					 </BlockEditorProvider>;
+}

editor/editor.scss

@@ -0,0 +1,16 @@
+@import '@wordpress/block-editor/build-style/style.css';
+@import '@wordpress/block-editor/build-style/content.css';
+@import '@wordpress/components/build-style/style.css';
+
+body, html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+}

editor/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tipus</title>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <main></main>
+    <script type="module" src="main.jsx"></script>
+  </body>
+</html>

editor/index.js

@@ -1,77 +0,0 @@
-import {render} from '@wordpress/element';
-import {__, setLocaleData} from '@wordpress/i18n';
-
-import './style.scss';
-import IsolatedBlockEditor, {ToolbarSlot} from '@automattic/isolated-block-editor';
-import {Button} from '@wordpress/components';
-
-
-const settings = {
-    iso: {
-        sidebar: {
-            inspector: true,
-            inserter: true,
-        },
-        toolbar: {
-            inspector: true,
-            navigation: true,
-        },
-        moreMenu: {
-            editor: true,
-            preview: true,
-        },
-    },
-};
-
-const textarea = document.getElementById('content');
-textarea.style.display = 'none';
-const editor = document.createElement('div');
-editor.classList.add('editor');
-document.body.appendChild(editor);
-
-function onLoad(content, parser, rawHandler) {
-    // Does the content contain blocks?
-    if (content.indexOf('<!--') !== -1) {
-        // Parse the blocks
-        return parser(content);
-    }
-
-    // Raw HTML - do our best
-    return rawHandler({HTML: content});
-}
-
-function saveBlocks(content, textarea) {
-    textarea.value = content;
-}
-
-function save() {
-    const requestOptions = {
-        method: 'PUT',
-        headers: {'Content-Type': 'text/html'},
-        body: textarea.value,
-    };
-    fetch('/edit', requestOptions);
-}
-
-async function load(editor) {
-    const response = await fetch('/static/es.json');
-    const result = await response.json();
-    const localeData = result.locale_data.messages;
-    localeData[""].domain = "default";
-    setLocaleData(localeData, 'default');
-    render(
-        <IsolatedBlockEditor
-            settings={settings}
-            onLoad={(parser, rawHandler) => onLoad(textarea.value, parser, rawHandler)}
-            onSaveContent={(content) => saveBlocks(content, textarea)}
-            onError={() => document.location.reload()}
-        >
-            <ToolbarSlot>
-                <Button onClick={save} variant="primary">{__('Beep!')}</Button>
-            </ToolbarSlot>
-        </IsolatedBlockEditor>,
-        editor
-    );
-}
-
-load(editor);

editor/main.jsx

@@ -0,0 +1,14 @@
+import { createRoot, StrictMode } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import '@wordpress/format-library';
+
+registerCoreBlocks();
+
+import Editor from './Editor';
+
+const root = createRoot(document.querySelector('main'));
+root.render(
+		<StrictMode>
+				<Editor/>
+		</StrictMode>
+);

editor/style.scss

@@ -1,7 +0,0 @@
-@import '@wordpress/components/build-style/style.css';
-@import '@wordpress/block-editor/build-style/style.css';
-@import '@wordpress/block-library/build-style/style.css';
-@import '@wordpress/block-library/build-style/editor.css';
-@import '@wordpress/block-library/build-style/theme.css';
-@import '@wordpress/format-library/build-style/style.css';
-@import '@wordpress/edit-post/build-style/style.css';

package.json

@@ -1,38 +1,25 @@
 {
 		"name": "tipus",
 		"version": "0.0.0",
+		"type": "module",
 		"description": "Single page editor",
 		"author": "Tàndem",
-  "license": "GPL-3.0-only",
+		"license": "AGPL-3.0-or-later",
+		"scripts": {
+				"dev": "vite",
+				"build": "vite build",
+				"preview": "vite preview"
+		},
 		"dependencies": {
-    "@automattic/isolated-block-editor": "^2.24.0",
+				"@wordpress/block-editor": "13.0.0",
-    "@wordpress/block-editor": "11.8.0",
+				"@wordpress/block-library": "9.0.0",
-    "@wordpress/block-library": "8.8.0",
+				"@wordpress/components": "28.0.0",
-    "@wordpress/components": "23.8.0",
+				"@wordpress/element": "6.0.0",
-    "@wordpress/edit-post": "7.8.0",
+				"@wordpress/format-library": "5.0.0"
-    "@wordpress/element": "5.8.0",
-    "@wordpress/format-library": "4.8.0",
-    "@wordpress/i18n": "4.31.0"
 		},
 		"devDependencies": {
-    "@babel/core": "^7.21.4",
+				"@vitejs/plugin-react": "^4.3.1",
-    "@babel/plugin-transform-runtime": "^7.21.4",
+				"sass": "^1.77.0",
-    "@babel/preset-env": "^7.21.4",
+				"vite": "^5.2.0"
-    "@babel/preset-react": "^7.18.6",
-    "@emotion/styled": "^11.10.6",
-    "@shopify/polyfills": "^4.0.3",
-    "@wordpress/babel-preset-default": "^7.15.0",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-inline-json-import": "^0.3.2",
-    "css-loader": "^6.7.3",
-    "mini-css-extract-plugin": "^2.7.5",
-    "po2json": "^0.4.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass-loader": "^13.2.2",
-    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^5.0.4",
-    "webpack": "^5.80.0",
-    "webpack-cli": "^5.0.2"
 		}
 }

vite.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+       root: 'editor',
+       build: {
+               outDir: '../web/static',
+       },
+       plugins: [react()],
+});

webpack.config.js

@@ -1,50 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserJSPlugin = require('terser-webpack-plugin');
-
-const config = {
-    entry: {
-        editor: './editor/index.js',
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'web/static'),
-    },
-    module: {
-        rules: [
-            {
-                test: /\.(js|mjs)$/,
-                exclude: /node_modules/,
-                loader: 'babel-loader',
-            },
-            {
-                test: /\.scss|\.css$/,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                    },
-                    'css-loader',
-                    'sass-loader',
-                ],
-            },
-        ],
-    },
-    externals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': {NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')},
-        }),
-        new MiniCssExtractPlugin({
-            filename: '[name].css',
-        }),
-    ],
-    optimization: {
-        minimizer: [new TerserJSPlugin()],
-    },
-};
-
-module.exports = config;