Skip to content

Add native block inserter #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Draft

Add native block inserter #162

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
df22734
Add native block inserter
kean Aug 1, 2025
1dac78c
Disable by default
kean Aug 1, 2025
8e6cbc1
Show the media strip above the first category
kean Aug 1, 2025
80d00b3
Dont show Text category section title
kean Aug 1, 2025
5572c4a
Refactor
kean Aug 4, 2025
9ea27fc
Update scheme
kean Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Package.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import PackageDescription

let package = Package(
name: "GutenbergKit",
platforms: [.iOS(.v15), .macOS(.v14)],
platforms: [.iOS(.v16), .macOS(.v14)],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used some iOS 16 APIs. The apps require iOS 16, so we are good.

products: [
.library(name: "GutenbergKit", targets: ["GutenbergKit"])
],
Expand Down
11 changes: 9 additions & 2 deletions ios/Demo-iOS/Sources/ContentView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ struct ContentView: View {

let remoteEditorConfigurations: [EditorConfiguration] = [.template]

@State private var isShowingDefaultEditor = false

var body: some View {
List {
Section {
NavigationLink {
EditorView(configuration: .default)
Button {
isShowingDefaultEditor = true
} label: {
Text("Bundled Editor")
}
Expand Down Expand Up @@ -39,6 +41,11 @@ struct ContentView: View {
}
}
}
.fullScreenCover(isPresented: $isShowingDefaultEditor) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it to show modally as in the app.

NavigationView {
EditorView(configuration: .default)
}
}
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button {
Expand Down
6 changes: 5 additions & 1 deletion ios/Demo-iOS/Sources/EditorView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,18 @@ import GutenbergKit
struct EditorView: View {
private let configuration: EditorConfiguration

@Environment(\.dismiss) private var dismiss

init(configuration: EditorConfiguration) {
self.configuration = configuration
}

var body: some View {
_EditorView(configuration: configuration)
.background(Color(.systemBackground))
.toolbar {
ToolbarItemGroup(placement: .topBarLeading) {
Button(action: {}, label: {
Button(action: { dismiss() }, label: {
Image(systemName: "xmark")
})
}
Expand All @@ -33,6 +36,7 @@ struct EditorView: View {
moreMenu
}
}
.tint(Color.primary)
}

private var moreMenu: some View {
Expand Down
324 changes: 324 additions & 0 deletions ios/Sources/GutenbergKit/Sources/BlockInserter/BlockInserter+PreviewData.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,324 @@
#if DEBUG
import Foundation

enum PreviewData {
static let sampleBlockTypes: [EditorBlockType] = [
// Text blocks
EditorBlockType(
name: "core/paragraph",
title: "Paragraph",
description: "Start with the basic building block of all narrative.",
category: "text",
keywords: ["text", "paragraph"],
),
EditorBlockType(
name: "core/heading",
title: "Heading",
description: "Introduce new sections and organize content to help visitors find what they need.",
category: "text",
keywords: ["title", "heading"],
),
EditorBlockType(
name: "core/list",
title: "List",
description: "Create a bulleted or numbered list.",
category: "text",
keywords: ["bullet", "number", "list"],
),
EditorBlockType(
name: "core/quote",
title: "Quote",
description: "Give quoted text visual emphasis.",
category: "text",
keywords: ["quote", "citation"],
),
EditorBlockType(
name: "core/code",
title: "Code",
description: "Display code snippets that respect your spacing and tabs.",
category: "text",
keywords: ["code", "programming"],
),
EditorBlockType(
name: "core/preformatted",
title: "Preformatted",
description: "Add text that respects your spacing and tabs, and also allows styling.",
category: "text",
keywords: ["preformatted", "monospace"],
),
EditorBlockType(
name: "core/pullquote",
title: "Pullquote",
description: "Give special visual emphasis to a quote from your text.",
category: "text",
keywords: ["pullquote", "quote"],
),
EditorBlockType(
name: "core/verse",
title: "Verse",
description: "Insert poetry. Use special spacing formats. Or quote song lyrics.",
category: "text",
keywords: ["poetry", "verse"],
),
EditorBlockType(
name: "core/table",
title: "Table",
description: "Create structured content in rows and columns to display information.",
category: "text",
keywords: ["table", "rows", "columns"],
),

// Media blocks
EditorBlockType(
name: "core/image",
title: "Image",
description: "Insert an image to make a visual statement.",
category: "media",
keywords: ["photo", "picture"],
),
EditorBlockType(
name: "core/gallery",
title: "Gallery",
description: "Display multiple images in a rich gallery.",
category: "media",
keywords: ["images", "photos"],
),
EditorBlockType(
name: "core/audio",
title: "Audio",
description: "Embed a simple audio player.",
category: "media",
keywords: ["music", "sound", "podcast"],
),
EditorBlockType(
name: "core/video",
title: "Video",
description: "Embed a video from your media library or upload a new one.",
category: "media",
keywords: ["movie", "film"],
),
EditorBlockType(
name: "core/cover",
title: "Cover",
description: "Add an image or video with a text overlay.",
category: "media",
keywords: ["banner", "hero", "cover"],
),
EditorBlockType(
name: "core/file",
title: "File",
description: "Add a link to a downloadable file.",
category: "media",
keywords: ["download", "pdf", "document"],
),
EditorBlockType(
name: "core/media-text",
title: "Media & Text",
description: "Set media and words side-by-side for a richer layout.",
category: "media",
keywords: ["image", "video", "layout"],
),

// Design blocks
EditorBlockType(
name: "core/columns",
title: "Columns",
description: "Display content in multiple columns.",
category: "design",
keywords: ["layout", "columns"],
),
EditorBlockType(
name: "core/group",
title: "Group",
description: "Gather blocks in a container.",
category: "design",
keywords: ["container", "wrapper", "group"],
),
EditorBlockType(
name: "core/separator",
title: "Separator",
description: "Create a break between ideas or sections.",
category: "design",
keywords: ["divider", "hr"],
),
EditorBlockType(
name: "core/spacer",
title: "Spacer",
description: "Add white space between blocks.",
category: "design",
keywords: ["space", "gap"],
),
EditorBlockType(
name: "core/buttons",
title: "Buttons",
description: "Prompt visitors to take action with a group of button-style links.",
category: "design",
keywords: ["button", "link", "cta"],
),
EditorBlockType(
name: "core/more",
title: "More",
description: "Content before this block will be shown in the excerpt on your archives page.",
category: "design",
keywords: ["read more", "excerpt"],
),

// Widget blocks
EditorBlockType(
name: "core/search",
title: "Search",
description: "Help visitors find your content.",
category: "widgets",
keywords: ["find", "search"],
),
EditorBlockType(
name: "core/archives",
title: "Archives",
description: "Display a date archive of your posts.",
category: "widgets",
keywords: ["archive", "history"],
),
EditorBlockType(
name: "core/categories",
title: "Categories",
description: "Display a list of all categories.",
category: "widgets",
keywords: ["category", "taxonomy"],
),

// Theme blocks
EditorBlockType(
name: "core/site-title",
title: "Site Title",
description: "Display your site's title.",
category: "theme",
keywords: ["title", "site"],
),
EditorBlockType(
name: "core/site-logo",
title: "Site Logo",
description: "Display your site's logo.",
category: "theme",
keywords: ["logo", "brand"],
),

// Embed blocks
EditorBlockType(
name: "core-embed/youtube",
title: "YouTube",
description: "Embed a YouTube video.",
category: "embed",
keywords: ["video", "youtube"],
),
EditorBlockType(
name: "core-embed/twitter",
title: "Twitter",
description: "Embed a tweet.",
category: "embed",
keywords: ["tweet", "twitter"],
),
EditorBlockType(
name: "core-embed/vimeo",
title: "Vimeo",
description: "Embed a Vimeo video.",
category: "embed",
keywords: ["video", "vimeo"],
),
EditorBlockType(
name: "core-embed/instagram",
title: "Instagram",
description: "Embed an Instagram post.",
category: "embed",
keywords: ["instagram", "photo"],
),

// Jetpack blocks
EditorBlockType(
name: "jetpack/ai-assistant",
title: "AI Assistant",
description: "Generate text, edit content, and get suggestions using AI.",
category: "text",
keywords: ["ai", "artificial intelligence", "generate", "write"],
),
EditorBlockType(
name: "jetpack/contact-form",
title: "Contact Form",
description: "Add a customizable contact form.",
category: "widgets",
keywords: ["form", "contact", "email"],
),
EditorBlockType(
name: "jetpack/markdown",
title: "Markdown",
description: "Write posts or pages in plain-text Markdown syntax.",
category: "text",
keywords: ["markdown", "md", "formatting"],
),
EditorBlockType(
name: "jetpack/tiled-gallery",
title: "Tiled Gallery",
description: "Display multiple images in an elegantly organized tiled layout.",
category: "media",
keywords: ["gallery", "images", "photos", "tiled"],
),
EditorBlockType(
name: "jetpack/slideshow",
title: "Slideshow",
description: "Display multiple images in a slideshow.",
category: "media",
keywords: ["slideshow", "carousel", "gallery"],
),
EditorBlockType(
name: "jetpack/map",
title: "Map",
description: "Add an interactive map showing one or more locations.",
category: "widgets",
keywords: ["map", "location", "address"],
),
EditorBlockType(
name: "jetpack/business-hours",
title: "Business Hours",
description: "Display your business opening hours.",
category: "widgets",
keywords: ["hours", "schedule", "business"],
),
EditorBlockType(
name: "jetpack/subscriptions",
title: "Subscriptions",
description: "Let visitors subscribe to your blog posts.",
category: "widgets",
keywords: ["subscribe", "email", "newsletter"],
),
EditorBlockType(
name: "jetpack/related-posts",
title: "Related Posts",
description: "Display a list of related posts.",
category: "widgets",
keywords: ["related", "posts", "similar"],
),

// Additional common blocks
EditorBlockType(
name: "core/html",
title: "Custom HTML",
description: "Add custom HTML code and preview it as you edit.",
category: "widgets",
keywords: ["html", "code", "custom"],
),
EditorBlockType(
name: "core/shortcode",
title: "Shortcode",
description: "Insert additional custom elements with WordPress shortcodes.",
category: "widgets",
keywords: ["shortcode", "custom"],
),
EditorBlockType(
name: "core/social-links",
title: "Social Icons",
description: "Display icons linking to your social media profiles.",
category: "widgets",
keywords: ["social", "links", "icons"],
)
]
}
#endif
Loading