It’s a new year, and big changes are in store for WordPress and Organic Themes. All of our hard work in 2021 will come to fruition in 2022. The Organic Blocks update is the first step towards this new future.
Next, we will introduce our new block-based theme for the Full Site Editor early this year. Although the STAX theme is currently under development, the demo links below showcase each block within the new theme. As a result, it provides a preview of the upcoming STAX theme and beautiful examples of Organic Blocks in action.
In this article we provide an overview of the plugin updates, with demo links to examples for each block. So, let’s dive in!
9 New WordPress Blocks
Organic Blocks 2.0 introduces 9 new blocks. The plugin now contains 20 premium blocks for the Gutenberg editor. Each new block is described in detail below.
Pricing Table Block
The Pricing Table Block displays a highly customizable pricing table. It’s a great starting point for creating beautiful pricing sections on your WordPress website. Showcase product subscriptions, services, and memberships using the block.
The Hero Block displays a featured content banner with a custom background image or video. By default, the block displays the page title, excerpt, and featured image as the background. It’s a flexible and powerful block designed to grab the attention of your viewers. In particular, the background video options are perfect for creating stunning website banners.
The Callout Block displays featured content within a customizable container. It’s an excellent tool for highlighting specific information on your site — like a featured service, download link, or limited offer.
Featured Content Block
The Featured Content Block displays a cover image and custom content within a customizable container. It’s perfect for calling attention to services or related content on your site. Additionally, the block may be scaled to overlap the surrounding content — making it a great tool for designing outside-the-box pages.
Icon Box Block
The Icon Box Block displays an icon and featured content within a customizable container. The position of the icon and style of the box may be modified in the options. It’s an excellent tool for highlighting product features or a suite of services.
Position Container Block
The Position Container Block features options to scale and move the position of any content within the container. It’s a useful design tool for breaking the grid, and designing outside the box. Any combination of moving, scaling, and pulling can be used together. Additionally, the position can be optionally be reset in mobile, so it does not break the layout on mobile devices.
Link Container Block
The Link Container Block wraps any block, or group of blocks in a clickable link. It’s an incredibly useful block for converting complex patterns into custom links. The examples in the demo link utilize the Link Container Block to wrap a link around other Organic Blocks.
Max-Width Container Block
The Max-Width Container Block is a simple block for defining a specific width for the contents within the container. It’s a simple, but often necessary block when creating custom layouts. Although many themes provide default, wide, and full width options, there are often design scenarios where a custom width needs to be defined.
The Copy To Clipboard Block provides a button or link in which custom content may be copied to a user’s clipboard. It’s used throughout the STAX theme demo for the purpose of copying blocks and patterns that may be pasted into the WordPress block editor. Additionally, the block is a great tool for copying coupon codes or other code snippets for developer websites.
Updates To Existing Blocks
In addition to the new blocks added in version 2.0, several improvements were made to existing blocks in the plugin. We’ll review the major updates:
The Header Block is an essential block for block-based themes, including the upcoming STAX theme. The block provides options for displaying your site logo, existing Custom Menus, social media links, and other header information. It’s a crucial block for anybody that wishes to transfer from a traditional PHP theme to a new block-based theme.
As a result, we poured a lot of energy into making sure the Header Block was packed full of options for changing the header layout, colors, fonts, sizes, position, and more. Viewing the variations in the block demo will really give you an idea of its flexibility.
In short, we added new font and typography options for changing navigation menu text sizes, letter spacing, link spacing, and more. We added options to change the the header position, so it can overlay above images, cover blocks, and other content — or even remain fixed at the top of the page as you scroll down the website. We added new layouts, including an option to display your logo in the middle with navigation menus on each side. We added a new customizable mobile menu, and much more!
Filterable Portfolios & Posts
The Portfolio Block and Posts Block have been updated with the option to display category and search filters for the post content. As a result, you can add a filterable menu to virtually any post type on your website. This is extremely useful for portfolios, case studies, documentation, or any other information in which viewers may need to refine their results. The filter works in real time, so the results are immediately displayed without refreshing the page or linking to another page. You can see the new option in action within the demo.
Merging Posts and Pages Blocks
While updating the plugin and testing the blocks in several use-case scenarios, it became apparent that there was no need for the Posts Block and Pages Block to be separate blocks. The options in each each block were virtually the same. And since the Posts Block provides the option to select any post type, we just included pages as a post type option in the block.
As a result, the Pages Block no longer exists in the plugin. Instead, its functionality has been moved to the Posts Block. So, in the event that you were using the Pages Block prior to the release of version 2.0, you will just need to replace the block with the Posts Block. Then, select your pages to display within the setup options.
Gradients, Borders & Shadows
Until recently, adding gradients, borders, and shadows to blocks was still in the experimental phase. The latest plugin update adds these options to Organic Blocks. As a result, the colors and styles for each block can be highly customized for creating beautiful and bold content.
Blocks Update Summary
2022 will be an exciting year for WordPress and Organic Themes. For the first time in a couple years, we feel hope for the future of our industry and the world. This major update to Organic Blocks is the first of several upcoming changes, and we’re stoked to share these improvements with our customers!
Our new products will change the way websites are constructed in WordPress. Building websites with WordPress will become fun and easier than ever before, without the need for any code or builder plugins. The future is bright!