  {"id":281,"date":"2023-10-24T11:46:27","date_gmt":"2023-10-24T15:46:27","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=281"},"modified":"2024-09-18T20:31:33","modified_gmt":"2024-09-19T00:31:33","slug":"module-3-blocks-overview","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-blocks-overview\/","title":{"rendered":"How to Add Blocks"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        How to Add Blocks\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 3.1 \u2013 Getting Started: Basic Building Blocks: How to Add Blocks<\/p>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-by-Step\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.1\n                    <\/span>\n\n                    <a href=\"#add-a-block-using-the-block-menu\" class=\"font-medium hover:underline\">\n                        Add a Block using the Block Menu\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.2\n                    <\/span>\n\n                    <a href=\"#add-a-block-using-a-keyboard-shortcut\" class=\"font-medium hover:underline\">\n                        Add a Block using a Keyboard Shortcut\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.3\n                    <\/span>\n\n                    <a href=\"#remove-a-block\" class=\"font-medium hover:underline\">\n                        Remove a Block\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>Blocks are used to present content on pages or posts in several ways. They can contain a variety of information and are all designed uniquely, so there is always a block that will match your needs.<\/p>\n\n\n\n<p>When creating a page or post, you will use blocks to present text, images, videos, and more. One way to think of it is like you&#8217;re putting together a virtual puzzle or scrapbook, uniquely presenting information in an aesthetically pleasing, organized way.<\/p>\n\n\n\n<p>If you\u2019re repeatedly adding the same content to the same block or group of blocks, you can create reusable blocks. With reusable blocks, you can save a block (or a group of blocks) to use later in any post or page on your site.<\/p>\n\n\n\n<p>There are all kinds of different content blocks that you&#8217;ll learn about in detail throughout this training. For now, we&#8217;re just going to focus on how to add and remove blocks.<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\n\n\n\n<p>There are multiple ways that you can add a block. You can<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#addblock\">Use the block menu<\/a>, by clicking either at the top left, clicking within the content area, or hovering between blocks until the + icon appears<\/li>\n\n\n\n<li><a href=\"#blockshortcut\">Use a keyboard shortcut<\/a><\/li>\n<\/ul>\n\n\n\n<h3 id=\"add-a-block-using-the-block-menu\" class=\"wp-block-heading\">Add a Block using the Block Menu<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To open the Block Menu, click the&nbsp;1) <strong>Block Inserter<\/strong>&nbsp;from the Editor Toolbar, 2)&nbsp;Add Block&nbsp;button in the editing area, or 3) <strong class=\"myprefix-text-bold\">Hover between blocks<\/strong> until the + appears. Look for the + sign.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"951\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.09.54@2x-1024x951.png\" alt=\"Add a block\" class=\"wp-image-299\" style=\"width:494px;height:459px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.09.54@2x-1024x951.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.09.54@2x-320x297.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.09.54@2x-512x475.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.09.54@2x-768x713.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.09.54@2x.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Once you&#8217;ve pulled up the Block Menu, you can search and select blocks.\n<ul class=\"wp-block-list\">\n<li>To search for a block, type in its name, or keywords that might relate to it. For example, if I wanted to add pictures, I could type in &#8220;image&#8221; and see all of the image blocks.<\/li>\n\n\n\n<li>To select or add a block, simply click on it and it will be added to your page or post.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"848\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-11.57.39@2x.png\" alt=\"Block menu\" class=\"wp-image-288\" style=\"width:377px;height:453px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-11.57.39@2x.png 706w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-11.57.39@2x-320x384.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-11.57.39@2x-512x615.png 512w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/figure>\n\n\n\n<h3 id=\"add-a-block-using-a-keyboard-shortcut\" class=\"wp-block-heading\">Add a Block using a Keyboard Shortcut<\/h3>\n\n\n\n<p>Once you&#8217;re comfortable with the names of the different blocks, it might be easier to add them by typing in a shortcut. To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on an empty paragraph block.<\/li>\n\n\n\n<li>Type &#8220;\/&#8221; followed by the name of the block you are looking for, or keywords that might be attached to it.<\/li>\n\n\n\n<li>Click on the block to add it to your page or post.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"826\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.02.09@2x.png\" alt=\"\" class=\"wp-image-293\" style=\"width:357px;height:455px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.02.09@2x.png 648w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.02.09@2x-320x408.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.02.09@2x-512x653.png 512w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p>3. Adding a Block by Hovering Between Blocks<\/p>\n\n\n\n<h3 id=\"remove-a-block\" class=\"wp-block-heading\">Remove a Block<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To remove a block you&#8217;ve added, click on it and navigate to the text editing menu. Once you&#8217;re here, click on the ellipsis (three dots).<\/li>\n\n\n\n<li>This will display more options. At the bottom of the new menu that appears, click on &#8220;Delete.&#8221; To delete multiple blocks, highlight each of them and complete the same process.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"971\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.05.29@2x-1024x971.png\" alt=\"Delete a block\" class=\"wp-image-294\" style=\"width:437px;height:414px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.05.29@2x-1024x971.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.05.29@2x-320x304.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.05.29@2x-512x486.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.05.29@2x-768x729.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-24-at-12.05.29@2x.png 1128w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/-m_1Um73RHU\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-how-to-add-blocks\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 How to Add Blocks\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-how-to-add-blocks\">\n            \n\n<p>Hello and welcome to our CU theme training on basic building blocks. This video is going to give you an overview of what blocks are, what kind of blocks are available, and how to add them to a page.<\/p>\n\n\n\n<p>Blocks contain the pieces of content you use to build all of your web pages and your posts. From the front end the web page looks like this. But when you go into the back end you can see how each piece of content is an individual block. So when I click on the block, it gets highlighted by that blue border.<\/p>\n\n\n\n<p>To test things out I\u2019m going to practice on a test page that I\u2019ve already created.<\/p>\n\n\n\n<p>There are several different ways to add blocks to a page. First, you can pull up the block menu using the block editor over here at the top left. So just hover over and you\u2019ll see \u201ctoggle blog inserter.\u201d Click on that to see a list of all of the blocks.<\/p>\n\n\n\n<p>Another way to add a block to the page is by clicking on this when you\u2019re in the edit area. Click on this plus sign and that will bring up the same menu. When you\u2019re in the block menu, there are tons of options for you to choose from. All these different kinds of blocks including \u2013 text blocks, design blocks, embeds, and card and listing<br>blocks.<\/p>\n\n\n\n<p>To search for a specific block you can type the name in up here. So I typed in the image and that brings up all of the different image blocks. To add it to a page, I simply select that particular block and now it\u2019s added to my page right over here.<\/p>\n\n\n\n<p>A third way to add a block is in a content area simply type a slash and then you can either click on one of these blocks or if there\u2019s something in particular you want to add (a paragraph block or a video embed) start typing that in and that will appear. You just click on the name and then you have your video embed block.<\/p>\n\n\n\n<p>The final way to add a block is by hovering over the section between blocks and then you\u2019ll see this block editor add block dealie up here. So you just click on that and again you\u2019ll have all these block options and you just pick one.<\/p>\n\n\n\n<p>Every Block\u2019s going to be a little different. Just take your time to get comfortable using them and experimenting and trying each of them out.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<p>Now that you have learned the basics about adding and removing blocks, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In a new page or post, add a block using the Block Inserter.<\/li>\n\n\n\n<li>Add a block by typing in the shortcut manually.<\/li>\n\n\n\n<li>Remove the blocks you just added.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/module-3-basic-building-blocks\/\">Next: Basic Text Blocks<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Blocks are used to present content on pages or posts in several ways. They can contain a variety of information and are all designed uniquely, so there is always a block that will match your needs. When creating a page or post, you will use blocks to present text, images, videos, and more. One way [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":82,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[11],"class_list":["post-281","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/281\/revisions"}],"predecessor-version":[{"id":4315,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/281\/revisions\/4315"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/82"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}