{"id":27,"date":"2023-10-16T13:48:33","date_gmt":"2023-10-16T17:48:33","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=27"},"modified":"2026-08-10T17:38:36","modified_gmt":"2026-08-10T21:38:36","slug":"introduction-to-blocks","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/about\/introduction-to-blocks\/","title":{"rendered":"Introduction to 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                        Introduction to Blocks\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Blocks are the building blocks of every page in cutheme. Whether you&#8217;re adding text, images, videos, buttons, listings, or more advanced page layouts, each piece of content is created using a block.<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">Think of blocks as individual pieces that can be combined to create a complete page. A typical page might contain several different blocks working together, such as headings, paragraphs, images, buttons, and cards.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Everything you see within the page editor is made up of one or more blocks.<\/p>\n\n\n\n<h2 id=\"what-are-blocks\" class=\"wp-block-heading\">What Are Blocks?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks are the foundation of content creation in cuTheme. Every page is built by combining different blocks, each designed for a specific type of content or functionality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples of blocks include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Paragraphs<\/li>\n\n\n\n<li>Headings<\/li>\n\n\n\n<li>Images<\/li>\n\n\n\n<li>Lists<\/li>\n\n\n\n<li>Quotes<\/li>\n\n\n\n<li>Videos<\/li>\n\n\n\n<li>Buttons<\/li>\n\n\n\n<li>Tables<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Everything you see outlined in the editor represents an individual block. Together, these blocks make up the content and layout of a page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-outline is-style-outline--1\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"1282\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks.jpg\" alt=\"An example of content block selected in the Gutenberg editor.\" class=\"wp-image-5311\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks.jpg 1280w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks-512x513.jpg 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks-1024x1026.jpg 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks-320x321.jpg 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks-768x769.jpg 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks-600x600.jpg 600w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/what-are-blocks-200x200.jpg 200w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 id=\"why-use-blocks\" class=\"wp-block-heading\">Why Use Blocks?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks provide a flexible and consistent way to create content without needing technical expertise.<\/p>\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    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"modular-content-flexible-layouts\" class=\"wp-block-heading\">Modular Content &amp; Flexible Layouts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks allow you to build pages section by section. You can add, move, remove, and customize individual pieces of content without affecting the rest of the page. This makes it easy to create everything from simple content pages to more complex layouts.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"consistent-design\" class=\"wp-block-heading\">Consistent Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Because blocks are designed to work together, they help maintain a consistent look and feel across your website while still providing flexibility for different types of content.<\/p>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"how-blocks-work\" class=\"wp-block-heading\">How Blocks Work<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most pages are made up of multiple blocks, each with its own settings and customization options.<\/p>\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    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"adding-blocks\" class=\"wp-block-heading\">Adding Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To add a block, click the <strong>+<\/strong> button and choose the block type you would like to insert. You&#8217;ll learn several methods for inserting blocks throughout the training.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"reordering-blocks\" class=\"wp-block-heading\">Reordering Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks can be moved up, down, or repositioned within the page, allowing you to organize content in the order that best supports your message.<\/p>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h3 id=\"customizing-blocks\" class=\"wp-block-heading\">Customizing Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each block includes its own settings and options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on the block, you may be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit content<\/li>\n\n\n\n<li>Change layouts<\/li>\n\n\n\n<li>Adjust appearance<\/li>\n\n\n\n<li>Configure block-specific settings<\/li>\n<\/ul>\n\n\n\n<h2 id=\"whats-next\" class=\"wp-block-heading\">What&#8217;s Next?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The remainder of the training explores the different blocks available in cutheme, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic content blocks such as headings, paragraphs, and images<\/li>\n\n\n\n<li>Layout and content blocks such as columns, galleries, and callouts<\/li>\n\n\n\n<li>Dynamic blocks such as cards, listings, and forms<\/li>\n\n\n\n<li>Advanced blocks for featured content, embeds, and integrations<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">As you progress through the documentation, you&#8217;ll learn when to use each block, how to configure its settings, and best practices for creating effective content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Think of blocks as individual pieces that can be combined to create a complete page. A typical page might contain several different blocks working together, such as headings, paragraphs, images, buttons, and cards. Everything you see within the page editor is made up of one or more blocks. What Are Blocks? Blocks are the foundation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"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":[55],"class_list":["post-27","page","type-page","status-publish","hentry","cu_page_type-introduction"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/27","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=27"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":4333,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/27\/revisions\/4333"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}