Categories
Development WordPress

WordPress Full Site Editing: Block Themes and Future of WordPress Theme Development

If you’ve been curious about the full site editor, you stumbled to the right place. This article will tell you everything you need to know about this editor and a little bit more.

By the end of this piece, you’ll know:

  • What does WordPress Full Site Editing mean?
  • Why you should be even more excited about the future of WordPress Theme Development
  • What does this new update mean for your website?
  • How to make the most out of this new update

Let’s Backtrack a Bit to the Gutenberg Update

You’ve heard people call WordPress Full Site Editing the most exciting thing this side of the Gutenberg block editor.

Well, this new update is the other half of the Gutenberg editor update, which WordPress released with version 5.8 back in 2018.

The Gutenberg project is WordPress’s attempt at reimagining website content management. WordPress wanted to gradually launch this project in  four phases, which include:

Phase 1: Easier editing with the block editor

The first phase of the Gutenberg project was replacing the WordPress editor with blocks. This change will allow you to add dynamic components to your website using blocks.

Phase 2: Full site customization

🌟 We are here!

Building on the first phase, the second phase would allow your teams to edit your entire website using blocks.

This means not only editing your web pages, which you’ve been doing since version 5.0. It also means the ability to edit your global pages using modular blocks.

It also includes developing a project library, themes that support blocks, and navigation blocks that recognize these themes

Phase 3: Multi-author collaboration

The third phase of the Gutenberg project aims to take collaboration to an entirely new level. 

Here, you’ll be able to share workflows and collaborate with other stakeholders as you do in Google Docs.

Phase 4: Multilingual website support

The fourth and final phase of this project was enabling multilingual access. With this, you’ll no longer have to rely on plugins such as the WordPress Multilingual Plugin to have your website in different languages.

WordPress Full Site Editing is a set of new features that will come with update 5.9. These features are set to take editing and customizing your website to another level.

What is WordPress Full Site Editing?

WordPress Full Site Editing, which we’ll call FSE going forward, is a set of new WordPress features that allow you to build a website entirely using blocks.

WordPress will release FSE with its update 5.9 as well as other new features on January 25th, 2022, and continue improving it with time.

These features are under development and include:

  • Block themes
  • Template editing
  • Global styles

Building Blocks of WordPress FSE You Should Expect Soon (pun intended)

This new update comes with many features, functionalities, as well as additions. 

Understanding each feature of WordPress FSE is essential. This will go a long way in helping you see what it means for your website and audience at large.

Going forward, editing in WordPress will be blocks galore, and you can see this through the building blocks of Full Site Editing, which are:

1. Blocks

If you’ve been using any recent update of WordPress, then you’re familiar with Gutenberg blocks

For starters, blocks replaced the 17-year-old WordPress editor in 2018.

However, it’s in this new full site editing update that blocks come to life. Before this, you could use blocks in the page section for images, paragraphs, videos, as well as audio that you could drag and drop anywhere.

In the FSE update, for example, blocks will be able to achieve a lot more beyond your content area.

You could also use them to edit global elements such as your footer, sidebar, logo, tagline, and menu.

2. New Site-Wide Blocks

This is a feature that will only be available on WordPress version 5.9, to be released in January 2022.

It allows you to access new blocks that you can use to edit throughout your website. You can find these blocks under the “theme category” in your WordPress dashboard.

And it gets better. WordPress added ten other blocks you can use to customize your website further.

These include:

  • Archive Title
  • Term Description
  • Next Post and Previous Post
  • Navigation
  • Template Part
  • Footer

3. Block Patterns and Reusable Blocks

Block patterns are premade and ready-to-use layouts that you can make out of WordPress blocks.

You’re probably familiar with Gutenberg blocks which we’ve just covered. These are customizable pieces that you can add to a website.

Some of the most used blocks include social media blocks, audio blocks, as well as image blocks.

With block patterns, you also get the added functionality of creating a pattern or layout of blocks. That’s not the best part yet.

You can then go ahead and save these blocks, reuse them at a future time, and even share them on other websites.

Above that, you can also reuse your block patterns across the page and global parts of your website, such as on headers and footers.

4. Templates and Block Templates

The simplest way to define a block template is as a list of block items. Such blocks can have predefined attributes, placeholder content and be static or dynamic.

Like before, WordPress will use its template hierarchy to determine the template or set of templates it will use to display the page.

One change that comes with FSE and block templates is that you will no longer write templates using PHP.

To write templates in FSE, you will have to get familiar with writing templates using HTML.

The addition of block templates to WordPress themes comes with a few benefits for website editors.

First, you will be able to modify and save versions of existing templates as well as create new templates, which we’ll get to soon. 

5. User-Defined Template

Another addition that comes with FSE is user-defined templates. In fact, you should be excited about this feature because it gives you the freedom to create your own templates.

You can view any changes that you create on your website live. This also means less reliance on creating child themes and touch codes.

The templates you create will be saved on a database as a custom post type named wp_template.

From this database, you can then export and import your user-defined templates for use on another website.

6. Global Styles

Global styles is an FSE system and interface WordPress built to enable you to have control over your website’s aesthetics beyond individual blocks and pages. 

They help you change the overall style of your site without having to edit your individual posts and pages.

With styles, you can do the following from one place:

  • Select a body background-color
  • Change the line height of all your headings
  • Set a font family for all your topography

An exciting addition is that you will now use a theme.json file to create options for your global style. Theme.json is a configuration file that you can locate in the root directory of your theme and use to build presets.

What Does This Update Bring to the Table (Your Website)

Full site editing, together with the other functionalities that come with its update, brings a lot of functionality to your website.

This will come with many upsides, which include:

1. No More Moving Between Tabs

With this update, you won’t have to move back and forth between customizer, widget, as well as menu to make changes to your website anymore.

This update also gives you a better option in the name of a site editor. From this site editor, you’ll be able to make changes from those sections from a single point—cheers to that.

2. Less Reliance on Third-Party Plugins

It doesn’t take long before any WordPress developer has a list of plug-ins that can run forever. These plugins can range from valuable hacks and slight inconveniences to downright annoying necessities.

Well, with FSE, plugins will become one less thing to worry about, as it will include features you’d usually have to source from third-party developers.

3. More Granular Control Over Your Website

WordPress FSE, through its improved block control system, will also give you more control over smaller sections of your website.

The modular design that comes with blocks means that you’d have more precision in making changes.

For example, you could now edit your logo internally without necessarily changing the header menu.

4. Ease of Use

If anything, the new WordPress FSE will make website editing much easier for you and your team. 

Witty efficiencies are sprinkled throughout the update. Eventually, this will make editing less of a chore.

For example, look at the new navigation block in the site editor. You can use this thoughtful feature to create navigation menus in your articles or landing pages manually.

Making the Best of WordPress Full Site Editing

Like any other system, updates are often a bitter-sweet affair. You may find yourself juggling highs of excitement about the new features and lows of anxiety about change.

From experience, the best way to conquer the fear of the unknown is preparation; this update is no exception.

Fortunately, getting on board the FSE train is a lot easier than you’ve imagined. You can start using FSE on your website in the following steps:

1. Prep Your Environment

Some of the features coming out in update 5.9 will be experimental and in their “beta” stage. For this reason, you should be wary of running them on your live website.

An excellent opinion will be creating a private testing environment with the FSE. You can do this by spinning a website on a service such as local by flywheel or developing a staging environment.

Proceed and install/activate the Gutenberg flywheel. If you have trouble activating this plugin, check again to ensure that you’re on the latest version of WordPress (preferably 5.7 and above).

Also, using PHP version 7.3 or higher goes a long way in making using FSE easier. Fortunately, it’s easy to check the version that you’re on.

Go to your dashboard, navigate to tools, then click on the site health tab. You can then wait for it to automatically run security as well as performance analysis and display your results.

2. Install a Theme That Supports WordPress FSE

Not all themes on WordPress support this new update. To use FSE, you’ll have to install a theme that supports FSE’s modern block-based interface.

Fortunately, finding a theme isn’t that hard. Developers have had ample time to develop Gutenberg themes since its launch in 2018.

Once you have a theme installed, a new option should pop up in your dashboard “Site Editor (beta).”

With this, you have everything you need to start editing your website with FSE.

3. Edit Your Website

With the FSE site editor, you can now edit page elements and global elements of your website using a click.

You can do this using the following steps:

  1. Select an item
  2. Wait for a floating toolbar that will appear shortly
  3. Use the floating toolbar to edit the element you just selected

You can also use the Gutenberg editor to add new global elements to your website. Use these steps:

  1. Hover around the place you want to add an element
  2. Wait for the “+” button that appears shortly
  3. Click on that “+” button and add whichever element you wish to add

Does That Seem Like a Lot of Work? It Doesn’t Have To

A lot is going on in the new WordPress update 5.9 that directly impacts your website. That said, it will be hard to keep track of all these changes.

Shifting from PHP to HTML, finding new user 5.9 themes, as well as using theme.json can all be confusing.

Fortunately, you don’t have to fret about WordPress updates anymore. We can do the heavy lifting on your behalf so that you can focus on other aspects of your website.

We can help you

  • Build or Redesign your website
  • Customize your website using the latest FSE functionality
  • Optimize your website for Gutenberg themes

For more information, contact us today, and we will be more than willing to help.

By David Martin

I'm obsessed with building websites. I love planning, designing, developing, and tweaking them until they're converting users into customers. This is where I share some of what I've learned over the past decade building websites on the Internet.

Leave a Reply