{"id":13,"date":"2019-11-16T10:52:32","date_gmt":"2019-11-16T10:52:32","guid":{"rendered":"https:\/\/ourlocality.org\/twentytwenty\/?page_id=13"},"modified":"2023-03-24T09:13:08","modified_gmt":"2023-03-24T09:13:08","slug":"blockedit","status":"publish","type":"post","link":"https:\/\/ourlocality.org\/twentytwenty\/2019\/11\/blockedit\/","title":{"rendered":"Block Editing"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-d0b3c9c8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"--col-width:66.66%;flex-basis:66.66%\">\n<p class=\"has-drop-cap\">Block editing is reasonably simple. Just start typing at the prompt to get started. Hit return to start a new paragraph. <\/p>\n\n\n\n<p>Formatting options appear on the RHS, where you can muck around with font size and employ the drop caps.<\/p>\n\n\n\n<p>Each paragraph is a block. If editing a page created before enabling the Block Editor, the Classic Editor block will show.<\/p>\n\n\n\n<p>Blocks are more than just paragraphs. They include the full array of page elements. As well as formatted text you can have headings, spacers, Read More links and obviously images, galleries and embeds too.  But there is more.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"--col-width:33.33%;flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/Fish-fight-1024x768.jpg\" alt=\"\" class=\"wp-image-31\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/Fish-fight-1024x768.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/Fish-fight-300x225.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/Fish-fight-768x576.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/Fish-fight-1200x900.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/Fish-fight.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-d0b3c9c8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"--col-width:33.33%;flex-basis:33.33%\"><ul class=\"wp-block-rss\"><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https:\/\/wordpress.org\/news\/2026\/04\/celebrating-wcasia-2026\/'>Celebrating Community at WordCamp Asia 2026<\/a><\/div><\/li><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https:\/\/wordpress.org\/news\/2026\/04\/watch-wc-asia-2026-live\/'>How to Watch WordCamp Asia 2026 Live<\/a><\/div><\/li><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https:\/\/wordpress.org\/news\/2026\/04\/wcasia-2026-sessions\/'>From AI to Open Source at WordCamp Asia 2026<\/a><\/div><\/li><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https:\/\/wordpress.org\/news\/2026\/03\/wordpress-7-0-release-candidate-2\/'>WordPress 7.0 Release Candidate 2<\/a><\/div><\/li><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https:\/\/wordpress.org\/news\/2026\/03\/wp-packages\/'>WP Packages is Working the Way Open Source Should<\/a><\/div><\/li><\/ul><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"--col-width:66.66%;flex-basis:66.66%\">\n<p>In old fashioned WordPress, the template author had to do a fair amount of work to create a suitable site structure or a page layout\/template.  The template author would fix the main headings and menu positions, along with a sidebar and a footer. New page templates would be difficult if not impossible for ordinary users to create from scratch without prior coding knowledge or infinite patience.<\/p>\n\n\n\n<p>With blocks, any old user can create a fairly good looking page layout, with only basic knowledge and no code. Some patience is required. <\/p>\n\n\n\n<p>As long as the template employed permits it, you can escape the limitations of a basic page.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>WordPress marginalia (known as widgets) can also become part of the page layout, but the block philosophy goes a bit further. Column layouts and other block features make page creation a bit more fun. Blocks are very useful if you are creating landing pages that need to show off something or just where you need a more complex layout, perhaps when designing a front page. <\/p>\n\n\n\n<p>Here&#8217;s a few things you can do:-<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">This is a familiar heading<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\" style=\"border-color:#000000\">\n<p>this is a quote<\/p>\n<cite>So Says Socrates<\/cite><\/blockquote>\n\n\n\n<p class=\"has-drop-cap\">But checkout below the separator. This is a columnar layout with three images. All perfectly doable in old fashioned WordPress, if a little involved, but it becomes a breeze to arrange figures and text in predictable arrangements. You&#8217;ll know what I mean if you have ever tried to align three images horizontally. What is more, the layout should perform in a responsive way to the screen size of the device that you are using. In our case the images should stack nicely. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-d0b3c9c8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg\" alt=\"\" class=\"wp-image-7\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-768x543.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1536x1086.jpg 1536w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-2048x1448.jpg 2048w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-accent-background-color has-background\">we can then write a little text below<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg\" alt=\"\" class=\"wp-image-7\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-768x543.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1536x1086.jpg 1536w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-2048x1448.jpg 2048w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-accent-background-color has-background\">we can write text below<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg\" alt=\"\" class=\"wp-image-7\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-768x543.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1536x1086.jpg 1536w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-2048x1448.jpg 2048w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-accent-background-color has-background\">we can then &#8230;<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-drop-cap\">Moving stuff involves dragging and dropping, with additional controls to nudge a block up or down. This is handy as the new Block Editor sometimes refuses point blank to play nicely. <\/p>\n\n\n\n<p>Below we have a cover image, which is usually a big bold image with some text flowing over it.<\/p>\n\n\n\n<div class=\"wp-block-cover alignfull is-light\" style=\"min-height:600px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-20 has-background-dim\" style=\"background-color:#222f18\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"848\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg\" class=\"wp-block-cover__image-background wp-post-image\" alt=\"\" data-object-fit=\"cover\" data-object-position=\"19% 23%\" style=\"object-position:19% 23%;\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-768x543.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1536x1086.jpg 1536w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-2048x1448.jpg 2048w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 799px) 200vw, (max-width: 2560px) 100vw, 2560px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-secondary-background-color has-background has-h-1-font-size\">This is a cover block<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">The background is a linear map. Such maps are condensed maps for routing and focused on a main road. <\/p>\n<\/div><\/div>\n\n\n\n<p>And here is a bit of poetry to show off a new formatting option.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">a word<br>or a line<br>or two of terse prose<br>is not really verse<\/pre>\n\n\n\n<p class=\"has-drop-cap\">Sometimes you need to have text beside the image, rather than have the text flow around it. Sometimes you need a range of different things <\/p>\n\n\n\n<p>In the following we have created a &#8220;<strong>group<\/strong>&#8221; block. By grouping a number of block elements it becomes possible to  re-use the layout, again and again. Groups can take a little longer to understand and implement and getting them right takes a little bit of trial and error. Widgets can&#8217;t be re-edited as flexibly either.<\/p>\n\n\n\n<p>Handy I imagine for multiple sections ore for team member pages, marketing landing pages, project or portfolio pages.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignfull is-stacked-on-mobile is-style-tw-shadow\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg\" alt=\"\" class=\"wp-image-7 size-full\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-768x543.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1536x1086.jpg 1536w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-2048x1448.jpg 2048w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-large-font-size\">Contact me if there is anything on this page that you want to discuss<\/p>\n<\/div><\/div>\n\n\n\n<p>And that is the end of the Group.<\/p>\n\n\n\n<p>The Classic Editor block<\/p>\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-7\" src=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg\" alt=\"\" width=\"300\" height=\"212\" srcset=\"https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-300x212.jpg 300w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1024x724.jpg 1024w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-768x543.jpg 768w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1536x1086.jpg 1536w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-2048x1448.jpg 2048w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1200x848.jpg 1200w, https:\/\/ourlocality.org\/twentytwenty\/files\/2019\/11\/East-Lothians-place-names-Skinner-Strip-Map-1776-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Classic editor is a single block without the faff of separate paragraphs.&nbsp;<\/p>\n<p>It isn&#8217;t plain sailing though, as in my case the kitchen sink (the Classic Editor toolbar) disappears the moment I want to use it. I had to log in as a different user before it started working again.<\/p>\n\n\n<p>And that in a nutshell is Gutenberg Blocks. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center has-background-color has-secondary-background-color has-text-color has-background\"><a href=\"https:\/\/ourlocality.org\/events\/\">Events dear boy Events!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Block editing is reasonably simple. Just start typing at the prompt to get started. Hit return to start a new paragraph. Formatting options appear on the RHS, where you can muck around with font size and employ the drop caps. Each paragraph is a block. If editing a page created before enabling the Block Editor,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"templates\/template-cover.php","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tw-meta-no-icon"],"_links":{"self":[{"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":20,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/posts\/13\/revisions\/143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/media\/7"}],"wp:attachment":[{"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ourlocality.org\/twentytwenty\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}