Skip to content

Commit ab38791

Browse files
remove Blocks / Mod Tools tabs everywhere (#83)
<!-- If this pull request closes an issue, please mention the issue number below --> Closes # <!-- Issue # here --> ## 💸 TL;DR <!-- What's the three sentence summary of purpose of the PR --> ## 📜 Details [Design Doc](<!-- insert Google Doc link here if applicable -->) [Jira](<!-- insert Jira link if applicable -->) <!-- Add additional details required for the PR: breaking changes, screenshots, external dependency changes --> ## 🧪 Testing Steps / Validation <!-- add details on how this PR has been tested, include reproductions and screenshots where applicable --> ## ✅ Checks <!-- Make sure your pr passes the CI checks and do check the following fields as needed - --> - [ ] CI tests (if present) are passing - [ ] Adheres to code style for repo - [ ] Contributor License Agreement (CLA) completed if not a Reddit employee
1 parent f6d810b commit ab38791

22 files changed

Lines changed: 328 additions & 2386 deletions

docs/capabilities/client/forms.mdx

Lines changed: 11 additions & 397 deletions
Large diffs are not rendered by default.

docs/capabilities/client/menu-actions.mdx

Lines changed: 1 addition & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ Add an item to the three dot menu for posts, comments, or subreddits. Menu actio
1111

1212
**For most menu actions, use direct client effects.** These provide immediate responses and are perfect for simple actions that don't require server processing.
1313

14-
<Tabs>
15-
<TabItem value="web" label="Devvit Web">
16-
17-
**Menu items defined in devvit.json:**
14+
**Menu items defined in devvit.json:**
1815

1916
```json title="devvit.json"
2017
{
@@ -74,53 +71,6 @@ app.post<string, never, UiResponse, MenuItemRequest>(
7471
</TabItem>
7572
</Tabs>
7673

77-
</TabItem>
78-
<TabItem value="blocks" label="Devvit Blocks / Mod Tools">
79-
80-
```tsx
81-
import { Devvit } from '@devvit/public-api';
82-
83-
// Simple menu action with direct client effects
84-
Devvit.addMenuItem({
85-
label: 'Show user info',
86-
location: 'post', // 'post', 'comment', 'subreddit', or array
87-
onPress: async (event, context) => {
88-
// Direct client effect - no server processing needed
89-
context.ui.showToast('Menu action clicked!');
90-
},
91-
});
92-
93-
// Menu action with form
94-
const surveyForm = Devvit.createForm(
95-
{
96-
fields: [
97-
{
98-
type: 'string',
99-
name: 'feedback',
100-
label: 'Your feedback',
101-
},
102-
],
103-
},
104-
(event, context) => {
105-
// onSubmit handler
106-
context.ui.showToast({ text: `Thanks for the feedback: ${event.values.feedback}` });
107-
}
108-
);
109-
110-
Devvit.addMenuItem({
111-
label: 'Quick survey',
112-
location: 'subreddit',
113-
forUserType: 'moderator', // Optional: restrict to moderators
114-
onPress: async (event, context) => {
115-
context.ui.showForm(surveyForm);
116-
},
117-
});
118-
119-
````
120-
121-
</TabItem>
122-
</Tabs>
123-
12474
## Supported contexts
12575

12676
You can decide where the menu action shows up by specifying the location property.
@@ -139,9 +89,6 @@ For moderator permission security, when opening a form from a menu action with `
13989

14090
In Devvit Web, your menu item should respond with a client side effect to give feedback to users. This is available as a UIResponse as you do not have access to the `@devvit/web/client` library from your server endpoints.
14191

142-
<Tabs>
143-
<TabItem value="web" label="Devvit Web">
144-
14592
**Menu items with server processing:**
14693

14794
```json title="devvit.json"
@@ -242,45 +189,6 @@ app.post<string, never, UiResponse, MenuItemRequest>(
242189

243190
</TabItem>
244191
</Tabs>
245-
</TabItem>
246-
<TabItem value="blocks" label="Devvit Blocks / Mod Tools">
247-
248-
For Devvit Blocks, use the direct context approach even for complex workflows:
249-
250-
```tsx
251-
Devvit.addMenuItem({
252-
label: "Process and validate data",
253-
location: "post", // 'post', 'comment', 'subreddit', or array
254-
forUserType: "moderator", // Optional: restrict to moderators
255-
onPress: async (event, context) => {
256-
try {
257-
// Perform server-side processing
258-
const userData = await validateAndProcessData();
259-
260-
// Show form with server-fetched data
261-
const result = await context.ui.showForm(
262-
{
263-
fields: [
264-
{
265-
type: "string",
266-
name: "processedData",
267-
label: "Processed Data",
268-
},
269-
],
270-
},
271-
(values) => {
272-
context.ui.showToast(`Processed: ${values.processedData}`);
273-
},
274-
);
275-
} catch (error) {
276-
context.ui.showToast("Processing failed. Please try again.");
277-
}
278-
},
279-
});
280-
```
281-
282-
</TabItem>
283-
</Tabs>
284192

285193
### Menu response examples
286194

docs/capabilities/client/navigation.mdx

Lines changed: 26 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import Tabs from '@theme/Tabs';
2-
import TabItem from '@theme/TabItem';
3-
41
# Navigation
52

63
Use navigation functions to redirect users to Reddit content or external websites in response to user actions, such as button clicks. You can redirect to a `url` string or to objects such as [`Subreddit`](/api/redditapi/models/classes/Subreddit.md), [`Post`](/api/redditapi/models/classes/Post.md), or [`Comment`](/api/redditapi/models/classes/Comment.md).
@@ -13,135 +10,32 @@ When linking to Reddit content, the navigation function requires the app account
1310

1411
## Basic navigation
1512

16-
<Tabs>
17-
<TabItem value="web" label="Devvit Web">
18-
```ts title="client/index.ts"
19-
import { navigateTo } from '@devvit/web/client';
20-
21-
// Navigate to external URLs
22-
navigateTo('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
23-
24-
// Navigate to Reddit URLs
25-
navigateTo('https://www.reddit.com/r/movies/comments/tzxev3/');
26-
27-
// Navigate to Reddit objects
28-
async function goToPost() {
29-
const post = await fetch('/api/getPost').then(r => r.json());
30-
navigateTo(post);
31-
}
32-
33-
// Use in button handlers or user interactions
34-
function handleNavigateClick() {
35-
navigateTo('https://www.reddit.com/r/webdev');
36-
}
37-
```
38-
39-
### Parameters
40-
41-
**`navigateTo(target)`**
42-
43-
- `target`: Either a URL string or a Reddit object (Subreddit, Post, Comment)
44-
45-
</TabItem>
46-
<TabItem value="blocks" label="Devvit Blocks / Mod Tools">
47-
```tsx
48-
import { Devvit } from '@devvit/public-api';
49-
50-
Devvit.configure({ redditAPI: true });
51-
52-
// Navigate to URL
53-
Devvit.addMenuItem({
54-
label: 'Navigate to url',
55-
location: 'subreddit',
56-
onPress: async (_event, context) => {
57-
const url = 'https://www.reddit.com/r/movies/comments/tzxev3/';
58-
context.ui.navigateTo(url);
59-
},
60-
});
61-
62-
// Navigate to subreddit
63-
Devvit.addMenuItem({
64-
label: 'Navigate to subreddit',
65-
location: 'subreddit',
66-
onPress: async (_event, context) => {
67-
const subredditId = 't5_2qh1o';
68-
const subreddit = await context.reddit.getSubredditById(subredditId);
69-
context.ui.navigateTo(subreddit);
70-
},
71-
});
72-
73-
// Navigate to post
74-
Devvit.addMenuItem({
75-
label: 'Navigate to post',
76-
location: 'subreddit',
77-
onPress: async (_event, context) => {
78-
const postId = 't3_tzxev3';
79-
const post = await context.reddit.getPostById(postId);
80-
context.ui.navigateTo(post);
81-
},
82-
});
83-
84-
// Navigate to comment
85-
Devvit.addMenuItem({
86-
label: 'Navigate to comment',
87-
location: 'subreddit',
88-
onPress: async (_event, context) => {
89-
const commentId = 't1_i426ob1';
90-
const comment = await context.reddit.getCommentById(commentId);
91-
context.ui.navigateTo(comment);
92-
},
93-
});
94-
95-
// Interactive post with navigation
96-
// addCustomPostType() is deprecated and will be unsupported. It will not work after June 30. View the announcement below this example.
97-
Devvit.addCustomPostType({
98-
name: 'Navigation Post',
99-
render: (context) => {
100-
return (
101-
<vstack height="100%" alignment="middle center">
102-
<button
103-
onPress={async () => {
104-
const postId = 't3_tzxev3';
105-
const post = await context.reddit.getPostById(postId);
106-
context.ui.navigateTo(post);
107-
}}
108-
>
109-
Navigate to post
110-
</button>
111-
</vstack>
112-
);
113-
},
114-
});
115-
116-
// Menu action to create interactive post
117-
Devvit.addMenuItem({
118-
label: 'Add navigation post',
119-
location: 'subreddit',
120-
onPress: async (_event, context) => {
121-
const subreddit = await context.reddit.getCurrentSubreddit();
122-
await context.reddit.submitPost({
123-
title: 'Navigate to post',
124-
subredditName: subreddit.name,
125-
preview: (
126-
<vstack height="100%" width="100%" alignment="middle center">
127-
<text>Loading ...</text>
128-
</vstack>
129-
),
130-
});
131-
context.ui.showToast('Created post!');
132-
},
133-
});
134-
```
135-
[View `addCustomPostType` deprecation announcement.](https://www.reddit.com/r/Devvit/comments/1r3xcm2/devvit_web_and_the_future_of_devvit/)
136-
137-
### Parameters
138-
139-
**`context.ui.navigateTo(target)`**
140-
141-
- `target`: Either a URL string or a Reddit object (Subreddit, Post, Comment)
142-
143-
</TabItem>
144-
</Tabs>
13+
```ts title="client/index.ts"
14+
import { navigateTo } from '@devvit/web/client';
15+
16+
// Navigate to external URLs
17+
navigateTo('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
18+
19+
// Navigate to Reddit URLs
20+
navigateTo('https://www.reddit.com/r/movies/comments/tzxev3/');
21+
22+
// Navigate to Reddit objects
23+
async function goToPost() {
24+
const post = await fetch('/api/getPost').then(r => r.json());
25+
navigateTo(post);
26+
}
27+
28+
// Use in button handlers or user interactions
29+
function handleNavigateClick() {
30+
navigateTo('https://www.reddit.com/r/webdev');
31+
}
32+
```
33+
34+
### Parameters
35+
36+
**`navigateTo(target)`**
37+
38+
- `target`: Either a URL string or a Reddit object (Subreddit, Post, Comment)
14539

14640
:::tip Menu response navigation
14741
For navigation in menu response workflows (when you need server processing before navigation), see the [Menu Actions](./menu-actions.mdx) documentation.

0 commit comments

Comments
 (0)