feat: Third-party block support #22

dcalhoun · 2024-09-06T16:12:07Z

Description

Add experimental editor relying upon editor assets fetched from the remote WordPress site, enabling the ability to utilize third-party blocks. This experimental approach serves as a prototype and relies upon a new endpoint provided by a plugin, as landing the required endpoint in Gutenberg/core may require a fair amount of effort and time.

Screen recording

RPReplay_Final1725989947.MP4

Relates to:

Testing Instructions

Tip

Use the prototype build from the sibling WP-iOS PR.

Important

This remote editor currently only supports self-hosted sites when authenticating with a site's admin username and application password. It also requires installing and activating the block-editor-assets-endpoint plugin for your self-hosted site.

Third-party blocks function for self-hosted sites

Install and activate the block-editor-assets-endpoint plugin on your self-hosted site.
In the app, enable the "Experimental Block Editor" and "Experimental Block Editor Plugins" feature flags.
Open a self-hosed site's post containing third-party blocks.
The blocks should render as expected, editing the blocks should also succeed.

WPCOM-authenticated sites utilize the local editor

Enable the "Experimental Block Editor" and "Experimental Block Editor Plugins" feature flags.
Open a WPCOM-authenticated site's post containing third-party blocks.
The blocks should render "unsupported" messages.

Source which modules should be externalized.

This custom header causes CORS errors. Although settings the mode to 'cors' should prevent this header, incorrect middleware order results in setting the header.

`@wordpress/api-fetch` supports fetching both a `path` and `url`. When passing the former, we need to guard against an undefined `path.`

Enable fetching remote editor assets from a site.

It appears a race condition results in the content briefly displaying before these lines reset out the content entirely.

The second parameter (edits) appears to expect and object. The third parameter is optional.

Align with core code and improve readability.

Rely upon plugin-provided remote editor for simplify proof-of-concept testing.

It is possible to fetch relative paths, we should support this to avoid cryptic errors.

Ensure the correct path is fetched.

This plugin-provided endpoint cannot be retrieved via WPCOM REST API URLs. We must rely upon the core REST API path.

Without unique hashes, it is near impossible to invalidate cached assets.

A prior change to support paths without a preceding forward slash introduced a bug where an extra forward slash was inserted into the middle of the string replacement.

Without this, only the first of the target two path segments are captured.

It was unnecessary to have multiple commands to build or preview production builds.

The default is `/`, which should suffice.

This already occurs in core logic. This line duplicated the logic and resulted in unexpected clearing of editor content.

The default of `/` incorrectly sources from the root of the project, rather than the nested build directory.

Without disabling the sub-registry, a separate, duplicative registry was utilized, which caused certain block selectors to return empty results.

dcalhoun · 2024-09-10T17:49:20Z

ReactApp/src/components/Editor.jsx

 		receiveEntityRecords('postType', post.type, post);

-		setupEditor(post, [], []);
+		setupEditor(post, {});


Updated to mirror the argument types found in core. Second parameter is an object, third is optional.

dcalhoun · 2024-09-10T17:49:56Z

ReactApp/src/components/Editor.jsx

@@ -174,6 +171,7 @@ function Editor({ post }) {
 				onInput={onBlockEditorInput}
 				onChange={onBlockEditorChange}
 				settings={settings}
+				useSubRegistry={false}


Required to ensure a singleton store is used for the block editor. Otherwise, plugins querying for blocks will find a new, empty store.

dcalhoun · 2024-09-10T17:50:33Z

ReactApp/src/misc/api-fetch-setup.js

 	return next(options);
 }

 function apiPathModifierMiddleware(options, next) {
 	const { siteApiNamespace } = getGBKit();

-	if (siteApiNamespace && !options.path.includes(siteApiNamespace)) {
+	if (
+		options.path &&


It is possible to query with options.url rather than options.path, so we need to guard for that scenario.

dcalhoun · 2024-09-10T17:51:54Z

ReactApp/src/remote.jsx

+		// Utilize remote-loaded globals rather than importing local modules
+		const { dispatch } = window.wp.data;
+		const { store: editorStore } = window.wp.editor;
+		const { store: preferencesStore } = window.wp.preferences;


Referencing global rather than imports simplifies the Vite build config, avoiding the need to externalize this libraries, but somehow not reference them until after the editor assets load.

dcalhoun · 2024-09-10T17:52:38Z

ReactApp/src/remote.jsx

+// Discard remote copies of localy-sourced Gutenberg packages to avoid conflicts
+const localGutenbergPackages = ['api-fetch'];


We load the @wordpress/api-fetch package locally to configure its options, therefore we do not load the remote copy.

dcalhoun · 2024-09-10T17:53:19Z

ReactApp/vite.config.js

-		// Removes hashes from the filenames
-		rollupOptions: {
-			output: {
-				entryFileNames: `assets/[name].js`,
-				chunkFileNames: `assets/[name].js`,
-				assetFileNames: `assets/[name].[ext]`,
-			},
-		},


Without filename hashes, it is near impossible to invalidate the asset cache.

dcalhoun · 2024-09-10T17:54:16Z

ReactApp/vite.config.remote.js

+function externalize(id) {
+	const externalDefinition = defaultRequestToExternal(id);
+	return (
+		!!externalDefinition &&
+		!id.endsWith('.css') &&
+		!['apiFetch', 'i18n', 'url', 'hooks'].includes(
+			externalDefinition[externalDefinition.length - 1]
+		)
+	);
+}


Externalizes all WordPress package imports that have external definitions, are not CSS, and are not the packages we use locally in our editor setup.

dcalhoun · 2024-09-11T13:05:09Z

I discovered that if a Jetpack account connection is not active on the site, this prototype fails. It appears the edit-post script is not enqueued by default in the API endpoint, but declared as a dependency by Jetpack.

So, to see the prototype work currently, one has to:

Install and activate the Jetpack plugin.
Connect Jetpack to a WPCOM account.
Not use the WPCOM account to add the site to the mobile, but rely upon the site's username and application password instead.

I'll seek a solution to this issue.

dcalhoun · 2024-09-11T14:18:42Z

I discovered that if a Jetpack account connection is not active on the site, this prototype fails. It appears the edit-post script is not enqueued by default in the API endpoint, but declared as a dependency by Jetpack.

I resolved this in [email protected]. Installing the latest release should allow remote editor loading with or without a Jetpack connection.

Sources/GutenbergKit/Sources/EditorViewController.swift

Previously, a remote copy of `remote.html` existing on the targeted site was utilized to avoid CORS errors when requesting the editor assets endpoint. However, those CORS errors do not appear to occur now, which may mean they were unrelated.

geriux

LGTM! Great work, David! 👏

I couldn’t get it to run locally, but I was able to use the testing build. ✅

Just noting that it sometimes takes a bit to load, but I know that caching or reducing loading time isn't the focus of this PR.

Once this lands we could add the new functionality in #23

dcalhoun added 13 commits September 5, 2024 16:15

build: Add @wordpress/dependency-extraction-webpack-plugin

4c526d2

Source which modules should be externalized.

fix: Manually delete Jetpack plugin header causing CORS errors

e1612bf

This custom header causes CORS errors. Although settings the mode to 'cors' should prevent this header, incorrect middleware order results in setting the header.

fix: Prevent error when fetching a full URL

17747c8

`@wordpress/api-fetch` supports fetching both a `path` and `url`. When passing the former, we need to guard against an undefined `path.`

feat: Add remote editor entry

75c7f38

Enable fetching remote editor assets from a site.

feat: iOS loads remote editor

400c63e

fix: Prevent erroneously cleared content

f3809c1

It appears a race condition results in the content briefly displaying before these lines reset out the content entirely.

refactor: Improve setupEditor parameter type adherence

66b500c

The second parameter (edits) appears to expect and object. The third parameter is optional.

style: Inline small object keys and values

c640669

Align with core code and improve readability.

feat: Conditionally load remote editor

d8c7d1f

Rely upon plugin-provided remote editor for simplify proof-of-concept testing.

fix: API namespace utility supports optional preceding slash

dacc749

It is possible to fetch relative paths, we should support this to avoid cryptic errors.

fix: Precede editor assets path with slash

0fa9ae4

Ensure the correct path is fetched.

fix: Remote editor endpoint relies upon site URL

691c749

This plugin-provided endpoint cannot be retrieved via WPCOM REST API URLs. We must rely upon the core REST API path.

build: Capture remote editor build output

688629b

dcalhoun mentioned this pull request Sep 6, 2024

feat: Remote editor wordpress-mobile/WordPress-iOS#23563

Merged

14 tasks

dcalhoun added 16 commits September 9, 2024 09:07

build: Mitigate cache invalidation issues

ed2c2db

Without unique hashes, it is near impossible to invalidate cached assets.

build: Capture remote editor build output

4f4ecbb

fix: Remove erroneous, duplicative forward slash

7d9659d

A prior change to support paths without a preceding forward slash introduced a bug where an extra forward slash was inserted into the middle of the string replacement.

fix: Reinstate missing trailing forward slash

5342e05

Without this, only the first of the target two path segments are captured.

fix: Add missing trailing forward slash

d54c600

build: Capture remote editor build output

8a25958

build: Simplify Vite scripts

a76370f

It was unnecessary to have multiple commands to build or preview production builds.

refactor: Remove seemingly unnecessary base configuration

1f5c267

The default is `/`, which should suffice.

build: Capture latest build output

0182836

build: Add remote editor dev server script

9863e96

fix: Remove duplicative entity addition

7fa5fa7

This already occurs in core logic. This line duplicated the logic and resulted in unexpected clearing of editor content.

fix: Reinstate base location configuration

1047e4c

The default of `/` incorrectly sources from the root of the project, rather than the nested build directory.

build: Capture latest build output

83b757b

feat: Conditionally load remote editor with feature flag

8d5bfdf

fix: Ensure correct block editor registry is utilized

f96aa73

Without disabling the sub-registry, a separate, duplicative registry was utilized, which caused certain block selectors to return empty results.

build: Capture latest build output

27896c9

dcalhoun commented Sep 10, 2024

View reviewed changes

dcalhoun marked this pull request as ready for review September 10, 2024 18:21

dcalhoun requested a review from geriux September 10, 2024 18:22

dcalhoun added the enhancement New feature or request label Sep 11, 2024

geriux reviewed Sep 12, 2024

View reviewed changes

Sources/GutenbergKit/Sources/EditorViewController.swift Outdated Show resolved Hide resolved

refactor: Leverage local remote.html file

179c3e7

Previously, a remote copy of `remote.html` existing on the targeted site was utilized to avoid CORS errors when requesting the editor assets endpoint. However, those CORS errors do not appear to occur now, which may mean they were unrelated.

dcalhoun changed the title ~~feat: Remote editor~~ feat: Third-party block support Sep 13, 2024

geriux approved these changes Sep 13, 2024

View reviewed changes

geriux mentioned this pull request Sep 13, 2024

Feature: Android - Add initial Editor params #23

Merged

dcalhoun merged commit 0987aa0 into trunk Sep 13, 2024
4 checks passed

dcalhoun deleted the feat/remote-editor branch September 13, 2024 23:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Third-party block support #22

feat: Third-party block support #22

dcalhoun commented Sep 6, 2024 •

edited

Loading

dcalhoun Sep 10, 2024

dcalhoun Sep 10, 2024

dcalhoun Sep 10, 2024

dcalhoun Sep 10, 2024

dcalhoun Sep 10, 2024

dcalhoun Sep 10, 2024

dcalhoun Sep 10, 2024

dcalhoun commented Sep 11, 2024

dcalhoun commented Sep 11, 2024 •

edited

Loading

geriux left a comment

		// Discard remote copies of localy-sourced Gutenberg packages to avoid conflicts
		const localGutenbergPackages = ['api-fetch'];

feat: Third-party block support #22

feat: Third-party block support #22

Conversation

dcalhoun commented Sep 6, 2024 • edited Loading

Description

Testing Instructions

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun Sep 10, 2024

Choose a reason for hiding this comment

dcalhoun commented Sep 11, 2024

dcalhoun commented Sep 11, 2024 • edited Loading

geriux left a comment

Choose a reason for hiding this comment

dcalhoun commented Sep 6, 2024 •

edited

Loading

dcalhoun commented Sep 11, 2024 •

edited

Loading