🧪

Append block children sample

💡
This page was created for testing NorionRubyMapping. I thought this page was best suited to explain the append_child_block API, so I am presenting it as a use case.
💡
append_block_chidren can be used to Page and Blockobject. In this callout, there are some examples for appending blocks to block. examples for appending blocks to page are described under the callout.

Append block children for Block

Here is a paragraph block for test of append block children for a block. This block is obtained as org_block as follows. Moreover, a test sub_block object is generated by Block.new.paragraph method.
org_block = Block.find "82314687163e41baaf300a8a2bec57c2" # This callout block's id sub_block = ParagraphBlock.new "with children" block = XXXBlock.new(some arguments....) # create a block object org_block.append_block_children block # call append_block_children API
From here, the code to create a block and its products are shown side by side. The each mention link of Block after “→” is the link to the method reference.

1.
🧱
BookmarkBlock

block = BookmarkBlock.new "https://www.google.com", caption: "Google"

2.
🧱
BreadcrumbBlock

block = BreadcrumbBlock.new

3.
🧱
BulletedListItemBlock

block = BulletedListItemBlock.new "Bullet list item", color: "green", sub_blocks: sub_block
  • Bullet list item
    • with children

4.
🧱
CalloutBlock
(emoji)

block = CalloutBlock.new "Emoji callout", emoji: "✅", color: "blue", sub_blocks: sub_block
Emoji callout
with children

5.
🧱
CalloutBlock
(file_url)

block = CalloutBlock.new "Url callout", file_url: "https://img.icons8.com/ios-filled/250/000000/mac-os.png", sub_blocks: sub_block
Url calloutUrl callout
Url callout
with children

6.
🧱
CodeBlock

block = CodeBlock.new "% ls -l", caption: "List files", language: "shell"
% ls -l
List files

7.
🧱
ColumnListBlock

block = ColumnListBlock.new [ CalloutBlock.new("Emoji callout", emoji: "✅"), CalloutBlock.new("Url callout", file_url: "https://img.icons8.com/ios-filled/250/000000/mac-os.png"), ]
Emoji callout
Url calloutUrl callout
Url callout

8.
🧱
DividerBlock

block = DividerBlock.new

9.
🧱
EmbedBlock

block = EmbedBlock.new "https://twitter.com/hkob/status/1507972453095833601", caption: "NotionRubyMapping開発記録(21)"
NotionRubyMapping開発記録(21)

10.
🧱
EquationBlock

block = EquationBlock.new "x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}"

11.

block = FileBlock.new "https://img.icons8.com/ios-filled/250/000000/mac-os.png", caption: "macOS icon"

12.

block = Heading1Block.new "Heading 1", color: "orange_background"

Heading 1


13.

block = Heading2Block.new "Heading 2", color: "blue_background"

Heading 2


14.

block = Heading3Block.new "Heading 3", color: "gray_background"

Heading 3


15.

block = ImageBlock.new "https://cdn.worldvectorlogo.com/logos/notion-logo-1.svg", caption: "Notion logo"
Notion logo
Notion logo

16.

block = LinkToPageBlock.new page_id: "c01166c613ae45cbb96818b4ef2f5a77"

17.

block = LinkToPageBlock.new database_id: "c7697137d49f49c2bbcdd6a665c4f921"

18.

block = NumberedListItemBlock.new "Numbered list item", color: "red", sub_blocks: sub_block
  1. Numbered list item
    1. with children

19.

block = ParagraphBlock.new "A sample paragraph", color: "yellow_background", sub_blocks: sub_block
A sample paragraph
with children

20.

block = PdfBlock.new "https://github.com/onocom/sample-files-for-demo-use/raw/151dd797d54d7e0ae0dc50e8e19d7965b387e202/sample-pdf.pdf"

21.

block = Block.new.quote "A sample quote", color: "purple", sub_blocks: sub_block
A sample quote
with children

22.

block = SyncedBlock.new sub_blocks: [ BulletedListItemBlock.new("Synced block"), DividerBlock.new, ]

23.

block = SyncedBlock.new block_id: "4815032e-6f24-43e4-bc8c-9bdc6299b090"
Original synced block

24. table →

block = TableBlock.new has_column_header: true, has_row_header: true, table_width: 2, table_rows: [ %w[Services Account], [ "Twitter", ["hkob\n", TextObject.new("profile", "href" => "https://twitter.com/hkob/")], ], [ "GitHub", ["hkob\n", TextObject.new("repositories", "href" => "https://github.com/hkob/")], ], ]
Services
Account
Twitter
hkob profile
GitHub

24. table_of_contents block →

block = Block.new.table_of_contents color: "pink"

25. template block →

block = Block.new.template "A sample template", sub_blocks: sub_block

26. to_do block →

block = Block.new.to_do "A sample To-Do", color: "brown_background", sub_blocks: sub_block
A sample To-Do
with children

27. toggle block →

block = Block.new.toggle "A sample toggle", color: "yellow_background", sub_blocks: sub_block
A sample toggle
with children

28.

block = ToggleHeading1Block.new "Toggle Heading 1", color: "orange_background", sub_blocks: [ Block.new.bulleted_list_item("inside Toggle Heading 1"), ]

Toggle Heading 1

  • inside Toggle Heading 1

29.

block = ToggleHeading2Block.new "Toggle Heading 2", color: "blue_background", sub_blocks: [ Block.new.bulleted_list_item("inside Toggle Heading 2"), ]

Toggle Heading 2

  • inside Toggle Heading 2

30. toggle_heading_3 block →

block = Block.new.toggle_heading_3 "Toggle Heading 3", color: "gray_background", sub_blocks: [ Block.new.bulleted_list_item("inside Toggle Heading 3"), ]

Toggle Heading 3

  • inside Toggle Heading 3

31. video block →

block = Block.new.video "https://download.samplelib.com/mp4/sample-5s.mp4"

Here is a paragraph block for test of append block children for a block. This block is obtained as org_block as follows. Moreover, a test sub_block object is generated by Block.new.paragraph method.

Append block children for Page

Here is a page for test of append block children for a page. This page is obtained as org_page as follows. Moreover, a test sub_block object is generated by Block.new.paragraph method
org_page = Page.find "3867910a437340be931cf7f2c06443c6" # This page's id sub_block = Block.new.paragraph "with children"
From here, the code to create and its products are shown side by side. The each mention link of Block after “→” is the link to the method reference.

1.
🧱
BookmarkBlock

block = BookmarkBlock.new "https://www.google.com", caption: "Google"

2.
🧱
BreadcrumbBlock

block = BreadcrumbBlock.new

3.
🧱
BulletedListItemBlock

block = BulletedListItemBlock.new "Bullet list item", color: "green", sub_blocks: sub_block
  • Bullet list item
    • with children

4.
🧱
CalloutBlock
(emoji)

block = CalloutBlock.new "Emoji callout", emoji: "✅", color: "blue", sub_blocks: sub_block
Emoji callout
with children

5.
🧱
CalloutBlock
(file_url)

block = CalloutBlock.new "Url callout", file_url: "https://img.icons8.com/ios-filled/250/000000/mac-os.png", sub_blocks: sub_block
Url calloutUrl callout
Url callout
with children

6.
🧱
CodeBlock

block = CodeBlock.new "% ls -l", caption: "List files", language: "shell"
% ls -l
List files

7.
🧱
ColumnListBlock

block = ColumnListBlock.new [ CalloutBlock.new("Emoji callout", emoji: "✅"), CalloutBlock.new("Url callout", file_url: "https://img.icons8.com/ios-filled/250/000000/mac-os.png"), ]
Emoji callout
Url calloutUrl callout
Url callout

8.
🧱
DividerBlock

block = DividerBlock.new


9.
🧱
EmbedBlock

block = EmbedBlock.new "https://twitter.com/hkob/status/1507972453095833601", caption: "NotionRubyMapping開発記録(21)"
NotionRubyMapping開発記録(21)

10.
🧱
EquationBlock

block = EquationBlock.new "x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}"

11.

block = FileBlock.new "https://img.icons8.com/ios-filled/250/000000/mac-os.png", caption: "macOS icon"

12.

block = Heading1Block.new "Heading 1", color: "orange_background"

Heading 1


13.

block = Heading2Block.new "Heading 2", color: "blue_background"

Heading 2



14.

block = Heading3Block.new "Heading 3", color: "gray_background"

Heading 3


15.

block = ImageBlock.new "https://cdn.worldvectorlogo.com/logos/notion-logo-1.svg", caption: "Notion logo"
Notion logo
Notion logo

16.

block = LinkToPageBlock.new page_id: "c01166c613ae45cbb96818b4ef2f5a77"

17.

block = LinkToPageBlock.new database_id: "c7697137d49f49c2bbcdd6a665c4f921"

18.

block = NumberedListItemBlock.new "Numbered list item", color: "red", sub_blocks: sub_block
  1. Numbered list item
    1. with children

19.

block = ParagraphBlock.new "A sample paragraph", color: "yellow_background", sub_blocks: sub_block
A sample paragraph
with children

20.

block = PdfBlock.new "https://github.com/onocom/sample-files-for-demo-use/raw/151dd797d54d7e0ae0dc50e8e19d7965b387e202/sample-pdf.pdf"

21.

block = Block.new.quote "A sample quote", color: "purple", sub_blocks: sub_block
A sample quote
with children

22.

block = SyncedBlock.new sub_blocks: [ BulletedListItemBlock.new("Synced block"), DividerBlock.new, ]

23.

block = SyncedBlock.new block_id: "4815032e-6f24-43e4-bc8c-9bdc6299b090"
Original synced block
Services
Account
Twitter
hkob profile
GitHub

24. table_of_contents block →

block = Block.new.table_of_contents color: "pink"

25. template block →

block = Block.new.template "A sample template", sub_blocks: sub_block

26. to_do block →

block = Block.new.to_do "A sample To-Do", color: "brown_background", sub_blocks: sub_block
A sample To-Do
with children

27. toggle block →

block = Block.new.toggle "A sample toggle", color: "yellow_background", sub_blocks: sub_block
A sample toggle
with children

28.

block = ToggleHeading1Block.new "Toggle Heading 1", color: "orange_background", sub_blocks: [ Block.new.bulleted_list_item("inside Toggle Heading 1"), ]

Toggle Heading 1

  • inside Toggle Heading 1

29.

block = ToggleHeading2Block.new "Toggle Heading 2", color: "blue_background", sub_blocks: [ Block.new.bulleted_list_item("inside Toggle Heading 2"), ]

30. toggle_heading_3 block →

block = Block.new.toggle_heading_3 "Toggle Heading 3", color: "gray_background", sub_blocks: [ Block.new.bulleted_list_item("inside Toggle Heading 3"), ]

Toggle Heading 3

  • inside Toggle Heading 3

31. video block →

block = Block.new.video "https://download.samplelib.com/mp4/sample-5s.mp4"