Gutenberg Blocks development
As less plugins as possible
PEARL iZUMi JOURNAL
About The Client
Pearl iZUMi Journal exists to provide inspiration and better ideas to help riders at every level enjoy what they love. It’s how they work. It’s how they live their lives. Their promise that they will continue to work hard on making cutting edge, no compromise, cycling products that enable the hardest working athletes to perform better, longer, and enjoy more.
Leader in manufacturing high quality cycling apparel
The company blog needs to be updated.
The information from the old site is to be transferred. We need to limit the number of plugins.
The task is to create the following set of pages:
- Blog home page
- Post page
- Author’s page
- Search results page
- 404 page
Our engineers quickly and efficiently transferred more than 300 posts as well as users, ratings, post properties and authors from the old site.
Each page and each block on it is built using the Gutenberg editor.
The posts on the old site were made with WP Bakery Page Builder (formerly Visual Composer); editing them wouldn’t be easy. We moved blog pages to a new website and used WordPress Blocks (Gutenberg).
Website speed is a key business advantage. Plugins affect the load of the site significantly, so we try to leave only the most essential, replacing the functionality with our lightweight custom blocks.
We’ve left only the most necessary plugins:
- Advanced Custom Fields PRO
- Advanced Custom Fields: Font Awesome
- Simple WP Maintenance Mode
- Yoast SEO
Custom slider for the main page
The main task is to make the editor as convenient as possible for the administrator and to ensure it looks similar to the front-end view.
To add a slide, the administrator needs to click on the Add Slide button and then either select the desired post from the list or enter its title in the search field.
We reviewed the plugins that provide the ability to rate posts and realized that the best solution would be to develop our own – the custom rating block.
The plugin allows the user to conveniently view the ratings and doesn’t overload the site with unnecessary additions. This solution helps achieve an excellent site speed rating and good UX.
Author card and author page with links to social networks
The admin can add the card of the author to the post. The information for the cards comes from the Author page: each author has their own one with name, descriptions, social links and recent posts. You can see the Author page below.
Comment block with text fields
Users can add their comments to each post. We’ve also migrated all old comments from the previous site and kept ratings for the posts.
“We use up-to-date technologies to make sure the website loads in the blink of an eye. Featuring complete resource isolation, automatic scalability, and high availability. Providing fast and knowledgeable support has been always our priority. We have actual WordPress experts to assist you.”
Recent posts block
It displays the latest posts or allows selecting the necessary posts. The first option of this block is shown in four posts.
The latest posts for the blog post
For other pages, we’ve developed convenient and responsive block with two recent posts. This block goes on the single blog page and demonstrates the latest posts for the blog post category.
A block that displays multiple posts in a given category
Articles were divided into categories for a convenient and user-friendly experience so the user can quickly find information on the website.
Styling The “404 Not found” page
Creative branded custom 404 pages will help users as well as generate positive attention for your business. Custom 404 pages will help users who end up visiting a page that doesn’t exist. They can also help Google move on to other pages on your site via your links.