![\"\"](\"https:\/\/www.bronco.co.uk\/our-ideas\/wp-content\/uploads\/2018\/12\/Blank-Screen.png\"){kind=spacer}
<\/a><\/p>\nDifferent blocks<\/h3>\n
To create a post, you need to add a new block. This might be a simple Paragraph<\/strong> block that allows you to simply type text into a box; it might be an Image<\/strong> block, where you can insert a picture. When you click on the \u201cAdd Block\u201d button, which is either found at the top left side of the editor, as shown in the image below, or flashes up alongside your content or between blocks when you hover over these areas, you\u2019ll be given a number of options.<\/p>\n It first shows you your Most Used<\/strong> blocks followed by Common Blocks<\/strong> and other options, such as Formatting<\/strong> (blocks that will allow you to switch to Classic mode, HTML etc.) and Layout Elements <\/strong>(blocks such as Columns, Page Breaks and Separators). You may also have other options that are unique to your specific site theme or from plugins you\u2019ve downloaded \u2013 see our tip number 9 for some examples of these.<\/p>\n NB<\/strong>: As long as you know the basics on where to begin with adding a new block, the rest is fairly user-friendly, but we\u2019ll go into some more detail on what specific parts, such as the Information Button, do later in this article.<\/p>\n Including images in your blog posts has never been easier thanks to the new Block Editor. There is a vast array of options, all very intuitive and user-friendly, to allow you to insert images into a post easily and with a greater degree of freedom over size and placement.<\/p>\n To insert a single image in your blog post, you simply add a new Image Block<\/strong>:<\/p>\n From here, you can see the options, below the dropdown for a new block, to Upload<\/strong> an image directly, select from the Media Library<\/strong> or Insert from URL<\/strong>, as was possible in the old editor. But these aren\u2019t the only options:<\/p>\n You can easily grab an image from your computer files by dragging and dropping it into the Image Block you\u2019ve already created.<\/p>\n Or you can simply create a new Image Block by dragging and dropping the image where you want it between existing Blocks in your post. Make sure the blue line appears so that it drops into the right place:<\/p>\n In addition to dragging and dropping, the new editor also gives you the ability to copy and paste an image, creating a new Image Block. This is a very simple function that can save a lot of time and effort.<\/p>\n One of our favourite options for the new Block Editor is the ability to use multi-column layouts for your content. This was always a sticking point with the old editor \u2013 users would need to work around it with additional plugins or a particular theme with a page builder to get around it. Now you can simply add a Column Block<\/strong> which allows you to add whichever type of block works for your purpose \u2013 including paragraphs, images, collages, quotes and more. This gives you the freedom to layout your post however you like:<\/p>\n The above image shows this as it looks in the Visual Editor where you can make changes; see below for how it would look live on the page:<\/p>\n In addition to inserting individual images on the new editor, you can easily create a new Gallery<\/strong> using images from your Media Library. Where this was a sorely limited function on the old WordPress, requiring additional plugins or needing to create a collage of images, it\u2019s super easy on the new Block Editor. You have the ability to rearrange the images to the order you\u2019d like them, giving you even further freedom over how your post looks, with a choice over the number of columns, how images are cropped and where they link to:<\/p>\n Where before in the old editor, you needed to go to the Media Library or click on an individual image and open a separate box to edit your Alt Text, link settings, image size and dimensions, this is now done simply via the \u201cBlock\u201d sidebar tab to the right-hand side of the editor. It\u2019s a simple change that makes a big difference.<\/p>\n One big benefit of the new editor, aside from the freedom you have with navigating blocks, is the vast range of keyboard shortcuts that mean you don\u2019t even need to take your fingers off the keyboard to create a comprehensive article. There\u2019s even a shortcut for finding the shortcuts! Shift + Alt + H <\/strong>will show you all shortcut options!<\/p>\n Here are a few useful ones:<\/p>\n If you\u2019ve got a block that started life as a paragraph, but you\u2019d now like as a quote, heading, list or other block option, you have the option for this. Simply select the block, then choose the far left icon which becomes a \u201cChange Block Type\u201d icon when you hover over it, opening up a “Transform To” menu:<\/p>\n The freedom to switch your content around without having to select, cut and paste is a massive advantage of the new editor.<\/p>\n Hovering your cursor over a block will cause arrows and dots to appear at the left-hand side. You can click the up or down arrows to move this block one place up or down, or you can select the dots to drop and drag the block to wherever you\u2019d like it to sit in the post:<\/p>\n To see the overall layout of your content, you can select the \u201cBlock Navigation\u201d function on the top bar of your editor. Clicking on the individual blocks will take you straight to the one you want:<\/p>\n Also on the top bar, you have an Information <\/strong>button. Where before WordPress would give you an ongoing word count of your content while you were editing it in the bottom corner, the information button now shows you this, along with your number of headings, paragraphs and blocks:<\/p>\n If you have an HTML code to add to your content, or you\u2019d prefer to edit your content using HTML rather than the visual editor, there\u2019s an easy option for this. You can either choose to edit a single block in HTML using the \u201cEdit as HTML\u201d option under the three dot dropdown menu when a block is selected, or you can edit the entire post in HTML by choosing \u201cCode Editor\u201d under the three dot dropdown in the top right hand side of the page, beside the Preview, Publish etc. buttons:<\/p>\n Reusable blocks are a very handy tip to get a hang of, allowing you to reuse a specific piece of content as a single block where required.<\/p>\n These are easily created. When you have a block you\u2019d like to save as a Reusable Block template, simply select the block and click \u201cAdd to Reusable Blocks\u201d from the dropdown menu. You can then save this under a name of your choosing.<\/p>\n As an example, for one of our clients\u2019 blogs, each article is focused around a different health product on their site, of which there are 4 in total. At the bottom of each post, there\u2019s a product logo, a description of the product and link to click to find the product. Previously we needed to copy and paste this for each individual article, whereas now, you can simply find and insert this blurb by choosing to add a new block, selecting Reusable Blocks<\/strong>, then choosing the specific one you need:<\/p>\n These blocks can also be accessed and edited via the \u201cManage All Reusable Blocks\u201d link in the dropdown above.<\/p>\n Tip<\/strong>: Some ideas for Reusable Blocks are as a post signature, an author bio or a disclaimer on the bottom of your article.<\/p>\n Blocks aren\u2019t just limited to the ones that WordPress provides for you as standard. In fact, there are a selection of plugins (the number of which will only be set to increase now) that can be used as blocks too. One example of this is useful for food bloggers: the WP Recipe Maker. These are accessed as usual from the Add Block button where you\u2019ll find your Most Used blocks, Common Blocks etc.<\/p>\n You might find that some existing plugins you already had on WordPress have moved into your Add Block menu when you update \u2013 for example, Yoast might have given you Yoast Structured Data Blocks to allow you to easily insert a properly formatted How-To guide, or your mailing list service might have an option to include an easily embedded form as a block.<\/p>\n The options for these are endless, allowing you to have far more freedom over your content without the need to resort to HTML codes or complicated plugin settings.<\/p>\n If all else fails and you\u2019re struggling to get your head around the new editor, or perhaps you have a client who doesn\u2019t want the backend of their site to change, there are two ways you can go back to the classic WordPress editor you\u2019re used to.<\/p>\n 1. When creating a post using Block Editor, you can select \u201cClassic\u201d from \u201cAdd Block\u201d. This will incorporate a block within the post that looks just like the old WordPress editor, with the same old toolbar and a text box that doesn\u2019t convert into individual blocks, unless you want it to.<\/p>\n 2. Download the Classic Editor plugin<\/a>. This is an official WordPress plugin and is the best option for those who don\u2019t want to try out the new system. For clients who want to stick to the old method, you can simply download the plugin then select Classic Editor as the default for all users under Settings > Writing. When they create a new post, it will then automatically look exactly how they knew it before.<\/p>\n<\/a><\/p>\n2. Inserting images<\/h2>\n
Individual image blocks<\/h3>\n
<\/a><\/p>\nDrag & drop<\/h3>\n
<\/a><\/p>\nCopy & paste<\/h3>\n
Columns<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\nGallery<\/h3>\n
<\/a><\/p>\nEditing images<\/h3>\n
3. Keyboard shortcuts<\/h2>\n
\n
4. Transforming blocks<\/h2>\n
<\/a><\/p>\n5. Block Navigation<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n6. Information Button<\/h2>\n
<\/a><\/p>\n7. Edit as HTML<\/h2>\n
<\/a><\/p>\n8. Reusable Blocks<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n9. Using plugins as blocks<\/h2>\n
10. Find the old Classic Editor<\/h2>\n