Using the block-based editor versus the code editor

As we've discussed, WordPress comes with a new block-based editor that's meant to make creating web pages easier for most users, even if they have no prior experience with website management. However, if you are comfortable with coding and HTML, you might want to take a peek into the code editor that's available in WordPress as well. This can be particularly useful if you want to add special content or styling that's not otherwise possible to achieve using the block-based editor.

To switch from the visual editor to the code editor, click on the three dots that are in the top-right corner of the screen when editing a post, and then click on Code Editor. Refer to the following screenshot:

You'll see the post you're currently editing in all its raw HTML glory. Just to give you an example, here's what one of the initial posts created for this book looks like when viewed in the Code Editor:

Although this panel lets you do whatever you wish, you also need to be careful not to break the HTML structure of the document. For this reason, it's perhaps not a good idea to get into these sorts of modifications until you get a basic understanding of how an HTML document is structured.