Skip to content

fix: show proper labels in content block #5363

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

Merged
merged 1 commit into from
Aug 7, 2025
Merged

fix: show proper labels in content block #5363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 6 additions & 3 deletions apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@ import { getInstancePath } from "~/shared/awareness";
import { insertTemplateAt } from "./block-utils";
import { Outline } from "./outline";
import { applyScale } from "./apply-scale";
import { InstanceIcon } from "~/builder/shared/instance-label";
import {
getInstanceLabel,
InstanceIcon,
} from "~/builder/shared/instance-label";

export const TemplatesMenu = ({
onOpenChange,
Expand Down Expand Up @@ -103,7 +106,7 @@ export const TemplatesMenu = ({
const menuItems = templates?.map(([template, templateSelector]) => ({
id: template.id,
icon: <InstanceIcon instance={{ component: template.component }} />,
title: template.label ?? template.component,
title: getInstanceLabel(template, undefined),
value: templateSelector,
}));

Expand Down Expand Up @@ -167,7 +170,7 @@ export const TemplatesMenu = ({
>
<Flex css={{ px: theme.spacing[3] }} gap={2} data-xxx>
{item.icon}
<Box>{item.title}</Box>
<Box css={{ textTransform: "none" }}>{item.title}</Box>
</Flex>
</DropdownMenuRadioItem>
))}
Expand Down
34 changes: 19 additions & 15 deletions packages/sdk/src/core-templates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,20 @@ const blockMeta: TemplateMeta = {
template: (
<ws.block>
<BlockTemplate ws:label="Templates">
<ws.element ws:tag="p"></ws.element>
<ws.element ws:label="Paragraph" ws:tag="p"></ws.element>
<ws.element ws:label="Heading 1" ws:tag="h1"></ws.element>
<ws.element ws:label="Heading 2" ws:tag="h2"></ws.element>
<ws.element ws:label="Heading 3" ws:tag="h3"></ws.element>
<ws.element ws:label="Heading 4" ws:tag="h4"></ws.element>
<ws.element ws:label="Heading 5" ws:tag="h5"></ws.element>
<ws.element ws:label="Heading 6" ws:tag="h6"></ws.element>
<ws.element ws:tag="ul">
<ws.element ws:tag="li"></ws.element>
<ws.element ws:label="Unordered List" ws:tag="ul">
<ws.element ws:label="List Item" ws:tag="li"></ws.element>
</ws.element>
<ws.element ws:tag="ol">
<ws.element ws:tag="li"></ws.element>
<ws.element ws:label="Ordered List" ws:tag="ol">
<ws.element ws:label="List Item" ws:tag="li"></ws.element>
</ws.element>
<ws.element ws:tag="a"></ws.element>
<ws.element ws:label="Link" ws:tag="a"></ws.element>
<$.Image
ws:style={css`
margin-right: auto;
Expand All @@ -93,30 +93,34 @@ const blockMeta: TemplateMeta = {
height: auto;
`}
/>
<ws.element ws:tag="hr" />
<ws.element ws:tag="blockquote"></ws.element>
<ws.element ws:label="Separator" ws:tag="hr" />
<ws.element ws:label="Blockquote" ws:tag="blockquote"></ws.element>
<$.HtmlEmbed />
<ws.element ws:tag="code" />
<ws.element ws:label="Code Text" ws:tag="code" />
</BlockTemplate>
<ws.element ws:tag="p">
<ws.element ws:label="Paragraph" ws:tag="p">
The Content Block component designates regions on the page where
pre-styled instances can be inserted in{" "}
<ws.element ws:tag="a" href="https://wstd.us/content-block">
<ws.element
ws:label="Link"
ws:tag="a"
href="https://wstd.us/content-block"
>
Content mode
</ws.element>
.
</ws.element>
<ws.element ws:tag="ul">
<ws.element ws:tag="li">
<ws.element ws:label="Unordered List" ws:tag="ul">
<ws.element ws:label="List Item" ws:tag="li">
In Content mode, you can edit any direct child instances that were
pre-added to the Content Block, as well as add new instances
predefined in Templates.
</ws.element>
<ws.element ws:tag="li">
<ws.element ws:label="List Item" ws:tag="li">
To predefine instances for insertion in Content mode, switch to Design
mode and add them to the Templates container.
</ws.element>
<ws.element ws:tag="li">
<ws.element ws:label="List Item" ws:tag="li">
To insert predefined instances in Content mode, click the + button
while hovering over the Content Block on the canvas and choose an
instance from the list.
Expand Down
Loading