Caledros Basic Blocks Plugin

Written by: David Arnado

Caledros Basic Blocks is a WordPress plugin that adds 18 new blocks to the Gutenberg editor. It also adds a CSS preloader to improve loading times, and it enables featured images for post categories. The full description and development log is available at the official plugin page on WordPress.org. The complete source code is also available on Github.

This plugin has been designed with minimalism and functionality in mind. When working with the default Gutenberg blocks I noticed that many of these blocks didn’t have the settings I was looking for. For example, I was not able to create a flexbox container that changes its flex direction when the screen is resized.

Also, if I wanted to create a website with dark and light mode, I had to use a third party plugin to accomplish that. However, many of these plugins add unnecessary code, thus causing a drop in loading times, which was something I really wanted to avoid.

For these reasons, I decided to create Caledros Basic Blocks. The 18 blocks added by this plugin try to give the user a better, more consistent editing experience. Most of them have built-in dark and light controls, so the designer can freely choose which colors they want to apply to their designs. So, things like changing the background and border colors of a flexbox container can be easily done from the editor.

In this short project presentation, I will talk about some of the most important features this plugin offers.

Responsive Controls

I decided to add some basic responsive controls. Both the flexbox and grid container blocks allow the user to change the orientation/number of columns for different screen sizes. The CSS breakpoints I used are the default screen sizes defined by the WordPress editor:

Preloading and Website Speed

This plugin has an integrated preload option. It basically adds a preload attribute to all CSS stylesheets. By doing this, I intend to improve the website’s loading times. However, this feature may cause conflicts if there are other third party plugins installed. So, I added a simple toggle in the dashboard to activate or deactivate it, if necessary.

Dark and Light Mode

Caledros Basic Blocks adds a Dark and Light switcher block. This toggle features a custom animation to change the view mode of the website. The toggle does not have settings to change its appareance and it can only be used in the frontend. If the designer needs to preview the dark and light modes in the editor, there is a sidebar specifically built for that.

The Dark and Light switcher block is designed to be use only once in the website, typically in the header. It may be used in posts and pages, but it wouldn’t make sense to do that. Also, this switcher is designed to work in tandem with other blocks. Without it, the user won’t be able to change between dark and light modes in the frontend.

Featured Category Images

With this plugin the user can add featured images to post categories. Both the image and its alt text can be added while creating or editing the category. These images are then used by the Category Loop block, which displays the categories in a grid design.

Compatibility with Full Site Editing

Caledros Basic Blocks is fully compatible with Full Site Editing. So, any theme that accepts Full Site Editing and that has the Gutenberg editor enabled can use these blocks.

Need help or want to see what each block can do?

I’ll be adding video tutorials in my YouTube channel. The 18 blocks added by this plugin have many options, and they can be used to created complex layouts. So, the video tutorial format is the most adequate for showcasing the full capabilities of such blocks.