Are there any plans to add "callout" or "admonition" block in core?

[kohheepeace]

Questions

• Are there any plans to support "callout" or "admonition" blocks in the gutenberg core?
• The wordpress docs site seems to be combining existing "columns" blocks, are these registered as "Pattern"?

Usage in wordpress docs

https://make.wordpress.org/core/2021/09/27/changes-to-the-wordpress-core-php-test-suite/

Background

I think the "callout" block is a widely and frequently used block, so I wanted to know if I should implement it independently or if there are plans to implement it in the core.

Callouts are among the most commonly used blocks in Notion

https://www.notion.vip/notion-update-use-blocks-within-callouts/

[talldan]

It does seems like something that can be achieved as a block pattern rather than a block, so I'm not sure that it would be added as a core block.

There are also some options being explored to make container blocks feel more cohesive in terms of editing - #43037. So I think this could reduce the need to add a callout block type.

[kohheepeace]

Thank you for replying! I understand and it makes sense. 👍

Is there any api to register "Block Pattern"(like callout) in the "Blocks" category in the Inserter panel?

[talldan]

I think you may be able to, but I haven't tried it!

First you'd need to register your pattern, which will make it appear in the patterns tab - https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/#register_block_pattern.

Next you could try registering a block variation of the core/pattern block - https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/.

Here's the reference for the pattern block - https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#pattern. It has a slug attribute, which you'd need to specify in your variation as the slug for your pattern, and you'd also need to make sure the scope has inserter specified.

I don't completely know whether this will work as the pattern block doesn't usually show in the inserter, so it may be that a block variation also doesn't display. Let me know how you get on!

edit: The pattern block is also relatively new, so it may not be in some versions of WordPress/ Gutenberg. I'm not sure exactly when it was introduced.

[kohheepeace]

Thanks! I will try it! 👍 👍

[kohheepeace]

For future readers...

• Instead of using block pattern, I created a callout block as a variation of the core/group block. This way, the callout block will appear in the suggestions of the slash key.
• Currently Gutenberg does not support inline icon blocks, so I used emoji. Emoji palette is assigned a shortcut key for both Windows and Mac OS, but it is not well known, so it may be better to register emoji-mart to the format toolbar.
• The pros of this approach is that you don't need to maintain callout block as a custom block.
• For color variations like callout-info, callout-warning, callout-danger..., I'm thinking to register each blocks as a separate block. Or you can use registerBlockStyle api. But I don't like css approach.

Share the code.

wp.domReady(function () {
  wp.blocks.registerBlockVariation("core/group", {
    name: "callout",
    title: "Callout",
    attributes: {
      style: {
        border: { left: { color: "#00a0d2", width: "6px" } },
        color: { background: "#e5f5fa" },
        spacing: {
          padding: { left: "1.5rem", right: "1.5rem" },
        },
      },
    },
    innerBlocks: [
      [
        "core/paragraph",
        {
          content: "💡 <strong>Title</strong>",
        },
      ],
      [
        "core/paragraph",
        {
          content: "",
        },
      ],
    ],
  });

Preview

[talldan]

Looks great! Good idea to use the Group block.