Build with Calypso app builder

packages/verbum-block-editor/README.md

@@ -12,3 +12,27 @@ Verbum Block Editor is a lightweight Gutenberg editor designed specifically for
 ## WIP
 Soon, this will be published on NPM and used everywhere a user can edit comments (in Verbum and in Calypso's `/comments/all/` page).
 
+
+## Development
+
+This package is used in two ways:
+
+### Directly In Calypso
+The package is consumed like any other package and you don't have to build it or anything after you modify it. You can change the files and you'll see the changes in Calypso.
+
+### Via widgets.wp.com
+This package published a bundle on widgets.wp.com to be consumed anywhere it is needed. The process for this is pretty straight forward.
+
+1. Move to the package's folder `cd package/verbum-block-editor`.
+2. Run `yarn dev --sync`.
+3. Your changes will be synced with your sandbox to `/home/wpcom/public_html/widgets.wp.com/verbum-block-editor`.
+
+### Deploying changes
+
+After you modify the package, please do the following to deploy.
+
+1. Make sure your sandbox is in a clean git state.
+2. Run `yarn build --sync`
+3. Create a patch.
+4. Deploy the patch. 
+

packages/verbum-block-editor/package.json

@@ -23,13 +23,15 @@
 	"bugs": "https://github.com/Automattic/wp-calypso/issues",
 	"types": "dist/types",
 	"scripts": {
-		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
-		"build": "calypso-build",
-		"prepack": "yarn run clean && yarn run build",
+		"clean": "rm -rf dist",
+		"build": "NODE_ENV=production yarn dev",
+		"build:app": "calypso-build",
+		"dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/verbum-block-editor",
 		"watch": "tsc --build ./tsconfig.json --watch",
 		"prepare": "yarn build"
 	},
 	"dependencies": {
+		"@automattic/calypso-apps-builder": "workspace:^",
 		"@types/wordpress__block-editor": "^11.5.8",
 		"@wordpress/base-styles": "^4.38.0",
 		"@wordpress/block-editor": "^12.16.0",

packages/verbum-block-editor/src/editor/index.tsx

@@ -11,13 +11,13 @@ import { createBlock, serialize, type BlockInstance } from '@wordpress/blocks';
 import { Popover, SlotFillProvider, KeyboardShortcuts } from '@wordpress/components';
 import { useStateWithHistory, useResizeObserver } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import React, { useState, useEffect, useCallback } from '@wordpress/element';
 import { rawShortcut } from '@wordpress/keycodes';
 import classNames from 'classnames';
-import { useState, useEffect, useCallback } from 'react';
 import { safeParse } from '../utils';
 import { editorSettings } from './editor-settings';
 import { EditorProps, StateWithUndoManager } from './editor-types';
-import type { MouseEvent, KeyboardEvent } from 'react';
+import type { MouseEvent, KeyboardEvent, FC } from 'react';
 import css from '!!css-loader!sass-loader!./inline-iframe-style.scss';
 import './editor-style.scss';
 
@@ -28,7 +28,7 @@ const iframedCSS = css.reduce( ( css: string, [ , item ]: [ string, string ] ) =
 /**
  * Editor component
  */
-export const Editor: React.FC< EditorProps > = ( { initialContent = '', onChange, isRTL } ) => {
+export const Editor: FC< EditorProps > = ( { initialContent = '', onChange, isRTL } ) => {
 	// We keep the content in state so we can access the blocks in the editor.
 	const {
 		value: editorContent,
@@ -119,7 +119,7 @@ export const Editor: React.FC< EditorProps > = ( { initialContent = '', onChange
 									onClick={ selectLastBlock }
 								>
 									{ contentResizeListener }
-									<BlockList renderAppender={ false } />
+									<BlockList />
 								</div>
 							</BlockCanvas>
 						</BlockTools>

packages/verbum-block-editor/src/text-area-injector.tsx

@@ -1,9 +1,8 @@
-import { createRoot } from 'react-dom/client';
+import React, { createRoot } from '@wordpress/element';
 import { addApiMiddleware } from './api';
 import { Editor } from './editor';
 import { loadBlocksWithCustomizations } from './load-blocks';
 import { loadTextFormatting } from './load-text-formatting';
-
 /**
  * Add Gutenberg editor to the page.
  * @param textarea   Textarea element.

packages/verbum-block-editor/tsconfig.json

@@ -4,9 +4,9 @@
 		"allowJs": true,
 		"checkJs": false,
 		"declarationDir": "dist/types",
-		"jsxImportSource": "react",
 		"outDir": "dist/esm",
-		"rootDir": "src"
+		"rootDir": "src",
+		"jsx": "react"
 	},
 	"include": [ "src", "src/*.json", "types" ],
 	"exclude": [ "**/__tests__/*", "**/__mocks__/*" ],

packages/verbum-block-editor/webpack.config.js

@@ -19,6 +19,9 @@ function getWebpackConfig( env = { source: '' }, argv = {} ) {
 	return {
 		...webpackConfig,
 		mode: 'production',
+		entry: {
+			'block-editor': path.join( __dirname, 'src', 'index.ts' ),
+		},
 		output: {
 			...webpackConfig.output,
 			path: outputPath,

yarn.lock

@@ -1714,10 +1714,34 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@automattic/verbum-block-editor-injector@workspace:apps/verbum-block-editor":
+  version: 0.0.0-use.local
+  resolution: "@automattic/verbum-block-editor-injector@workspace:apps/verbum-block-editor"
+  dependencies:
+    "@automattic/babel-plugin-transform-wpcalypso-async": "workspace:^"
+    "@automattic/calypso-apps-builder": "workspace:^"
+    "@automattic/calypso-babel-config": "workspace:^"
+    "@automattic/calypso-build": "workspace:^"
+    "@automattic/calypso-eslint-overrides": "workspace:^"
+    "@automattic/languages": "workspace:^"
+    "@automattic/verbum-block-editor": "workspace:^"
+    "@automattic/wp-babel-makepot": "workspace:^"
+    "@babel/core": "npm:^7.23.6"
+    "@wordpress/dependency-extraction-webpack-plugin": "npm:^4.31.0"
+    autoprefixer: "npm:^10.2.5"
+    gettext-parser: "npm:^6.0.0"
+    html-webpack-plugin: "npm:^5.6.0"
+    jest: "npm:^29.7.0"
+    mkdirp: "npm:^3.0.1"
+    webpack: "npm:^5.89.0"
+  languageName: unknown
+  linkType: soft
+
 "@automattic/verbum-block-editor@workspace:^, @automattic/verbum-block-editor@workspace:packages/verbum-block-editor":
   version: 0.0.0-use.local
   resolution: "@automattic/verbum-block-editor@workspace:packages/verbum-block-editor"
   dependencies:
+    "@automattic/calypso-apps-builder": "workspace:^"
     "@automattic/calypso-build": "workspace:^"
     "@automattic/calypso-color-schemes": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
@@ -22977,6 +23001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mkdirp@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "mkdirp@npm:3.0.1"
+  bin:
+    mkdirp: dist/cjs/src/bin.js
+  checksum: 9f2b975e9246351f5e3a40dcfac99fcd0baa31fbfab615fe059fb11e51f10e4803c63de1f384c54d656e4db31d000e4767e9ef076a22e12a641357602e31d57d
+  languageName: node
+  linkType: hard
+
 "mock-fs@npm:^5.2.0":
   version: 5.2.0
   resolution: "mock-fs@npm:5.2.0"