Add initial patterns support

Author: kean

ios/Demo-iOS/Sources/Views/AppRootView.swift

@@ -74,7 +74,7 @@ struct AppRootView: View {
 
                 let updatedConfiguration = EditorConfigurationBuilder()
                     .setShouldUseThemeStyles(canUseEditorStyles)
-                    .setShouldUsePlugins(canUsePlugins)
+                    .setShouldUsePlugins(false)
                     .setSiteUrl(config.siteUrl)
                     .setSiteApiRoot(config.siteApiRoot)
                     .setAuthHeader(config.authHeader)

ios/Sources/GutenbergKit/Sources/EditorJSMessage.swift

@@ -70,6 +70,7 @@ struct EditorJSMessage {
 
     struct ShowBlockInserterBody: Decodable {
         let sections: [BlockInserterSection]
+        let patterns: [PatternType]
     }
 
     struct LogMessage: Decodable {

ios/Sources/GutenbergKit/Sources/EditorViewController.swift

@@ -253,16 +253,23 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
     // MARK: - Internal (Block Inserter)
 
     private func showBlockInserter(data: EditorJSMessage.ShowBlockInserterBody) {
+        // Configure pattern preview loader with the WebView
+        PatternPreviewLoader.shared.configure(webView: webView)
+
         let context = MediaPickerPresentationContext()
 
         let host = UIHostingController(rootView: NavigationStack {
             BlockInserterView(
                 sections: data.sections,
+                patterns: data.patterns,
                 mediaPicker: mediaPicker,
                 presentationContext: context,
                 onBlockSelected: { [weak self] block in
                     self?.insertBlockFromInserter(block.id)
                 },
+                onPatternSelected: { [weak self] patternName in
+                    self?.insertPatternFromInserter(patternName)
+                },
                 onMediaSelected: {
                     print("insert media:", $0)
                 }
@@ -278,6 +285,11 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
         evaluate("window.blockInserter.insertBlock('\(blockID)')")
     }
 
+    private func insertPatternFromInserter(_ patternName: String) {
+        let escapedName = patternName.replacingOccurrences(of: "'", with: "\\'")
+        evaluate("window.blockInserter.insertPattern('\(escapedName)')")
+    }
+
     private func openMediaLibrary(_ config: OpenMediaLibraryAction) {
         delegate?.editor(self, didRequestMediaFromSiteMediaLibrary: config)
     }

ios/Sources/GutenbergKit/Sources/Views/BlockInserter/BlockInserterView.swift

@@ -4,9 +4,11 @@ import UIKit
 
 struct BlockInserterView: View {
     let sections: [BlockInserterSection]
+    let patterns: [PatternType]
     let mediaPicker: MediaPickerController?
     let presentationContext: MediaPickerPresentationContext
     let onBlockSelected: (BlockType) -> Void
+    let onPatternSelected: (String) -> Void
     let onMediaSelected: ([MediaInfo]) -> Void
 
     @StateObject private var viewModel: BlockInserterViewModel
@@ -15,18 +17,23 @@ struct BlockInserterView: View {
     private let maxSelectionCount = 10
 
     @Environment(\.dismiss) private var dismiss
+    @State private var showingPatterns = false
 
     init(
         sections: [BlockInserterSection],
+        patterns: [PatternType] = [],
         mediaPicker: MediaPickerController?,
         presentationContext: MediaPickerPresentationContext,
         onBlockSelected: @escaping (BlockType) -> Void,
+        onPatternSelected: @escaping (String) -> Void,
         onMediaSelected: @escaping ([MediaInfo]) -> Void
     ) {
         self.sections = sections
+        self.patterns = patterns
         self.mediaPicker = mediaPicker
         self.presentationContext = presentationContext
         self.onBlockSelected = onBlockSelected
+        self.onPatternSelected = onPatternSelected
         self.onMediaSelected = onMediaSelected
 
         let viewModel = BlockInserterViewModel(sections: sections)
@@ -42,6 +49,17 @@ struct BlockInserterView: View {
             .toolbar {
                 toolbar
             }
+            .sheet(isPresented: $showingPatterns) {
+                NavigationStack {
+                    PatternsView(
+                        patterns: patterns,
+                        onPatternSelected: { patternName in
+                            showingPatterns = false
+                            insertPattern(patternName)
+                        }
+                    )
+                }
+            }
     }
 
     private var content: some View {
@@ -71,6 +89,13 @@ struct BlockInserterView: View {
         }
 
         ToolbarItemGroup(placement: .topBarTrailing) {
+            Button {
+                showingPatterns = true
+            } label: {
+                Image(systemName: "square.grid.2x2")
+            }
+            .tint(Color.primary)
+
             if let mediaPicker {
                 MediaPickerMenu(picker: mediaPicker, context: presentationContext) {
                     dismiss()
@@ -86,6 +111,11 @@ struct BlockInserterView: View {
         dismiss()
         onBlockSelected(block)
     }
+
+    private func insertPattern(_ patternName: String) {
+        dismiss()
+        onPatternSelected(patternName)
+    }
 }
 
 // MARK: - Preview
@@ -102,6 +132,9 @@ struct BlockInserterView: View {
             onBlockSelected: {
                 print("block selected: \($0.name)")
             },
+            onPatternSelected: {
+                print("pattern selected: \($0)")
+            },
             onMediaSelected: {
                 print("media selected: \($0)")
             }

ios/Sources/GutenbergKit/Sources/Views/BlockInserter/PatternType.swift

@@ -0,0 +1,56 @@
+import Foundation
+
+struct PatternType: Decodable, Identifiable {
+    let id: String
+    let name: String
+    let title: String
+    let description: String?
+    let category: String?
+    let keywords: [String]?
+    let content: String
+    let patternType: PatternSource
+    let syncStatus: SyncStatus?
+    let viewportWidth: Int
+
+    enum PatternSource: String, Decodable {
+        case user
+        case theme
+        case directory
+    }
+
+    enum SyncStatus: String, Decodable {
+        case synced = "fully"
+        case unsynced
+    }
+}
+
+extension PatternType: Searchable {
+    /// Sets the searchable fields in the order of priority
+    func searchableFields() -> [SearchableField] {
+        var fields: [SearchableField] = []
+
+        fields.append(SearchableField(content: title, weight: 10.0, allowFuzzyMatch: true))
+        fields.append(SearchableField(content: name, weight: 8.0, allowFuzzyMatch: false))
+
+        (keywords ?? []).forEach { keyword in
+            fields.append(SearchableField(content: keyword, weight: 5.0, allowFuzzyMatch: true))
+        }
+
+        if let description, !description.isEmpty {
+            fields.append(SearchableField(content: description, weight: 2.0, allowFuzzyMatch: false))
+        }
+
+        if let category, !category.isEmpty {
+            fields.append(SearchableField(content: category, weight: 2.0, allowFuzzyMatch: true))
+        }
+
+        return fields
+    }
+}
+
+struct PatternSection: Identifiable, Decodable {
+    var id: String { category }
+    let category: String
+    let name: String
+    let patterns: [PatternType]
+}

ios/Sources/GutenbergKit/Sources/Views/Patterns/PatternItemView.swift

@@ -0,0 +1,97 @@
+import SwiftUI
+
+struct PatternItemView: View {
+    let pattern: PatternType
+    let onSelected: () -> Void
+
+    @State private var previewImage: UIImage?
+    @State private var isLoadingPreview = false
+    @State private var previewError = false
+
+    var body: some View {
+        Button(action: onSelected) {
+            VStack(alignment: .leading, spacing: 8) {
+                preview
+
+                Text(pattern.title)
+                    .font(.subheadline)
+                    .fontWeight(.medium)
+                    .lineLimit(2)
+                    .multilineTextAlignment(.leading)
+                    .foregroundStyle(Color.primary)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                if let description = pattern.description, !description.isEmpty {
+                    Text(description)
+                        .font(.caption)
+                        .lineLimit(2)
+                        .foregroundStyle(Color.secondary)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                }
+            }
+            .padding(12)
+            .background(Color(uiColor: .secondarySystemBackground))
+            .cornerRadius(12)
+        }
+        .buttonStyle(.plain)
+    }
+
+    @ViewBuilder
+    private var preview: some View {
+        if let previewImage {
+            Image(uiImage: previewImage)
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .frame(maxWidth: .infinity)
+                .frame(height: 120)
+                .background(Color.white)
+                .cornerRadius(8)
+                .clipped()
+        } else if isLoadingPreview {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(Color(uiColor: .tertiarySystemBackground))
+                .frame(height: 120)
+                .overlay {
+                    ProgressView()
+                }
+        } else if previewError {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(Color(uiColor: .tertiarySystemBackground))
+                .frame(height: 120)
+                .overlay {
+                    VStack(spacing: 4) {
+                        Image(systemName: "square.grid.2x2")
+                            .font(.title2)
+                            .foregroundStyle(Color.secondary)
+                        Text("Preview unavailable")
+                            .font(.caption2)
+                            .foregroundStyle(Color.secondary)
+                    }
+                }
+        } else {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(Color(uiColor: .tertiarySystemBackground))
+                .frame(height: 120)
+                .task {
+                    await loadPreview()
+                }
+        }
+    }
+
+    private func loadPreview() async {
+        guard !isLoadingPreview, previewImage == nil, !previewError else {
+            return
+        }
+
+        isLoadingPreview = true
+        defer { isLoadingPreview = false }
+
+        do {
+            let image = try await PatternPreviewLoader.shared.loadPreview(for: pattern)
+            previewImage = image
+        } catch {
+            print("Failed to load pattern preview: \(error)")
+            previewError = true
+        }
+    }
+}