{"id":63,"date":"2023-11-13T14:05:26","date_gmt":"2023-11-13T14:05:26","guid":{"rendered":"http:\/\/blog.kyuucloud.com\/?p=63"},"modified":"2023-11-15T10:15:32","modified_gmt":"2023-11-15T10:15:32","slug":"how-wordpress-works","status":"publish","type":"post","link":"https:\/\/blog.kyuucloud.com\/?p=63","title":{"rendered":"How WordPress editor works"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What is WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First things first, WordPress is a web framework mostly utilised by news outlets and bloggers. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It aims to remove the hassle of learning web development entirely and lets users focus solely on content creation. All pages, posts can be edited by an intuitive graphical editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This editor is designed to make use of HTML blocks in the background, and therefore it is usually worth researching how to structure web sites to make posts appealing. (I am not one to talk, I suck at designing)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Short guide into important blocks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When starting a new post you will be presented a blank page with some block already added.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1907\" height=\"523\" src=\"https:\/\/blog.kyuucloud.com\/wp-content\/uploads\/2023\/11\/Blank-Post.png\" alt=\"\" class=\"wp-image-143\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On the top left corner, clicking on the PLUS sign, the available blocks will be shown.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"351\" height=\"418\" src=\"https:\/\/blog.kyuucloud.com\/wp-content\/uploads\/2023\/11\/List-of-blocks.png\" alt=\"\" class=\"wp-image-145\" style=\"object-fit:cover\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"wp-block-paragraph\">I wish to highlight some useful blocks for blog structuring.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Row<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you wish to have multiple elements shown side by side, first type &#8220;\/row&#8221; or select it from the left list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"225\" src=\"https:\/\/blog.kyuucloud.com\/wp-content\/uploads\/2023\/11\/Blank-Row.png\" alt=\"\" class=\"wp-image-146\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now it is possible to have an image and text or multiple columns of text next to each other.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please take note, that with a row, it is not possible to determine the size of each column. The website will try and adjust it automatically to make sure it can show the contents side by side.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Column<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is a much smarter system to make rows. You can pre-define the ratios of the width for each columns of the total display area size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"499\" src=\"https:\/\/blog.kyuucloud.com\/wp-content\/uploads\/2023\/11\/Columns.png\" alt=\"\" class=\"wp-image-148\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There is an added benefit of this block: It is possible to set the columns to collapse into multiple vertical sections for mobile screens. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Headings and paragraphs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These are the main text holding blocks. Headings just like with Microsoft Word, range from the Heading 1 (H1) to Heading (H7) to accommodate subsections. You can create a heading by typing &#8220;\/heading&#8221;. Clicking on the resulting block will have a pop up menu where the header can be chosen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paragraphs hold sections of texts. Outside of structural blocks just typing anything without &#8220;\/&#8221; will result in a paragraph block, however within rows and columns paragraphs must be explicitly added by clicking the plus sign.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Last but not least, blogs need images to make them easier to consume.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typing &#8220;\/image&#8221; will create a pop up window, prompting the author to upload an image or to use on from the media storage of the website, or use a URL from an online source.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"290\" src=\"https:\/\/blog.kyuucloud.com\/wp-content\/uploads\/2023\/11\/imagepopup.png\" alt=\"\" class=\"wp-image-149\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As soon as the image is uploaded it will be shown in in the post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I hope these main blocks will let you get started on your blogging journey. If time allows, make sure to check out the list of blocks from the editor. WordPress provides explanations to all the blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Can&#8217;t wait to see what you can create!<\/p>\n<div class=\"remoji_bar\"><div class=\"remoji_add_container\" data-remoji-id=\"63\" data-remoji-type=\"post\"><div class=\"remoji_add_icon\"><\/div><\/div><div class=\"remoji_error_bar\" data-remoji-id=\"63\" data-remoji-type=\"post\" style=\"display: none;\">Error happened.<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>What is WordPress First things first, WordPress is a web framework mostly utilised by news outlets and bloggers. It aims to remove the hassle of learning web development entirely and lets users focus solely on content creation. All pages, posts can be edited by an intuitive graphical editor. This editor is designed to make use [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[33,30,31,32,29],"class_list":["post-63","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","tag-css","tag-editor","tag-gui","tag-html","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/posts\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=63"}],"version-history":[{"count":6,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/posts\/63\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/posts\/63\/revisions\/152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=\/wp\/v2\/media\/227"}],"wp:attachment":[{"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kyuucloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}