Add VBE editor injector #86123

alshakero · 2024-01-08T22:50:54Z

Changes

This PR aims to create a standalone bundle that attaches the Gutenberg editor to a textarea and makes it support blocks. By standalone, I mean a library that exposes global and doesn't have any dependencies.

Testing steps

Regression testing

Make sure the editor works in Calypso by heading to /comment and embedding a block or two. If one embed works, all will work, don't sweat it.

Testing in Verbum

Navigate to packages/verbum-block-editor.
Run yarn dev --sync.
In Verbum https://github.com/Automattic/verbum/pull/128, checkout use/packaged-editor and run npm run start:sync.
Sandbox widgets.wp.com.
Sandbox a site.
Visit a blogpost page on that site.
The editor should and should work.
To verify it's the new editor, verify that embeds don't work.

Old description

## Proposed Changes

This PR aims to create a standalone bundle that attaches the Gutenberg editor to a textarea and makes it support blocks. By standalone, I mean a library that exposes global and doesn't have any dependencies.

The goal is to be able to publish it to NPM, then import it in here and use it.

Issue

For some reason, the editor is not being rendered correctly. It's a bit hard to describe the issue, but if you follow the steps, and take a quick look at the code, you'll see it right away!

Reproduction steps

please checkout the branch of this PR.
cd into packages/verbum-block-editor
run yarn build.
In the dist file, add the following HTML file.
Serve the dist folder using serve or whatever you like (npm i serve --global && serve).
Visit the served page, and in the console, run verbumBlockEditor.attachGutenberg(editor, console.log)
The rendering won’t work and you’ll get a white page.
Expected result is that you’d get a Gutenberg editor to replace the textarea.

I suspect it's a JSX issue.

Related thread: p1704811519896619-slack-C7YPUHBB2

<!doctype html>
<html lang="en">
	<head>
		<meta name="description" content="Webpage description goes here" />
		<meta charset="utf-8" />
		<title>Change_me</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="author" content="" />

		<link rel="stylesheet" href="main.css" />
	</head>

	<body>
		<div class="container">
			<textarea style="width: 500px; height: 300px" id="editor"></textarea>
		</div>

		<script type="module" src="./main.min.js"></script>
	</body>
</html>

github-actions · 2024-01-08T22:51:07Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-94388

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-94388&env=jetpack

matticbot · 2024-01-08T22:58:57Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~66 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
async-load-comment-block-editor       +206 B  (+0.0%)      +66 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

…t.jsx

…ticle-fetching-content.tsx

…-article-alternates-query.js

…nto vbe/add-injector

alshakero · 2024-01-09T17:54:37Z

@Automattic/team-calypso would really appreciate your help 🙏🏼

tyxla

Haven't dug into this too deep, but at first glance this looks like a good candidate to be implemented as a Calypso app. I'd also advise you to borrow the build config from one of the working apps (they use @automattic/calypso-apps-builder AFAIK), since they're all independently loaded outside of Calypso as standalone apps. This will likely solve whatever build issue you've been having.

alshakero · 2024-01-10T12:18:41Z

I'll check that out! Maybe we don't even need to publish on npm.

jsnajdr · 2024-01-10T12:51:36Z

I think JSX is OK here, I suspect something with the Gutenberg components (BlockTools, BlockCanvas, BlockEditorProvider, SlotFillProvider, ...) are not put together correctly -- wrong nesting, some props are missing etc.

Is there a situation where exactly the same code, built and bundled differently, works as expected? I'd like to compare the working and non-working versions side by side.

alshakero · 2024-01-10T13:27:48Z

You're kinda right. I was sure it's a build issue because it's working perfectly in https://wordpress.com/comment. To see it

Go to a blogpost page with GB flag on, like https://jardasn.blog/2023/01/11/prefer-jest-real-timers-when-testing-with-react-testing-library/?verbum_gutenberg=1.
Comment something.
Head to https://wordpress.com/comment.
You'll see a working editor that uses this exact code.

But we now realized that removing the children of BlockCanvas fixed some of the issue. I can't make sense of these two pieces of information.

alshakero · 2024-01-10T14:10:43Z

Removing renderAppender prop from BlockList fixes the issue 🌵

jsnajdr · 2024-01-10T14:27:31Z

The Verbum package in this PR is build with @wordpress/block-editor version 12.6.0. But the version on WP.com is built from the Automattic/verbum repo, where the lockfile specifies 12.5.0 for this package.

There were some framework changes between these two versions (12.5.0 is from Nov 29, 12.6.0 from Dec 13), for example #56996 by @youknowriad that integrates <BlockTools> into <BlockCanvas>. That leads to BlockTools being rendered twice. But that doesn't break the editor yet.

For some reason, it's the <BlockList renderAppender={ false } /> that causes trouble, although I don't know yet why. But I think it's the version mismatch and the changes that are happening between the versions that are to blame here.

jsnajdr · 2024-01-10T15:24:53Z

Regarding renderAppender: it seems that here the editor just does exactly what it's told to do :) When rendering <BlockList renderAppender={ false } />, no appender will be rendered, and because there are no blocks, no blocks will be rendered either. You'll see a white screen. Only when some block (or appender) is added and selected, the content and its UI will appear.

The situation with the Automattic/verbum version is a bit different: if the initial content is empty, it will default it to [createBlock('core/paragraph')]. See the useStateWithHistory call at the top level Editor component and notice how the two versions of the editor are different in this aspect! This default block will get selected and will make the UI appear. That's the entire difference I believe.

renancarvalho · 2024-01-10T20:02:56Z

While testing this, I noticed that some styles are broken, but the stylesheet itself looks ok. I also noticed that BlockTools is being rendered twice, I believe this is causing some CSS issues.

The content being rendered from BlockToolbar is also a bit different from what we had in Verbum initially, it gets more CSS classes I believe by default and might also be breaking styling.

There is also a version difference between Verbum and Calypso, I will try to downgrade Calypso and see if it works better

…nto vbe/add-injector

jsnajdr · 2024-01-12T08:13:48Z

packages/verbum-block-editor/.gitignore

@@ -0,0 +1 @@
+.cache


Let's add a /packages/*/.cache record to the top-level .gitignore instead. There's already an identical one for apps/... there.

Applied the suggestion 👍

matticbot · 2024-01-12T15:01:46Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug vbe/add-injector on your sandbox.

Co-authored-by: escapemanuele <escapemanuele@gmail.com> Co-authored-by: Renan <renansscarvalho@gmail.com>

Add VBE editor injector

407c3b7

Add build command

3916209

alshakero added 6 commits January 9, 2024 14:35

Update

70c0605

Discard changes to client/blocks/support-article-dialog/dialog-conten…

f7a549c

…t.jsx

Discard changes to packages/help-center/src/components/help-center-ar…

2d67f97

…ticle-fetching-content.tsx

Discard changes to packages/help-center/src/components/index.d.ts

55e8007

Discard changes to client/data/support-article-alternates/use-support…

f04bbb8

…-article-alternates-query.js

Merge branch 'vbe/add-injector' of github.com:Automattic/wp-calypso i…

d4ce115

…nto vbe/add-injector

alshakero requested a review from a team January 9, 2024 17:54

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 9, 2024

tyxla reviewed Jan 10, 2024

View reviewed changes

alshakero added 6 commits January 10, 2024 15:37

Build with Calypso app builder

9c0558f

Clean readme

fea78e1

Fix classname

56cdacd

Make the middleware configurable

02f3a98

Merge branch 'trunk' into vbe/add-injector

a2df308

yarn.lock

2461232

alshakero marked this pull request as ready for review January 10, 2024 15:34

alshakero requested a review from a team as a code owner January 10, 2024 15:34

Fix readme

97c2e9c

renancarvalho added 3 commits January 11, 2024 12:04

Fix styling issues

88a5d11

Merge branch 'vbe/add-injector' of github.com:Automattic/wp-calypso i…

1cfc4bc

…nto vbe/add-injector

Fix invisible toolbar on load

5bad226

jsnajdr reviewed Jan 12, 2024

View reviewed changes

renancarvalho and others added 4 commits January 12, 2024 07:44

Fix styling issues

73ad7e9

Fix jumping elements

dcfd64f

Move cache ignore to top level file

1854f16

Remove extra spacing

5863a83

alshakero merged commit 7e1da2b into trunk Jan 15, 2024
11 checks passed

alshakero deleted the vbe/add-injector branch January 15, 2024 16:53

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 15, 2024

TimBroddin pushed a commit that referenced this pull request Jan 18, 2024

Add VBE editor injector (#86123)

4955117

Co-authored-by: escapemanuele <escapemanuele@gmail.com> Co-authored-by: Renan <renansscarvalho@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add VBE editor injector #86123

Add VBE editor injector #86123

alshakero commented Jan 8, 2024 •

edited by escapemanuele

Loading

github-actions bot commented Jan 8, 2024 •

edited by matticbot

Loading

matticbot commented Jan 8, 2024 •

edited

Loading

alshakero commented Jan 9, 2024

tyxla left a comment

alshakero commented Jan 10, 2024

jsnajdr commented Jan 10, 2024

alshakero commented Jan 10, 2024

alshakero commented Jan 10, 2024

jsnajdr commented Jan 10, 2024 •

edited by alshakero

Loading

jsnajdr commented Jan 10, 2024

renancarvalho commented Jan 10, 2024 •

edited

Loading

jsnajdr Jan 12, 2024

escapemanuele Jan 12, 2024

matticbot commented Jan 12, 2024

		@@ -0,0 +1 @@
		.cache

Add VBE editor injector #86123

Add VBE editor injector #86123

Conversation

alshakero commented Jan 8, 2024 • edited by escapemanuele Loading

Changes

Testing steps

Regression testing

Testing in Verbum

Issue

Reproduction steps

github-actions bot commented Jan 8, 2024 • edited by matticbot Loading

matticbot commented Jan 8, 2024 • edited Loading

alshakero commented Jan 9, 2024

tyxla left a comment

Choose a reason for hiding this comment

alshakero commented Jan 10, 2024

jsnajdr commented Jan 10, 2024

alshakero commented Jan 10, 2024

alshakero commented Jan 10, 2024

jsnajdr commented Jan 10, 2024 • edited by alshakero Loading

jsnajdr commented Jan 10, 2024

renancarvalho commented Jan 10, 2024 • edited Loading

jsnajdr Jan 12, 2024

Choose a reason for hiding this comment

escapemanuele Jan 12, 2024

Choose a reason for hiding this comment

matticbot commented Jan 12, 2024

alshakero commented Jan 8, 2024 •

edited by escapemanuele

Loading

github-actions bot commented Jan 8, 2024 •

edited by matticbot

Loading

matticbot commented Jan 8, 2024 •

edited

Loading

jsnajdr commented Jan 10, 2024 •

edited by alshakero

Loading

renancarvalho commented Jan 10, 2024 •

edited

Loading