{"id":9695,"date":"2024-01-09T15:33:30","date_gmt":"2024-01-09T20:33:30","guid":{"rendered":"https:\/\/www.eng.ufl.edu\/marcom-dev\/?page_id=9695"},"modified":"2026-03-20T09:33:48","modified_gmt":"2026-03-20T14:33:48","slug":"using-the-block-editor","status":"publish","type":"page","link":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/using-the-block-editor\/","title":{"rendered":"Using the Block Editor"},"content":{"rendered":"\n<p>The WordPress Block Editor makes use of content blocks that can be easily added and arranged in a drag-and-drop interface. There are three main editing sections:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>block inserter<\/strong> (where you choose content blocks to add to your page\/post) and <strong>document overview<\/strong> (where you can select, edit, and move blocks)<\/li>\n\n\n\n<li>The <strong>content area<\/strong>, where you view and edit blocks you have placed on your page\/post<\/li>\n\n\n\n<li>The <strong>inspector panel<\/strong>, where you edit page\/post and block settings<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a42f1ea81622&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a42f1ea81622\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/block-editor-overview-1024x615.png\" alt=\"The WordPress block editor with block inserter open on the left and page options selected in the inspector panel on the right. Described under the heading Using the Block Editor.\" class=\"wp-image-9759\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The WordPress block editor with block inserter open on the left and page options selected in the inspector panel on the right.<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Editing tools<\/h2>\n\n\n\n<p>The <strong>editing toolbar<\/strong> at the top lets you show and hide the left and right panels of the block editor, edit block settings and options, and preview your pages and posts. This is also where you will save a draft of your page\/post or publish it, as well as update any changes. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/block-toolbar.png\" alt=\"The editing toolbar\" class=\"wp-image-9827\"\/><figcaption class=\"wp-element-caption\">The editing toolbar<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Icons<\/h3>\n\n\n\n<p>These icons are specific to the block editor and present on most blocks:<\/p>\n\n\n\n<div class=\"wp-block-columns has-light-gray-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:2%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:98%\"><div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/icon-multidotted.png\" alt=\"Multi-dotted icon - six dots in two columns\" class=\"wp-image-9881\"\/><\/figure>\n<\/div>\n\n\n<p>The <strong>multi-dotted icon<\/strong>, when selected, allows you to drag and drop blocks.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/icon-move-up-down.png\" alt=\"Move up\/move down icon\" class=\"wp-image-9907\"\/><\/figure>\n<\/div>\n\n\n<p>The <strong>move up <\/strong>and <strong>move down icons<\/strong> let you move blocks up or down within the content area.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/icon-three-dotted.png\" alt=\"Three-dotted icon\" class=\"wp-image-9911\"\/><\/figure>\n<\/div>\n\n\n<p>The <strong>three-dotted icon<\/strong> opens options for the selected block.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">Block inserter &amp; document overview<\/h2>\n\n\n\n<p>To add a block, select the plus sign &#8220;Toggle block inserter&#8221; icon on the left side of the editing toolbar. You can also position your cursor or hit Enter to insert blocks from directly within the content area while editing.<\/p>\n\n\n\n<p>Choose a content type from the list, or search or browse for a block type.<\/p>\n\n\n\n<p>You can select blocks or nested &#8220;Innerblocks&#8221; to edit by using the Document Overview.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"581\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/block-inserter.gif\" alt=\"Animation showing how to insert blocks and select them using the document overview. Described under the heading Block inserter &amp; document overview.\" class=\"wp-image-9801\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Content area<\/h2>\n\n\n\n<p>WordPress and the Mercury theme provide a variety of content blocks you can use to build your pages. Rearrange blocks within the page by selecting a block and then dragging and dropping using the multi-dotted icon, or moving the block up or down using the arrows.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a42f1ea82d1d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a42f1ea82d1d\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2020\/02\/move-block.png\" alt=\"Screenshot showing block movement controls. \" class=\"wp-image-8317\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<p>Many blocks (and especially the InnerBlocks nested inside them) will be easier to work with if you select them from within the Document Overview pane. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inspector panel<\/h2>\n\n\n\n<p>Toggle the inspector panel with the &#8220;Settings&#8221; icon and select between Page\/Post or Block settings. <\/p>\n\n\n\n<p>Block settings will show settings for the block that is currently selected in the content area.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"275\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/settings-inspector.gif\" alt=\"Animation that shows how to open the settings inspector panel and move from block to page settings. Described under the heading Inspector panel.\" class=\"wp-image-9795\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Page\/post settings<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Summary<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visibility: public, private, or password protected (this is different from restricting access to a page)<\/li>\n\n\n\n<li>Publish: immediately or schedule your page for publishing later<\/li>\n\n\n\n<li>Template: choose the page or post template<\/li>\n\n\n\n<li>URL: (aka Permalink) &#8211; change the automatically created address of your page here<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Page links to<\/h4>\n\n\n\n<p>If you wish this page to automatically link to another page on your site or externally, select \u201cA custom URL\u201d&nbsp; under Page Links To and enter the URL.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Revisions<\/h4>\n\n\n\n<p>View and revert to a previous version of a page or post.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Categories (posts only)<\/h4>\n\n\n\n<p>Categories organize post content and make it easier for visitors to find. Categories can have a hierarchy, e.g. a &#8220;Departments&#8221; category with categories named for each department underneath.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tags (posts only)<\/h4>\n\n\n\n<p>Tags label post content and make it easier for visitors to find. Tags do not have a hierarchy.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Featured image (only displays in certain post templates)<\/h4>\n\n\n\n<p>Upload a post featured image, or choose one from the Media Library. Featured images only display in posts that use the Full Width Image, Sidebar Left, and No Sidebar post templates.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Excerpt<\/h4>\n\n\n\n<p>Excerpts are optional, but they improve your site\u2019s search engine optimization, and they are the summaries your site visitors see when your pages come up in search engine results.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Discussion (posts only)<\/h4>\n\n\n\n<p>Allow or disallow comments on an individual post. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Page attributes (pages only)<\/h4>\n\n\n\n<p>Choose a parent page and what order your page will occupy in page listings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"options\">Options<\/h3>\n\n\n\n<p>To view options, select the triple-dot icon at the top right of the editor. In Options you can select various editing modes, switch between code and visual editing, or switch to the Classic Editor (the &#8220;old WordPress&#8221; interface).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"504\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/options-panel.gif\" alt=\"Animation showing use of the Options panel. Described under the Options heading.\" class=\"wp-image-9833\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Additional Resources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/support\/article\/blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">List of default WordPress blocks<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/mercury-blocks\/\">List of UFL Mercury theme blocks<\/a><\/li>\n\n\n\n<li>Detailed <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress block editor tutorial<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WordPress Block Editor makes use of content blocks that can be easily added and arranged in a drag-and-drop interface. There are three main editing sections: Editing tools The editing toolbar at the top lets you show and hide the left and right panels of the block editor, edit block settings and options, and preview [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":9647,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page-sidebar-none.php","meta":{"_acf_changed":false,"inline_featured_image":false,"featured_post":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9695","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/comments?post=9695"}],"version-history":[{"count":14,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9695\/revisions"}],"predecessor-version":[{"id":12603,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9695\/revisions\/12603"}],"up":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9647"}],"wp:attachment":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/media?parent=9695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}