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.
Log in to Edit
It almost goes without saying that you need to be logged in to the site in order to edit it. However it is also true that if you are able to edit the site then you must be logged in!
This is a screenshot from a demo site. If you see an (Edit) link at the bottom of a page then you are logged in.
If that is the case then you are seeing a privileged view of the site and not the same view as the general public sees. Don’t worry, other people will not be able to edit your site!
You should also see a black menu bar across the top of the page if you are logged in. Hover on the item near the top right, where it says (in my case) Hi, admin to reveal a drop-down menu which gives you the option to log out. Wait for the menu to drop down, then go to the Log Out item and click on that.
Edit an existing page or add a new one
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.
Editor Layout
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.
Fullscreen mode
When you enter the editor, the editor operates in the full browser window and the top and left menu bars disappear. This makes it look more like a word processor, but can also be disorienting. If you want the menus back again, click on the 3-dots in the top right corner and then Fullscreen mode.
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.
Paragraph or New Line
There is a difference between a new paragraph and a new line within a paragraph. A paragraph is normally spaced away from the previous paragraph, but sometimes you want text broken into lines without extra spaces. Contact details or a venue address are common examples of this, as shown below:
The Queen’s Arms
Felpersham Road
Ambridge
FP2 3AM
The way to create a newline within a paragraph is to use Shift-Enter instead of Enter to create the new line. The same technique is used in word processors such as Microsoft Word.
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. Almost all web browsers have an option to paste as plain text. In Windows the keyboard shortcut is Ctrl-Shift-V or Cmd-Shift-V on a Mac. 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.
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).
It is possible to view Office format documents although we don’t generally recommend it. Web content works best when it’s designed for web use, so that it is readable on small mobile screens as well as large desktop monitors. But it is possible to do, and we can install a plugin if you need this facility. See the section on Embedding Documents.
Adding Pictures
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.
If you do choose to left- or right-align an image, then the text which follows will appear to the side of the image, flowing round it. If the image is large and the text short, you may find that the following item is also placed to the side of the image, when you want it to sit underneath. To avoid that happening, select the last block of text that you want to be at the side, open the Advanced pane and add clearfix to additional CSS Classes.
The Link icon on the picture toolbar controls what happens when you click on the image. The most useful options are to leave it blank, 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 a list of people
Some churches like to include a list of PCC members, 100 Club members, etc. If there are a lot of these, the best way to do this is to enter the names as a bullet point list and then use the Advanced panel to add a special people-list style to display the list in columns, without the bullets. On narrower displays, the number of columns will be reduced automatically.
- Neil Carter
- David Archer
- Jim Lloyd
- Mike Tucker
- Brian Aldridge
- Tony Archer
- Linda Snell
- Jolene Perks
- Justin Elliot
Adding PDF files
For items which change infrequently such as a Gift Aid form, you may want to store this as a separate document. Churches 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 blog/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 an event. 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, to show on the summary listing page. To select an image to use there you need to set the Featured Image from the Document tab on the right.
Shortcodes
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.
Links
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 Up Editing Content (Classic Editor) »