Hello friends, in my previous post “Do you know the latest version of WordPress 5.2.4 was released that fixes six major security flaws, dated October 14, 2019.”, I have mentioned that it is a short cycle release. I have also mentioned that the new major release of WordPress 5.3 is scheduled to be rolled out on November 12, 2019. If you have not read that post, I will recommend you to do that to understand what security flaws were fixed and what files were changed.
I am feeling very happy to cover this first (but obvious after WordPress official announcement) to write on this major update and doing the side-by-side comparison. In this, I will be answering what is new and how to update your WordPress website.
Yes, the long awaiting major WordPress 5.3 is released on November 12, 2019. You will see a link on your WordPress dashboard, Plugin section, Media section, Theme section or any other administration page about the update availability. It looks like below.
Note: If you want to start a fresh WordPress website then you might not see the 5.3 option in your one-click installers or CPanel or Plesk admin. You can install the best latest possible and then update using the link.
If you already have a website running on the older version of WordPress, I strongly recommend you to take a backup of everything (files and database) before upgrading it to 5.3. For this, you can use the application or tools provided by your Web Hosting provider. Alternatively, you can use plugins to take backup. I also suggest that if you have a free sub-domain account that you can use, then create a sub-domain, install WordPress, upgrade it to 5.3 and then install all plugins and the theme to check if they are compatible with WordPress 5.3 and there are no breaking changes. I have created https://testwp53.hanumanteysoftwaresolutions.com/ sub-domain for playing around and documenting my learning here about the latest version of WordPress.
What’s New in WordPress 5.3?
This major release of WordPress in November 2019, brings a lot of improvements. Below are the details.
Block Editor in WordPress 5.3
The Block Editor in WordPress was first introduced in WordPress 5.0 version. I am sure many of us keep using the classic editor of WordPress or use Plugin in WordPress 5.0 or higher. In the latest release of WordPress, it got a lot of improvements.
Let’s look at the side-by-side comparison of Version 5.3 VS 5.2.
Note: Tab on the left is WordPress 5.3 and the tab on the right is WordPress 5.2. Both tabs are scaled at the same Web Page zoom level.
Visually they both look quite identical. However, as per the WordPress announcement, the Block Editor got new blocks to work with and improvements. Let us dive deeper. Shall we?
When you click the ⨁ icon, you can see different blocks available for you to check. They are divided into different categories. The first one (after Most Used) is the Common Blocks.
As you can clearly see in WordPress 5.3, you still be able to see the navigation bar but on WordPress 5.2 it is not accessible in a smaller window. In addition, the width of the components menu is smaller in WordPress 5.3 as compared to WordPress 5.2.
Let us look into Common Blocks.
There is no new block element added in this section. However, the icon of the Heading block is now more relevant in WordPress 5.3 with letter H instead of letter T in the older version of WordPress.
We have the following blocks under the Common section:
- Paragraph – Available in both versions
- Image – Available in both versions
- Heading – Available in both versions
- Gallery – Available in both versions
- List – Available in both versions
- Quote – Available in both versions
- Audio – Available in both versions
- Cover – Available in both versions
- File – Available in both versions
- Video – Available in both versions
We have not found any new block added to this section. However, the icon of the Verse block is changed. We have the following elements in the Formatting Block.
- Code – Available in both versions
- Classic – Available in both versions
- Custom HTML – Available in both versions
- Preformatted – Available in both versions
- Pullquote – Available in both versions
- Table – Available in both versions
- Verse – Available in both versions
In this section, WordPress 5.3 provides a new element named Group. The following is the list of block elements under the Layout section.
- Button – Available in both versions
- Columns – Available in both versions
- Group – Available only in WordPress 5.3
- Media & Text – Available in both versions
- More – Available in both versions
- Page Break – Available in both versions
- Separator – Available in both versions
- Spacer – Available in both versions
The widget blocks section does not have any new element added to it. However, the icon of Archives and Calendar is changed a little. Please refer to the screenshot below of the side-by-side comparison of WordPress 5.3 and WordPress 5.2.
The following is the list of Widgets available in both newer version and older version of WordPress
- Shortcode – Available in both versions
- Archives – Available in both versions
- Calendar – Available in both versions
- Categories – Available in both versions
- Latest Comments – Available in both versions
- Latest Posts – Available in both versions
- RSS – Available in both versions
- Search – Available in both versions
- Tag Cloud – Available in both versions
Embed Block Elements
Last but not least comes the Embed Block elements. These are those elements that allow you to add third-party content such as video, images, slides, etc. This is a long list and not limited to YouTube, Twitter, Facebook, Instagram, Spotify, SoundCloud, Flicker, Vimeo, Hulu, Kickstarter, Reddit, Screencast, Slideshare, and Tumblr to name few. They all are identical to both of the versions.
Group Block Element
This block element is introduced in WordPress 5.3. Like the name suggests, you can group multiple elements into this element. There are two ways of doing this:
First, select multiple elements you want to group together and change the block element to the group. Alternatively, you can add the group element first, and then add your desired elements into it.
Let us have a look through the below animation by grouping existing elements together.
Now, let us look at how you can add any element to a group element.
New Twenty Twenty Theme
A new theme by WordPress team, Twenty Twenty, is launched with WordPress 5.3. It uses the new block editor. Using a new block editor gives this theme flexibility to create endless layouts for your landing page or blogs.
Large Image Support
I am not sure if anyone will use this feature as the fullest as it will surely decrease the website load time for users. In addition, it will consume lots of memory and network bandwidth. However, this is something one can try in this new version of WordPress 5.3 where high-quality pictures are needed to be displayed.
High-quality images are usually greater than 2MB, so you have to make sure that you configure your server / PHP / WordPress to allow uploading of files less than or equal to 10MB in size.
Heading Element Changes
Apart from changing the icon from letter T to H, color support is added in the WordPress 5.3 Heading block element.
Automatic Image Rotation
If your image has orientation data embedded (EXIF values (0 degrees, 90 degrees, 180 degrees, and 20 degrees)), the image will auto-rotate after you upload it into your Media Library.
Side Note: This is something that I have not tried. I will be trying it soon and will update my findings here.
New Design and User Interface
In this new release, there are a couple of changes made to the WordPress User Interface. We have noticed a different color border and background color changes in this release.
PHP 7.4 Compatibility
Even though the newer version of PHP 7.4 has not yet officially released, WordPress 5.3 is fully compatible with it. PHP 7.4 is scheduled to be released for all on November 28, 2019. PHP 7.4 version is feature freeze on July 18, 2019.
Apart from this, there are a few more changes/features added to WordPress latest releases, such as Date and Time fixes for unified timezone retrieval, periodically admin email verification and making easy to identify issues in the Site Health Check. Please refer to the below screenshot of the Email Verification screen.
WordPress Block Elements
Since WordPress 5.0 we see Block Editor. It has lots of block elements that you use while creating a Post or Page etc. In this section, I am going to cover all the block elements and their difference in WordPress 5.3 and 5.2.
Paragraph Block Element
The paragraph block element is the default block element, which will be added automatically every time you press the Enter key while adding/editing the Post or page. It is also by default added to a new Post just below the Main Heading (H1) of your post or page.
As the name suggests, it is a simple text element where you can add one paragraph of text. It may include links, source code, or an inline-images.
Heading Block Element
The heading block indicates the start of a new topic or section. You can add heading levels from 1 to 6 to structure your document well. The Heading 1 or H1 is the main heading of the page or post that tells the context of the entire post or page. Any higher number heading will become the child of the lower number element. Example, Languages (H1), Types of Languages (H2), Regional Languages (H3), Foreign Languages (H3) to form the bellow structure.
- Languages – H1
- Types of Languages – H2
- Regional Languages – H3
- Foreign Languages – H4
- Types of Languages – H2
As stated earlier that the icon of the Heading block element is now changed to letter H. It makes it more relevant than comparing to letter T. In addition, now you can change the text-color of the Heading element. Alignment of text is now directly accessible at the element level whereas, in the older version, it is available under the block settings. Please have a look at the below side-by-side comparison of the same.
Image Block Element
As the name suggests, it is used to add any (single) image media to your post or a page. In the latest version of WordPress Block Editor, the Circle Mask option is added as in Block Style. The default is a square or rectangular image (depends on your image dimension). You can change it to a circle mask for profile photos of your team or something you want to show within a circle box instead of a regular box.
Gallery Block Element
As the name suggests, it is used to show multiple images in the form of a gallery. There is no change in this block element in the newer version of WordPress. However, in WordPress 5.3, you get an option to group it with other block elements.
List Block Element
This element is used to display order or unordered lists. If you want to know more about Lists, please check out my detailed article on HTML Lists here. There is no change in this block element in the newer version of WordPress except that you get an option to group it with other elements.
Quote Block Element
This element is a text-only element to display a quotation for and a citation (author of the quote or source of the quote). In both WordPress versions 5.3 and 5.2, there are two types of styles; Default and Large. However, in the newer version of WordPress, you will get a nice preview of Default and Large styles and a drop-down to select the desired style. Please have a look at the side-by-side comparison of the same.
Audio Block Element
The Audio block element is used to upload audio files such as .MP3. There is no change in this block element in the newer version of WordPress. However, in WordPress 5.3, you get an option to group it with other block elements.
Cover Block Element
The Cover block element is a mix of an image as in background and text as a heading (large font size) on top of it. It displays the text in the middle (vertically) and you can horizontally align it to left, center, right, full width, or wide width.
There is no change in this block element in this update of WordPress.
To update your WordPress, you can choose either use the one-click update or manual update. In this post, I will be covering the One-Click WordPress Update process. I will be adding detailed steps for manually updating WordPress later, so stay tuned.
The One-Click WordPress Update
The one-click WordPress update is the easiest way to update your existing WordPress website. You need to perform the following steps.
- Take a backup of your WordPress Website
- Login to your FTP account using your preferred FTP client, such as FileZilla.
- Download all files from your host to your local computer. Alternatively, some hosts do provide taking backup in a single compressed (.ZIP) file that you can download.
- Verify that you got all the files from your host and are accessible on your system.
- Take a backup of your WordPress Database
- Login to your CPanel or Plesk account provided by your host.
- Find the Database or PhpMyAdmin option and launch PHPMyAdmin. You can connect with your host if you do not find the PHPMyAdmin option.
- Click on the Database button in the middle pane in your PhpMyAdmin panel.
- Select the database from the left pane, which you created when you installed WordPress. If you are not sure about the database name, select each database one by one excluding information_schema, mysql, performance_schema,
and phpmyadmin and perform the below steps.
- Ensure that you have selected an appropriate database.
- Click the Export button in the middle pane.
- Select the Custom option.
- Ensure that all the tables are selected.
- Ensure that the SQL option is selected in the Format drop-down list.
- Ensure that the None option is selected in the Compression drop-down list.
- Select the Save output to a file check-box.
- Ensure that the Add DROP TABLE checkbox is selected.
- Click the Go button. The .SQL file will be downloaded after the backup is done.
- Deactivate all plugins
- Login into your WordPress dashboard.
- Select Plugins from the left pane.
- Select all Plugins.
- Select Deactivate in the Bulk Actions drop-down list.
- Click the Apply button.
- Update WordPress
- Login and Navigate to your WordPress dashboard.
- Ensure that the link Please update now is visible followed by the WordPress version number.
- Click the Please update now link. The WordPress update page will be displayed, as shown in the following figure.
- Click the Update Now button. When updated, you will be redirected to About WordPress 5.3 page (about.php).