{"id":96,"date":"2020-09-11T14:12:05","date_gmt":"2020-09-11T14:12:05","guid":{"rendered":"https:\/\/coventry.domains\/support\/?post_type=docs&#038;p=96"},"modified":"2020-10-26T13:59:00","modified_gmt":"2020-10-26T13:59:00","password":"","slug":"editing-with-gutenberg","status":"publish","type":"docs","link":"https:\/\/coventry.domains\/support\/docs\/editing-with-gutenberg\/","title":{"rendered":"Editing with Gutenberg"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">When adding&nbsp;posts and pages&nbsp;to your site, you can do so much more than simply adding text. WordPress comes with a powerful&nbsp;<strong>block-based<\/strong>&nbsp;editor called&nbsp;<strong>Gutenberg<\/strong>&nbsp;which gives you the ability to add rich media to your posts and pages with an easy drag-and-drop interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are far too many features to cover in one post, but watching the video below will give you a great sense where to get started with adding all kinds of media to your website. Or, if you prefer, you can read the post below where we\u2019ll cover a few of the main tools within Gutenberg you should know about.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Editing with Gutenberg\" width=\"580\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/15KorZDiiwo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What are blocks?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks are elements you can use to build your post or page. Gutenberg supports dozens of them including paragraphs, images, embedded videos and more. There are also blocks to help you with formatting and layout, like columns, rows, bulleted lists, and spacers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding a new block<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-12.11.35.png\" alt=\"\" class=\"wp-image-374\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When creating or editing a page or post, click on the plus icon on the top left to add a new block to your current place in the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also simply press enter\/return on your keyboard when typing, and your next paragraph will be created on its own block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Moving blocks<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-12.24.08.png\" alt=\"\" class=\"wp-image-375\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">One of the main benefits to this block-based system is that you can easily change the position of the blocks you\u2019ve created.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hover over any block you\u2019ve made, and you\u2019ll see up and down arrows appear to the left of that block. Use them to move blocks up or down once in the document, or click on the dots between the arrows to pick up the block and drag it to a new location anywhere on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also highlight multiple blocks at once and move them as a group.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Contextual Menu<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-12.27.38.png\" alt=\"\" class=\"wp-image-376\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When editing a block, you\u2019ll see a menu pop up at the top of it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This menu is&nbsp;<em>contextual<\/em>&nbsp;and will change depending on what type of block you\u2019re editing. For this heading block, there are options to change it to different types\/sizes of heading. For different blocks, you\u2019ll find other options available.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Removing Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To delete any block, click on the three dots in the contextual menu and then select&nbsp;<strong>Remove Block.<\/strong>&nbsp;Pressing backspace\/delete on an empty block also removes it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Useful Blocks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are dozens of blocks to choose from, so it\u2019s well worth creating an experimental page or post just to see how they all work. Since we can\u2019t cover them all here, we\u2019ll just mention some of the most useful ones to get you started.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To add an image, add a new block and look for&nbsp;<strong>Image&nbsp;<\/strong>in the common blocks section.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-12.44.58.png\" alt=\"\" class=\"wp-image-380\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll then be asked to upload a new image or select something from your media library (that\u2019s where all of your images are stored once uploaded to WordPress).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019ve added an image, you can leave it as it is, or use the contextual menu to align it to the left, right or centre of your page. You can also drag the blue dots on the sides of the image to resize it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s also an option in the contextual menu to make your image full width for a dramatic effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lists<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-12.43.38.png\" alt=\"\" class=\"wp-image-381\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Bulleted or numbered lists can be a good way to organise and present your information. Select&nbsp;<strong>List<\/strong>&nbsp;from the common blocks section when adding a new block to create a list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, the contextual menu give you the option to change the type and alignment of your list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Spacer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you find your information is looking too cramped or cluttered on the page, adding in some blank space can help. In the layout section, choose&nbsp;<strong>Spacer.&nbsp;<\/strong>Simply drag the dot on the bottom of the spacer to adjust its height.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quotes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to draw attention to a great quote in your content, you can highlight it by adding it as a&nbsp;<strong>Quote<\/strong>. Just choose Quote from the common blocks section to add it in:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>A woman must have money and a room of her own if she is to write fiction<\/em>.<\/p><cite>Virginia Woolf<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">YouTube Videos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s also possible to embed video from YouTube and other sources into your posts. When adding a block, click on&nbsp;<strong>YouTube&nbsp;<\/strong>from the embed section.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, you\u2019ll just be asked for the video\u2019s link\/URL:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-12.59.54.png\" alt=\"\" class=\"wp-image-386\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also embed videos if you have the embed code from YouTube, Vimeo,&nbsp;<a href=\"http:\/\/media.coventry.ac.uk\/\">media.coventry.ac.uk<\/a>, or other sources. This can be added to the&nbsp;<strong>HTML&nbsp;<\/strong>block in Gutenberg.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-13.07.35.png\" alt=\"\" class=\"wp-image-387\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This block is a useful catch-all for adding content to your page that comes from other places on the web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You could, for example, add a specifc Tweet by finding it in Twitter, clicking to drop-down menu on the top right and selecting&nbsp;<strong>Embed Tweet.&nbsp;<\/strong>Simply copy this code, come back to WordPress and paste it into the HTML block.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Block Settings<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/Screenshot-2019-09-09-at-13.13.19.png\" alt=\"\" class=\"wp-image-388\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on your block, you\u2019ll have additional settings available in the menu on the right-hand side of the Gutenberg editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, you\u2019ll have option to, for example, change the font size of paragraph blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You could also change the background and text colour of a paragraph to help it stand out more:<\/p>\n\n\n\n<p class=\"has-buttons-text-color has-accent-background-color has-text-color has-background wp-block-paragraph\"><strong>Like this paragraph here.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are so many features to the Gutenberg editor to create, organise and style your content, so have a play and see what you can make!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When adding&nbsp;posts and pages&nbsp;to your site, you can do so much more than simply adding text. WordPress comes with a powerful&nbsp;block-based&nbsp;editor called&nbsp;Gutenberg&nbsp;which gives you the ability to add&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[2],"doc_tag":[],"class_list":["post-96","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-wordpress"],"year_month":"2026-10","word_count":953,"total_views":"3","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin","author_nicename":"admin","author_url":"https:\/\/coventry.domains\/support\/author\/admin\/"},"doc_category_info":[{"term_name":"How to Use WordPress","term_url":"https:\/\/coventry.domains\/support\/support-category\/wordpress\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/docs\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":2,"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/docs\/96\/revisions"}],"predecessor-version":[{"id":187,"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/docs\/96\/revisions\/187"}],"wp:attachment":[{"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/doc_category?post=96"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/coventry.domains\/support\/wp-json\/wp\/v2\/doc_tag?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}