Native Inserter: Add support for block variants (#204)

* Add support for block variants

* Rename BlockType

* Capitlize ID

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

Co-authored-by: David Calhoun <[email protected]>

* Native Inserter: Improve ordering of blocks and more (#206)

* Add a note about serializeBlocksForNative

* Remove now redundant core/missing check

* Move ordering to the JS land

* Further refactoring

* Pass displayName for Text

* Localize categories

* Extend most used blocks

* Add gbk-most-used as a separate section

* Add support for disabling blocks

* Collapse long sections

* Update the order of embeds

* Fix linter errors

---------

Co-authored-by: David Calhoun <[email protected]>

Author: kean

ios/Sources/GutenbergKit/Sources/EditorJSMessage.swift

@@ -67,7 +67,6 @@ struct EditorJSMessage {
     }
 
     struct ShowBlockInserterBody: Decodable {
-        let blocks: [EditorBlock]
-        let destinationBlockName: String?
+        let sections: [BlockInserterSection]
     }
 }

ios/Sources/GutenbergKit/Sources/EditorViewController.swift

@@ -174,6 +174,12 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
         try await webView.evaluateJavaScript("editor.getContent();") as! String
     }
 
+    public struct EditorTitleAndContent: Decodable {
+        public let title: String
+        public let content: String
+        public let changed: Bool
+    }
+
     /// Returns the current editor title and content.
     public func getTitleAndContent() async throws -> EditorTitleAndContent {
         let result = try await webView.evaluateJavaScript("editor.getTitleAndContent();")
@@ -250,12 +256,11 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
 
         let host = UIHostingController(rootView: NavigationStack {
             BlockInserterView(
-                blocks: data.blocks,
-                destinationBlockName: data.destinationBlockName,
+                sections: data.sections,
                 mediaPicker: mediaPicker,
                 presentationContext: context,
                 onBlockSelected: { [weak self] block in
-                    self?.insertBlockFromInserter(block.name)
+                    self?.insertBlockFromInserter(block.id)
                 },
                 onMediaSelected: {
                     print("insert media:", $0)
@@ -268,8 +273,8 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
         present(host, animated: true)
     }
 
-    private func insertBlockFromInserter(_ blockName: String) {
-        evaluate("window.blockInserter.insertBlock('\(blockName)')")
+    private func insertBlockFromInserter(_ blockID: String) {
+        evaluate("window.blockInserter.insertBlock('\(blockID)')")
     }
 
     private func openMediaLibrary(_ config: OpenMediaLibraryAction) {

ios/Sources/GutenbergKit/Sources/Helpers/BlockIconCache.swift

@@ -5,7 +5,7 @@ import SVGKit
 final class BlockIconCache: ObservableObject {
     var icons: [String: Result<SVGKImage, Error>] = [:]
 
-    func getIcon(for block: EditorBlock) -> SVGKImage? {
+    func getIcon(for block: BlockType) -> SVGKImage? {
         if let result = icons[block.id] {
             return try? result.get()
         }
@@ -14,7 +14,7 @@ final class BlockIconCache: ObservableObject {
         return try? result.get()
     }
 
-    private func _getIcon(for block: EditorBlock) throws -> SVGKImage {
+    private func _getIcon(for block: BlockType) throws -> SVGKImage {
         guard let svg = block.icon,
               !svg.isEmpty,
               let source = SVGKSourceString.source(fromContentsOf: svg),

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

@@ -2,7 +2,7 @@ import SwiftUI
 import SVGKit
 
 struct BlockIconView: View {
-    let block: EditorBlock
+    let block: BlockType
     let size: CGFloat
 
     @EnvironmentObject private var cache: BlockIconCache

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

@@ -2,7 +2,7 @@ import SwiftUI
 import SVGKit
 
 struct BlockInserterBlockView: View {
-    let block: EditorBlock
+    let block: BlockType
     let action: () -> Void
 
     @State private var isPressed = false
@@ -29,6 +29,7 @@ struct BlockInserterBlockView: View {
             .padding(.horizontal, 4)
         }
         .buttonStyle(.plain)
+        .disabled(block.isDisabled)
         .frame(maxWidth: .infinity, alignment: .center)
         .contextMenu {
             Button {
@@ -57,7 +58,7 @@ struct BlockInserterBlockView: View {
 }
 
 private struct BlockDetailedView: View {
-    let block: EditorBlock
+    let block: BlockType
 
     var body: some View {
         HStack(spacing: 16) {

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

@@ -1,18 +1,32 @@
 import SwiftUI
 
-struct BlockInserterSection: Identifiable {
+struct BlockInserterSection: Identifiable, Decodable {
     var id: String { category }
     let category: String
     let name: String?
-    let blocks: [EditorBlock]
+    let blocks: [BlockType]
 }
 
 struct BlockInserterSectionView: View {
     let section: BlockInserterSection
-    let onBlockSelected: (EditorBlock) -> Void
+    let onBlockSelected: (BlockType) -> Void
 
     @ScaledMetric(relativeTo: .largeTitle) private var miniumSize = 80
     @ScaledMetric(relativeTo: .largeTitle) private var padding = 20
+    @State private var isExpanded = false
+
+    private let initialDisplayCount = 16
+
+    private var displayedBlocks: [BlockType] {
+        if !isExpanded && section.blocks.count > initialDisplayCount {
+            return Array(section.blocks.prefix(initialDisplayCount))
+        }
+        return section.blocks
+    }
+
+    private var hasMoreBlocks: Bool {
+        section.blocks.count > initialDisplayCount
+    }
 
     var body: some View {
         VStack(alignment: .leading, spacing: 20) {
@@ -24,6 +38,9 @@ struct BlockInserterSectionView: View {
                     .frame(maxWidth: .infinity, alignment: .leading)
             }
             grid
+            if hasMoreBlocks {
+                toggleButton
+            }
         }
         .padding(.top, section.name != nil ? 20 : 24)
         .padding(.bottom, 10)
@@ -32,12 +49,35 @@ struct BlockInserterSectionView: View {
 
     private var grid: some View {
         LazyVGrid(columns: [GridItem(.adaptive(minimum: miniumSize, maximum: miniumSize * 1.5), spacing: 0)]) {
-            ForEach(section.blocks) { block in
+            ForEach(displayedBlocks) { block in
                 BlockInserterBlockView(block: block) {
                     onBlockSelected(block)
                 }
             }
         }
         .padding(.horizontal, 12)
     }
+
+    private var toggleButton: some View {
+        Button {
+            withAnimation {
+                isExpanded.toggle()
+            }
+        } label: {
+            HStack {
+                // TODO: CMM-874 add localization
+                Text(isExpanded ? "Show Less" : "Show More")
+                    .font(.subheadline)
+                    .fontWeight(.medium)
+                    .foregroundStyle(Color.secondary)
+                Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
+                    .font(.caption)
+                    .foregroundStyle(Color.primary)
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.vertical, 8)
+        }
+        .buttonStyle(.plain)
+        .padding(.horizontal, 12)
+    }
 }