Image Editor

WP Stories includes a built-in image editor powered by TUI Image Editor, wrapped in a Vue.js component. This editor allows users to modify their story images before uploading, directly within the story creation form.

Architecture

The image editor is a Vue.js 2.x application that wraps the TUI Image Editor library. It integrates with FilePond (the file upload component) so that users can edit images inline during the upload process.

Dependencies

Library	Version	Purpose
Vue.js	2.6.14	Component framework for the editor UI
TUI Image Editor	3.15+	Core image editing engine
Fabric.js	4.2.0	Canvas rendering (required by TUI)
TUI Color Picker	2.2.6	Color selection for drawing and text tools
FilePond	-	File upload handling and preview

Vue.js, Fabric.js, and TUI Color Picker are loaded from CDNs. TUI Image Editor and FilePond are bundled with the plugin.

Editor Features

The image editor supports the following tools:

• Crop - Select and crop a region of the image.
• Rotate - Rotate the image by arbitrary angles.
• Flip - Flip the image horizontally or vertically.
• Draw - Freehand drawing on the canvas with configurable brush size and color.
• Text - Add text overlays with customizable font size, color, and style.
• Filters - Apply image filters (grayscale, sepia, blur, sharpen, etc.).
• Shapes - Draw rectangles, circles, and triangles with fill and stroke options.
• Icons - Add preset icon overlays to the image.
• Mask - Load a second image and use it as a mask.

On phones the nine tools sit in one row along the bottom; each tool opens as a bottom sheet with the photo still visible above it. The modal title is “Edit photo”.

WPStoriesEditorBridge API

The plugin exposes a JavaScript bridge object (WPStoriesEditorBridge) that manages communication between FilePond and the TUI Image Editor.

Methods

WPStoriesEditorBridge.init()

Mounts the Vue editor app (WPStoriesEditorBridge.vueApp). open() calls it on first use, so you rarely need to.

WPStoriesEditorBridge.open(imageUrl, { onSave, onCancel })

Opens the editor on an image URL or data URL. onSave( dataURL ) receives the edited image; onCancel() runs when the member cancels.

WPStoriesEditorBridge.close()

Closes the image editor and cleans up resources.

How It Works

1. When a user uploads an image via FilePond, the editor integration detects the file.
2. The user can click to edit, which calls WPStoriesEditorBridge.open() with the uploaded file.
3. The TUI Image Editor opens in a modal overlay.
4. After editing, the user taps Save; the edited file replaces the original in the picker, so the preview shows exactly what will be posted. Cancel keeps the original.
5. The edited image data is sent to the server when the story form is submitted.

Loading

Editor scripts and styles are not loaded for visitors or on page load. They are printed inside a <template id="wpst-editor-assets"> element and injected the first time a member opens the posting form, so pages without posting pay no cost for the editor.

Mobile Support

WP Stories includes a separate mobile-optimized editor build (wp-stories-vue-editor-mobile.js) that is automatically loaded on mobile devices. The plugin detects the device using wp_is_mobile() and loads the appropriate version.

The mobile editor includes:

• Touch-optimized controls
• Responsive layout adjustments
• The same nine tools in one row along the bottom, with each tool’s options in a bottom sheet

For development and testing, you can force the mobile editor on desktop by appending ?mobile_preview=1 to the page URL.

Responsive CSS

Two additional CSS files handle editor display across screen sizes:

• wp-stories-vue-editor-responsive.css - Loaded on all devices to handle browser window resizing.
• wp-stories-vue-editor-mobile.css - Loaded only on mobile devices for touch-specific adjustments.