Repository navigation
Conversation
b2f92e3 to
1dac78c
Compare
| let package = Package( | ||
| name: "GutenbergKit", | ||
| platforms: [.iOS(.v15), .macOS(.v14)], | ||
| platforms: [.iOS(.v16), .macOS(.v14)], |
There was a problem hiding this comment.
I used some iOS 16 APIs. The apps require iOS 16, so we are good.
| } | ||
| } | ||
| } | ||
| .fullScreenCover(isPresented: $isShowingDefaultEditor) { |
There was a problem hiding this comment.
Changed it to show modally as in the app.
| /// Enable native block inserter UI. | ||
| public var enableNativeBlockInserter = false | ||
| /// Auto-focus the editor when it loads. | ||
| public var autoFocusOnLoad = true |
There was a problem hiding this comment.
Noting that I enabled it by default. It auto-focuses the editor as you open it.
| } | ||
|
|
||
| // Style the add block button with rounded black background | ||
| .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button { |
There was a problem hiding this comment.
I took the library to make it a bit less dramatic. The new button harmonizes better with the rest of the controls. There is no functional reason for it to be black. It's already in a toolbar as the first item – you ca't miss it.
| // Continuously update the saved insertion point whenever selection changes | ||
| useEffect( () => { | ||
| // Only update if we have a selected block OR if we're clearing selection but already have a saved point | ||
| if ( selectedBlockClientId !== null ) { |
There was a problem hiding this comment.
This code was generated. I didn't review it and I need help verifying it. I think the insertion ends up being off by one.
| * @param {Array} mediaItems Array of MediaInfo entities with { id, url, type, title, caption, alt, metadata } | ||
| * @return {Promise<void>} | ||
| */ | ||
| export async function insertMediaFromFiles( mediaItems ) { |
There was a problem hiding this comment.
Hey, @dcalhoun, what you think is the best way to programmatically insert image/video/file blocks and trigger the upload? I got the following working: insert the block at the cursor position, focus it, attach images. I failed to get the uploads working.
There was a problem hiding this comment.
From researching quickly, there is a mediaUpload setting available in the block editor store. It provides a utility for uploading media. It appears most media blocks (image, video, etc) rely upon this utility via the media placeholder component.
I was able to successfully upload an arbitrary image file with this utility. Here is a diff of an arbitrary example in GutenbergKit:
diff --git a/src/components/visual-editor/index.jsx b/src/components/visual-editor/index.jsx
index b4b7f9f..89ca661 100644
--- a/src/components/visual-editor/index.jsx
+++ b/src/components/visual-editor/index.jsx
@@ -13,9 +13,10 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { store as editorStore, PostTitle } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, dispatch, select } from '@wordpress/data';
import { store as editPostStore } from '@wordpress/edit-post';
import '@wordpress/format-library';
+import { store as mediaStore } from '@wordpress/upload-media';
/**
* Internal dependencies
@@ -142,6 +143,19 @@ function VisualEditor( { hideTitle } ) {
) }
</>
) }
+ <form
+ onSubmit={ ( e ) => {
+ e.preventDefault();
+ const formData = new FormData( e.target );
+ const files = formData.getAll( 'files' );
+ select( blockEditorStore )
+ .getSettings()
+ .mediaUpload( { filesList: files } );
+ } }
+ >
+ <input type="file" name="files" multiple />
+ <button type="submit">Upload</button>
+ </form>
{ ! hideTitle && (
<div className={ titleClasses }>
<PostTitle ref={ editorPostTitleRef } />
I'm not sure what the url value of mediaItems resembles within the insertMediaFromFiles, but presumably we could leverage the mediaItems data to upload the files with mediaUpload?
…ories Resolves 29 Dependabot advisories in the dev dependency tree. None of these packages ship in the iOS/Android app bundle -- they are build, lint, and local-WP (`@wordpress/env`) tooling. In-range bumps: - `vite` 8.0.5 -> 8.2.1 (direct devDep; floor raised to `^8.0.16`) #134 #135 - `shell-quote` -> 1.10.0 (critical #133) #165 - `fast-uri` -> 3.1.5 #163 #164 #179 #206 #207 - `js-yaml` -> 3.15.1 / 4.3.1 #157 #158 #167 #168 #200 #201 - `brace-expansion` #160 #166, `immutable` #161 #162, `tmp` #131, `fast-xml-builder` #122 #123, `simple-git` #119, `@babel/plugin-transform-modules-systemjs` #126 Scoped `overrides` (parents exact-pinned the vulnerable version): - `ws` -> 8.21.0, keeping 7.5.13 for `react-devtools-core` #138 #153 - `qs` -> 6.15.2 under `@wordpress/env` #130 - `minimatch` -> 9.0.9 under `@typescript-eslint/typescript-estree` #65 - `@babel/core` -> 7.29.7 under `@wordpress/babel-preset-default` #154 Not addressed here: `electron` (33 alerts) and its bundled `got` (#33) are pinned by `react-devtools@7.0.1` -- already the latest, and npm's only "fix" is a breaking downgrade to `react-devtools@1.0.5`. Runtime-scope advisories (`seroval`, `nanoid`, `postcss`, `showdown`, `uuid`) are out of scope for a dev-only bump. Verified: `npm run test:unit` (202 passing) and `npm run build` green.
What?
Implements a native iOS block inserter UI to replace the web-based block inserter in the editor.
Why?
< see the respective P2 post >
How?
BlockInserterView) that provides a searchable,categorized view of available blocks with first-class media support and native API integration
SearchEngine) that supports fuzzy matching and scoring for blockdiscovery
Testing Instructions
Important
enableNativeBlockInserter(enabled in demo)Integration PR in wpios: wordpress-mobile/WordPress-iOS#24708
enableNativeBlockInserter: truein the editorconfiguration
Missing
gbk-localURL scheme to allow the WKWebView to access the uploaded files from disk, and added basic image/gallery/block/insertion. I didn't add the code to trigger the actual upload – couldn't figure it out.core/list-item– do not show them?Screenshot
Demo
demo.mov