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!

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.

As the company grows their theme offerings, we are thrilled to be a part of the expansion. As a result, Organic Themes has released 2 new themes on the WooCommerce website — Threads and Artisan.

The Threads and Artisan themes have undergone extensive reviews to guarantee that they are optimized for both WooCommerce AND Gutenberg. As a result, they are among the first officially Automattic approved WooCommerce and Gutenberg themes available. Meaning, the themes are developed to a standard worthy of the makers of WordPress itself.

It’s a BIG deal.

Organic Themes has long been partnered with WordPress.com. Our new partnership with WooCommerce now ensures that our products are developed at the highest standards of WordPress and WooCommerce. As a result, the knowledge we have gained from working with these companies is incorporated into all of our products.

I don’t want to toot our own horn too much, but it’s an important message to our existing customers and all consumers of WordPress products:

Organic Themes provides some of the highest quality themes available for WordPress and WooCommerce. Period.

Now, let’s get to the themes!

Artisan Theme

The Artisan Theme is designed for makers of DIY goods. Whether you’re sculpting beautiful pottery or creating custom skateboard decks — the Artisan Theme is designed to turn that passion into a profession.

Threads Theme

The Threads Theme is designed for selling t-shirts and apparel online. The shop features a unique full-screen layout, in which products are displayed in a uniform grid. It’s an excellent website solution for launching your clothing brand online!

During these uncertain times, it’s more important than ever to establish an alternative means of income. Our hope is that these new WooCommerce themes will assist your efforts to sell goods online, and pocket some cash doing what you love.

Moving forward, Organic Themes is excited to work with WooCommerce, and release more themes in the future.

The Problem With Most Photography Themes

Many WordPress photography themes suffer from a number of pitfalls:

1. Full-browser width images that lose quality on large screens and retina devices.
2. Large images that take considerable time to load, losing the interest of prospective clients.
3. Flashy design elements and animation that distract viewers from the work.
4. Website navigation that is difficult to locate and use.

We sought to avoid these mistakes with the Photographer Theme. The recent update is no exception. Instead, the theme features a minimal design with a focus on the photography.

Focus On Photography

It’s important that the imagery is the primary focus of a photographer’s website. The images should be high quality and load quickly. Additionally, the website should feature a minimal design and simple navigation. As a result, the website is free of distraction.

We updated the Photographer Theme with these principles in mind.

We kept the minimal design of the previous version. However, we gave it a shave and a haircut. Meaning, we tightened up the design with cleaner lines, better fonts, and ample spacing to let your work breathe. The clean design lends itself to customization. So, with a few simple changes, your website will match your brand.

In order to retain image quality, the images throughout the theme do not exceed certain widths. This also improves load time. As a result, the Photographer Theme utilizes the browser window to frame your work. Giving your photography a sophisticated presentation.

The theme update also avoids flashy design elements and animation. Instead, it features an elegant and minimal design that’s easy to navigate. As a result, your work is appreciated without distraction.

Hover Titles And Excerpts

In the previous theme version, the post title and excerpt displayed beneath the featured image on portfolio pages. Often, customers requested to hide that information.

With the recent update, post content is hidden until hovering over the image. It’s a subtle change, but one that keeps visitors focused on the photography. View a portfolio page in the demo here.

Endless Content Slideshows

The Photographer Theme has always featured endless image slideshows using the “Slideshow” page template. On the other hand, content slideshows were limited.

Not anymore.

With a content slideshow, each slide links to a page. Now, you may create endless content slideshows.

This updated feature utilizes the Jetpack portfolio custom post type. Each portfolio “Project Type” may be added to your menu as a content slideshow. As a result, there is no limit to your slideshow ambitions. View an example in the demo here.

Absolute Centered Slideshows

Once upon a time, photographers used Flash websites to showcase their online portfolios. Eventually, and for good reason, HTML websites replaced Flash. Although, I did miss one aspect of Flash websites. The ability to easily center all content within the browser window.

With an HTML website, centering content both horizontally AND vertically has always been a challenge, until recently. Now, all modern browsers support CSS flexbox layouts. So, designers, artists, and photographers can have their work centered once again!

The latest version of the Photographer Theme centers all slideshow pages within the browser window. As a result, the images within the slideshow are always the center of attention.

Improved Theme Options

In the latest theme update, we stripped out non-essential options and functions. As a result, the setup is fast and simple.

There are a few added options. Now, you can change fonts throughout the theme. Additionally, there are options to change the header layout. As with all Organic Themes, options are managed in the WordPress Customizer.

Additional Improvements

The updated Photographer Theme vastly improves upon the previous WooCommerce integration. As a result, selling your photography and services online is easier than ever. Plus, your shop will blend in perfectly with the rest of your site.

The theme is also optimized for the Gutenberg editor. It features support wide and full alignment blocks, and custom block styles. Plus, the editor styles and fonts match the front-end of your site.

Last but not least, the home page slideshow features new options. Now, multiple posts can display on each slide. So, your home slideshow can be used as a tool to guide visitors through your website.

It’s the ultimate WordPress for photographers that take their work seriously. So, purchase or update the theme for your photography website today!

If you need help with setup, please refer to the documentation or our Theme Setup Service.

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.

The plugin is perfect for building custom home page designs, one-pagers, or adding extra pizazz to any page on your website. Best of all, it’s a lightweight page builder solution that utilizes the existing power of WordPress. There are no bulky proprietary interfaces. There is no departure from the WordPress experience. Suffice it to say, it’s an “organic” page building solution.

Don’t take our word for it. Check out the plugin’s glowing reviews.

But what if you want to use Builder Widgets with Gutenberg Blocks? Well, now you can!

Registering Widget Areas With A Page Template

Widgets are added within a widget area. Until recently, widget areas were registered by your theme or using the “Organic Custom” page template included with the Builder Widgets plugin. Assigning the template registers the entire page as a new widget area. Then, users can add endless widgets to the page directly within the WordPress Customizer.

However, requiring the use of a page template to register widget areas has some limitations. For instance, what if you want to use widgets on posts instead of pages? What if you want to use traditional widgets together with Gutenberg blocks?

Those options are simply not possible using a page template.

So, we developed the Widget Area Block.

Registering Widget Areas With Blocks

The Widget Area Block registers new widget areas within any post or page using the block editor. It opens up a world of possibilities for using widgets and blocks within the same content.

Create as many widget areas as you want. Move the position and placement of those widgets directly within the WordPress block editor.

Get The Widget Area Block

We have recently updated the free and premium versions of the Builder Widgets plugin to include the Widget Area Block. Additionally, the block is available separately within the WordPress plugin directory here.

Simply install or update the Builder Widgets plugin, or install the Widget Area Block plugin individually. Then, begin adding widgets directly within your WordPress content!

You can learn more about the Widget Area Block and how to use it here.

Now, widgets and blocks can live together harmoniously.

There are thousands of useful widgets within the WordPress plugin directory. Widgets serve a wide variety of purposes. However, they are usually restricted to sidebars and footers, and cannot be added within the page and post editor — until now!

Using the new block, you can register multiple widget areas on any page or post within the WordPress 5 block editor. This is particularly powerful when used along side our Builder Widgets plugin.

How To Use The Block

1. Within the block editor, click the “+” icon to add a new block.
2. Under the Widgets category, select the “Widget Area” block.
3. Enter a unique name to register your new widget area.
4. Click the blue “Customizer View” button to enter the WordPress Customizer.
5. Within the Customizer, begin adding widgets to the area.
6. Publish your changes in the Customizer.
7. Exit the Customizer to return to editing your post or page.

Please note: You must be using WordPress 5 or the Gutenberg plugin in order to use this block.

Using The Widget Area Block With Builder Widgets

The Widget Area Block is useful for adding any widgets within your page or post content. However, we developed the block with a specific purpose in mind — for using our Builder Widgets directly within the new WordPress 5 editor.

If you’re one of the 10,000+ people that has found our Builder Widgets plugin useful for creating custom pages in WordPress, this new block will make it even easier.

For instance, let’s say you already have an “About” page on your website. That page was created using the WordPress editor. However, you would also like to add a section of team members or testimonials to that page content. Well, that’s where the Builder Widgets and Widget Area block combo really shines!

Most builder solutions require that you start fresh, adding your content within their builder interface rather than the default WordPress editor. This can be a cumbersome process that involves changing the entire way you create content within WordPress.

Instead, you can leave your WordPress content untouched, and build a variety of page sections within your existing content using the Widget Area Block and Builder Widgets. That’s pretty cool.

We don’t want to entirely change the way that you add content to WordPress. Our goal is to work with the WordPress 5 editor and Customizer — not create a different experience altogether. We believe the Widget Area Block helps achieve that goal.

Download the block today. If you find it useful, please leave us a positive review.

In addition to the Gutenberg optimization, we have made some other theme updates that existing users should be aware of.

New Portfolio Style Blog Layout

Upon activation of the latest Portfolio and Portfolio Lite themes, if your homepage is set to display “Your latest posts,” posts will now display in a 3 column, portfolio style layout. A Featured Image or Title will display for each post, rather than the full post content.

With previous theme versions, the latest posts on the default blog displayed in a more traditional, single column blog layout. However, we felt that since this is a Portfolio Theme, it should look like a portfolio upon activation. So, we made this change as of Portfolio Theme v6.3 and Portfolio Lite 1.3.

If your blog suddenly changes, don’t panic! We’ve also included a new blog page template with both themes. So, you can still have the same traditional blog layout. It will just require a different setup process. For creating a traditional blog, follow these instructions:

1. Navigate to Pages > Add New.
2. Add a Page Title (Usually “Blog”).
3. Select the “Blog” template from within the Page Attributes section.
4. Publish the page.
5. Add the page to your Custom Menu.
   

Voila! It’s that simple. Your new blog page will display as it did with previous theme versions.

Adding Slideshows With Gutenberg

Gutenberg replaces the traditional WordPress image gallery with the new Gallery Block. This is great! The Gallery Block looks way better than the old WordPress image gallery.

However, the Portfolio Theme uses the traditional WordPress gallery for creating and managing slideshows. The theme accomplishes this by taking the first image gallery added to your post content, and using those images to create a slideshow. It’s a clever bit of code that we’re quite proud of. Unfortunately, the Gutenberg Gallery Block does not perform this way.

Never fear, you can still add a traditional WordPress gallery to your content within Gutenberg for managing slideshows! This is accomplished using the Shortcode Block.

The WordPress Gallery shortcode looks like this:

Within a post, or page with the Slideshow Page Template applied, add a Shortcode Block as pictured above to your content. Change the image IDs to match the order and IDs of the images you wish to be displayed in your slideshow. Then, publish or update the page.

After adding a Gallery Shortcode to your post or page content, the images will display in an elegant slideshow on your website.

That’s It!

We hope you enjoy the Portfolio Theme updates!

Organic Themes has always developed products with “no added hormones”. We believe less is more, and focus on optimizing our products for WordPress specific features and functionality. As a result, Organic Themes are prepared for Gutenberg. However, there are additional steps that can be taken to optimize your WordPress theme for the new WordPress 5.0 content editor. We’ll get to that. But first, let’s make sure you understand what Gutenberg is, and why it’s a big deal. If you already know, skip ahead.

A Brief History Of Gutenberg

Gutenberg is the name given to the new content editor that will launch in late November with the release of WordPress 5.0. It’s perhaps the most significant update since the release of WordPress 3.0 — over 8 years ago. The new editor will change the way in which website content is added using WordPress. The “classic” editor will be replaced with a new block editing interface. As a result, content will be added in the form of “blocks”. Those blocks can be individually manipulated and moved, adding much more control over the display of your content.

Let’s compare:

It’s a much needed update in order for WordPress to continue its reign as the best content management platform for websites. However, the change is surrounded by controversy. The Gutenberg plugin has many scathing reviews in the WordPress plugin directory. In fact, the most downloaded Gutenberg related plugin is the Disable Gutenberg plugin. Despite the backlash, Gutenberg has come a long way over the course of its beta development. As of this article, Gutenberg is a solid content editor, and a vast improvement over the classic editor in our opinion. There is no reason to fear this change.

If you’re still concerned about converting your old page and post content to Gutenberg blocks — remember, you don’t have to. All your old content will exist in the classic editor block until you choose to convert it. Basically, nothing will change unless you want it to. Upon converting the content to blocks, the worst case scenario will be addressing some spacing and alignment issues.

Organic Themes has been using and testing the Gutenberg editor since its announcement last year. We were among the first WordPress theme shops to embrace Gutenberg — releasing a free Profile Block plugin, tutorial and the optimized Block Lite theme. So, we know what it takes to optimize a theme for the new editor.

Optimizing A Theme For Gutenberg

While preparing your WordPress theme for Gutenberg compatibility may not be a necessity, there are steps that can be taken to optimize your theme for the new editor. That will be the focus of this article moving forward.

Full And Wide Alignment Blocks

Gutenberg provides several options for the various block types included with the new editor. Among those, is the option for wide and full width block alignment. Meaning, the block can extend beyond the width of your content, or even the full width of your browser window. However, this option is not enabled by default. It requires adding theme support and styles to take advantage of this new feature.

For the purposes of this tutorial, I will be providing code from our Gutenberg optimized starter theme, the Origin Theme.

Adding Theme Support

First, let’s begin by adding support for wide alignment blocks within your theme functions.php file:

Conditional Sidebar Classes

Before adding the block alignment styles, we need to determine if there is a sidebar present on the page. If your page contains a sidebar, you probably do not want a block extending to the full width of the browser window. This is because the wide or full aligned block would probably cover your sidebar widgets — creating undesirable results. So, we need to add a conditional body class to the theme that determines whether or not a sidebar is present on the current page. Then, we can use the conditional class in our block alignment styles.

A conditional body class can be added within your theme functions.php file like so:

Keep in mind, the body class code provided above will most likely need to change depending on the names and number of sidebars provided with your theme. In our case, the Origin Theme features the option for a single sidebar on pages and posts. Additionally, the theme contains a full width page template and WooCommerce compatibility. As a result, conditional operators are used to account for those unique pages and post types. Your theme may need more or less operators, depending on the number of sidebars, page templates, and custom post types supported by your theme.

Wide And Full Block Styles

Confirm that the sidebar class is conditionally added to the body tag of your website by inspecting the code. Then, begin adding the conditional block alignment styles:

Additionally, for a responsive website, you should add mobile styles for the wide and fully aligned blocks. This can be done by wrapping your styles in a media query for mobile devices. The following code is for wide and full blocks on mobile phones:

Now, your WordPress theme will fully support the use of wide and fully aligned blocks!

General Block Styles

Gutenberg blocks contain default styles. However, those styles may conflict with other theme styles. As a result, it’s best to add some block styles of your own for consistency.

Global Block Style

With the exception of the paragraph block, most blocks have a unique class applied. However, rather than targeting each block individually, you may want a single style that effects all blocks. This is useful for keeping our code concise, and making style changes to blocks on a global scale.

Since all block classes begin with the “wp-block” identifier, we will use an attribute selector style to target all elements containing that class name, like so:

Individual Block Styles

Many blocks contain styles that may override the styles within your theme. As a result, the appearance of content may not be consistent between pages created using the classic editor, and pages created with Gutenberg. In order to solve this, we’ll need to add block classes to many existing theme styles. This should retain consistency between the appearance of content added using either editor.

In the case of the Origin Theme, we have added the following block styles:

Front-end Styles In Gutenberg Editor

For a more seamless user experience, you may want the content added within the Gutenberg editor to reflect the fonts and styles on the front-end of your website. Unfortunately, the content added within the Gutenberg editor will not automatically appear as it does on the front-end of your website. However, this can be remedied with some additions to your WordPress theme.

Create Editor Stylesheet

First, we’ll create a separate stylesheet. Within the Origin Theme, we have named this stylesheet gutenberg.css, and added it within the “css” theme folder. For reference, the full contents of the stylesheet are provided below:

Unique Editor Classes

Before continuing, let’s break down some of the important class names required for targeting elements within the editor. Failure to use these classes may result in targeting elements within the WordPress dashboard outside of the editor window. In short, things will look funky — kinda like this:

To make sure only elements within the editor are targeted, add the .editor-styles-wrapper class in front of the elements you wish to target. This may not be necessary for all elements, but it’s good practice.

Another commonly used editor class is .editor-rich-text__tinymce. This class will need to be appended to more common HTML elements. For instance, your theme may style a heading like so:

However, adding that style to the editor stylesheet will not work as expected. It will be overwritten by the default Gutenberg editor styles. So, in order for that heading to appear as it does on the front-end of our site, we need to rewrite the style like this:

That will ensure our editor style takes precedence over the default editor styles. This may vary somewhat depending on the element and the block you are targeting within the editor. It’s best to use your code inspector as necessary in order to target elements directly.

Enqueue Editor Stylesheet

Next, let’s enqueue the editor stylesheet within your functions.php file:

You may need to adjust the path to the stylesheet accordingly for your theme.

Summary

That’s it! By adding theme support for wide alignment blocks, block styles, and an editor stylesheet, your WordPress theme will be fully optimized for Gutenberg. All Organic Themes are compatible with Gutenberg, and many have already been optimized for the new editor. There are exciting changes on the horizon with WordPress 5.0, and we’re ready to help with the transition!