WordPress themes and templates are on the frontlines of frontend development. Why? Because every theme contains 12+ key templates and style codes that determine the layout and design of a WordPress website. Here is the diagram of some of the key templates that shape the look and feel of a WordPress website:
There are 6 things to note about a theme and its standard templates as shown above:
- This is the Classic Template layout undergoing profound change with Gutenberg Full Site Editing just added to WordPress 5.9 as Core routines;
- Each shown template is for now part of FSE and is driven by PHP and/or Gutenberg Block template code;
- The relative positioning of the code templates has been a standard but is currently subject to change;
- Users of the Classic Template can customize some of the templates [Header layout and colors, sidebar position and width, content area width, etc] through the Theme – Customizer command plus new 3rd party Theme Builder tools
- Traditionally the content area has been where the Classic Visual Editor , PageBuilders, and the Gutenberg editor add UI components and functional features to posts and pages. This is also changing as PageBuilders and the Gutenberg editor now have access to the content of headers footers, sidebars and popups appearing on a website;
- Traditionally the size, relative positioning,3D layout status/visibility, and responsive breakpoints of all the templates areas have been locked into control by PHP code or specialized coding.. This is also undergoing rapid change.
With Gutenberg 5.9 FSE versus competitive ThemeBuilding tools from Beaver, Divi, Elementor, Kadence and other popular PageBuilders, the scramble for template leadership and management has dictated rapid change. This review will look at the evolving role of templates in WordPress.
Gutenberg: The Temple of Templates
Gutenberg has spawned the most new templates in the past 2-3 years. – 5 overlapping template types.But all the popular PageBuilders/Themebuilders like Beaver, Divi, Elementor have had templates for more than 5 years sporting sophisticated features for local and cross website usage. Finally there is a group of devoted template providers that offer the same template designs for use with different Pagebuilder and/or Gutenberg code.
However, Gutenberg Block templates have two key advantages. First, with FSE-Full Site Editing, Gutenberg Templates have become part of the WordPressCore, so all WordPress users will have immediate access to the Gutenberg Templates. Second, any Gutenberg Block can be used in Gutenberg Templates but there are limitations on Beaver, Divi or Elementor Templates use in GutenbergBlocks. Also it is dificult/impossible to use Beaver, Divi, Elementor and otherPageBuilder components and code interchangeably.
This is the basis for the Gutenberg Block Advantage. The downside is that 3 years after its intro the Gutenberg Block Editor cannot match any of the top PageBuilders for speed and ease of page design, stylng, and layout. Worse, in quick simple posts, the Gutenberg Block Editor is a poor second to the Classic Editor[keep it around for quickposts and pages: PS: Gutenberg advocates say the Classic Editor is available as a Gutenberg Block but then cripple its styling options]. So this review of templates will start with the Gutenberg templates
Reusable Blocks – is easiest way to create a Gutenberg template from one or more adjacent blocks on a post/page/custompost type. Once created the reusable block can be used again anywhere on the website and exported to external websites for reuse. Also, the reusable block can be edited centrally from a list of active reusable blocks or can be edited live where used on a page/post/CPT. But be careful – any change to a live Reusable Block on a page/post/CPT will be duplicated in everyuse of the Reusable Block on the website.
The Reusable Block in WordPress Block editor is a content block that you create, save and reuse later as per your need. It allows you to save a block or group of blocks, which you can use later on any post or page on your website. And you can even export reusable blocks and import them to another website. If you often use the same content on your website, the reusable blocks will save you a ton of time and effort.
When should I use a Reusable Block?
Here is a look at how to create Reusable Blocks. Click on the Group block [i also t could be a Cover, Columns, Section or manually selected set of adjacent blocks] which you want to copy and make into a Reusable Block . To start the process click on the three-dot menu (kebab menu) and select the “Add to Reusable Blocks” option.
Create another post/page where you want to insert it. Click on the plus icon in the top-left toolbar, visit the “Reusable” tab and insert a required Reusable Block here (what you have created earlier).
Get more detailed info about the Reusable Block lesson plan and Workshop.