{"id":27532,"date":"2020-09-25T13:56:19","date_gmt":"2020-09-25T17:56:19","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=27532"},"modified":"2021-02-26T09:51:53","modified_gmt":"2021-02-26T14:51:53","slug":"full-site-editing","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/full-site-editing\/","title":{"rendered":"Full Site Editing"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>You may have seen the term Full Site Editing, or FSE, in the list of<a href=\"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/introducing-wordpress-5-6\/\"> WordPress 5.6<\/a> and<a href=\"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/twenty-twenty-one\/\"> Twenty Twenty-One theme<\/a> features. At this time, Full Site Editing can be used with the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">Gutenberg plugin<\/a> and an experimental theme (discussed later in this article). In the future, this functionality will have a stable release and be integrated into WordPress Core, but not in the WordPress 5.6 release.<\/p>\n<h2 id=\"what-is-full-site-editing\">What is Full Site Editing?<\/h2>\n<p>With Full Site Editing, you can now edit both an individual post&rsquo;s content and, with the release of Gutenberg 9.6, the template that an individual post uses.<\/p>\n<p>Currently global site elements like Site Title, Site Tagline, and Menus are added from the Customizer, and page elements like text and images are added from the editor. The goal of Full Site Editing is to allow complete page creation using only Gutenberg Blocks &ndash; meaning ALL website elements are added or modified from a page editing view, as shown below. Keep in mind you will still be able to make global changes to your site header and footer using Full Site Editing.<\/p>\n<p>Full Site Editing will use block-based themes. Block templates and block template parts are the core parts of a block-based theme. Gutenberg developers have been building a library of site-building blocks. Most of the basics are already in place: Site Title, Site Tagline, Post Title, Post Content, various metadata and Comments blocks, and more. A full list can be found in the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/designers-developers\/developers\/themes\/block-based-themes.md#theme-blocks\">Block Editor Handbook<\/a>.<\/p>\n<p>There are three specific areas in active development to support Full Site Editing &ndash; Template Manipulation, Block Patterns, and Global Styles.<\/p>\n<h3 id=\"template-manipulation\">Template Manipulation<\/h3>\n<p>This is the main project and most items related to Full Site Editing are included here <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/projects\/35\">in the GitHub project<\/a>. Template manipulation means updating how users interact with various post and page templates when using Full Site Editing, while still preserving the old functionality for non-FSE themes.<\/p>\n<h3 id=\"block-patterns\">Block Patterns<\/h3>\n<p>Block Patterns are layout designs consisting of multiple Gutenberg Blocks. Special Block Patterns that take full advantage of Full Site Editing should be included with the Twenty Twenty-One theme. Examples of current block patterns are shown below, and you can learn more about <a href=\"https:\/\/make.wordpress.org\/design\/handbook\/focuses\/block-patterns\/\">Block Patterns here<\/a>.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/twenty-twenty-one-patterns.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-27467\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/twenty-twenty-one-patterns.jpg\" alt=\"Twenty Twenty One Theme Patterns\" width=\"1000\" height=\"998\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/twenty-twenty-one-patterns.jpg 1000w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/twenty-twenty-one-patterns-300x300.jpg 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/twenty-twenty-one-patterns-150x150.jpg 150w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/twenty-twenty-one-patterns-768x766.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<h3 id=\"global-styles\">Global Styles<\/h3>\n<p>Global styles extend the functionality of Full Site Editing, together they provide greater control over the site design as a whole. Styling can be set to be global (affecting the entire site) or specific to a post or page. For example, you can set a button style to be the global default, then create a different button to be used in specific locations. Core&rsquo;s explanation of global styles can be found <a href=\"https:\/\/make.wordpress.org\/design\/handbook\/focuses\/global-styles\/\">here<\/a>.<\/p>\n<h2 id=\"how-to-use-full-site-editing-in-wordpress-56\">How to Use Full Site Editing in WordPress 5.6<\/h2>\n<p>WordPress previously announced there will be an official Full Site Editing version of the WordPress 5.6 default Twenty Twenty-One, called <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/23\/developing-the-full-site-editing-version-of-twenty-twenty-one\/\">Twenty Twenty-One Blocks<\/a>. This theme has been renamed to TT1 Blocks to avoid confusion with the Twenty Twenty-One theme once both themes are in the WordPress directory.<\/p>\n<h3 id=\"using-full-site-editing-with-twenty-twenty-one-theme\">Using Full Site Editing with Twenty Twenty-One Theme<\/h3>\n<p>Before you get started, it&rsquo;s important to find a safe testing environment. We recommend using BoldGrid&rsquo;s Cloud WordPress service to create fully functional <a href=\"https:\/\/www.boldgrid.com\/free-wordpress-sites-demo\/\">free WordPress installations<\/a> in the cloud within seconds. If your install does something unexpected, simply delete and start fresh!<\/p>\n<p>Start by installing and activating the main Gutenberg plugin, or updating to the latest version.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32545\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/gutenberg-plugin.png\" alt=\"Gutenberg WordPress plugin\" width=\"500\" height=\"131\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/gutenberg-plugin.png 811w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/gutenberg-plugin-300x78.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/gutenberg-plugin-768x201.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Then go to <a href=\"https:\/\/github.com\/wordpress\/theme-experiments\">https:\/\/github.com\/wordpress\/theme-experiments<\/a> and download the zip.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32546\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/download-TT1.png\" alt=\"download TT1 FSE theme\" width=\"367\" height=\"328\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/download-TT1.png 367w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/download-TT1-300x268.png 300w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/p>\n<p>Unzip the file, which is called theme-experiments-master, to see everything available. Look for the <b>tt1-blocks<\/b> folder, and create a new zip archive with ONLY this folder. This will be the theme you upload to your WordPress installation. Now there will be a link for <b>Site Editor (beta)<\/b> in your WordPress dashboard, like shown below. If you do not see this link, Full Site Editing will not be active.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32547\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/site-editor-dashboard-link.png\" alt=\"FSE WordPress dashboard link\" width=\"197\" height=\"236\"><\/p>\n<p>Now navigate to the front end of your website. Looking at the top of the screen, you will see the Customize link is missing from the top admin bar and has been replaced with an <strong>Edit site<\/strong> link.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32548\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/tt1-admin-bar.png\" alt=\"\" width=\"436\" height=\"38\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/tt1-admin-bar.png 436w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/tt1-admin-bar-300x26.png 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/p>\n<p>Clicking the Edit site link will reload the page in an editing view that looks very similar to the core WordPress editor. Now simply click on any element you want to change, or click a <strong>+<\/strong> icon to add a new element. At the bottom of the screen you will see what you are editing and how it&rsquo;s added to your site, in our example we&rsquo;ve clicked on the Site Title.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32549 size-large\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/fse-front-end-1024x469.png\" alt=\"Full Site Editing front end\" width=\"1024\" height=\"469\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/fse-front-end-1024x469.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/fse-front-end-300x137.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/fse-front-end-768x351.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/fse-front-end-1536x703.png 1536w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/09\/fse-front-end.png 1895w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3 id=\"wordpress-core-call-for-testing\">WordPress Core Call for Testing<\/h3>\n<p>WordPress Core is actively looking for feedback on the Full Site Editing functionality. There are several ways you can leave feedback. Before January 13, 2021, you can <a href=\"https:\/\/make.wordpress.org\/test\/2020\/12\/23\/fse-program-testing-call-1-template-editing\/\">comment on this Core post<\/a>. You can always create new issues in github on either the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\">Gutenberg<\/a> or <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/issues\">theme experiments<\/a> repo.<\/p>\n<h2 id=\"frequently-asked-questions\">Frequently Asked Questions<\/h2>\n<h3 id=\"im-a-theme-developer-what-should-i-be-doing\">I&rsquo;m a Theme Developer. What should I be doing?<\/h3>\n<p>Theme developers looking for resources can view the WordPress Core tutorial on <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/block-based-themes\/\">how to create a block-based theme<\/a>. Even though Full Site Editing is in active development and the workflow in this tutorial is likely to change, it still gives theme developers an idea of what&rsquo;s coming. If you&rsquo;d like to view open tickets for the Full Site Editing project, you can <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Full%20Site%20Editing\">view the GitHub issues<\/a>.<\/p>\n<h3 id=\"will-fse-impact-requirements-for-themes-that-are-not-full-site-editing-themes\">Will FSE impact requirements for themes that are not Full Site Editing themes?<\/h3>\n<p>In a recent meeting for the Core theme development team it was decided that no, FSE should not affect the requirements for old themes. You can read the full <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/09\/25\/meeting-notes-tuesday-september-22nd-2020\/\">meeting notes here<\/a>. In another <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/07\/block-based-themes-and-wordpress-5-6\/\">Core post about block-based themes<\/a>, they confirmed there is no plan to deprecate the way themes are created today and existing themes will continue to work for the foreseeable future.<\/p>\n<p>As additional information is released directly from Core, we will update this article to let you know what&rsquo;s new. You can also view <a href=\"https:\/\/make.wordpress.org\/design\/handbook\/focuses\/full-site-editing\/\">Core&rsquo;s Full Site editing Handbook<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>You may have seen the term Full Site Editing, or FSE, in the list of WordPress 5.6 and Twenty Twenty-One theme features. At this time, Full Site Editing can be used with the Gutenberg plugin and an experimental theme (discussed later in this article). In the future, this functionality will have a stable release and [&hellip;]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Full Site Editing in WordPress","bgseo_description":"Full Site Editing, or FSE, allows complete page creation from a page editing view, moving away from the Customizer to control global site elements.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[],"class_list":["post-27532","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/27532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=27532"}],"version-history":[{"count":20,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/27532\/revisions"}],"predecessor-version":[{"id":32631,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/27532\/revisions\/32631"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=27532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=27532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=27532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}