Create a custom text block in Purple Hub

This guide explains how to set up and use custom text blocks that allow special styling in the editor as well as your frontend.

Here, you can configure the appearance of custom blocks defined via this plugin. This includes an option of always displaying the name of the block next to it in the editor, which can come in handy when you want to use many different types of these blocks.

Here, you can add/edit/remove custom text block definitions for your Hub. Some example blocks are already defined here when the plugin gets activated, feel free to modify or remove them to customize your setup.

The title will be shown to your editors in the post editor. The name will be used internally for the article content code, and is thus important for integrations with third party systems or frontends. You can choose one of many HTML tags for the block, which will affect the final HTML in your frontend. The CSS class can also be used for additionally tuning the blocks appearance, in the Hub editor as well as the frontend. The category setting lets you choose where the block can be found in the block-inserter of the Hub editor. By setting the Transform from property to a list of block names, you can restrict which existing blocks your editors can transform into this one in the editor.

Once a block is saved, it is available for use in the article editor.

Here, you can define more complex custom blocks, that can have one or more sub-blocks. There are some predefined blocks here as well, feel free to modify or remove them to customize your setup.

The title, name, and category settings here work as with custom blocks above. By setting a Block Color, you can define how the block should look like in the Hub editor. Under Blocks, you can define which sub-blocks this nested block should automatically initially have when it gets inserted into an article. By defining some allowed blocks, you give your editors the freedom to add more sub-blocks to this parent-block. This can be helpful for flexible blocks like this text box, which should support various content. For other blocks, you might want to restrict the sub-blocks to only one specific list. If you leave this allowed blocks text field empty, editors will not be able to modify the list of sub-blocks of this block in an article - ideal for specific parts of an article that should always have a fix structure.

Here, you can define extra CSS styling rules to modify the appearance of custom blocks in the HUB editor. By adapting your custom blocks to look similar to how they will on your frontend, you can give your editors a better editing experience.

Here, you can export the settings of this plugin (general settings, custom blocks, nested blocks, custom CSS) into a file, or import a previously exported file. This can be helpful to try out changes and revert them if they did not work out, or to share configurations across different Hubs.