Block Editor Tools

Creating a new page or post with the Block Editor Tools.

Jul 2020 8 minutes

To watch the video, login or sign up for FREE

Block Editor Tools video screenshot


Creating a new page or post.

To get started you can hover over the menu item and click add new, or you can click on posts or pages and select add new from the list that is displayed.

The first thing you will want to do is give the new post or page a title and generally, I would save it as a draft to make sure we have got that saved from the get-go.

Now the new block editor provides a completely re-designed editing experience and along with it a new set of tools which to edit a page these might be completely new to you or you may find a lot of the elements that you are already familiar with.

At the top of the page is the main block editor toolbar, and this new toolbar contains a number of new icons and some familiar ones as well.

The block inserter icon is used to insert new blocks into your content and clicking this will pop up in a small panel that gives you access to all the different types of blocks that you can insert. I will pop some text in here just to give you an example. The undo icon allows you to undo your most recent change like that and the redo button allows to redo your most recent change like that.

The content structure button provides information about your page content and it will show you how many words, headings, paragraphs and blocks your content contains along with showing the document structure and providing links to each of the headings and your content.

If we create another heading and another paragraph. You can see now paragraph heading, paragraph and starting to outline the document structure.

This is really helpful especially for those with SEO and accessibility it gives you a good overview without having to scroll through the whole thing or highlight it and see what it actually was if it was a particular heading or style a different way.

On the right-hand side, you have got the draft button so we have already saved that as a draft which is very handy and it will all save in the background occasionally as well.

The preview button will allow you to preview your page on the front end of what the visitors will see and that will open a new tab, a window like so. So this is my page title, my first paragraph, second heading, second paragraph etc.

The publish button allows you to publish your post or page and put it live so unlike previous versions of WordPress publishing your page is now a two-step process after clicking the publish button a first time you are then shown this new panel for the confirmation message and another publish button.

This panel also allows you to change the visibility of your content and a publish date and time. So this just means you might want to password protect the page, you might want to schedule the page as well and if you have got any last-minute sort of changes you can pop in a new keyword for the tags etc.

If you are quite happy with that, we can click that and it tells us that it is now live and gives us the web address, the URL also known as the slug.

Now if we were to make any further changes here so if we create a new heading. Can’t spell today. There we go. You will now find that the publish button has changed to update and that just means it will update the content I have changed and push that live now when I click update and it is prompting us to view that post to make sure everything is alright but you can still check the preview as well.

The setting sidebar shows all the settings for your page of course including elements like adding a featured image, specifying any categories or tags if you are on posts and if you are a page you can select any templates that apply in your theme.

It also shows and hides that as well. So there are lots of sub-categories here that you can have a look through and just check things over like the link and the categories as I said.

And the last icon is this sort of, stacked three button-like dots and it is the show more tools and options icon and this button provides access to a number of ad-hoc settings so you can turn it on or off the top toolbar, change it to spotlight mode.

You can also display your content using the visual editor or using the code editor which allows you to see the underlying HTML. You can also show the block editor tips so that they come back on and you can view a list of keyboard shortcuts and copy the content in your page with a single click as well which is pretty handy.

That is all your shortcuts, copy the content, copy to my clipboard so reusable blocks we will not cover in this example right now.

We will pop back here and code editor, this is just hinting at how they are breaking down the page with some HTML tags here.

Just a note with the new code editor features, the block editor saves your content in a slightly different manner than the old classic version. Previously, WordPress would save your content as a simple chunk of HTML while there is still HTML in your underlying content as you can see here it wraps it in these individual sections as you can see with these comments as they are called.

Comment tags, it uses these comment tags to differentiate the various types of blocks your content is contained within so while you can still edit your HTML using the code editor view with the block editor.

Please take extra caution not to remove or change any of these HTML comments surrounding your content, doing so will cause one or more of your blocks to not display correctly once you switch back to the visual editor mode and may even cause you to lose content.

If you feel you do need to edit the block HTML it is safer to use the edit as HTML option under the more options icon for each individual block.

If we just exit code view, tap in here, click the little dot dot dot, edit as HTML that would be better and make your changes there if you were going to apply a class, for example, red, and that might change that text red based on what is in your theme already.


Register now for free

OctoPress gives you the knowledge and insights to manage your WordPress website.

Sign up today!