Not sure what accessibility changes will have the most benefit to your existing software? Are you in the build process and need to make sure accessibility has been appropriately considered? Use this checklist as a starting point.
Custom Blocks: Balancing Flexibility and Design in WordPress
Content ManagementOn any website, design is important, but content is critical. On great sites, harmony between content and design provides a visually polished product with an intuitive user experience that runs smoothly and makes it easy for people to find the information or tools they need. One of the primary challenges when planning for the content management experience of a custom WordPress implementation is how to maintain the integrity of a site’s design intention while providing continued flexibility for content managers to respond to the fluid needs of their messaging.
So, how do you give content managers the flexibility they need, without breaking the site’s design?
The Problem With Traditional Approaches
Historically, options like off-the-shelf pagebuilder plugins or highly rigid, templated layouts created with sets of “fill-in-the-blank” fields were the go-to approach, each with their pros and cons.
- Pagebuilder plugins – they offer flexibility. They can also render inefficient and needlessly bloated front-end code, which results in performance issues. They can also present the problem of “too much choice” for content managers, which can lead to a breakdown of the cohesion between content and design over time.
- Field-based templates – they maintain design integrity and offer more streamlined code. However, they lack the flexibility of a builder tool, and can leave much to be desired.
Enter the WordPress Block Editor
More recently, the core WordPress platform shifted to a block-based, drag-and-drop content editing experience which more closely emulates builder-driven plugins and themes. At Paper Leaf, when we’re tasked with delivering larger, content-heavy websites powered by WordPress, we aim to leverage the flexibility of the WordPress block editor to meet the unique content management challenges faced by our clients while also providing a cohesive design system customized to their brand and objectives. We approach this with Custom Blocks.
How Custom Blocks Work
The first step is to identify the key content types integral to a client’s site and the potential challenges. Some examples of what we might find are:
- Event information that drops into their text
- Strong need for calls to action promoting inlinks
- Numerous pages with long lists of resources
- Customer testimonials buried in normal body copy
- Image galleries that don’t translate well to mobile devices
Once we know what type of content we’re building for, we then determine how best to structure that content from both a back-end management and front-end presentation perspective. We can then integrate groups and patterns of core WordPress content blocks into the holistic design system we’ve created for our client by overlaying them with custom styling. Or we can develop brand new custom content blocks aligned with the design system from scratch. A typical site for us might have anywhere from 5 to 20 distinct content modules. The result is that content managers have the freedom to add, remove, and reorder content blocks at any point while maintaining a cohesive design experience for their users.
We aim to provide content editing that is truly “what you see is what you get.” In other words, we want what a content manager sees while creating and editing content to be virtually identical to what the user sees when they visit the site.
Above: a columns layout content module in the content editor. Below: The same content module published on the site.
Why Custom Blocks?
This method provides efficient content publishing with the right balance between flexibility and design integrity.
- Ease-of-use for content managers – with module options that range from broad to granular, content managers can pick the module that works best. They can put the module anywhere on a given page, and have confidence that it fits seamlessly into the robust and intentional design system created by our team.
- Performance-first code – commercial pagebuilder plugins for WordPress routinely output code bloat, like too many nested divs or inline style attributes. This creates an unreliable, messy code. With Custom Blocks, our developers have far more control over structured code output, which empowers us to keep code as lean as possible and ensure accessibility standards are met.
- Future-proof styling – the simplicity of the code also ensures future site styling refreshes are much more reasonable to execute.
The result: efficient publishing, high performance, and a site that looks great for years to come.
Custom Blocks help teams publish content quickly without sacrificing design quality or performance. It’s flexible enough for real-world needs but structured enough to protect the integrity of your brand.
Our clients love it, and we think you will too. If your team struggles to balance flexibility and design in WordPress, Custom Blocks might be the solution you’re looking for.