An Intro to Custom Blocks

In The Basics series, we mentioned Custom Blocks in every single article, so it feels appropriate for us to jump right into them as our next series. However, we still have lots of other exploring to do, so stay tuned for that!

In mochott's documentation, they simply state:

You can embed design elements created by other users, as well as your own original elements, into your articles.

We run into our language pet peeve quite a bit in the process of using custom blocks. For example, if you visit the Custom Block marketplace from your Dashboard, you have to translate the page to understand what any of the blocks are. If you attempt to insert a custom block using the “+” in your writing interface, it's almost all entirely in a different language and selecting your browser's translate option does not fix that. Furthermore, when you begin to create your own custom blocks (more on that later), there are some translation barriers there too!

The Block Marketplace

So first, let's explore the Block Marketplace. At the time of writing this article, there are 7 available blocks. Each block can be previewed and experimented with in the Block Marketplace so you can see what you can do with them.

Block 1: Font Size and Placement

This block says you can “set the font size and horizontal alignment of the content”.

When you select the block from the “+” in your writing interface (which we'll be doing for all of these blocks), you can thankfully translate the page so you can see what you're doing.

And this is how it appears in your article:

We also tried this one (this time it didn't allow us to translate the pop-up modal):

Block 2: Cooking Recipes

This block came with no fields to edit, translating accomplished nothing, we will call this a failed block. Don't even bother using it…

Block 3: Text Color

This block lets you change the text color. We experimented with both just simply writing a color and also using and RBG color code - both seemed to work.

This is what this block looks like in your article:

Block 4: Vertical Writing

I don't entirely understand the point of this block and I'm sure it has something to do with the language barrier. But, we're doing a thorough overview here, so this is what it looks like. Again, we couldn't access translation features on the pop up, so…

And this is what it looks like in your article:

Block 5: Information Card

This is a block for “writing notes”. They are very similar to the Callout format, just with different icons and coloring. There are 4 options, which we've included below. There doesn't seem to be a way to remove the intro text or change it's language…

Block 6: Fukidashi

We had to search the internet to find out what this means. Apparently, it's a speech bubble often used in comics. The block pop-up gives you the option to add text and then insert an avatar URL, like so:

And this is what it will look like:

Block 7: exampleQuote

The final custom block available in the Marketplace is just a fancier blockquote option with an attribution option. We think we might like this option better than the basic formatting one!

And this is how it appears in your article:

So there are the 7 currently available custom blocks in the Marketplace. One of them is entirely unusable, one is only usable in very specific instances and the others have some potential use-cases.

In the next part of this series, we'll attempt to walk through the process of creating our own custom block. Wish us luck!

Post-publishing note: Upon publishing this article, we discovered that none of the above custom blocks render… We are putting custom block creation on the backburner for the moment….