Child Blocks

There currently are 7 child blocks that ship default with Atomic Payload. Each block represents a single html element or react component that can be utilized in the front end. Each on their own would be pretty useless, but when combined with the Atomic Child Block, you can build nearly anything you want.

This works because the Atomic Child block allows child blocks (including itself) to be placed inside it. The Atomic Block is also special in that it does not represent a single thing, it actually has 4 variants; tag, form, button, button - portal. With this structure we can more easily preserve client and server side performance.

This structure also means you can add your own custom components from other projects with ease. Just add a new block as you normally would, then it can be utilized anywhere in the recursive structure. Which means no more hard coding block variants, or adding toggles to handle small use case changes!

The Atomic Child Block is the only recursive block in Atomic Payload. It is intentional that no other blocks has a recursive structure, to mitigate the impact of recursive structures. Because of this, "Atomic Block" is kind of a misnomer, as it actually can be several things.

While straight forward, the Simple Text Block is quite versatile thanks to its ability to inject data attribute strings into its text. With this block you create text elements in the UI for whatever you need, as well as dynamically utilize stateful values.

Here are some examples of how you can utilize the "Simple" Text Block:

The Rich Text Block is currently just the standard rich text provided by Payload. Though there are some additional field added which exist on the other blocks as well.

Please note that currently the Rich Text Block is quite limited without a proper UnoCss Prose implementation.

Utilize uploaded images as needed with the Image Block. It includes fields to control all Next js settings, which primarily assists with web page performance, as well as a className field to directly apply styles to the rendered img tag.

You can select which version of the image to render, which are automatically generated upon upload. Any changes to the image, including replacing the image, will result in all instances being updated on the website.

The video block makes it easy to add video anywhere you need, without having to worry about performance impacts on your website. Videos are hosted and streamed by Mux Video to a react component that is only loaded on routes utilizing video.

Upon visiting a page and while a video is loading, an automatically generated blur hash image will visually take its place so there is less of a pop in effect. Though you can disable the blur effect if needed.

The Icon block allows you to utilize uploaded and formatted SVGs from the Icon collection. These Icons can be utilized the same as you would any other Icon library, and custom styled using the ClassName field.

The Icons will use the current color/text color for fill and stroke color. They will also fill all available space unless given a width value.

Here are some examples of Icon use cases by applied styles:

You will only be able to select Icons from the active Icon Set collection. The actual field to select the icon, queries the currently active Icon Set to generate its list of options. Your selection is then stored as a raw string, not a reference. This way if you switch Icon Sets, so long as they have an Icon defined with the same name, your Icon Block doesnt need updating.

The SVG block is useful for when you want to directly inject an SVG into your website without any automatic optimizations like with Icons. You can however still apply styles to your rendered SVG element just like any other block.