The WordPress site editing function is now enabled by default. When you install a brand new WordPress, you will find that the appearance of the backend has been adjusted a lot, and even you cannot find the small tool entrance. This is because the default theme of WordPress is already a block theme, no longer the traditional classic theme. So how much do you know about WordPress full site editing (now also known as site editing)? Today, WordPress University will repost a highly detailed tutorial from Smashing. Let’s take a look together! Full Site Editing is one of the main improvements added in WordPress version 5.9. It allows users to make comprehensive changes to their website design and layout through a graphical interface, bringing WordPress closer to the experience of a page builder. In addition, it also provides new methods for creating and customizing themes. These drastic changes not only have a significant impact on the user experience of WordPress, but also on the majority of the platform ecosystem. For this reason, in this article, I plan to delve deeper into WordPress Full Site Editing (FSE). Below, I will first introduce what full site editing is and provide a tutorial on how to use it to make changes to your website. I will also examine the tools it provides for theme development and discuss how the arrival of this feature will affect developers, theme authors, and existing page builder plugins. Let’s get started. Explanation: Although FSE was first added to WordPress in version 5.9, WordPress 6.0 further enhanced it thereafter. This article includes the latest changes. Article Catalog What is WordPress full site editing? main features How to use full site editing to customize WordPress Prerequisite for using FSE User Interface Overview Global Style Presets Global Style: Layout Global color and layout Change the style of a single block Mobile Block Use block options Add and remove blocks Exchange and edit template components Customize and create template components Edit page template Add a new block pattern Using an independent template editor Blocks that can be used for templates Preview and save changes Full site editing for developers and designers Quick Introduction to Block Theme Architecture Create theme files using FSE or template editor Manually create block theme templates The impact of WordPress website editing on the ecosystem Job opportunities for developers and designers What does FSE mean for theme markets and theme designers? Site Editor and Page Generator Plugin Full site editor: More resources The final idea for WordPress website editing What is WordPress full site editing? In short, full site editing means that WordPress can now create and edit page templates and elements such as headers and footers in a block based graphical user interface. This is part of the second phase of the Gutenberg project and the initial climax of development that began with the introduction of the WordPress Block Editor in WordPress 5.0. Since its initial release, the block workflow has been extended to other parts of the WordPress user interface. For example, you can now also use it for widget management. One of the main goals of a full site editor is to provide users with a single workflow to modify their WordPress website. In the past, you usually needed to understand several different systems in order to create new menus, write pages or publish content, fill sidebars, or adjust color schemes. More complex changes require you to know how to edit page template files or write CSS. With full site editing, you can now make changes to all content in almost the same way (even if most of the changes still occur in different menus). For daily users, the benefit is reduced reliance on front-end developers. Website owners can now do many things on their own that used to require technical seals or professional assistance, such as changing page templates. In addition, these changes can now be seen immediately in the editor without having to switch back and forth between the front-end and back-end of the site or even code files. Meanwhile, full site editing makes it easier for theme developers and designers to create tags and allows for faster template creation. main features The following are the main components of full site editing: Page templates and template sections The core appeal is two new editor interfaces that allow you to customize page layouts similar to regular content editors. You can move page elements around, change their design (color, font, alignment, etc.), and freely add or remove them. The same applies to individual template parts such as header and footer. You can even edit them separately. Additionally, you can export your templates to use and distribute them as themes. Global style and theme.json A common feature in WordPress page builder plugins, full site editing allows you to define global styles, such as colors and layouts, for the entire site in a central location. In the past, you had to change styles in different locations (such as customizers and block editors). FSE also introduced the theme. json file, which serves as a link between different APIs and contains most of the style information in block based themes. Template blocks and block patterns Full Site Editing has added new block types to WordPress and WordPress editors. This includes static blocks such as site logos, as well as dynamic elements such as navigation blocks, post titles, and featured images. These changes are based on the settings in other places. There is even a fully mature query block, which is essentially a WordPress PHP loop. It allows you to display a list of posts anywhere on the page. Each block also comes with its own design and configuration options. Does that sound exciting? Then let’s delve into how to actually use this new WordPress feature. How to use full site editing to customize WordPress Next, I will first introduce how to use full site editing as a user. Later, we will also investigate what makes it a useful feature for developers and theme designers. Prerequisite for using FSE To utilize full site editing, the most important thing is that you have a WordPress website running at least version 5.9. You can also use a lower version, but you need to install the Gutenberg plugin and keep it up-to-date. The second thing you need is a theme. This is a theme that can utilize new features. We will discuss later how these themes differ from classic themes. Currently, a good option is Twenty Twenty Two, which was also released with WordPress 5.9. I will use it in the editing tutorial of this website. For other options, please refer to the Resources section at the end. Finally, if you are trying WordPress full site editing for the first time, I recommend using a temporary site or local development environment. In that case, you can make all the mistakes you want to make without anyone knowing. User Interface Overview When you log in to your testing site, you can access full site editing through Appearance>Editor (please also note that widget and customizer options are missing). Another method is to use the “Edit Site” link in the frontend WordPress management taskbar. Both will take you to the main editor interface. Let’s take a look at all the options available here: Top left corner: Let’s start here because it’s easy to overlook. Clicking on the WordPress logo will open a menu for editing templates and template sections. It also has a link to return to the WordPress dashboard. Top bar: For anyone who has used the Gutenberg editor before, this should look familiar. It includes options for adding blocks and block modes, switching between editing and selecting blocks, and undo/redo buttons. You can also open the list view of the current page, select different template components, and then jump directly to them. Top right corner: Contains buttons for saving changes and previewing designs on different screen sizes. The gear icon opens the settings for the entire template and individual blocks. Additionally, this is an option for customizing global styles. The three-point icon includes display options for the editor, the ability to export templates and template components, and access to the Welcome Guide. Center: The main editing screen is located in the middle. You can change the page template and use blocks here. It is also an accurate representation of your design appearance and includes some controls for adding blocks and other elements to the page. Most of them are switchable, so you can only open those options that you truly need and want. Global Style Presets As mentioned above, you can access this menu by clicking on the half black and half white circle in the upper right corner. It offers two types of style options: for the entire website and for individual blocks. The specific content available here depends on your topic. For Twenty Two, you can choose the layout, color, and layout. We will discuss the following content. Now, let’s turn to the most exciting part of the global style menu – preset color themes. Click to browse styles to find them. In this menu, developers can provide style presets for the entire theme. Hover over one of the options to see a preview of its color and font scheme, then click once to adopt the appearance of the entire theme. I really like this feature because it provides users with different versions of the same theme, which they can easily use as a starting point for their own creations. This is a bit like publishing themes together with their own sub themes. You can also return to the previous state by clicking on the top three dots and selecting Reset to defaults. Global Style: Layout When you click Typography, you will enter a submenu where you can choose whether to customize the style of general text or links. Click again and you will be directed to a section where you can make actual changes. As you can see, you can customize the font family, size, line height, and appearance, including font thickness and tilt. The options here also depend on the theme. For example, under Font family, you can only choose System Font and Source Serif Pro, as these are the only options included with Twenty Twenty Two. However, this is also because full support for (local) network fonts is only available in WordPress 6.0, and this theme appeared before that. Similarly, the numbers under the size indicate the default values set by the theme author. You can also choose to click on the small icon in the upper right corner to set custom values. The height should be self-evident. The appearance dropdown menu allows you to select font variants from a list. If you choose any of these options, the changes will be automatically visible on the editing screen. If you do not like the modifications made, you can reset to the default values at any time, as described above. Global color and layout Under Colors, you can change the color tone of different elements (uh!). What’s interesting here is the palette options, where themes can provide their own color palette, including gradients. This does not include the default options provided by Gutenberg and the custom colors that users can create. In addition, just like typesetting, themes provide different options for elements that can change color. In the Twenty Two, these are the background, text, and links. After selecting any one of them, you will enter a screen where you can easily choose a color or gradient from the available options or create your own color or gradient. When you do this, your choices will automatically translate into the content you see on the editing screen. There is even a color picker that allows you to set custom tones or input color codes in RGB, HSL, or HEX formats. Finally, in this theme, the layout option only allows you to add padding around the homepage. Change the style of a single block The default style values not only apply to the entire website, but you can also set them for individual blocks. For this, you can find an option called Blocks in the Global Styles section at the bottom. When you click on it, you will find a list of all default WordPress blocks. Click on them one by one to find similar options to customize their design based on each block. For example, below, I set the link color globally to blue, but set the color of the post title block (also a link) to orange. As a result, orange covers the initial value and the title appears in that color. If you have ever used CSS, then this principle should be very familiar. Set some site wide standards at the top of the style sheet, and then override them with customization in the hierarchy. It’s the same here. Mobile Block The way to change the layout is the same as in the main WordPress block editor. Everything you see on the screen is made up of blocks. Some may combine into groups or block patterns, but they are still blocks. Therefore, you can move and customize them as needed. For example, the main part of the homepage is the query loop block, which provides the latest blog articles. However, it is also composed of different blocks, namely Post Title, Post Featured Image, Post Excerpt, Post Date, Spacer, and Pagination. If you want to change its appearance, you can easily do it. For example, you can click on the “Article Featured Images” block and then use the arrows in the toolbar to move it below or above the post title. Alternatively, hover the mouse over the block and use the Drag button (which looks like six dots) to move it to another location. If you click on ‘Save’ afterwards, it will be converted into a design on your website. Use block options In addition to being able to move them around, each block also has its own settings. Just like in the Gutenberg Content Editor, you can access these contents through the gear icon in the upper right corner. After selecting the block, you will see its customization options here. The available content in this place depends on the block you are using. For example: Article featured images: with options to add margins, fill, and configure image size. Paging: Controls the alignment and orientation of its elements, line breaks, color, and whether to display arrows, herringbone, or no indicators. Article Title: In addition to setting the color, you can also decide whether the title is a link, opens in a new tab, or has a rel=attribute. You can also control color and layout (including the ability to use Title Cases) and add margins. You understand the key points. Please note that more settings are usually hidden and can be accessed through the plus sign or three-point icon in each section. In addition, when a block is selected, there are settings in the toolbar at the top of the block. You shouldn’t forget those, because they can be decisive. For example, in the case of article title blocks, you can determine the title order (h1-h6) within them, which is an important factor in SEO. Add and remove blocks Of course, not only can you customize the available blocks, but you can also add your own blocks. This works the same way as in a content editor and comes with different options: Hover the mouse over the blank space in the template until the plus button appears, and then click it. Then search or select the content you want from the block list. Click on the existing block and use the option buttons in the top bar to select Insert before and Insert after. Use the plus button in the upper left corner to view and search for the complete list of available blocks, then drag and drop them to the location you want. In some places and existing blocks, you will also find icons for adding more blocks. In addition, you can also add block patterns, but we will discuss further below. What’s the use of leaving questions? Okay, this means you can easily add static and dynamic content to the homepage. For example, query the title and paragraph above the loop block as an introduction to your blog. Of course, you can also easily delete unnecessary blocks. Just select one and click the Del or backspace button on the keyboard, or delete it through the block option. You can also open the list view at the top (with icons with three intersecting lines) and navigate to the blocks from there or choose to delete them immediately. This option also allows you to have a comprehensive understanding of the block structure of any part of the site currently being edited. Exchange and edit template components Template components are the entire parts within a template that you can exchange and modify individually as a whole. In the case of Twenty Twenty, that is, the header and footer. You can see it in the template options on the right or when you click the arrow in the top bar. The template section is just a group of blocks on the page, so you can edit them as described above. However, their uniqueness lies in the fact that themes can provide variations, allowing you to change the entire section with just one click. For example, when you select a title in the example, it will display a replacement option in the settings bar at the bottom. When you click on it, you can see the variations provided by the theme for that template section, as well as the appropriate block patterns. Twenty Twenty has several default options to choose from. Clicking on any one of them will automatically replace the entire title with a new option for the whole site editor. The same goes for the footer, where Twenty Twenty Two also provides some. Customize and create template components To edit the template section separately, click on the WordPress logo in the upper left corner to open the following menu. At the bottom, you will find a menu item called Template Parts. Click on it to view a list of all available template components on your site. Alternatively, you can select a template component and choose to edit it from its options. In the “Template Components” menu, click “Add New Component” in the upper right corner to create other components. For example, if you want to create another version of the footer, this would be very useful. It’s cool that when you click on it, WordPress automatically provides you with header and footer templates in addition to asking for the name, so you don’t have to start from scratch (unless you’re willing). In addition, you can also click on existing parts in the list to edit them. This works in the same way as in the main editor. The only difference between template components is that you have handles on both the left and right sides, which you can use to shrink and enlarge the size for checking its behavior on smaller screens (i.e. mobile devices). Just like a template file, any content you change and save here will be converted into all pages and templates using that section. Finally, if you have set up a group of blocks on the home screen, you can also turn them into template components. Click on the option in the home screen or list view, and then select Make template part. You need to give it a name and select the region it belongs to. When you save it, it can be used as a template component. Edit page template In the WordPress logo menu, there is also a project called Templates. It’s no surprise that it contains a list of all the page templates available on your website, from 404 pages to archives and single pages to single articles. Page templates are typically files that control the basic layout of different types of content. If the template is changed, all content of that type will also be changed. With full site editing, you can edit existing templates and create your own templates in the user interface instead of using a code editor. However, please note that FSE only allows you to create standard page templates through Add New. More content will be available soon. What is particularly convenient here (and in the template section) is the block template. These are pre designed layouts consisting of several blocks that you can add to website pages to immediately create the entire section. Examples include newsletter registration forms, pricing tables, and activity lists, but also include simple things such as style separators or images with quotes or titles. Templates allow you to quickly assemble the entire design. They are also easy to use! When editing a template, simply click the plus sign in the upper left corner and go to the “Templates” tab. Filter modes through the dropdown menu at the top, such as by featured template, footer, page, or button. If you find content you like, just drag and drop it onto the page. You can also search for specific content, such as the “title” at the top, which even displays blocks from the WordPress block directory. For a better overview, clicking Explore to access the Block Template Explorer can be helpful. This will display block templates in a larger window and enable them to be searched and filtered on the left side. Clicking on your favorite template will automatically add it to the template editor, where you can locate and customize it as usual. By the way, you can clear all the customizations you have made for each template by clicking on the three-point icon in the “Templates” menu. Add a new block pattern In addition to using available templates, you can also add external block templates from the template catalog. Search and filter your needs. If you find something you like, simply use the button on the Copy Pattern page to place it on your website. Afterwards, return to the Full Site Editing editor and paste it. Then the template will be displayed there. If you like it and may want to use it again, click on the three dots in the options bar and select Add to Reuse blocks. From now on, it will be available in the block menu under Reusable. Using an independent template editor There is also a second method for editing and creating page templates, which occurs in a regular Gutenberg content editor. It provides lower complexity than the site editor interface (e.g. unable to access other templates), but works similarly. Just create a new post or page, and then in the document settings sidebar, find the template panel below Status and Visibility. Here, it lists your current template and provides additional options in the drop-down menu. You can edit existing content through the ‘Edit’ button, or create a new template by selecting ‘New’. Each opens a more limited template editing experience. Edit and save templates in the same way as in the site editor. Any content you create in this way will also be displayed in the template list of the site editor. Blocks that can be used for templates In order to make templates in FSE possible, developers have added many dynamic blocks that can extract content from the database based on the following: Site title, slogan, and logo; Post title, featured images, content, excerpt, author, avatar, author biography, date, tag, category, next and previous article, read more; Posting comments, single comment, comment query loop, author, date, content, count, comment format, link; Archive title and terminology description; Query loop, post list, post template, pagination; Template section. These can also be used in a regular WordPress editor. There will be more content in future versions, and you can access them as early as possible through the Gutenberg plugin. Preview and save changes After completing all the necessary changes, you can choose to preview them in different screen sizes by clicking on the preview in the upper right corner. If you are satisfied, clicking Save will make the modifications permanently effective. WordPress will also list which templates and template sections your changes will affect. In this way, if you want to discard them in one place and place them elsewhere, you can do so. Just uncheck the components that you don’t want to save changes to. Click Save again, and your selection will be converted into the front-end of your website. Full site editing for developers and designers Full site editing is also a useful tool for developers. You can use this interface to create templates, and then export them as files to add to the theme and publish as a theme. Quick Introduction to Block Theme Architecture To take advantage of this, you need to note that FSE ready block themes have a different architecture than classic WordPress themes. Firstly, the templates and template files edited throughout the site no longer contain PHP, but are HTML files with block tags. In contrast to style.css, styles are mainly composed of theme.json You can set styles for the block editor and various blocks, style presets, and CSS defaults (front-end and back-end editors) here. In fact, theme.json is so powerful that by modifying it, you can change the style of the entire website. Thee.json also allows you to switch between different global style sets (i.e. files) within the same theme. This is a feature that only appears in WordPress 6.0. Mainly relying on theme. json greatly reduces CSS in other places. For example, the twenty-two style.css has only 148 lines. In contrast, its predecessor Twenty Twenty 1 had nearly 6000 rows in its style sheet. In addition, theme. json uses a completely different type of markup. However, you can write an entire article specifically for this file, so it’s best to start with the documentation to learn more details. The minimum requirement for a block theme is to have an index.php, style.css, and an index.html file in the templates folder. The latter marks the theme as a WordPress block theme. If you want to add template components, you will put them in a parts folder. There is an optional file for functions. php and theme. json. Finally, you can also include a styles folder for global style presets. For example, this could include different color schemes for the theme. In addition to changing the structure, you can also create template files in different ways when using block themes. Although you can still manually complete it, you can also use the new WordPress interface. Create theme files using FSE or template editor If you want to use a page editor to create templates, the first step is to simply set up your template as described in the first part of this article. An important option here is to know that you can use the advanced settings of the template section blocks to change their HTML element types. After satisfaction, you can download all theme files at once. This option is available in the More Tools and Options menu, which you can access by clicking on the three dots in the upper right corner of the full site editing screen. Here, find the export options. It will automatically download all templates and template part files as zip files. Just unzip them and you can use them for your theme. Manually create block theme templates Of course, template files can also be manually created. For this, you only need to be familiar with the block markings. In most cases, these are just HTML comments that contain the prefix WP: Some of them are independent. For example, the following is a method to add a website title bar to a template:

Starlinka Website Builder Exploration Center

Others, such as paragraphs, function similarly to parentheses:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

You can also use slug Call, such as calling footer footer.html as follows:

You can even customize HTML tags through the tagName property (default value:):

Here, you can also use one of the editors above to create blocks, and if you are unsure, simply copy the tags over. Additionally, if you save the file and then add it to the corresponding location in the theme directory, it will also be displayed in the FSE editor. For detailed information, please refer to the resource list below. The impact of WordPress website editing on the ecosystem In addition to providing tutorials on how to use full site editing, I also want to talk about what its arrival means for the WordPress environment and the people working there. Job opportunities for developers and designers As expected, an important question is whether this feature will eliminate the need for professional developers and designers. Do users still need them when they seem to be able to do everything themselves? The short answer is’ yes’. The emergence of WordPress itself, page builders or page builder plugins, or any other technology that makes it easier for outsiders to build their own websites, has not eliminated the need for professional assistance. This time it won’t happen either.