Test Post

Once you have configured all your components (minus the themes), publish a test post. The content doesn't matter; just make sure that it contains headers, lists, at least one image, and possibly even an embedded video. Then, verify how that test post and the website structure (not the design) works with the default WordPress theme. If everything is in place, then you can move on to visual appearance.

Finally, Themes!

A website's perfect visual theme, in WordPress or anything else, is whatever maximizes its usability while satisfying the taste (or company policy) of its webmaster. Because WordPress makes it so easy to download and switch themes, I have one piece of advice: See how a theme looks on many different operating systems and devices (from smartphones to big monitors) as well as how quickly it loads. Then, choose a theme that has an open source license and the greatest number of users. This will decrease the possibility that development stops before you get tired of the theme. Finally, choose a theme that is already fully compatible with WordPress 5's new editor, Gutenberg, because posts using such themes look exactly the same in Gutenberg as they will look when published.

Enter Gutenberg

Gutenberg, introduced with WordPress 5, replaces TinyMCE and is responsible for most of the complaints. If you prefer TinyMCE, just run the Classic Editor plugin – until 2021, that is, when you will have to use Gutenberg anyway.

If you have never used TinyMCE, Gutenberg won't be a big deal, but it has been described as "the biggest transition in WordPress history." Gutenberg's goal is to make writing in WordPress as productive and pleasant as it is in platforms like Medium or Ghost. In Gutenberg, for example, you can work in Fullscreen or Spotlight mode and generally have much more control of your content's layout. Clicking on the wheel in the top-right corner opens tabs with all the options and settings for the entire post or the part you are currently editing.

Unlike TinyMCE, which handles each post or page as one monolithic entity, Gutenberg is a block editor (the source of most complaints). In Gutenberg, headers, paragraphs, buttons, tables, lists, videos, images, e-commerce, or polling widgets are each a separate block that you can see and format independently from other blocks. Also, you can drag and drop blocks to change each post's layout.

To add a new block, just click on the plus sign in the main window and choose its type. If you dislike clicking, type a slash, followed by the first letters of the type's name, and an autocompletion function will help you find and add that type block quickly. Access the full list of Gutenberg keyboard shortcuts by typing Shift+Alt+H. I strongly suggest bookmarking and printing WordPress 5's Ultimate Cheat Sheet [6].

In practice, most authors just need the Most Used or Common blocks (Figure 5), but many more are available. You will find tables and pull quotes in the Formatting section, and buttons, separators, and columns in Layout Elements. Use Widgets for short codes and "meta components" like the latest posts or categories. To embed video, tweets, and other similar content from external sources, see Embeds.

Figure 5: Gutenberg's nine "most used blocks" are enough for 90 percent of its users.

You can embed images or video clips previously uploaded in your WordPress Media Library or just type the URL (if they are publicly accessible online). If you already publish content on Vimeo, YouTube, Dailymotion, or Flickr, no typing is necessary: Install and activate the Remote Media Libraries plugin and give it your user ID for those services. You then will be able to see the list of all the corresponding content right inside WordPress and embed them with one click.

The most popular source for additional blocks is the Otter Blocks plugin. Among other things, it includes social media sharing icons and a block to embed Google Maps.

A post consists of three blocks: a header, a text paragraph, and an image. When you select a block, Gutenberg activates a toolbar with the main editing options for that block type (Figure 6). More advanced settings are accessible by opening the Block tab in the right panel (Figure 7). Posts previously created with TinyMCE will be treated as a single block, but you can split them into Gutenberg blocks by clicking on the three dots icon in the block toolbar and selecting Convert to Blocks. Do this only if the content doesn't translate well in the new WordPress 5 themes.

Figure 6: Clicking on a block activates a toolbar that shows the editing options for that type of block.

Figure 7: The Block tab lets you customize options for the selected block.

Clicking on the three dots icon also lets you access and edit the current block's source code.

Once you are comfortable with block-based writing, you can save your most frequently used block combinations as templates, which you can then insert in a post as a single block. To create a template, select the corresponding blocks, click on the three dots icon and select Add to Reusable blocks.