{"id":138,"date":"2023-10-20T10:07:43","date_gmt":"2023-10-20T14:07:43","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=138"},"modified":"2026-08-10T19:49:03","modified_gmt":"2026-08-10T23:49:03","slug":"block-editor-workspace","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-1-getting-started\/block-editor-workspace\/","title":{"rendered":"Block Editor Workspace"},"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                        Block Editor Workspace\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Basic Training Module 1: Getting Started<\/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\">The Block Editor is where you create and edit content on your website. Whether you&#8217;re building a new page, updating existing content, or adding images and other media, most of your work will take place in the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike traditional word processors, the Block Editor uses <strong>blocks<\/strong> to create content. Every heading, paragraph, image, button, or other piece of content is added as a separate block that can be edited, moved, and customized individually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this lesson, you&#8217;ll learn about the main areas of the Block Editor and the tools you&#8217;ll use most often.<\/p>\n\n\n\n<h2 id=\"opening-the-block-editor\" class=\"wp-block-heading\">Opening the Block Editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding the following areas will help you navigate the editor more confidently.<\/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<p class=\"wp-block-paragraph\">To open the Block Editor:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the Dashboard, select <strong>Pages<\/strong> &gt; <strong>Add New<\/strong>.<\/li>\n\n\n\n<li>Alternatively, select an existing page and click <strong>Edit<\/strong>.<\/li>\n\n\n\n<li>The Block Editor will open and display the page content.<\/li>\n<\/ol>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<p class=\"wp-block-paragraph\">The editor is divided into three main areas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Top Toolbar<\/li>\n\n\n\n<li>Content Area<\/li>\n\n\n\n<li>Settings Sidebar<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-outline is-style-outline--1 w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1188\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-scaled.png\" alt=\"A view of a post editing screen\" class=\"wp-image-5320\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-scaled.png 2560w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-512x238.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-1024x475.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-320x149.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-768x356.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-1536x713.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2026\/08\/post-editor-2048x950.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h2 id=\"top-toolbar\" class=\"wp-block-heading\">Top Toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Top Toolbar contains tools and actions that apply to the entire page. Some of the most commonly used options include:<\/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=\"add-block\" class=\"wp-block-heading\">Add Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>+<\/strong> button to open the Block Inserter. From here, you can browse or search for blocks to add to your page.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"undo-and-redo\" class=\"wp-block-heading\">Undo and Redo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>Undo<\/strong> to reverse your most recent action and <strong>Redo<\/strong> to restore it. These tools are helpful when experimenting with layouts or making corrections.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"preview\" class=\"wp-block-heading\">Preview<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Preview allows you to view your page before publishing or updating it. Reviewing your work before publishing helps ensure that content appears as expected.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"publish-or-update\" class=\"wp-block-heading\">Publish or Update<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When you&#8217;re ready to make your changes live, use the <strong>Publish<\/strong> button for new content or the <strong>Update<\/strong> button for existing content.<\/p>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"content-area\" class=\"wp-block-heading\">Content Area<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Content Area is where you create and organize your page. When you place your cursor within the page, you can begin adding content using blocks.<\/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-content\" class=\"wp-block-heading\">Adding Content<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>+<\/strong> button or start typing to add content to the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common content 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>Buttons<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll learn about these blocks in later modules.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"organizing-blocks\" class=\"wp-block-heading\">Organizing Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each piece of content exists as an individual block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Blocks can be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Moved up or down<\/li>\n\n\n\n<li>Reordered within the page<\/li>\n\n\n\n<li>Duplicated<\/li>\n\n\n\n<li>Deleted<\/li>\n\n\n\n<li>Transformed into other block types<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This flexible approach makes it easy to build and organize page layouts.<\/p>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"settings-sidebar\" class=\"wp-block-heading\">Settings Sidebar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings Sidebar appears on the right side of the editor and provides access to settings for both the page and the selected block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em class=\"myprefix-text-italic\"><strong>Tip:<\/strong> If you cannot see the Settings Sidebar, click the settings icon in the upper-right corner of the editor.<\/em><\/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=\"page-settings\" class=\"wp-block-heading\">Page Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Page settings apply to the page as a whole and may include options such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Page title<\/li>\n\n\n\n<li>Publication status<\/li>\n\n\n\n<li>Visibility<\/li>\n\n\n\n<li>Featured image<\/li>\n\n\n\n<li>Page attributes<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Available settings may vary depending on your site&#8217;s configuration.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"block-settings\" class=\"wp-block-heading\">Block Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When a block is selected, the sidebar will display settings specific to that block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Paragraph block may include text formatting options.<\/li>\n\n\n\n<li>An Image block may include image size and caption settings.<\/li>\n\n\n\n<li>A Button block may include style and alignment options.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Most block customization happens here.<\/p>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"workspace-views\" class=\"wp-block-heading\">Workspace Views<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Block Editor includes several viewing options that can help you work more efficiently.<\/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=\"fullscreen-mode\" class=\"wp-block-heading\">Fullscreen Mode<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Fullscreen Mode hides the WordPress navigation menu and provides more space for editing content.<\/p>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"list-view\" class=\"wp-block-heading\">List View<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">List View displays all blocks on the page in a hierarchical outline. This is especially useful when working on longer pages with many blocks.<\/p>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Getting started with cutheme - Block Editor Workspace\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/dGtiHWIUqzI?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<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-block-editor-workspace\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript &#8211; Block Editor Workspace\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-block-editor-workspace\">\n            \n\n<p class=\"wp-block-paragraph\">Welcome to getting started with cutheme, module one. This video will teach you all about the block editor workspace. The block editor workspace is where you will build and develop all of the content for your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are different options in how you can set it up to best suit your preferences and workflow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, let\u2019s start by launching the block editor workspace. Hover over&nbsp;<strong>Pages&nbsp;<\/strong>and click&nbsp;<strong>Add New Page.<\/strong>&nbsp;Now you can choose your preferred work mode. By default, it\u2019s set to full screen. Click on the three dots at the top right to change this setting. Personally, I prefer to see the left-hand navigation bar while I work. So I like to toggle full screen mode off.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And you\u2019ll notice that there are several other options here. You can play around and see which you prefer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are also some options over here at the top left. The first one is the block inserter. And just like what it sounds like, you click on this to add blocks to your web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, you have the option to switch between the select tool, which allows you to select blocks, and the edit tool which is for editing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click the undo icon, which is right here, to revert to your most recent changes. And you can click the redo button right beside it to reapply changes that you have undone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The document overview button right here will give you an overview of the entire page. You can see these are all the blocks on your page and you can navigate to them by clicking. You can view it either as a list or an outline.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>Save Draft<\/strong>&nbsp;button allows you to save your page without publishing it. This button is only available if your page still needs to be published. And you\u2019ll also see the<strong>&nbsp;Publish<\/strong>&nbsp;button. Again, this is only available for brand new pages that have not yet been published or are still in draft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once your page is live and has been published, you\u2019ll notice that there\u2019s an&nbsp;<strong>Update&nbsp;<\/strong>button over here. Every time you make changes to this page, you\u2019ll want to click the update button to save the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on this icon right beside the update button to view your page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The setting button over here at the top right allows you to see the options for the page as well as your blocks on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click the last icon at the right to view more tools that are available. We\u2019ve already looked at the view options here at the top. Another one that you might find handy is down here \u2013&nbsp;<strong>copy all blocks.<\/strong>&nbsp;Click on that to copy every block on your page and then you can add a new page and when you get the blank page you can paste in the blocks by clicking&nbsp;<strong>Command+V<\/strong>&nbsp;.<\/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 class=\"wp-block-paragraph\">Now that you&#8217;re familiar with the Block Editor workspace, try the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a new page.<\/li>\n\n\n\n<li>Add a Paragraph block.<\/li>\n\n\n\n<li>Type a short sentence.<\/li>\n\n\n\n<li>Open the Settings Sidebar.<\/li>\n\n\n\n<li>Select the Paragraph block and review its settings.<\/li>\n\n\n\n<li>Open List View and locate your block.<\/li>\n\n\n\n<li>Return to the editor and continue exploring the workspace.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Explore the Block Editor and learn how to use the toolbar, content area, sidebar, and workspace views.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":74,"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":[63],"class_list":["post-138","page","type-page","status-publish","hentry","cu_page_type-basic-training-module-1"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/138","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=138"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":4326,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/138\/revisions\/4326"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/74"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}