 |
VOOZH | about |
|
VOOZH | about |
Since WordPress 5.0, the block editor has become the default user interface for creating pages, posts, and templates in WordPress. WordPress block templates, template parts, and patterns have dramatically improved the way that sites are built by making the process more visual, intuitive, efficient, and flexible.
No longer do you need to have extensive coding experience to be able to create WordPress page and post templates. You can do the vast majority of that work visually in the block editor.
If you’re coming from the classic editor, there will be a bit of a learning curve. But don’t worry — it’s pretty straightforward once you get the hang of it.
New to building websites with WordPress? This tutorial is for you, too. Although you may want to read Getting Started With WordPress, first.
Before we talk about how to create a block template, we’ll first discuss what a block template is, how it differs from block patterns and theme templates, and the prerequisites you’ll need to build a block template.
Then, we’ll walk you step-by-step through creating, styling, and implementing your first block template. We’ll also cover using JavaScript with your block template as well as how to customize existing block templates and troubleshoot common issues.
A WordPress block template is a full-page layout that serves as a template for a page or post. It’s composed of a series of components called blocks. Blocks are individual pieces of content like paragraphs, headers, images, dividers, rows, columns, forms, carousels, etc. that can be arranged to create a layout.
Block templates often include template parts — like headers, footers, and sidebars — and patterns created from groups of blocks. Most importantly, block templates should almost always include a content block. The content block displays all the blocks that are added to an individual page or post. Think of it as a dynamic placeholder for page- and post-specific content.
Unlike classic editor page templates, which are PHP-based, block templates are HTML files. If you’re hunting for these files on your server, you’ll find them in your theme’s /templates/ folder instead of in your theme’s /root folder.
It’s all well and good to talk about what block templates are, but if you’re new to the block editor, it may be difficult to visualize. The block editor is a visual tool, after all, so seeing an “anatomical drawing” of a block template might be helpful.
Hopefully, his handy infographic will give you a more holistic understanding of the basic structure of a typical WordPress block template and the function of each element involved. It’s best viewed on a larger screen. Feel free to click on the image below to download a PDF version and keep it as a reference.
| Feature | Block Template | Template Part | Pattern | Synced Pattern |
| Scope | Full page layout | Structural element (header/footer) | Content section | Content section |
| Where used | Site Editor | Site Editor / Block templates | Pages, posts, templates | Pages, posts, templates |
| Auto-applied? | Yes, by post type | Yes, where referenced | No (manual insert) | No (manual insert) |
| Synced across site? | N/A | ✅ Yes | ❌ No | ✅ Yes |
| Contains content block? | ✅ Required | ❌ No | ❌ No | ❌ No |
| File location | /templates/ folder | /parts/ folder | Database | Database |
Some of the terminology regarding different aspects of block editing has changed over time as the block editor has evolved. Let’s take some time to clearly define the other elements that are used in the WordPress Site Editor: template parts, patterns, synced patterns (formerly reusable blocks), and theme templates.
Template parts are reusable, structural elements that are positioned outside the content area of a page or post. You can only use them when creating your block template or other template parts — you cannot insert them directly into an individual page or post.
Template parts are synced across your site. When you make a change to the template part, it will be reflected across every page or post where that template part is implemented.
A common example of a template part would be a header, as shown below:
Other common template parts include footers, sidebars, and post meta.
A template part can contain other template parts, patterns, and individual blocks.
You can add your theme’s default template parts either before or after the content area within your block template. You can also create custom template parts or variations on existing template parts — like a custom header for your checkout page or unique sidebar for a specific blog category.
Template parts can also be used for other types of content like modals and lightboxes that display on click or on hover via a custom block. Examples of this include mini carts, login and registration forms, or chatbot interfaces.
A pattern is a group of blocks with a predefined layout that can be added to block templates, template parts, or individual pages and posts. A pattern usually includes specific styles and may have aspects that are locked to prevent reordering or deletion of important elements.
Patterns in WordPress can be used in two different ways — synced or unsynced. Unsynced patterns can be edited after insertion into a page or post without affecting other instances of the same pattern.
Synced patterns keep the design and content consistent throughout the site by updating every instance of that pattern every time you make a change, either by editing the pattern itself or as it’s being used within a page or post.
You can choose whether your pattern is synced or unsynced by toggling the sync option when creating one.
When editing a page or post, patterns can contain other patterns or individual blocks. If you’re using a pattern in a block template, you can also nest template parts within your pattern.
Patterns can be used in block templates, template parts, and within the content of your pages and posts. Patterns are not synced unless you check the synced option, so unsynced patterns are best suited for layout elements where you might want the style and order of elements to remain consistent, but the content itself may vary from instance to instance.
As of WordPress 6.6, you can alternatively decide to use an override on synced patterns if you want a layout element to remain identical in 99% of use cases but encounter the occasional exception. This might save you a bit of time.
An example of a pattern that you might not want to sync is a pricing table. Let’s say you own a software company, and you sell basic, standard, and premium subscription plans for ten different types of software that you develop. You might want all your pricing tables to look consistent, but the content of those pricing tables — the exact services and features each software and subscription level offers and their respective pricing — may be different for each product.
Synced patterns are similar to template parts in that when you make a change to any instance of that synced pattern, all occurrences of that pattern throughout your site will be updated to reflect those changes.
Any pattern can be a synced pattern by selecting the sync option when you create the pattern. Once you create the pattern, however, you cannot modify the synced status after the pattern is created. If you want to copy your synced pattern into a new non-synced pattern, you can simply duplicate the pattern and change the sync status.
When you save the pattern, you’ll want to make sure that you only select the unsynced pattern to apply updates, as you’ll be presented with the option to also save the changes to the synced pattern you copied into your new pattern.
A synced pattern seems a lot like a template part — how are they different?
Where synced patterns and template parts differ is that synced patterns relate to user-created content like posts and pages, while template parts relate to your site structure.
Synced patterns should be used when you want to create elements that display in the same way, consistently, throughout your website.
Your pattern may contain some dynamic elements that would necessarily look different from one post or page to another — like a post’s author bio or featured image. But if you changed any static content or style elements, those would be updated throughout the site.
Patterns are not synced unless you check the synced option when creating your pattern, so make sure to carefully consider whether you want your pattern to be synced or not when you create it.
An example of an appropriate use case for a synced pattern might be a newsletter signup form. Perhaps you want to encourage readers to sign up for your monthly newsletter, so you want to include a call to action midway through every blog post.
You want it to look the same on every post, and someday, if you decide to migrate from one email marketing platform to another, you can simply replace the signup form on one instance of your call to action pattern and have it update throughout the entire site, instead of having to update hundreds or thousands of posts one by one.
Theme templates are the page and post templates that are included with your theme. They define the default layout and structure of different pages and post types on your website (e.g., single post, archive page, 404 page).
Theme templates are applied automatically based on the type of content being viewed (e.g., single post template for individual blog posts, page template for static pages. Note, however, that your theme may also include alternate templates that you can choose to apply while creating and editing pages and posts.
In addition to your theme templates, some plugins you install may include their own templates associated with specific pages or custom post types. Ecommerce plugins like WooCommerce, for instance, include templates for Cart, Checkout, Single Product, and Product Catalog pages (among others).
Theme templates, templates associated with plugins, and the custom block templates you create will be organized in separate sections in the Site Editor under Appearance → Editor → Templates.
Note that if you need to make changes to existing theme or plugin templates, it’s best to do so via a child theme.
Changes to your child theme’s templates will override your parent theme’s settings, so that when you update your parent theme, your customizations will be retained.
WordPress block templates are designed to make creating attractive and functional website layouts easier and more efficient for just about anyone. Whether you have minimal technical skills or are an experienced developer, block templates have a lot of advantages.
Before you get started building your first block template, you’ll need to make sure the following prerequisites are met:
Next, you’ll need to follow these steps to prepare for creating your block template:
Once you’ve got your WordPress installation set up, and you have a basic understanding of the block editor, you’re ready to move on to creating your first block template!
Creating a block template can be relatively quick and easy, depending on the functionality you’ll need and how much content is required. For this example, we’ll create a custom block template for a single blog post page that you can manually apply to any post.
Go to your WordPress dashboard and navigate to Appearance → Editor. Then click on Templates.
On the Templates page, click the + icon next to the Templates title to select a new template to add. You can select from template types that will automatically apply to specific pages and post types, or you can create a custom template.
If you create a page-specific template, it will only be used for that specific page and can’t be selected as an optional layout for another page. If you create a custom template, on the other hand, you can apply it to any page or post. For this example, we’ll create a Custom template.
Name your template something that is relevant to its use case, then click Create.
Before you start designing your layout you’ll be prompted to select a pattern.
Starting from a pattern might help accelerate the design process if it’s similar enough to the layout you want to create. In this case, however, we’ll start from scratch, so we’ll select Skip.
Now we can start adding template parts, patterns, and other blocks. First we’ll add a header, footer, and content area, then we’ll make some additional customizations.
Click the blue + button in the upper-left corner of the edit screen to reveal the blocks, patterns, and media menu. From here, there are two ways you can add a header and footer.
Choose a template part block. One way to insert a header and footer is to choose the Header and Footer blocks from your theme’s template parts, highlighted in purple in the Blocks tab.
This will insert the default header. If you create a custom template part, you can also choose that from the Blocks tab as well.
Choose a header pattern. The second option for adding a header and footer is to select a pattern from the Patterns tab. You can select a pattern from the WordPress Pattern Directory, Theme & Plugins, or User libraries. You can also filter by synced and not synced patterns.
The content block is designed to dynamically display blocks that you’ve added to individual pages or posts. If you don’t add a content block to your template, your posts and pages will not display any of the unique content you add.
You can add a content block from the Block library tab. You only need one content block. Adding two content blocks will just duplicate the page/post content.
You can add as many other blocks, patterns, and template parts as you need to create the layout you desire. Choose whether you want these elements to display above the content or below it. You can insert blocks above your header and below your footer as well.
Arranging your blocks is as simple as selecting a block or pattern and dragging and dropping it to where you want it to be. You can do this in the visual editor area, or you can click on the List View icon and reorder blocks within the list view.
You can customize block-specific options like alignment, spacing, and colors by clicking on the settings icon in the upper-right corner of the editor screen. Then select the Block tab. From here you can adjust some settings in the Settings tab (gear icon) and style elements in the Styles tab (half-filled circle icon).
If there are other appearance attributes you need to adjust for specific blocks that don’t have options available in the Styles or Settings tabs, you can add them via CSS.
Whether you need to make global style changes to elements of your website or only for a specific instance of a block, you can make those adjustments by adding some CSS markup either to the Styles section of the Site Editor, or directly to your style.css file in your child theme.
For this example, we’ll change the font style at the top of our block template so that it defaults to italic. To make sure this style only applies to this particular text block in this specific template, we’ll add a custom CSS class under Additional CSS Classes in the Block Settings panel.
Once you’ve named your new CSS class, save your changes.
Next, you’ll apply your custom style to your CSS class. There are two ways you can do this. The first is by going to Appearance → Editor → Styles, then clicking the Edit Styles icon (pencil).
In the Styles panel, click Additional CSS, enter your styles for your custom CSS class, then click Save.
The second way to do this is to add your custom CSS directly to your child theme’s style.css file. You can find this file in your child theme’s folder, wp-content → themes → yourtheme-child → style.css, on your server using an SFTP program like FileZilla or Cyberduck (check with your web host for the necessary credentials for accessing your website via SFTP).
Download your style.css file and open it in a text editor like Notepad++ or Visual Studio Code. Add your custom CSS, then save your file and re-upload it to your server. You will overwrite the previous file, so make sure you’ve backed up your site before overwriting the old style.css file.
When you’ve finished making all your changes, click the Save button to save your template. Now you’ll be able to find your template under the Custom section of the Templates menu in the Site Editor.
Using JavaScript with block templates in WordPress allows you to add interactive features and enhance the functionality of your blocks. This guide assumes that you are using a child theme. Here’s a step-by-step guide on how to use JavaScript with block templates:
Create a new JavaScript file using the code editing software of your choice and name it something relevant (e.g., custom-block-scripts.js). You can add all your custom JavaScript for any functions you want to include in your block templates here.
For this example, we’ll add an event listener for a button click that will bring up an alert box that says, “Button clicked!”:
document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.my-custom-button'); buttons.forEach(button => { button.addEventListener('click', function() { alert('Button clicked!'); }); }); });You’ll need to specify your selector that you’ll then apply later to the block you’re working with. In this case, we’ve used the CSS class .my-custom-button as the selector.
Next, save your file and then enqueue it in your child theme’s functions.php file.
Go to your child theme directory and open the functions.php file in the code editor of your choice.
To enqueue the JavaScript file, add the following code (replace “custom-block-scripts.js” with whatever your file name is):
function my_custom_block_scripts() { wp_enqueue_script('my-custom-block-scripts', get_stylesheet_directory_uri() . '/custom-block-scripts.js', array('jquery'), null, true); } add_action('wp_enqueue_scripts', 'my_custom_block_scripts');In the block editor, select the block you want to enhance with JavaScript. In the block Settings panel, go to the Advanced section and, under Additional CSS Class(es), add the selector name that you used in your JavaScript file (but omit the leading period). Save your changes.
Explore the benefits of Jetpack
Learn how Jetpack can help you protect, speed up, and grow your WordPress site. Get up to 50% off your first year.
Explore plansIf you need to add JavaScript directly within the block editor, you can use the HTML block to include inline JavaScript, though this method is less common and generally not recommended for larger scripts.
In the block editor, add a new Custom HTML block.
Now let’s add our custom alert button script. Make sure to add your JavaScript code within <script> tags.
<script> document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.my-custom-button'); buttons.forEach(button => { button.addEventListener('click', function() { alert('Button clicked!'); }); }); }); </script>Next, we’ll add the additional CSS class, my-custom-button (without the leading period), to our button block. Don’t forget to save your changes.
Ensure that your JavaScript is working as expected by testing the interactive features on the front end of your site.
Here we’re testing the functionality of our custom button, which should show an alert box that says, “Button clicked!” when you click the button.
If you discover any issues, use browser developer tools to debug. Check the console for errors and ensure that your script is being loaded correctly.
There are a couple of ways you can implement and use block templates in WordPress. You can apply them manually to pages and posts or assign your block templates automatically to specific categories, pages, or post types.
To apply a custom block template manually to a page or post, first open an existing page or post or create a new one. Then, in the Attributes panel on the right-hand side of the page editor, select Swap Template from the Template dropdown menu.
Select your custom template from the template preview screen.
Your new page will now use the custom block template. You can add and customize content for your post or page within the block editor, but you won’t be able to edit any of the content that is a part of your block template. That content can only be edited when editing your block template directly. Everything you add to your page or post will appear within the Content block that you included in your block template.
Click the Publish button to make your new page or post live, or click Update to save changes to an existing page or post.
You will need to choose the post type that you would like your template applied to before you create your block template. You will not be able to change this later.
Within the Site Editor, you can automatically create templates for:
The Custom Template option can be applied manually to any page or post.
You will need to choose the post type that you would like your template applied to before you create your block template. You will not be able to change this later.
If you create a block template and want to change the type of post it is applied to, you can save your block template as a pattern or create a new block template for the post type you want and then insert the pattern into that new block template. You’ll then need to delete the previous block template if you don’t want it to apply to whatever post type you had initially applied it to.
If you’ve registered a custom post type, you can automatically assign your block template to a custom post type by adding it to your child theme’s Templates directory and changing the file name to single-yourcustomposttype.php.
For example, we’ve registered a custom post type called Portfolios using the following code in our child theme’s functions.php file:
function my_custom_post_type() {register_post_type('portfolios',array('labels' => array('name' => __('Portfolios', 'textdomain'),'singular_name' => __('Portfolio', 'textdomain'),),'supports' => array( 'title', 'editor', 'comments', 'excerpt', 'custom-fields', 'thumbnail' ),'public' => true,'has_archive' => true,'show_in_rest'=> true,));}add_action('init', 'my_custom_post_type');Now we’ll need to download our block template file so we can add it to our theme’s templates folder. Find your block template in the Site Editor by going to Appearance → Editor → Templates in your WordPress dashboard.
Find the template you want to edit, click on it, then click the Edit icon (pencil) next to your template’s name.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Export and click the Download icon.
This will download your entire theme along with all your custom template files.
Open the zip file and navigate to your child theme’s templates folder. You’ll find your custom block template file there named wp_custom_template_yourcustomtemplatename.html.
WordPress template hierarchy dictates that if you want your template to apply to all posts within a specific post type, you’ll need to prepend the name with “single-” followed by the name of the custom post type. In this case, our custom post type is called “portfolios” so we’ll name our block template file single-portfolios.html.
Now, upload it to your website using SFTP and place it in your child theme’s templates folder.
Now all “portfolio” custom post types will display using your assigned block template.
You can easily customize existing block templates in the Site Editor, or manually by downloading your theme files and editing the code within your block template file.
To customize a block template in the Site Editor, go to Appearance → Editor → Templates in your WordPress dashboard.
Find the template you want to edit, click on it, then click the Edit icon (pencil) next to your template’s name.
From here, you can add, remove, rearrange, and style blocks to your liking. Click Save to save your changes and have them applied to all associated pages and posts.
You can edit your block template’s HTML directly in the Code Editor view within the Site Editor. Go to Appearance → Editor → Templates in your WordPress dashboard.
Find the template you want to edit, click on it, then click the Edit icon (pencil) next to your template’s name.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Code editor and click on it. This will display the HTML for your block template, and you can add HTML blocks directly this way.
But what if you want to edit your template offline? Don’t worry — you can also download your block template’s HTML file and edit it in the code editor of your choice.
In the Editor, click on the Options panel, then scroll down to Export and click the Download icon.
This will download your entire theme along with all your custom template files.
Open the zip file and navigate to your child theme’s templates folder to find your block template.
Open your block template file in your code editor and make your changes. Save your file and re-upload it via SFTP to your child theme’s templates folder.
When troubleshooting issues with block templates in WordPress, you should use a systematic approach to proactively identify any issues, pinpoint the cause, and resolve the problem.
There are several places you can check to help identify issues with your block template.
Review the settings for each block in your template. Ensure that all configurations are correct and no required fields are empty. If you have nested blocks, make sure to check the settings on each block. Work your way through the list view in the Editor to make sure you’ve checked all blocks.
Check any custom CSS you’ve added for errors or conflicts. Ensure the CSS is correctly targeting the elements within your block template. Not sure if the correct element is being targeted or whether styles are being applied correctly? Use your browser’s developer tools to inspect any improperly displaying elements.
Sometimes changes that you make on the back end aren’t visible on the front end of the site because the site is serving cached content. You can check your site in incognito mode in your browser to see if caching might be the problem.
If the site displays correctly in incognito mode but not when you are in a normal browser window, then caching may be your issue. There are several areas where you’ll want to clear your cache.
If your block settings and CSS look correct and caching is not your problem, you might want to dig further into your code.
define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('WP_DEBUG_DISPLAY', false);Check the wp-content/debug.log file for any errors related to your block templates.
If the above steps don’t pinpoint your issue, it’s time to check for plugin and theme conflicts. First, you’ll want to back up your site. If this is a live site, you may want to perform this testing on a staging site so that your live site is not impacted during the testing period.
Deactivate all plugins (unless the issue you are seeing is in a block associated with a specific plugin — you’ll want to keep that one enabled but disable all others) and check if the issue persists. If the problem is resolved, reactivate the plugins one by one to identify the conflicting plugin.
If none of your plugins are triggering the issue, it may be a theme conflict instead. Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) to see if the issue is related to your theme.
Even after you’ve identified the issue, the solution may not be clear, and you may have to reach out to the WordPress support forums, read your theme or plugin’s documentation for common issues and their resolutions, or reach out to a WordPress developer for help.
By going through the steps above and taking a systematic approach to troubleshooting your issues, you’ll be able to accurately diagnose and solve most problems you might experience with your block templates. Even if you are unable to resolve a specific issue yourself, the more information from your troubleshooting efforts that you can provide in the community forums, to a theme or plugin author, or to a freelance developer, the quicker and easier it will be to resolve your issue.
Now that you’ve got an understanding of how to build your own block templates in WordPress, it’s time to get started! If you don’t have a web hosting provider yet, you can install Studio on your computer and create a development site to start experimenting with creating block templates. When you’re ready, you can choose a web hosting provider and take your block templates live.
Don’t forget to make sure your block templates perform at their best and your site is backed up and secure, 24/7. Jetpack Complete can automate keeping your site protected and optimized so you can spend more time focused on your site’s design and content.
Block templates in WordPress are generally designed to be mobile responsive by default, thanks to the responsive design principles embedded in the block editor. For instance, images and videos adjust to fit the screen size, and text blocks flow naturally within the layout.
However, depending on the theme you are using, the complexity of your layout, and the specific blocks used, you might need to make additional adjustments to ensure optimal responsiveness across all devices.
You’ll first want to ensure that you’re using a modern, responsive WordPress theme. Such themes typically include CSS rules that adapt the layout for various screen sizes.
Even though block templates are generally designed to be mobile responsive, that doesn’t mean that your theme’s default mobile styles will work with your block template’s exact layout. Here are a few steps you should take to ensure mobile responsiveness in your block template.
Example:@media (max-width: 768px) { .my-custom-template .wp-block-column { width: 100%; } .my-custom-template h2 { font-size: 1.5em; }Test your custom CSS on various devices and screen sizes to ensure the desired responsiveness.While WordPress block templates are generally mobile responsive by default, making additional adjustments ensures your content looks great on all devices. Regularly preview and test your templates, use media queries for custom styles, and leverage responsive design principles to enhance the mobile experience.
Regularly backing up your WordPress site will ensure that your block templates are able to be restored if your site experiences an issue. There are few different methods that you can use to back up your site.
Back up your files:
This will download all your custom block templates as HTML files within your theme’s templates folder.
Store your backups in multiple locations such as cloud storage (e.g., Google Drive, Dropbox) and local storage (external hard drive). Periodically restore backups to a test environment to ensure they are complete and functional. Regular backups and secure storage practices are key to preventing data loss and maintaining the integrity and availability of your WordPress site.
Yes, you can import and export WordPress block templates between different WordPress sites. There are a couple of ways you can do this. You can either export your templates from one site and upload them to your theme’s templates folder on the other site, or you can copy your blocks from the site editor and paste them directly into a new template within the editor on your other site.
You can export your templates by downloading your theme from within the Site Editor.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Export and click the Download icon.
This will download your theme files as a zip file, including your block templates in HTML format, to your computer.
Next, open the zip file and navigate to your theme’s templates folder. Find the template you want to import to your new site.
Using an SFTP program, log into the server of the destination site. Navigate to your theme’s templates folder and upload the template you downloaded earlier.
On the site you want to copy the block template layout from, open your WordPress dashboard and go to Appearance → Editor → Templates. Choose the template you want to copy and click the Edit icon. In the List view, select all items (you can also select them in the visual editor screen, but it’s more likely you might miss some nested elements).
Press Command/Ctrl + C to copy your blocks.
Next, navigate to your Templates area of the Site Editor in the site you want to paste your blocks into. Create a new template and assign it to a particular page, post, post type, etc. or create it as a custom template.
Click on the Type / to choose a block area in the visual editor and press Command/Ctrl + V.
Your blocks should now all be copied over.
Note: if this template needs to be assigned to a custom post type, you’ll want to make sure that you register that post type on your new site and that your template name matches the custom post type you’ve registered.
When you deactivate or delete a block template in WordPress, the impact on your content depends on how the template was used and whether it was saved as a custom template or as part of the theme files. But regardless, your post content would be retained, but anything specific to your block template would be lost.
If you delete a block template that’s being used in a page or a post, WordPress will follow the template hierarchy and look for the next most appropriate template to display your post content with.
For instance, if you created a custom block template and applied it to a specific post, then deleted that template, WordPress would default to single.html. If you deleted a block template that you saved as single.html in your theme files, then WordPress would default to singular.html or, if that doesn’t exist, index.html.
Optimizing load time and performance of pages using block templates in WordPress is not really any different than optimizing your site in general. Strategies include using efficient coding practices and leveraging caching and performance plugins. Here are some techniques you can use to achieve this:
<link rel=”preload” as=”font” href=”fonts/denmark.woff2” type=”font/woff2” crossorigin>You can monitor your site’s performance and get recommendations for improvement using tools like Google PageSpeed Insights, GTMetrix, and Pingdom. Regularly test your site’s performance to identify and resolve any new issues that arise.
If you are looking for a fairly comprehensive solution to get you started on the road to optimizing your site, Jetpack Boost will optimize your images and content, implement caching, and serve your images and videos via a CDN. Learn more about all of Jetpack’s WordPress performance tools.
In WordPress, there is no explicit limitation on the number of blocks you can include in a single template. However, keeping your page templates as simplified as possible for the functionality you require is the best practice.
If your block template layout is very long and overly complex, it increases the amount of HTML, CSS, and potentially JavaScript that needs to be loaded. This can slow down your page load time and increase database queries unnecessarily. It can also slow down the editor and make managing your template content more difficult.
In addition to performance issues, your site visitors may become annoyed and overwhelmed by lengthy pages and slow performance.
Rob works on building tools for creators and their audiences. He's focused on building an open, calm platform that will be loved by bloggers, newsletter publishers, podcasters, and readers alike. He's worked on marketing and product for 15 years, primarily at Automattic, Mailchimp, and UPS.
Explore the benefits of Jetpack
Learn how Jetpack can help you protect, speed up, and grow your WordPress site. Get up to 50% off your first year.
Explore plansHave a question?
Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions.
View support forum