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.

Display Personal Profiles, Team Pages and More

The Organic Profile Block displays a personal profile image, along with a name, title, biography and social media links. We have outlined the process of building this plugin in detail on our How We Created A Custom Block For Gutenberg article.

The Profile Block is an excellent solution for adding author biographies to articles, displaying a page of team or staff members, or as a personal business card on your “About” page. The block adopts the fonts and styles of your active theme.

This custom block is designed to work with any theme, so long as the Gutenberg plugin is active. With the release of WordPress 5.0, the Gutenberg content editor will be integrated into WordPress core. Then, the Gutenberg plugin will no longer be required. In the meantime, users must have the Gutenberg plugin active to use the Profile Block

Try the Organic Profile Block with Gutenberg! Install the plugin directly from your WordPress dashboard by searching for “Organic Profile Block” under Plugins > Add New. Otherwise, download the plugin from the WordPress plugin directory here.

Check back with Organic Themes for more custom blocks in the future!

A page builder extends the functionality of WordPress. It allows a user to display and arrange a variety of content types on any page of their website. However, most page builders are highly reliant on shortcodes, custom foreign interfaces and bulky proprietary code that heavily impacts the performance of a website. They often require an extensive learning curve beyond that of basic WordPress usage. Additionally, they are a massive departure from WordPress core and the evolution of the platform. Instead, page builders should be utilizing the Customizer and core features of WordPress.

The Organic Builder Widgets plugin solves these problems. It provides a collection of custom widgets that can be used as content sections on any page within the WordPress Customizer. Best of all, it’s FREE, and designed to work with ANY theme! The result is a fast, easy and free WordPress page builder!

The WordPress Customizer provides users with an intuitive interface for making visual changes to their website in real-time. The creators of WordPress are placing a huge emphasis on the Customizer. It’s the future of designing WordPress websites.

We created the Organic Builder Widgets plugin to evolve with WordPress and the Customizer. It uses a custom page template that registers new widget areas, and custom widgets that can be added as unique content sections on any page. Additionally, it’s available in the official WordPress plugin directory. So you can install the plugin directly from your WordPress dashboard and receive automatic updates.

After installing and activating the plugin, you will be provided with a collection of custom widgets. The widgets are used to display various content sections on any page. Currently, the following widgets are included with the plugin:

• Hero – A full browser height section with featured text, background images and a call to action.
• Blog – Display a section of blog posts from any category in a chosen layout.
• Content Slideshow – A full width slideshow of featured posts with background images.
• Feature List – A list of features with icons displayed in multiple column layouts.
• Portfolio – A section of posts displayed as portfolio images in a masonry layout.
• Subpage – Display any page content as a section within another page or use custom content.
• Team – A section of team members from a selected post category.
• Testimonials – A slideshow of testimonials from a selected category or custom post type.
• Profile – A personal profile with an image, bio and social media links.
• Pricing Table – A section of pricing tables with a featured list and link to purchase.
• Featured Product – Allows you to add an image, description, and button link for an eCommerce product.
• Featured Content — A section that displays a portion of an existing page, or custom content.

Widgets are a core functionality of WordPress. Selecting, moving and manipulating widgets in the WordPress customizer is simple, fast and intuitive. Users can see exactly what their website will look like as changes display in real-time. The Organic Builder Widgets allow for the creation of highly dynamic website pages with ultimate ease!

While other WordPress page builder solutions may offer a huge degree of control over the design, we feel that is often a hindrance rather than a benefit. Endless design options and control can be overwhelming, leaving users paralyzed. As a result, we designed each widget to be pixel perfect with simple customization options. So you can have better looking pages faster!

To showcase the power of our new plugin, we have released the StartUp Theme! It’s designed to work flawlessly with the WordPress Customizer and Organic Builder Widgets plugin.

In addition to the StartUp Theme, the plugin is compatible with virtually ANY theme in the WordPress directory. Of course, it would make us happy if you used an Organic Theme with the plugin, but it’s not a requirement.

Naturally, we hope to sell more themes that are highly compatible with the plugin. Additionally, we may sell additional custom widgets and style packs in the future. However, the core pack of widgets will always be maintained and freely available. We hope you’ll give the StartUp Theme and Organic Builder Widgets a chance for your next website!

For further instructions on plugin usage, please refer to our tutorial.

If you would like to leave a positive review of the plugin here, it would be greatly appreciated!

Basic free support for the plugin is provided through the WordPress support forums. If you would like to receive faster support, please refer to our Priority Support.

We’re Just Getting Started

This is just the beginning, so please let us know in the comments if you have any questions or requests for additional builder widgets.

Organic Themes has included a small set of shortcodes within our WordPress themes for a long time. But to be honest, we never handled it properly. You see, shortcodes are plugin territory. It’s not kosher to build that functionality into themes. Our goal has always been to create lean WordPress themes with no added hormones — the way WordPress intended. Frankly, the shortcodes didn’t belong.

We recently made a round of updates to all of our themes removing any shortcode functions. However, since many of our customers and themes rely on these helpful shortcodes, we created one simple plugin to rule them all. Updating your theme will remove all shortcodes from the theme, but you will be prompted to install the Organic Shortcodes plugin. We recommend doing so. Any existing shortcodes you’ve used with an Organic Theme will work exactly as they have before, and now they will transfer seamlessly among our themes.

Examples of the shortcodes and their usage can be found within any of our theme demos. The plugin is free for all, and can be downloaded here.