From fb3fe27c3b8f8c0146899add899cc49a76673029 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 30 Oct 2025 14:05:54 -0400
Subject: [PATCH] add button blocks to published posts

---
 actions/publishToPublication.ts               | 23 +++++++++++---
 .../[publication]/[rkey]/PostContent.tsx      | 23 ++++++++++++--
 components/Blocks/BlockCommands.tsx           |  1 -
 lexicons/api/index.ts                         |  2 ++
 lexicons/api/lexicons.ts                      | 22 +++++++++++++
 .../api/types/pub/leaflet/blocks/button.ts    | 31 +++++++++++++++++++
 .../api/types/pub/leaflet/pages/canvas.ts     |  2 ++
 .../types/pub/leaflet/pages/linearDocument.ts |  2 ++
 lexicons/pub/leaflet/blocks/button.json       | 22 +++++++++++++
 lexicons/pub/leaflet/pages/canvas.json        |  3 +-
 .../pub/leaflet/pages/linearDocument.json     |  3 +-
 lexicons/src/blocks.ts                        | 16 ++++++++++
 12 files changed, 141 insertions(+), 9 deletions(-)
 create mode 100644 lexicons/api/types/pub/leaflet/blocks/button.ts
 create mode 100644 lexicons/pub/leaflet/blocks/button.json

diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index 04a319ef..eb62eb97 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -23,6 +23,7 @@ import {
   PubLeafletBlocksIframe,
   PubLeafletBlocksPage,
   PubLeafletBlocksPoll,
+  PubLeafletBlocksButton,
   PubLeafletPollDefinition,
 } from "lexicons/api";
 import { Block } from "components/Blocks/Block";
@@ -192,9 +193,10 @@ async function processBlocksToPages(
       await Promise.all(
         parsedBlocks.map(async (blockOrList) => {
           if (blockOrList.type === "block") {
-            let alignmentValue =
-              scan.eav(blockOrList.block.value, "block/text-alignment")[0]?.data
-                .value || "left";
+            let alignmentValue = scan.eav(
+              blockOrList.block.value,
+              "block/text-alignment",
+            )[0]?.data.value;
             let alignment: ExcludeString<
               PubLeafletPagesLinearDocument.Block["alignment"]
             > =
@@ -204,7 +206,9 @@ async function processBlocksToPages(
                   ? "lex:pub.leaflet.pages.linearDocument#textAlignRight"
                   : alignmentValue === "justify"
                     ? "lex:pub.leaflet.pages.linearDocument#textAlignJustify"
-                    : undefined;
+                    : alignmentValue === "left"
+                      ? "lex:pub.leaflet.pages.linearDocument#textAlignLeft"
+                      : undefined;
             let b = await blockToRecord(blockOrList.block, did);
             if (!b) return [];
             let block: PubLeafletPagesLinearDocument.Block = {
@@ -450,6 +454,17 @@ async function processBlocksToPages(
       };
       return block;
     }
+    if (b.type === "button") {
+      let [text] = scan.eav(b.value, "button/text");
+      let [url] = scan.eav(b.value, "button/url");
+      if (!text || !url) return;
+      let block: $Typed<PubLeafletBlocksButton.Main> = {
+        $type: "pub.leaflet.blocks.button",
+        text: text.data.value,
+        url: url.data.value,
+      };
+      return block;
+    }
     return;
   }
 
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index f440bf4a..555f1b51 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -16,6 +16,7 @@ import {
   PubLeafletBlocksIframe,
   PubLeafletBlocksPage,
   PubLeafletBlocksPoll,
+  PubLeafletBlocksButton,
 } from "lexicons/api";
 
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
@@ -32,6 +33,7 @@ import { PageLinkBlock } from "components/Blocks/PageLinkBlock";
 import { PublishedPageLinkBlock } from "./PublishedPageBlock";
 import { PublishedPollBlock } from "./PublishedPollBlock";
 import { PollData } from "./fetchPollData";
+import { ButtonPrimary } from "components/Buttons";
 
 export function PostContent({
   blocks,
@@ -128,8 +130,14 @@ export let Block = ({
         : b.alignment ===
             "lex:pub.leaflet.pages.linearDocument#textAlignJustify"
           ? "text-justify justify-start"
-          : "";
-  if (!alignment && PubLeafletBlocksImage.isMain(b.block))
+          : b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignLeft"
+            ? "text-left justify-start"
+            : undefined;
+  if (
+    !alignment &&
+    (PubLeafletBlocksImage.isMain(b.block) ||
+      PubLeafletBlocksButton.isMain(b.block))
+  )
     alignment = "text-center justify-center";
 
   let className = `
@@ -194,6 +202,17 @@ export let Block = ({
         />
       );
     }
+    case PubLeafletBlocksButton.isMain(b.block): {
+      return (
+        <div className={`flex ${alignment} ${className}`} {...blockProps}>
+          <a href={b.block.url} target="_blank" rel="noopener noreferrer">
+            <ButtonPrimary role="link" type="submit">
+              {b.block.text}
+            </ButtonPrimary>
+          </a>
+        </div>
+      );
+    }
     case PubLeafletBlocksUnorderedList.isMain(b.block): {
       return (
         <ul className="-ml-px sm:ml-[9px] pb-2">
diff --git a/components/Blocks/BlockCommands.tsx b/components/Blocks/BlockCommands.tsx
index bff5c74d..9e8a78f8 100644
--- a/components/Blocks/BlockCommands.tsx
+++ b/components/Blocks/BlockCommands.tsx
@@ -204,7 +204,6 @@ export const blockCommands: Command[] = [
     name: "Button",
     icon: <BlockButtonSmall />,
     type: "block",
-    hiddenInPublication: true,
     onSelect: async (rep, props, um) => {
       props.entityID && clearCommandSearchText(props.entityID);
       await createBlockWithType(rep, props, "button");
diff --git a/lexicons/api/index.ts b/lexicons/api/index.ts
index f1e2a4d0..b225cb7d 100644
--- a/lexicons/api/index.ts
+++ b/lexicons/api/index.ts
@@ -25,6 +25,7 @@ import * as ComAtprotoRepoStrongRef from './types/com/atproto/repo/strongRef'
 import * as ComAtprotoRepoUploadBlob from './types/com/atproto/repo/uploadBlob'
 import * as PubLeafletBlocksBlockquote from './types/pub/leaflet/blocks/blockquote'
 import * as PubLeafletBlocksBskyPost from './types/pub/leaflet/blocks/bskyPost'
+import * as PubLeafletBlocksButton from './types/pub/leaflet/blocks/button'
 import * as PubLeafletBlocksCode from './types/pub/leaflet/blocks/code'
 import * as PubLeafletBlocksHeader from './types/pub/leaflet/blocks/header'
 import * as PubLeafletBlocksHorizontalRule from './types/pub/leaflet/blocks/horizontalRule'
@@ -64,6 +65,7 @@ export * as ComAtprotoRepoStrongRef from './types/com/atproto/repo/strongRef'
 export * as ComAtprotoRepoUploadBlob from './types/com/atproto/repo/uploadBlob'
 export * as PubLeafletBlocksBlockquote from './types/pub/leaflet/blocks/blockquote'
 export * as PubLeafletBlocksBskyPost from './types/pub/leaflet/blocks/bskyPost'
+export * as PubLeafletBlocksButton from './types/pub/leaflet/blocks/button'
 export * as PubLeafletBlocksCode from './types/pub/leaflet/blocks/code'
 export * as PubLeafletBlocksHeader from './types/pub/leaflet/blocks/header'
 export * as PubLeafletBlocksHorizontalRule from './types/pub/leaflet/blocks/horizontalRule'
diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts
index e9e744ca..dcf8539c 100644
--- a/lexicons/api/lexicons.ts
+++ b/lexicons/api/lexicons.ts
@@ -1052,6 +1052,25 @@ export const schemaDict = {
       },
     },
   },
+  PubLeafletBlocksButton: {
+    lexicon: 1,
+    id: 'pub.leaflet.blocks.button',
+    defs: {
+      main: {
+        type: 'object',
+        required: ['text', 'url'],
+        properties: {
+          text: {
+            type: 'string',
+          },
+          url: {
+            type: 'string',
+            format: 'uri',
+          },
+        },
+      },
+    },
+  },
   PubLeafletBlocksCode: {
     lexicon: 1,
     id: 'pub.leaflet.blocks.code',
@@ -1493,6 +1512,7 @@ export const schemaDict = {
               'lex:pub.leaflet.blocks.bskyPost',
               'lex:pub.leaflet.blocks.page',
               'lex:pub.leaflet.blocks.poll',
+              'lex:pub.leaflet.blocks.button',
             ],
           },
           x: {
@@ -1593,6 +1613,7 @@ export const schemaDict = {
               'lex:pub.leaflet.blocks.bskyPost',
               'lex:pub.leaflet.blocks.page',
               'lex:pub.leaflet.blocks.poll',
+              'lex:pub.leaflet.blocks.button',
             ],
           },
           alignment: {
@@ -2053,6 +2074,7 @@ export const ids = {
   ComAtprotoRepoUploadBlob: 'com.atproto.repo.uploadBlob',
   PubLeafletBlocksBlockquote: 'pub.leaflet.blocks.blockquote',
   PubLeafletBlocksBskyPost: 'pub.leaflet.blocks.bskyPost',
+  PubLeafletBlocksButton: 'pub.leaflet.blocks.button',
   PubLeafletBlocksCode: 'pub.leaflet.blocks.code',
   PubLeafletBlocksHeader: 'pub.leaflet.blocks.header',
   PubLeafletBlocksHorizontalRule: 'pub.leaflet.blocks.horizontalRule',
diff --git a/lexicons/api/types/pub/leaflet/blocks/button.ts b/lexicons/api/types/pub/leaflet/blocks/button.ts
new file mode 100644
index 00000000..eb14baf7
--- /dev/null
+++ b/lexicons/api/types/pub/leaflet/blocks/button.ts
@@ -0,0 +1,31 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'pub.leaflet.blocks.button'
+
+export interface Main {
+  $type?: 'pub.leaflet.blocks.button'
+  text: string
+  url: string
+}
+
+const hashMain = 'main'
+
+export function isMain<V>(v: V) {
+  return is$typed(v, id, hashMain)
+}
+
+export function validateMain<V>(v: V) {
+  return validate<Main & V>(v, id, hashMain)
+}
diff --git a/lexicons/api/types/pub/leaflet/pages/canvas.ts b/lexicons/api/types/pub/leaflet/pages/canvas.ts
index 7cb82d0a..3dd0b3e1 100644
--- a/lexicons/api/types/pub/leaflet/pages/canvas.ts
+++ b/lexicons/api/types/pub/leaflet/pages/canvas.ts
@@ -22,6 +22,7 @@ import type * as PubLeafletBlocksHorizontalRule from '../blocks/horizontalRule'
 import type * as PubLeafletBlocksBskyPost from '../blocks/bskyPost'
 import type * as PubLeafletBlocksPage from '../blocks/page'
 import type * as PubLeafletBlocksPoll from '../blocks/poll'
+import type * as PubLeafletBlocksButton from '../blocks/button'
 
 const is$typed = _is$typed,
   validate = _validate
@@ -59,6 +60,7 @@ export interface Block {
     | $Typed<PubLeafletBlocksBskyPost.Main>
     | $Typed<PubLeafletBlocksPage.Main>
     | $Typed<PubLeafletBlocksPoll.Main>
+    | $Typed<PubLeafletBlocksButton.Main>
     | { $type: string }
   x: number
   y: number
diff --git a/lexicons/api/types/pub/leaflet/pages/linearDocument.ts b/lexicons/api/types/pub/leaflet/pages/linearDocument.ts
index 2b4af672..da860dad 100644
--- a/lexicons/api/types/pub/leaflet/pages/linearDocument.ts
+++ b/lexicons/api/types/pub/leaflet/pages/linearDocument.ts
@@ -22,6 +22,7 @@ import type * as PubLeafletBlocksHorizontalRule from '../blocks/horizontalRule'
 import type * as PubLeafletBlocksBskyPost from '../blocks/bskyPost'
 import type * as PubLeafletBlocksPage from '../blocks/page'
 import type * as PubLeafletBlocksPoll from '../blocks/poll'
+import type * as PubLeafletBlocksButton from '../blocks/button'
 
 const is$typed = _is$typed,
   validate = _validate
@@ -59,6 +60,7 @@ export interface Block {
     | $Typed<PubLeafletBlocksBskyPost.Main>
     | $Typed<PubLeafletBlocksPage.Main>
     | $Typed<PubLeafletBlocksPoll.Main>
+    | $Typed<PubLeafletBlocksButton.Main>
     | { $type: string }
   alignment?:
     | 'lex:pub.leaflet.pages.linearDocument#textAlignLeft'
diff --git a/lexicons/pub/leaflet/blocks/button.json b/lexicons/pub/leaflet/blocks/button.json
new file mode 100644
index 00000000..8d3b5346
--- /dev/null
+++ b/lexicons/pub/leaflet/blocks/button.json
@@ -0,0 +1,22 @@
+{
+  "lexicon": 1,
+  "id": "pub.leaflet.blocks.button",
+  "defs": {
+    "main": {
+      "type": "object",
+      "required": [
+        "text",
+        "url"
+      ],
+      "properties": {
+        "text": {
+          "type": "string"
+        },
+        "url": {
+          "type": "string",
+          "format": "uri"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/pub/leaflet/pages/canvas.json b/lexicons/pub/leaflet/pages/canvas.json
index 9a45a4b8..b0d5eb69 100644
--- a/lexicons/pub/leaflet/pages/canvas.json
+++ b/lexicons/pub/leaflet/pages/canvas.json
@@ -44,7 +44,8 @@
             "pub.leaflet.blocks.horizontalRule",
             "pub.leaflet.blocks.bskyPost",
             "pub.leaflet.blocks.page",
-            "pub.leaflet.blocks.poll"
+            "pub.leaflet.blocks.poll",
+            "pub.leaflet.blocks.button"
           ]
         },
         "x": {
diff --git a/lexicons/pub/leaflet/pages/linearDocument.json b/lexicons/pub/leaflet/pages/linearDocument.json
index ff45455b..c36536a9 100644
--- a/lexicons/pub/leaflet/pages/linearDocument.json
+++ b/lexicons/pub/leaflet/pages/linearDocument.json
@@ -41,7 +41,8 @@
             "pub.leaflet.blocks.horizontalRule",
             "pub.leaflet.blocks.bskyPost",
             "pub.leaflet.blocks.page",
-            "pub.leaflet.blocks.poll"
+            "pub.leaflet.blocks.poll",
+            "pub.leaflet.blocks.button"
           ]
         },
         "alignment": {
diff --git a/lexicons/src/blocks.ts b/lexicons/src/blocks.ts
index 79f43a81..06fccbe3 100644
--- a/lexicons/src/blocks.ts
+++ b/lexicons/src/blocks.ts
@@ -279,6 +279,21 @@ export const PubLeafletBlocksPoll: LexiconDoc = {
   },
 };
 
+export const PubLeafletBlocksButton: LexiconDoc = {
+  lexicon: 1,
+  id: "pub.leaflet.blocks.button",
+  defs: {
+    main: {
+      type: "object",
+      required: ["text", "url"],
+      properties: {
+        text: { type: "string" },
+        url: { type: "string", format: "uri" },
+      },
+    },
+  },
+};
+
 export const BlockLexicons = [
   PubLeafletBlocksIFrame,
   PubLeafletBlocksText,
@@ -293,6 +308,7 @@ export const BlockLexicons = [
   PubLeafletBlocksBskyPost,
   PubLeafletBlocksPage,
   PubLeafletBlocksPoll,
+  PubLeafletBlocksButton,
 ];
 export const BlockUnion: LexRefUnion = {
   type: "union",
-- 
2.51.2