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.

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.

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.

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.

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.

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.

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!

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.

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.

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!

First, let’s talk about the changes happening within WordPress. Then, we’ll get to the changes coming to Organic Themes.

Full Site Editing

The next evolution of WordPress introduces Full-Site Editing (FSE).

When using the Full-Site Editor, you can customize every element of your WordPress website directly within the editor. And I mean everything. Your website header, footer, page templates, layouts, global styles, and more — it can all be customized. Pretty cool.

In short, WordPress is finally becoming a complete website builder — like Divi or Elementor, but without the need for such plugins.

In order to take full advantage of the new Full-Site Editor, a block-based theme is required. The above example showcases our STAX block-based theme, which is currently under development. We’ll get to that, but first let’s talk about block-based themes.

Block-Based Themes

Traditional WordPress themes have always been somewhat rigid. While many traditional themes have Customizer options for changing global styles, there are still several limitations to the Customizer. As the name suggests, you can “customize” an existing design, but you can’t change it completely.

For instance, changing the layout of a traditional WordPress theme often involves editing PHP code within theme files. Making granular changes to website elements often requires custom HTML and CSS. Such changes require development skills beyond the average WordPress user.

Full-Site Editing and block-based themes resolve this issue of limited customization. Block themes will not need Customizer options or robust page-builder plugins to change every element of your website design.

Of course, in order to take advantage of the new Full-Site Editor, you will need a good block-based theme. And, since Full-Site Editing is still in the experimental phase, there are only a handful of block-based themes currently available for testing, all of which require the Gutenberg plugin to use, and all of which are likely to change in the coming months.

Knowing this future will soon be upon us, Organic Themes was at a crossroads — continue developing rigid, traditional WordPress themes, or begin working on block-based themes. We opted for the latter.

With our eye to the future, we are currently deep in the development of a new block-based theme called STAX. Which brings us to our first major Organic Themes update:

The Upcoming STAX Theme

Below is the first glimpse of our upcoming block-based theme — STAX.

Unlike traditional WordPress themes, block-based themes are created using mostly HTML files, with a little bit of PHP and JavaScript sprinkled into the mix. But what you really need to know is that it’s an entirely different type of WordPress theme altogether. Consequently, an entirely new approach is required to develop such a theme. At first, that scared the pants off of me.

However, as I’ve been working with the new technology and methodology of building block-based themes, I have found myself enjoying WordPress all over again. In truth, building a traditional WordPress theme is a long and cumbersome process. Despite knowing the process thoroughly, it’s hard to find the motivation to build yet “another” theme. Through the process of building STAX, I find myself excited to build themes once again.

I’ve been deep in the development of this theme for quite some time, and I can say with certainty — it’s awesome! STAX will provide users with ultimate flexibility over their design. We know what a painful process building a website can be. Our goal has always been to remove the frustration of web design, and make the process fast and easy. STAX goes a step further, and makes it fun! It’s a huge step forward for Organic Themes and WordPress, and we’re very anxious to get this theme into your (virtual) hands — when it’s ready.

Block-based themes and the Full-Site Editor are still under development. WordPress 5.9 aims to improve the FSE experience and block-based theme integration, and it’s currently slated for release in mid-December. Our goal is to release STAX shortly afterwards, when the editor and framework is stable. So, expect a release by late December or January.

Additionally, Organic Themes is making other major changes within this time-frame as well. Which brings us to our next major product update.

Organic Blocks Plugin 2.0

The STAX development process has revealed that a great block-based theme requires great blocks. Fortunately, the Organic Blocks plugin provides a fantastic collection of blocks. However, it’s about to get much better.

We have been thoroughly testing Organic Blocks within the Full-Site Editor and the STAX theme. Throughout the development process, we have been vastly improving our existing blocks, and adding several new blocks.

Some of the new blocks being added to the plugin include:

• Hero Block – Featured banner content with background media, including background videos.
• Callout Block – Quickly add emphasis to your content with bold colors, gradients, and shadows.
• Icon Box Block – Create feature lists with icons and descriptions.
• Featured Content Block – Display featured content in a customizable container.
• Pricing Table Block – Quickly create beautiful pricing tables.
• Link Container Block – Wrap any group of blocks in a clickable link.
• Max Width Container Block – Define the width of content within the container.
• Position Container Block – Move the position of a group of blocks.

Additionally, the existing collection of blocks have all undergone significant improvements.

The updates are almost complete, and the launch will likely coincide with the STAX theme and the new Organic Themes website. Yes, you heard that right. The Organic Themes website and brand are also making a bold change.

The New Organic Themes Website

I’ve been designing and developing websites for a long time — at least 15 years. When I started designing websites I was passionate. I strived to create bold, beautiful designs that were still approachable and user friendly.

Over the years, I watched design trends come and go. Some have been great, some not-so-great. Feeling the pressure, I jumped on the minimal and flat design bandwagons. However, ultimately I felt those design trends lacked soul. They lacked a human touch. Frankly, websites just got boring. And my passion faded.

For the new Organic Themes website design I wanted to feel inspired again. I wanted to design something that I would like to see. I didn’t want the trends of the day bearing major influence over my design decisions. Since Organic Themes is undergoing such major changes in our product development, the site and brand should reflect those changes. As a result, I went back to my roots, and designed something bold again.

The new site won’t look like any other WordPress product company’s website — for good reason. Organic Themes isn’t like any other WordPress company. When we’re at our best, we march to the beat of our own drum.

I was trained in the corporate design industry, but Organic Themes wasn’t born of that world. Instead, our company was born of the desire to escape the corporate world. That’s why we moved to Maui with nothing but our cars, a couple months of survival savings, and a dream of a different life. It’s why we founded our business in Hawaii. It’s why we kept our business small. And it’s why we love helping other people create their own websites, and free themselves from the chains of the corporate world.

When we entered the WordPress industry, it was full of people like us — nerdy tech rebels. People that didn’t want to be another cog in the machine. However, over the years, the industry became more and more corporate. WordPress companies grew and swallowed up smaller companies and the people that built the platform. It’s a natural evolution of any successful industry. But it became the very thing we worked to escape.

The world has changed over the past 2 years. It’s my belief that people are craving authenticity and a human touch again. Not only in their personal lives, but in the products and businesses they use. As a result, I think the WordPress industry needs Organic Themes again.

The new site is our way of letting people know we’re still here, and we’re still the same people, but with much more experience. When you contact Organic Themes, you engage in communication with real humans — my wife, myself, and my best friend. And we just want to help.

The site will launch with the release of the new STAX theme. We’re very excited about these upcoming changes, and what it means for our customers. We’re also excited to put ourselves out there again, and let you get to know us as more than just a WordPress business, but as real people.

We added the new WordPress blocks to replace some popular shortcodes from the retired Organic Shortcodes plugin. The new blocks are a major improvement over the old shortcodes. Additionally, each new block features several customization options. As a result, the blocks can be styled to match your website design and colors — directly within the Gutenberg editor.

Toggle Block

The Toggle Block displays content within an expandable box that may be toggled open or closed. As a result, it’s an excellent tool for creating FAQ and documentation pages.

View Toggle Block Examples

Modal Block

The Modal Block displays content within a dismissible pop-up container. Clicking the modal button or text link will reveal the pop-up content. Which then displays above the rest of your website content.

Pop-up modals are a great tool for displaying content that you would like hidden from the rest of the page content. For instance, a contact or newsletter form, or a list of downloadable files.

View Modal Block Examples

Alert Block

The Alert Block notifies visitors of important information on your website. It’s a useful tool for notifying visitors of changes, sales, and promotions on your website.

There are two ways of displaying the Alert Block. Directly within your page content, or as a dismissible pop-up upon first loading a page.

View Alert Block Examples

These new WordPress blocks are a useful addition to our growing Organic Blocks Bundle plugin. Additionally, 9 more premium blocks are available in the bundle. Get the plugin today, and spice up your WordPress pages!

Organic Themes was among the first companies to release a free block within the WordPress plugin directory — the Profile Block. Additionally, we were the first to publish a tutorial on How To Create A Custom Block For Gutenberg. An article that was copied by many.

As partners of Automattic and WooCommerce, we’ve kept a watchful eye on Gutenberg since its inception. We have witnessed new blocks introduced into WordPress, Jetpack, and WooCommerce over the past year. Since Gutenberg is rapidly evolving software, it was important that we didn’t duplicate any of those existing blocks within our collection.

So, we created a suite of blocks designed to compliment the existing blocks in the Automattic arsenal. The result is the Organic Blocks Bundle. A useful collection of 9 purposeful blocks.

Many Organic Blocks are designed to display existing WordPress content. Additionally, we chose to develop these blocks using the ES5 Javascript syntax. As a result, Organic Blocks can be edited on a web server without the need to compile changes. That’s a big deal. It means our blocks are customizable — even for amateur WordPress developers.

The Blocks Bundle

The Organic Blocks Bundle currently includes 9 premium WordPress blocks. However, more blocks will be added in the future. Now, let’s introduce the existing blocks! They’re pretty awesome.

Content Slideshow Block

The Content Slideshow Block is the easiest way to create content sliders using the WordPress Gutenberg editor. The block displays a featured image, title, excerpt, and a “Read More” link from any post type. Additionally, several options are available for modifying the style, colors, display, and more.

Learn More

Posts Block

The Posts Block displays any post type within a blog style layout. Block options allow for the change of colors, style, layout, and more. It’s an excellent tool for showcasing relevant blog articles, products, or other post types on any page using the Gutenberg editor.

Learn More

Portfolio Block

The Portfolio Block is perfect for showcasing any post type within a portfolio. Each portfolio item displays the title when hovering over the image. Additionally, a Pinterest pin button displays. As a result, users may pin individual portfolio items to their Pinterest account. The block includes several options for modifying the portfolio style and layout.

Learn More

Profile Block

The Profile Block displays personal profiles. It’s an excellent tool to display author biographies, team members, or employees throughout your website.

Organic Themes released a free version of the block in the WordPress plugin directory. However, the Profile Block included in the Organic Blocks Bundle features several more options. Additionally, unlimited social media icons may be added to the block.

Learn More

Testimonials Block

The Testimonials Block displays a selected post type within a testimonials slideshow. Display multiple testimonials per slide, and change the colors, layout, and style within the block options. It’s perfect for showcasing client and customer testimonials throughout your website.

Learn More

Pages Block

When building a custom home page or landing page, it’s common practice to direct visitors to other pages throughout your website. The Pages Block serves this purpose. Simply add the block within the Gutenberg editor. Then, select the pages you wish to display. Additionally, several block options are provided to modify the colors, style, and layout.

Learn More

Header Block

A header is arguably the most important element of any website. Typically, it displays your website branding and navigation. The Header Block provides full control over your header logo, layout, information, and navigation. It’s an essential tool as WordPress themes and the Gutenberg editor transition into a full-fledged site building experience.

Learn More

Footer Block

The footer is the bookend of your website. Typically, it contains important website information, and secondary navigation. The Footer Block places the control of the footer design and information within your hands. Display copyright information, branding, social media links, and more. Additionally, the block provides options to change the style, layout, and colors.

Learn More

Widget Area Block

There are hundreds of traditional WordPress widgets. Typically, widgets display within “widgetized” areas of a WordPress theme — like sidebars and footers. However, some widgets may be useful within specific page or post content. That’s why we developed the Widget Area Block for Gutenberg.

The Widget Area Block creates widgetized areas anywhere you like within the Gutenberg editor. As a result, traditional widgets can be added anywhere on your site.

This block is useful for displaying advertising widgets throughout your content, or an event calendar widget within a related article, or countless other examples. It’s a particularly powerful block when combined with the Builder Widgets plugin. As a result, the power of Gutenberg and Builder Widgets can be utilized together.

Learn More

Additional Organic Blocks Bundle Features

ES5 Development

What the heck is ES5 Development, and why use it? Well, I’ll get to that. But first, if you’re not a WordPress developer, designer, or power user — you can skip ahead. This probably doesn’t concern you.

WordPress is open source software. As a result, a community of contributors, comprised of volunteers, individuals, and small businesses developed the platform, and a majority of the supporting products. Most contributors are self-taught developers, including myself.

React.js is the coding language of Gutenberg. At first, this outraged much of the WordPress community. Prior to Gutenberg, WordPress was primarily developed in the PHP coding language. Most self-taught developers have spent the last 10 years learning PHP development for WordPress. Now with the release of Gutenberg, WordPress is moving to an entirely new code foundation.

It’s like you’ve been perfecting the German language for 10 years, and then the country of Germany suddenly changes their official language to Japanese.

The biggest hurdle for React.js development is the need to compile your code for the web after making changes. Meaning, you can’t simply edit the code of a React.js plugin on your server, and expect it to work properly. As a result, it makes the work of freelance WordPress designers, developers, and power users much more difficult. In some cases, it’s an impossible hurdle.

ES5 to the rescue!

ES5 Javascript, or ECMAScript 5, doesn’t require compiling for the web. Meaning, you can edit ES5 code directly on your web server. So, you don’t have to be a Javascript genius to make a minor edit to Organic Blocks.

That is why all Organic Blocks are developed using ES5. So, even amateur developers can edit the code for Organic Blocks. Plus, they’re a great asset for learning how to build Gutenberg blocks in the ES5 syntax.

Server-Side Rendering

The blocks included with WordPress and Jetpack are excellent tools for building content from scratch. However, they are not particularly useful for displaying existing content. That’s where we come in.

Many of the blocks included in the Organic Blocks Bundle utilize server-side rendering. Meaning, they display data that already exists on your web server. For instance, perhaps you have a website with hundreds of published posts and pages. Organic Blocks allow you to display that content on other pages. Plus, the content renders in the editor exactly as it appears on the site.

No Unnecessary Blocks

Some block collections contain blocks that already exist in the Automattic arsenal from WordPress, Jetpack, or WooCommerce. Additionally, some collections include blocks that can be recreated using a simple combination of core blocks. We consider such blocks as unnecessary clutter.

With the Organic Blocks Bundle, there are no duplicate or unnecessary blocks. We believe in quality over quantity. As a result, we didn’t include yet another Spacer or Columns block in our bundle. Each block serves a real purpose.

Simple Usage

A good product should be so easy to use that documentation is unnecessary. Blocks are already simple. Once you understand how to use one block, you should know how to use any block. Since Organic Themes follows WordPress standards, this rings true for Organic Blocks. The purpose and options for each block is self explanatory.

We’re confident the Organic Blocks Bundle will help you create beautiful custom WordPress pages with ease. It’s one more step towards the Gutenberg editor becoming a full fledged website building solution.

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:

Contributing

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.

What Are Gutenberg Blocks?

In case you haven’t heard, Gutenberg is the name of the new content editor for WordPress. Currently, the editor is available as a plugin. Soon, it will be integrated into core.

Using the Gutenberg editor, content is added in the form of “blocks”. The blocks are used to display a wide variety of content types such as text, quotes, images, video, audio, embeds, etc. Each block features it’s own set of options for changing font sizes, colors, alignment, and more. Additionally, blocks can be placed into columns and quickly arranged into your desired order. Essentially, Gutenberg evolves the WordPress content editor into a page builder.

With this significant change to WordPress on the horizon, we wanted to build a theme alongside the development of Gutenberg. So, we set out to create the Block Theme, and thoroughly tested Gutenberg blocks with the new theme.

Why Use Gutenberg Blocks?

As of now, blocks are optional. Additionally, they require the Gutenberg plugin to use. However, soon blocks will be the standard way of adding content within WordPress. So, it’s a good idea to begin familiarizing yourself with the new editor and the blocks that are currently available.

Additionally, blocks allow for more versatility in the display of content within a WordPress theme. They provide the opportunity to create unique layouts and designs from one post to the next. Using blocks will really make the content on your website pop!

Will the Block Theme work without Gutenberg?

Absolutely. Although the demo content was created using Gutenberg blocks, the Block Theme will work just as well using the classic WordPress editor.

Features Of The Block Theme

The integration of Gutenberg will simplify the development requirements for WordPress themes — and we love simplicity! Blocks reduce the need for several page templates, custom post types, post formats, and other relics of the old WordPress editor. So, we left that stuff out of the Block Theme. Only a few simple page templates are included, and there are no custom post types or post formats. The result is a beautiful theme that is ridiculously simple to setup and use.

Theme Options

As with all Organic Themes, options are located within the WordPress customizer. So, changes made to the theme can be viewed in real-time. The options include the ability to change colors, fonts, and basic settings. The Block Theme can be setup within moments of activation.

Plugin Compatibility

The theme is compatible with popular plugins such as WooCommerce, Jetpack, and Gravity Forms. In fact, the WooCommerce integration has been drastically improved with the release of the Block Theme. So, adding an online shop to is a piece of cake!

Customizer Widgets

Organic Customizer Widgets work beautifully within the Block Theme. This revolutionary plugin from Organic Themes transforms the WordPress customizer into a page builder using custom widgets. As a result, you can create dynamic pages displaying featured content slideshows, client testimonials, team members, featured subpages, and much more!

The Block Theme is a solid addition to our theme collection. Purchase the theme today for use on your website, or buy the All Themes Membership to receive this new theme along with all other Organic Themes.