If you work with the block editor, you have heard about the theme.json file, which allows WordPress theme developers to define and apply theme settings to various theme elements.

Introduced in WordPress 5.8, the theme.json file provides developers with control over the settings and styles of blocks in the editor. As the site editing experience has evolved to include blocks, the range of settings requiring management has expanded. The theme.json file centralizes these configurations, ensuring a consistent experience when applying theme settings and styles.

The theme.json file, located in the root directory of a WordPress theme, contains a JSON object consisting of key-value pairs. JSON (JavaScript Object Notation) is a standard format for representing structured data. The main JSON object is enclosed in curly braces, and each key-value pair is separated by a comma, which is essential except for the last pair in an object. A good code editor will highlight errors if commas are missing.

Schema validation in theme.json enables auto-completion in code editors, suggesting available options and values. To enable this, add the schema key and its value at the top of the file, available in the Block Editor handbook. This feature helps ensure correct syntax and provides descriptions of each option.

WordPress Core includes a default theme.json, which sets specific settings and predefined CSS variables. The settings key allows developers to extend or modify these settings and functionality. For example, enabling appearanceTools (disabled by default) allows control over border color, radius, style, width, link color, block gap, margin, padding, and text line height.

Replacing the add_theme_support requirements in the functions.php file, theme.json allows for defining custom colors directly within the JSON configuration. For instance, disabling custom colors globally can be achieved by setting settings.color.custom to false. Custom colors for specific blocks can also be enabled as needed.

Additionally, new CSS preset variables can be defined within theme.json. For example, to add a new colour to the palette, specify its name, hex value, and slug under the settings.color.palette key. These colours become available throughout the theme and can be applied globally or to specific blocks or elements.

For a comprehensive understanding of theme.json capabilities, refer to the Global Settings and Styles guide, the theme.json reference in the Block Editor handbook, and the Theme handbook.

Jane James is the founder of Alpha Omega Digital, and is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.

The post Getting started with theme.json in your WordPress project appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

If you have a lot of Block Errors in Gutenberg, here’s how to recover all of your broken blocks at once.

If you have a damaged block in Gutenberg, you may fix it by clicking the button that says “Attempt Block Recovery.” This will allow you to recover the broken block.

Easy. Problem fixed.

But what happens when you come across five broken blocks, ten broken blocks, fifty broken blocks, or even a hundred broken blocks? It would be an extremely time-consuming process to click on each and every “Attempt Block Recovery” button.

Because Gutenberg is still in the process of fast changing and Gutenberg plugins, such as ours, swiftly evolve along with it, it is inevitable that broken blocks will occur occasionally.

You can recover all of the blocks with only one command with the aid of our solution!

How to quickly and efficiently recover all damaged blocks in Gutenberg
Copying and pasting some code into the developer console of your browser will allow you to recover all of the broken blocks at the same time. Do not worry if you find it intimidating; we will walk you through it step by step.

This is how you can retrieve all of the broken blocks at the same time:

Edit the post on your WordPress website that contains the broken blocks while you are logged into your account.
To enter the developer console for your browser, on Windows you press CTRL + SHIFT + J, and on a Mac you use CMD + OPTION + J.
The complete code may be pasted into your developer console by cutting and pasting it, then pressing the Enter key:

If you run the code up top, all of your blocks ought to be recovered after a moment or two (depending on how long it takes for the recoveries to work). The situation is the same as if you had pressed each and every “Attempt Block Recovery” button. You will find that any damaged blocks that are included within reusable blocks will also be repaired.

Because the code does not store your page, make sure to refresh your post even if everything appears to be in working order.

Want to try this yourself?

Thanks to the team at Stackable for creating this auto block recovery repo on Github.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.

The post Block recovery in WordPress: how to fix broken gutenberg blocks to enable the visual editor appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

Since Gutenberg’s release with WordPress 5.0, Gutenberg has improved markedly. I love Gutenberg because it gives you out of the box elements. Not only that, compared to the old way of building out template files, you can build a standard website quickly and easily.

When replacing Beaver Builder, WP Bakery, or Elementor with Gutenberg, you will initially find it has less options out of the box- but what you lose in immediate functionality, you gain in site speed and SEO.

Technically Gutenberg is not a page builder- it is a block based content editor. What this means is that, instead of using markup in your php files, blocks are built in javascript and can drag and drop into the back end of your site.

Gutenberg lacks the huge navigation menu with infinite items, and infinite styling abilities out of the box. This means that yes, initially a lot of CSS customisations

Six reasons I prefer to build websites with Gutenberg

1. Low barrier to entry. Bloggers, marketers and non coders can quickly and easily build pages with ease.
2. Site Speed. Gutenberg is part of WordPress core, which means Gutenbergs structure is built into the WordPress framework itself. When you install a page builder, you are installing a software on top of a software, and the out of the box features significantly slow down your site.
3. Custom blocks. Built in React JS, Gutenberg blocks can be built by a developer custom to your business needs. Need a tabs element that scrolls horizontally? Custom blocks can be built to achieve design features that any business owner can drag and drop onto the page.
4. Hooked blocks. In Genesis development where you can hook sections of code into any section of the website, Hooked blocks in Gutenberg allow you hook blocks into the same registered hook areas of your site.
5. SEO. Going back to point 2, site speed is one of the highest value metrics google uses to rank your site. Site speed affects your domain authority, user experience, and bounce rate. Not only that, when you use page builders you end up with excessive DOM size- that is, a high markup to content ratio, which is ranked poorly as an SEO metric.
6. Less unforced errors. I use page builders only when client’s request them, and I have never had a smooth web build. Elementor, Beaver Builder, and the worst of all WP Bakery often malfunction- elements disappear, are suddenly deprecated, and the page builder itself freezes slowing down development time. It’s really nice making changes to a page, saving them and having those changes stay that way. Page builders often mysteriously revert back to previous versions, even after deleting your cache. Its frustrating and in the end it costs the client more money.

Control of page layouts

Gutenberg gives you a fair degree of control over content editing, but you couldn’t call it a true drag and drop editor. With the release of WordPress 5.3, columns are much more customisable, down the percentage width of each column.

Errors and speed

Gutenberg block content is saved in your SQL database, under the post_content database field. Page builder plugins either use short codes or save the content in custom fields, which can lead to other plugins causing errors displaying the content correctly.

When I build a client website in Gutenberg, I would say I average 5 plugins for a business website and 10 plugins including several Woocommerce plugins for an ecommerce store. In the grand scheme of things, these are low numbers. When I inherit a page builder based website, they usually have 20,30,40 or even 50 plugins installed.

Page builders have high Plugin dependencies, and non coders buy and use them because it achieves a certain design/function they want for a low-ish cost. The payoff is poor site speed. Not only that, but websites with high numbers of plugins as dependencies, are a down right nightmare to debug.

Downsides of Gutenberg

Although I am a Gutenberg developer, and use it on most web project builds, it would be remiss of me not to mention the use cases of where Gutenberg may not be appropriate so here we go:

• Because it is a block based content editor and not a page builder, there is no front end editing. This means a marketing or non technical person would not be able to build their site visually.
• Gutenberg has less responsiveness built into it, and a lot of CSS and particularly media queries are required to achieve the desire look on all devices. This won’t suit a non technical person building a website, or they will have to build what they can themselves and engage a developer to finish off the CSS.
• Out of the box, the amount of blocks available are much less than a page builder. This can usually be remedied with many of the Gutenberg extension plugins such as the ultimate addons for Gutenberg, or atomic blocks to add elements that are desired but no standard.
• Reduced control over page layouts. Gutenberg has improved in flexibility, but page builders do allow greater control down to the pixel, without any custom css.

Having just mentioned the downsides, I really must make a point: what you lose in initial functionality, you gain 100 times over in site speed and SEM. When trying to improve a page builder based website, I have only ever been able to get the site speed on GTmetrix to a D at Best. And thats using tools like Wp Rocket, Cloudflare, Imagify and so on.

Using Gutenberg, I can almost always get an A score, and considering this is considered the most important metric of Googles 200+ SERP rankings, I think this is the primary reason you should consider Gutenberg for your next web project.

Have you switched from WP Bakery or a page builder to Gutenberg? Comment below , I’d love to hear your thoughts.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Why Gutenberg is a better choice than Wp Bakery, Beaver Builder or Elementor appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

Since Gutenberg’s release with WordPress 5.0, Gutenberg has improved markedly. I love Gutenberg because it gives you out of the box elements. Not only that, compared to the old way of building out template files, you can build a standard website quickly and easily.

When replacing Beaver Builder, WP Bakery, or Elementor with Gutenberg, you will initially find it has less options out of the box- but what you lose in immediate functionality, you gain in site speed and SEO.

Technically Gutenberg is not a page builder- it is a block based content editor. What this means is that, instead of using markup in your php files, blocks are built in javascript and can drag and drop into the back end of your site.

Gutenberg lacks the huge navigation menu with infinite items, and infinite styling abilities out of the box. This means that yes, initially a lot of CSS customisations

Six reasons I prefer to build websites with Gutenberg

1. Low barrier to entry. Bloggers, marketers and non coders can quickly and easily build pages with ease.
2. Site Speed. Gutenberg is part of WordPress core, which means Gutenbergs structure is built into the WordPress framework itself. When you install a page builder, you are installing a software on top of a software, and the out of the box features significantly slow down your site.
3. Custom blocks. Built in React JS, Gutenberg blocks can be built by a developer custom to your business needs. Need a tabs element that scrolls horizontally? Custom blocks can be built to achieve design features that any business owner can drag and drop onto the page.
4. Hooked blocks. In Genesis development where you can hook sections of code into any section of the website, Hooked blocks in Gutenberg allow you hook blocks into the same registered hook areas of your site.
5. SEO. Going back to point 2, site speed is one of the highest value metrics google uses to rank your site. Site speed affects your domain authority, user experience, and bounce rate. Not only that, when you use page builders you end up with excessive DOM size- that is, a high markup to content ratio, which is ranked poorly as an SEO metric.
6. Less unforced errors. I use page builders only when client’s request them, and I have never had a smooth web build. Elementor, Beaver Builder, and the worst of all WP Bakery often malfunction- elements disappear, are suddenly deprecated, and the page builder itself freezes slowing down development time. It’s really nice making changes to a page, saving them and having those changes stay that way. Page builders often mysteriously revert back to previous versions, even after deleting your cache. Its frustrating and in the end it costs the client more money.

Control of page layouts

Gutenberg gives you a fair degree of control over content editing, but you couldn’t call it a true drag and drop editor. With the release of WordPress 5.3, columns are much more customisable, down the percentage width of each column.

Errors and speed

Gutenberg block content is saved in your SQL database, under the post_content database field. Page builder plugins either use short codes or save the content in custom fields, which can lead to other plugins causing errors displaying the content correctly.

When I build a client website in Gutenberg, I would say I average 5 plugins for a business website and 10 plugins including several Woocommerce plugins for an ecommerce store. In the grand scheme of things, these are low numbers. When I inherit a page builder based website, they usually have 20,30,40 or even 50 plugins installed.

Page builders have high Plugin dependencies, and non coders buy and use them because it achieves a certain design/function they want for a low-ish cost. The payoff is poor site speed. Not only that, but websites with high numbers of plugins as dependencies, are a down right nightmare to debug.

Downsides of Gutenberg

Although I am a Gutenberg developer, and use it on most web project builds, it would be remiss of me not to mention the use cases of where Gutenberg may not be appropriate so here we go:

• Because it is a block based content editor and not a page builder, there is no front end editing. This means a marketing or non technical person would not be able to build their site visually.
• Gutenberg has less responsiveness built into it, and a lot of CSS and particularly media queries are required to achieve the desire look on all devices. This won’t suit a non technical person building a website, or they will have to build what they can themselves and engage a developer to finish off the CSS.
• Out of the box, the amount of blocks available are much less than a page builder. This can usually be remedied with many of the Gutenberg extension plugins such as the ultimate addons for Gutenberg, or atomic blocks to add elements that are desired but no standard.
• Reduced control over page layouts. Gutenberg has improved in flexibility, but page builders do allow greater control down to the pixel, without any custom css.

Having just mentioned the downsides, I really must make a point: what you lose in initial functionality, you gain 100 times over in site speed and SEM. When trying to improve a page builder based website, I have only ever been able to get the site speed on GTmetrix to a D at Best. And thats using tools like Wp Rocket, Cloudflare, Imagify and so on.

Using Gutenberg, I can almost always get an A score, and considering this is considered the most important metric of Googles 200+ SERP rankings, I think this is the primary reason you should consider Gutenberg for your next web project.

Have you switched from WP Bakery or a page builder to Gutenberg? Comment below , I’d love to hear your thoughts.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Why Gutenberg is a better choice than Wp Bakery, Beaver Builder or Elementor appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.