Each individual piece of content in your page will be a block. Even individual paragraphs will be seperate blocks. The Block Editor provides blocks for all your common content such as paragraphs, headings, ordered and unordered Lists (i.e. bullet points), quotes, images, galleries and any other content.
Every block has its own toolbar menu that appears at the top of the block (or at the top of the screen if the Top Toolbar option is turned on). The icons that appear will depend entirely on the type of block. For example, the icons shown on the Heading Block toolbar will be different to the icons for a Gallery Block.
Most blocks will display a Change block type icon for converting the selected block from one type to another. Unfortunately, the Change blocktype icon is different for every type of block, but for each block though, it will be the icon in the toolbar that represents that block type. When you hover your cursor over the Change block type icon it changes to an icon that looks like two curved arrows ().
For blocks that allow you to select and/or upload a file, such as the Gallery, Image, Audio and Video blocks, the toolbar will display an Edit icon () that allows you to edit the block by selecting different files.
Every block will also display a More options icon (). The More options icon allows you to:
When inserting blocks using the Block Inserter popup panel, you’ll notice that they’re sorted into different sections based on their type. You can show/hide each section by clicking the small arrow icon next to each section title. At the very top of the Block Inserter is a search field that allows you to filter the list of blocks shown to make it easier to find the block you’re looking for. The search field will filter the list based on the blocks name and type. For example, typing ‘im’ in the search field (without the quotes) will show you a list of blocks that either start with, or are related to images, such as the Image Block, Instagram Block, Gallery Block, Media & Text Block etc….
The first section of blocks within the Block Inserter is the Most Used Blocks. The blocks that appear in this section will change based on the blocks that you’ve added to your content. As the name suggests, this section contains your most used blocks.
The remaining sections include the following:
This section contains all the basic content type blocks such as the Paragraph Block, Heading Block, Gallery Block, Image Block, list Block, etc..
The Audio Block allows you to embed a simple audio player into your content. After inserting the Audio Block, click the Upload button to upload a new audio file to your media library or click the Media Library button to show your media library and select an existing file that you’ve uploaded previously. Clicking the Insert from URL button allows you to select a media file that exists at some other URL.
Once you’ve added your audio file to your block, there are further options available in the Settings Sidebar. You can select Autoplay to have the file automatically play, and you can select Loop to have the audio continuously loop over and over again.
The Cover Block allows you to add an image or video into your content with an optional coloured overlay and text. The Cover block is great for page headers.
After adding your image/video, click the Write title… placeholder on the block to insert your cursor within the block. You’re then able to type in some text that displays over the centre of your block.
Once you’ve added your image or video to your block, there are further options available in the Settings Sidebar. Selecting the Fixed Backgroundoption sets the image or video as a background image/video. This has the effect of your page sliding over the top of the image/video when you scroll the page. When this option is not selected, the image/video will simply scroll along with the rest of the content on your page.
The Focal Point Picker allows you to change the alignment of the image, and where the main focus point is. Depending on the size of your image and how it’s displayed by your theme, you may or may not see much of a difference when changing this.
You can also select an overlay colour by selecting one of the colour swatches or by selecting a custom colour. Use the Background Opacity slider to change the opacity of your selected colour. This has the effect of allowing you to tint the image or video colour which can help your text stand out more.
The File Block allows you to create a text link, with an optional button, to one of your uploaded media files such as a PDF or Word Doc. After inserting the File Block, click the Upload button to upload a new file to your media library or click the Media Library button to show your media library and select an existing file that you’ve uploaded previously.
Once you’ve added your file to your block, there are further options available in the Settings Sidebar. You can choose to link to the media file itself, or link to the WordPress attachment page for that file. You can also elect to open the link in a new tab along with electing to display a Download button with the text link. You can change the text on the button by clicking on the button and typing in your new text.
The Gallery Block allows you to add an image gallery. After inserting the Gallery Block, click the Upload button to upload images to your media library or click the Media Library button to show your media library and select existing files that you’ve uploaded previously. Alternatively, simply drag ’n drop your new images onto the Gallery Block and they will be automatically uploaded to the Media Library and inserted into the Block.
Once you’ve added your images to your block, there are further options available in the Settings Sidebar. You can choose the number of columns that your image gallery should display. You can also elect to have your thumbnails cropped so that they align more evenly.
Using the Link To dropdown field, you can choose to link each gallery image to the media file itself, or link to the WordPress attachment page for that file. Alternatively, you can also choose not to have any links on your gallery images.
The Heading Block allows you to insert an HTML Heading into your page. By default, the heading will be a H2 but you can change this using the icons on the Heading Block toolbar or in the Settings Sidebar.
Once you’ve added your text to your block, there are further options available in the Settings Sidebar. You change the HTML level for the heading (i.e. H1…H6) along with the alignment for your heading (Left, Centered or Right aligned).
The Image Block allows you to add an image to your content. After inserting the Image Block, click the Upload button to upload an image to your media library or click the Media Library button to show your media library and select an existing file that you’ve uploaded previously. Alternatively, click the Insert from URL button to enter the URL of the image you would like to display. You can also drag ’n drop your image onto the Image Block and it will be automatically uploaded to the Media Library and inserted into the Block.
Once you’ve added your image to your block, there are further options available in the Settings Sidebar.
Alternative Text can be added to your image using the Alt Text field. You can also choose to link the image to the media file itself, link to the WordPress attachment page for that file, or enter in a custom URL for the link using the Link To Dropdown field. You can also select ‘None’ if you don’t want your image to have a link.
If you want to change the size of your image, there are a number of ways to do it. You can use the Width and Height fields to set the exact pixel width of your image, or you can use the percentage buttons (e.g. 25%, 50%, 75%, 100%) to change the width accordingly. Alternatively, you can also select the size from the Image Size dropdown field. The default WordPress image sizes are available to select (e.g. Thumbnail, Medium, Large or Full Size), and depending on your theme, you may also have other sizes available to you as well.
You can also change the size of the image using the drag handles on the image itself, within the block. Simply position your cursor over one of the blue dots that appears on the edge of the image and then click and drag the image to the size that you want.
When resizing your images, it’s always best to only reduce the size, and not enlarge. If you add a small image to your block, and then increase the size, the image will become pixelated and wont appear crisp when viewing your page.
To display a text caption below your image, click in the Write caption… section just below the image and type in your caption.
The List Block allows you to add ordered and unordered lists (i.e. bullet points) to your content. After adding your list items, you can select the appropriate icon on the Block Toolbar to change between an ordered list and an unordered list.
The Paragraph Block allows you to enter a paragraph of text. Each paragraph is a new block so when you hit the Enter key to start a new paragraph, a new Paragraph Block will be automatically inserted as you continue to type.
Once you’ve added your content to your Paragraph Block, there are further options available in the Settings Sidebar.
You can change the size of the text using the Font Size dropdown or the number field next to it. The Dropdown field has some preselected sizes such as Small, Normal, Medium, Large and Huge. The exact size of these, and the names, will be dependent on the theme that you’re currently using. If you want to select an exact pixel size, you can use the number field next to the dropdown to enter an exact number. Click the Reset button to reset the Font Size back to its default size.
The Drop Cap switch allows you to turn the first character in the paragraph to a Drop Cap. A Drop Cap is where the first letter of a paragraph is enlarged to “drop” down two or more lines. Drop Caps are typically used to grab a readers attention. The Drop Cap will only display when the block is selected. When you’re adding content to your paragraph block, or editing existing content, the first character will display the same size as the rest of the paragraph text.
The background and text colour can also be selected using the Color Settings in the Settings Sidebar. By default, there are a number of pre-selected colours to choose from as well as a custom colour picker, for selecting any colour. Depending on your theme, the available colours may be different to the default colours, so as to match the styles within that theme.
If the colour combination that you select for the background and text are hard to read, you’ll be prompted with a warning advising you that “This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color“. In this instance, it’s advisable to use either a brighter background and darker text colour, or a darker background and a brighter text colour.
The Quote Block allows you to add a quote along with a citation.
Once you’ve added your content to your block, you can select from one of two different styles using the Styles panel in the Settings Sidebar or by clicking on the Change block type icon on the Block Toolbar.
The Video Block allows you to add a video to your content. You can select a video that you’ve previously uploaded to your Media Library, or you can upload a new video. You can also just specify the url for a video if you know it. Like the Gallery and Image Blocks, you can also drag ’n drop your video onto the Video Block and it will be automatically uploaded to the Media Library and inserted into the Block.
Once you’ve added your content to your block, there are further options available in the Settings Sidebar. You can set the video to autoplay and Loop, as well as mute the sound. You can also hide the video controls (i.e. Play/Pause, fullscreen buttons etc.) and specify a poster image for the video. This latter option is really useful if your video doesn’t include its own thumbnail image.
It’s important to note that this block is different from the YouTube and Vimeo Embed blocks. If you want to embed a video from YouTube or Vimeo, then you should insert the YouTube Embed Block or the Vimeo Embed Block. If you try to paste a YouTube or Vimeo URL into a Video block, it will automatically convert the Video Block to a YouTube Embed Block or a Vimeo Embed Block, as appropriate. The same goes for other video sharing services such as VideoPress. If you try to insert a VideoPress URL into the Video Block, the block will automatically convert to a VideoPress Embed Block. If your block converts to one of these Embed Blocks, you wont have the same options available to you in the Settings Sidebar as you would for a Video Block.