Native Inserter: Add initial Photos integration #203

kean · 2025-10-27T18:43:14Z

What?

Closes CMM-860: Add trailing bar button to add media from Photos
Closes CMM-903: Performance: Inserter recomputes the list of blocks on every change in the editor

How?

I used onFilesDrop from use-on-block-drop component as a reference. It uses "transforms" to create blocks and then uses the existing insertion logic introduced in #199 to insert the blocks created by transforms.

This implementation should make sure that we support any media types, any transforms including third-party block ones, and any insertion points including nested blocks.

Testing Instructions

Verify that if you select one image, a core/image block is added and the item is uploaded to the remote
Verify that if you select multiple images, a gallery is created
Verify that if you select a video, a video is uploaded (note: should use videopress on Dotcom sites; untested)
Verify that media blocks are inserted at the insertion points, including insertion points in nested blocks

Note: I focused on making the implementation simple and sound and plan to test it and fix any outstanding issues in future iterations.

Screenshots or screencast

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-28.at.15.48.44.mov

Note: the first frame in the random video I uploaded is black, which is why there is no preview

jkmassel · 2025-10-27T19:23:09Z

ios/Sources/GutenbergKit/Sources/Media/MediaFileManager.swift

+    }
+
+    func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
+        // Nothing to do here for simple file serving


You probably want to store the task as a member of this class and cancel it from this method?

It's a nearly-instant operation. It will never be cancelled in flight in practice.

jkmassel · 2025-10-27T19:24:03Z

ios/Sources/GutenbergKit/Sources/Media/MediaFileManager.swift

+        try? fileManager.createDirectory(at: self.rootURL, withIntermediateDirectories: true)
+        try? fileManager.createDirectory(at: self.uploadsDirectory, withIntermediateDirectories: true)


If these silently fail saveMediaData won't work right.

Probably best to just run these on every call to saveMediaData if needed – makes the error handling way more straightforward.

Good idea; updated.

kean · 2025-10-28T20:08:07Z

ios/Sources/GutenbergKit/Sources/EditorViewController.swift

        for scheme in CachedAssetSchemeHandler.supportedURLSchemes {
            config.setURLSchemeHandler(schemeHandler, forURLScheme: scheme)
        }
+        config.setURLSchemeHandler(MediaFileSchemeHandler(), forURLScheme: MediaFileSchemeHandler.scheme)


This is the same approach we use for the assets. It's currently the only way to let WKWebView access the files on disk, but I hope we can simplify it in the future by extracting the bundled editor on disk and pointing WKWebView to that directly and not the readonly bundle.

kean · 2025-10-28T20:08:16Z

ios/Sources/GutenbergKit/Sources/EditorViewController.swift

+
+        guard let data = try? JSONEncoder().encode(selection),
+              let string = String(data: data, encoding: .utf8) else {
+            debugPrint("Failed to serialize media array to JSON")


This should never happen.

kean · 2025-10-28T20:10:18Z

src/components/native-block-inserter-button/index.jsx

 			onClick={ ( e ) => {
 				e.preventDefault();
+
+				const blocks = serializeBlocksForNative( inserterItems );


This is the fix for CMM-903: Performance: Inserter recomputes the list of blocks on every change in the editor. Instead of useEffect, it now serializes blocks only when it's needed.

Ideally, I would also ensure useInsertionPoint isn't called so frequently, but it could be done later.

Sounds good. We can revisit other memoization ideas later. Maybe we can further reduce useInsertionPoint invocations.

kean · 2025-10-28T20:10:46Z

src/components/native-block-inserter-button/index.jsx

+			);
+
+			if ( ! transformation ) {
+				debug( 'insertMedia: No matching transform found', {


I focused only on the happy path and opened CMM-910: Add error handling for media insertion

dcalhoun

Selecting media feels very satisfying. Nicely done.

src/components/native-block-inserter-button/index.jsx

dcalhoun · 2025-10-29T19:55:55Z

src/components/native-block-inserter-button/index.jsx

 			onClick={ ( e ) => {
 				e.preventDefault();
+
+				const blocks = serializeBlocksForNative( inserterItems );


Sounds good. We can revisit other memoization ideas later. Maybe we can further reduce useInsertionPoint invocations.

jkmassel reviewed Oct 27, 2025

View reviewed changes

kean force-pushed the task/add-photos-kit-and-camera branch 2 times, most recently from 4fbade0 to 611ac1f Compare October 28, 2025 19:52

kean changed the title ~~Native Inserter: Add Photos and Camera integration~~ Native Inserter: Add initial Photos integration Oct 28, 2025

kean changed the base branch from trunk to task/blocks-with-predefined-parameters October 28, 2025 20:06

kean commented Oct 28, 2025

View reviewed changes

kean force-pushed the task/add-photos-kit-and-camera branch from 611ac1f to fd21214 Compare October 28, 2025 20:12

kean requested review from dcalhoun and jkmassel October 28, 2025 20:15

kean marked this pull request as ready for review October 28, 2025 20:15

kean force-pushed the task/add-photos-kit-and-camera branch from fd21214 to 78df467 Compare October 28, 2025 20:17

Base automatically changed from task/blocks-with-predefined-parameters to task/insert-block October 29, 2025 19:20

Base automatically changed from task/insert-block to trunk October 29, 2025 19:25

kean force-pushed the task/add-photos-kit-and-camera branch 2 times, most recently from 0ccfd38 to 728c04b Compare October 29, 2025 19:45

Add PhotosKit integration

36b9906

kean force-pushed the task/add-photos-kit-and-camera branch from 728c04b to 36b9906 Compare October 29, 2025 19:46

dcalhoun approved these changes Oct 29, 2025

View reviewed changes

Add canInsertBlockType

cfb3438

kean enabled auto-merge (squash) October 30, 2025 12:49

kean merged commit e96f2d0 into trunk Oct 30, 2025
11 checks passed

kean deleted the task/add-photos-kit-and-camera branch October 30, 2025 12:52

		try? fileManager.createDirectory(at: self.rootURL, withIntermediateDirectories: true)
		try? fileManager.createDirectory(at: self.uploadsDirectory, withIntermediateDirectories: true)

Native Inserter: Add initial Photos integration #203

Native Inserter: Add initial Photos integration #203

Uh oh!

Conversation

kean commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

How?

Testing Instructions

Screenshots or screencast

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcalhoun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kean commented Oct 27, 2025 •

edited

Loading