The BlockPress package is a collection of WordPress products that revolve around the utilization of blocks and full site editing in WordPress. This is a markedly different way of building WordPress websites but one that will be the undeniable future of WordPress. We’ve seen a high demand from our customers to help them better utilize the new block editor, so we came up with a suite WordPress block development products that together can build anything you need with the ultimate flexibility in both control and price.
As of WordPress 5.9, when Full Site Editing (FSE) was introduced, a brand new way of creating and theming a WordPress website came into effect. An entire site could now be composed entirely of blocks via the block editor.
This means there are now two distinct ways of creating a WordPress theme:
- The Classical theme
- The Block theme
While we’ve been creating and will continue to support our customers here at Motto who are using the classic theme experience, any new work will be exclusively done using the block theme methodology.
This has pretty deep consequences in how we will continue to support our customers.
Then vs Now
WordPress Then – The Classical Theme
As many may already know, WordPress began exclusively as a blogging engine. However, it quickly developed into a flexible CMS (content management system) that dominated the website authoring industry for many years in this form. The important word here is CMS.
Because it has functioned as a CMS for a long time, website developers used it in this capacity. It was essentially an easy way to add an admin panel for customers to input their website data. Over time though, there emerged two different ways of authoring:
- WYSIWYG / DIY
- Custom Fields
Because of the plug and play nature of WordPress, a significant market in WordPress grew – the direct end users who expected a plug and play, drag and drop, do it yourself, easy experience where they could visually design their website without knowing any code. This segment fuelled DIY builders such as Elementor, Beaver Builder and themes like Divi.
However, it may not be as obvious to the general market of WordPress that there was an entirely different user base as well: the professionals made up of web developers, freelancers, agencies, technical marketing managers, and Motto ourselves.
These users hand-crafted their sites according to high-fidelity designs. The tool didn’t dictate the product like when using a DIY interface, the tool was there only to facilitate the end-product, especially for the end-user who was usually the company that would use the admin panel of WordPress to manage their content. In these situations, it was clear that WordPress needed to function as a content management system, where customers could create pages with pre-built areas that could be controlled through fields and settings. A system that required only their content and not the design.
Fields are important because it was a configuration that allowed the developer to actually constrict the ability of the end user, which in this case was a good thing. When a site is finely tuned and crafted, it becomes very easy to break and degrade when too much control is given. So we needed a way of simply defining the exact editable fields for content, things such as text inputs, images, color pickers, etc. but then have that produce a very predictable and robust UI that couldn’t easily be broken, if at all.
A chasm arose from these two user types. For a while WordPress developers tight roped in between the DIY/WYSIWG side and the CMS/Custom Field side. But over time it was clear that the mix of the two was suboptimal for both situations.
WordPress needed to commit to a user base, and it did.
WordPress Now – The Block Editor
Clearly with the investment into the Gutengerg block editor over time, bringing blocks to all areas of the website with Full Site Editing, and changing the entire theme authoring experience to depend on blocks created in the actual editor, they’ve committed to the DIY market.
WordPress is now a direct competitor with DIY platforms. Many of the “polyfills” that were in the WordPress ecosystem to bridge the gap like Elementor and Divi will likely be replaced by the native built it yourself capabilities of the block-era of WordPress. This will still take time, but if these companies don’t embrace the native WordPress block model, I believe they’ll stay in the past.
Today’s WordPress Users
One peculiar aspect remains for the block WordPress users of today: it is still a relatively technical experience.
Although no code is involved, the flexible nature and tight coupling to the underlying browser technology that most blocks use (such as flexbox), creating a high quality website in the block editor still requires a decent understanding and knowledge of the web. This is not a user-friendly environment anymore where a new restaurant owner can download WordPress, install a theme, and write a few pages like they were using a Word doc. With flexibility and power, even though it is codeless, the block editor is prone to errors by its novice users.
Introducing Motto’s BlockPress
WordPress Block Development as a Service
This is where Motto aims to fill the gap. There is a need in WordPress for professional block editors and creators. Even though you may be able to get by as an end user, it may not be worth your time and the final product may not be as refined as you would like it to be.
This is why Motto has created a product line to help move the new era of block based theme and website creation forward.
One consequence of this new paradigm is a change in the final deliverable. In the classical theme era, a final product was delivered. This was a finished website, with content from the customer set up and validated and ready to go live. A polished website.
The new block-era requires a different mentality and therefore a different deliverable. We deliver a pre-assembled collection of blocks ready for you to implement your own content.
Block Theme Development
Here are the skills you need to have to create a block-based WordPress site from scratch to match a design:
- Customize your global settings to get a consistent design
- Create yourself a collection of block patterns or reusable blocks that can be reused in different areas.
- Define templates and template parts from your blocks.
- Choose the right block plugins to extend any capabilities missing in the native blocks.
- Assemble your final content into your final pages composed of the many blocks defined in your first few steps.
This is no easy task and so Motto now offers the following services to get the job done for you.
Theme Settings Definition
Every block theme requires a theme.json file that defines all of the visual settings of your site. Knowledge of the JSON format, theme settings API, CSS, custom properties, CSS inheritance, core block settings, and general systemization of a site’s visual identity is needed to create this file. It forms the base of a consistent well crafted theme and makes building blocks on top of it much more efficient.
Given a design reference, like our design library, a custom design or existing website, we will extract and define all of the necessary settings and create theme.json file alongside a the basic architecture of a block theme. Included in this base is:
functions.php – defining some useful settings and utilities, like loading custom fonts
style.css – base styles needed for the general site or other blocks
assets/ – bundled and optimized assets that may be needed such as fonts or images
The final deliverable is a basic block theme with a theme.json that will enable you to activate as your main theme and start building blocks immediately that correspond to your site or brand’s visual identify.
Given a particular block design, we will create it using the core blocks that are included in WordPress. If it is composed of more than 3 blocks itself, we consider it a compound block.
These are saved to your block patterns or reusable blocks to be used and reused with your content.
Compound blocks are a complex composition of native blocks and can require a decent amount of skill with the block editor to compose. They are composed of 3+ core WordPress blocks in order to match the given block design.
This tier of block creation also includes the selection of an existing block plugin that may provide the needed blocks to get the job done.
When the blocks provided by WordPress core and existing plugins can’t get the job done, we can simply create our own custom blocks. This starts at $395 but its final price is dependent on the functionality and complexity needed for the block.
Sometimes this can simply be a visual block that is very intricate in its display. Other times it’s a matter of the complexity of the data that it may need. This is where we can add custom fields or even connect to external APIs in order to get the data we need into your block. There is essentially no limit to what we can do with this type of block tier.
For all of the previous tiers of blocks, we design and create one instance of each and save them as a reusable block pattern. But what happens when they need to actually be used with your particular content to create pages and different parts of your website?
If assembling ready-made blocks with your content on your site intimidates or overwhelms you, we can simply do it for you. Give us the content and location of a block and we’ll integrate it.
Block Design Library
$65 USD/block, $35 USD/block variation
For those of you familiar with the creation process of a custom website, you’ll know that it usually consists of a static design for a few pages of your website. They are finished designs, sometimes with placeholder content, with a few example pages of your more important sections, or sometimes designs for each and every page.
However, in today’s web and WordPress specifically, a more useful concept is a component library. This is a concept that came from large applications where it was simply a waste of resources to make a high-fidelity for every screen when there can be 100’s of them. A better method is to create a library of components, and maybe some simple wireframes to indicate a general layout and usage of these components. Perhaps you see the parallel to the new WordPress.
Instead of finished designs, it is better to design a library of your blocks that will compose your website. A block can be anything from a header to a button.
We will deliver a Figma file containing a single page (however long it may be) with all of the blocks needed to power the website you want.
This requires a minimum commitment of 10 blocks and includes a consultation for the direction of design.
If you’re not completely satisfied with a block or would like to see more variations of it, we can provid edits and / or variations at $35 USD / block.
Finally, if you’re a WordPress professional that’s trying to get a grip with the new paradigm of full site editing in WordPress but are having trouble navigating the terrain, we’ve published all of our company training material on a new resource site: blockpress.dev.
Here we will be publishing all resources related to building WordPress websites the “block way.” This includes custom block plugins, block patterns, videos, articles, and more.