Gutenberg Blocks Bundle – A Collection Of WordPress Blocks
The Organic Blocks Bundle currently includes 9 premium blocks for the WordPress 5 Gutenberg editor.
The Organic Blocks Bundle is a growing collection of blocks for the Gutenberg editor created by Organic Themes.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
