This page describes the Block Editor, introduced in WordPress 5.0. This is the default editor, but if you prefer to use the original WordPress editor you can switch to the Classic Editor.
Whether you are editing pages or posts, the editor is identical. You can edit an existing page to update it, or you can create a new page. To get started you can create a new page. This new page will not be visible on your site unless you create a link to it or add it to the menus.
Add a new page
To get started select Pages on the left sidebar. This will show you a list of your existing pages and also give the option to Add New.
On the right side of the screen you will see a panel with two tabs, Document and Block. If you can’t see that panel, click on the Gear icon at the top right of the page.
The Document tab shows properties of the page/post as a whole, while the Block tab shows properties of the block you are currently working on, be it a title, paragraph, image or whatever.
Set the page title
The first thing to do with a new page is to give it a title. This will be displayed at the top of the page and it will also show on the browser tab when the view the page. The title of the page you are reading now is Editing Content.
After you enter the title, a page link will be generated for it, which you can see on the document tab under Permalink. This is the URL used to access the page. WordPress will generate this automatically based on the title, but you can edit it if you want a snappier URL. The permalink for this page is editing-content but I could have changed it to simply editing if I wanted something shorter. Note that if you edit the title block subsequently, the permalink will not change automatically but can still be edited manually.
Edit the page content
You are now ready to start editing the page content. Where the classic editor had controls a little like a word processor, the new block editor is rather different and you build the page using blocks of content, which is the way most web design tools work. As previously explained, most of the styling is done by the theme.
The icons at the top left of the screen are, from left to right, Add Block, Undo, Redo, Content Structure, and Block Navigation. If you click on the + sign to add a block you will see a list of all block types available.
By default you will enter your text in Paragraph style, which is what makes up most of the text on this page. You can also insert Title blocks with several different heading styles to divide your page into sections.
Individual words and phrases can be made bold or italic (but not underlined) and text can be coloured. Hover your mouse over a button to find out what it does.
There are many types of block and you can find a comprehensive guide to using the block editor over at Easy WP Guide.
Be careful with pasting
If you paste text from a Word document then be careful that Word’s formatting doesn’t get pasted in as well. Although it may seem appealing to use all the existing effects it will cause problems when viewed on other peoples’ computers and especially on mobile devices. There is an option on the toolbar to Paste as Text (clipboard with a ‘T’ on it) which you should use when pasting in formatted text. Once pasted in you can use the WordPress styles to style it as you wish.
If you want to include a table you should use TablePress instead as it produces web-friendly tables.
If you want to embed a larger document, such as a spreadsheet with your club accounts, see the Embedding Documents section instead.
You can also upload a separate file such as a PDF document and create a link to it on you page so it can be viewed and downloaded (see below).
When you insert an image block you will see several options in the Block panel to control size and alignment.
If you left- or right-align an image then on a wide screen the text will flow round it on the opposite side. If you centre-align it then the text remains above and below the image.
The Link To option controls what happens when you click on the image. The most useful options are None which means it is just a plain picture, or Media File, which will open the image at full size in a picture viewer.
Find out more on the Easy WP Guide page for images.
When viewed on a small screen (e.g. a mobile phone) the left- and right-aligned images images will instead be centred as there is no space to wrap text around them. If you prefer these images to be left-aligned in this case you can do so by opening the Advanced section of the Block tab and entering narrow-left in the Additional CSS Class box.
Adding a gallery
As well as adding single pictures you can also add a gallery. This is an array of pictures and it is particularly useful for showing a set of pictures of an event, or a list of committee member photographs. In both these cases you would show a set of smaller thumbnail images on the main page, and have the link set to Media File which allows you to open any image in the picture viewer and browse through the full size images. You can find out more on the Easy WP Guide page and there are some additional tips on the Galleries and Photos page. There is an example of a gallery on the Ambridge demo site.
Adding PDF files
For items such as your club constitution you may want to store this as a separate document. Clubs often maintain these items as a Word document and then upload a PDF version to the website. It is not possible to display PDF files directly on the web page but you can add it to your media library and then add a link to it on your web page.
If you need to update the file, the easiest way is simply to upload a new file to replace the existing one, and the link on your page can stay unchanged.
Adding news items
New items are created as a new Post. Editing these is exactly the same as for pages but there are a couple of other items of interest.
You can change the publication date on the post, for example to make it match the date of your meeting. Click on the date next to where it say Publish and set whatever date you want.
Your blog page may include a small picture next to each entry, as it does on the Ambridge news page. To select an image to use there you need to set the Featured Image from the Document tab on the right.
If you edit an existing page you may well see a Shortcode block with the [ / ] icon and text in square brackets such as [table id=1 /]. This is what is known as a Shortcode and it is used either to insert an object defined elsewhere, or to create an effect. There is a full list on the Shortcodes page.
It is often useful to create a link from one page to another. This is discussed in more detail on the Menus and Links page.« Pages, Posts and Media Home Editing Content (Classic Editor) »