Design Assets For Building Custom Blocks
Helpful design assets for creating custom blocks in the WordPress 5 Gutenberg editor.
Scouring the web, we were unable to find many WordPress block design assets. So, we created our own. Organic Themes is proud to provide these assets to help aid the block design process.
Creating a custom block for the WordPress 5 editor is easier with a good design mockup. Working through the design process will refine the user experience of your block. It will help you think about it in practical, step-by-step terms. Additionally, a design mockup will save a LOT of communication and guesswork for your WordPress block developer.
The design files are provided in the PSD and PDF formats for maximum compatibility. Now, let’s explain their contents.
Each design element is a vector shape, and fully scalable. Additionally, layers and folders are well labeled and organized.
We modeled each option after the default WordPress block styles. As a result, your block design will blend seamlessly with the WordPress admin.
There are 4 components that comprise a WordPress block — the block setup, block controls, block settings, and the rendered block (live preview). The design file contains assets for the block setup, controls, and settings. No assets are provided for the rendered block.
The 3 included components are separated into folders. As a result, you can easily move, edit, and export their contents individually.
Block Control Assets
The toolbar of options that appear when a block is selected within the editor are the Block Controls. These controls often contain options for alignment, text styling, links, media buttons, etc.
Within the design file, you will find a folder labeled block-controls. That folder contains the assets for common block controls.
Block Setup Assets
The Block Setup stage refers to a block’s appearance within the editor before it’s rendered. The setup step requires a series of user inputs before the block can render. As a result, we provided assets for this phase of the block design.
Block Settings Assets
Block Settings are the additional options that appear within the sidebar of the WordPress admin.
This is where the bulk of the assets reside. We have designed options for various inputs like text fields, select boxes, filters, color selection, range controls, buttons, and much more. As a result, you can quickly duplicate and move these options for your needs.
Downloading The Assets
We have created a Github repo containing the design files here. Download the files using the following link:
Download Design AssetsContributing
These WordPress block design assets are a great starting point. However, your block might call for a unique input that doesn’t exist within the file. If you create the asset, we welcome the contribution.
Please submit your pull request with a detailed explanation of the changes.
Block Design Resources
The following resources will also help on your path to designing custom WordPress blocks:
- SketchPress – Sketch templates for the WordPress admin from 10up.
- Dashicons – The icon files for the WordPress admin, including Gutenberg icons.
- Block Design Guidelines – The WordPress documentation for designing blocks.
