Mastering WordPress full site editing: a step-by-step tutorial - (r)
-sidebar-toc> -language-notice>
WordPress' evolution has taken the time to become mature, however it's gone from a simple blogging system to a powerful Content Management System (CMS) which almost manages the internet. Most significant advancements have come in creating site designs. WordPress Full Site Editing (FSE) is an innovative approach to integrate complicated tools within each and every person's hands.
This complete guide will go over the background and capabilities of WordPress full site editing. Its ultimate aim is to show you how FSE can work and help you develop your own site designs as well as the professionals.
A brief history of design and layout creation within WordPress
Knowing the development of creating websites and layouts in WordPress is an essential element of understanding the significance of FSE. The key tool that's central to the present is the classic editor.
It's true that this was not ever "classic." This was always an alternative to the TinyMCE Editor - the default since the first version of WordPress up until around 2018. It's a straightforward What You See Is What You Get (WYSIWYG) text editor which allows you to input HTML content as well as basic HTML and also some styles for formatting. In fact, you can download the TinyMCE Editor since it's a commercial tool:
The biggest drawbacks to TinyMCE Editor are that TinyMCE Editor are a lack of options to preview the editor's frontend and less flexibility than you'd sometimes like. Theme frameworks were a feasible and effective alternative. Of course, StudioPress' Genesis Framework is still with us, but there were some other options like Thesis.
You'll want to read the following section to learn why we provide alternatives to the TinyMCE Editor and a page builder plugin.
The Block Editor as well as WordPress complete editing of the site
WordPress is the top platform in terms of popularity, however for it to be there the platform has to fight for its position. In the past, numerous other platforms have entered the marketplace.
It was the source of major issue regarding WordPress management, as different platforms were gaining more visible traction. It also featured sleek, modern, efficient interfaces, including for basic layout control.
The Block Editor can be described as an easy way of building your website's pages and posts, although this also has negatives. Its confined application means that you will likely needs a page builders plugin in order to create modifications that are more complex. Additionally, you'll need expertise in development to construct a complete site, which is a creative barrier to which the WordPress team has an answer to.
What WordPress Full Site Editing (FSE) is
It is the official' way to edit your website. It brings all aspects of your site under the wing of its administrator:
- Navigation editing. The previous method of editing navigation employing an Appearance > Menus builder screen has been incorporated into The Site Editor.
- Global designs. It is easier to control the design and layout of the entire website. It includes typography, colors, spacing, and much more.
- Block Patterns. You can think of these as reuseable design elements using Blocks that you add to your layouts.
Then we'll discuss what WordPress Full Site Editing could help you with in the future. In the meantime, let's look further into the reason we should have FSE in the first place.
What is the reason FSE is included in WordPress
The WordPress team has several reasons to introduce FSE. Some of these concerns are of a technical nature. As an example The Block Editor won't allow us to edit every aspect of the site, even though this functionality is required in the first place.
This experience also brings longevity. WordPress complete site editing will not disappear; it will simply change with the years. The platform has an opportunity to evolve to the changes the development team at WordPress would like to bring to WordPress.
The overall impact of this power extends all the way from developers to end users. WordPress fully edits your site gives users greater control over design changes they wish to implement without having to rely on the developers, advanced customizations or even coding expertise.
The alternative to FSE
For the WordPress staff, FSE is not only an option for the moment, but it's also the future of WordPress. But, you'll require an appropriate theme for it (more of which later). What's more, other WordPress companies might not be in agreement particularly those that have competing products.
It's true that the Block Editor can still be used for the majority of customizing and creating content. From this point to full site editing could be just a quick hop, and you'll likely use it already:
To experience a completely different approach in comparison to WordPress fully editing your site and to return back to where the whole thing began, you could opt for the brand fresh CMS: ClassicPress.
The idea behind the project is that WordPress's evolution is a great idea, in addition to the Block Editor and, by extension, FSE. Therefore, the ClassicPress Fork does not include FSE. Instead, you'll create websites with either the Classic or TinyMCE Editor just like previously.
The Block Editor is essentially a solution to the Block Editor's lack of maturity at the time of its initial release. At the time, the idea seemed to make sense on paper. Given WordPress's current editing experiences however, there's no incentive to use ClassicPress.
What is the process? WordPress complete site editing functions
In a nutshell, WordPress full site editing extends the Block Editor's functionality across your entire website. For you to use FSE for full site editing, you must have the 'Block' theme or 'FSE theme' that supports FSE. This will be discussed in the future.
The most basic overview of the way FSE operates is simple:
- You can access site-wide tools for designing. The Global Styles panel later, however, it allows you to modify the appearance of elements on your whole site. In many cases, you won't need special CSS for implementing your ideas.
- The theme.json file is the heart of FSE. The configuration file defines the primary styles and configurations of your theme. This is a good starting point to developing your site's design however, it could also become the "hub" of your development.
Most users won't run any version of WordPress older than 5.9 However, if you are, then you'll have update your WordPress to make use of FSE. We'll outline that you'll also need a supporting theme. Let's discuss this quickly.
Picking the right FSE topic
- Check for regular updates to the theme's codebase.
- Find out what others have to say about the theme by reading reviews and ratings.
- Make sure the developer offers the appropriate level of service according to your specific needs.
Since WordPress complete site editing is a new arrival to the platform, fewer theme options are available to you. However, this doesn't mean that quality is hard to find, though. A lot of larger companies have their take on a FSE/Block themes. One of the first was ThemeIsle's FSE-based Neve: Neve:
The 'traditional' or 'classic' version of the theme makes use of the Customizer that was previously available on the Appearance screen. The new version includes the Site Editor fully and offers better subjective performance.
There are other Block themes worth looking at for example, like Portfolio WP as well as Mugistore. But, Ollie is perhaps the most popular among them all:
It enables WordPress complete site editing, with no sway. It comes with an excellent onboarding tool, and comes with a premium version that includes lots of Pattern Library elements as well as templates.
The Site Editor's capability and its depth allow the creation of (and extend) themes that often require lots of code and resources. It democratizes the ability to develop and create themes. The main interface is the first interface for these.
Exploring the main FSE interface
To find the Site Editor, navigate to Edit > Appearancewithin WordPress:
The interface is simple enough. On the right-hand side there is a design preview. Clicking this will launch the interface of Site Editor for your home page. On the left is a set of Links to other pages for editing for specific task. Then we'll examination of these screens later.
Before we get into each of the five screens in FSE, note that you have the option of exiting from Site Editor using the WordPress logo that is located in the upper-left part of your screen. As an alternative, you are able to click the 'back' icon on the primary Designpage:
Now that we have this over now, let's dive into FSE.
The 5 foundations of WordPress complete site editing
We'll now look at each of the screens in the editor in relation to the way it appears in its navigation. This actually leads us to discuss that screen!
1. Navigation
The Navigation page replaces the appearance > menus screen. Once you enter it, you'll be presented with an overview of the pages and posts that you have on your website:
If this is your first site, it will display all of your posts as well as pages listed here. This can be confusing as it represents your primary navigation menu. Near to the Navigation heading, you can open the Actions menu. This will give you options to modify the menu alter the name, delete it, or copy it
If you click on Edit to open the Block Editor, it will display a version of the Block Editor that contains your navigation block menu:
On the sidebar, you have options to move each entry up or down and take it off the list, and build a sub-menu from it:
Each entry in the menu uses it's own Page Link Block, which will come with the option of its own. You have inline formatting tweaks and style of the sidebar options:
Note that you can include inline images or submenus on this page. This is far more flexible than the standard way to create navigation. If you want to add a new item to the menu, just click the Plus icon, and then select your post or page:
When you save your edits, you'll see the navigation reflect your tweaks. For further menus to be created, you can use this action > duplicate link back on the Navigation page.
2. Styles
The Styles screen lets you can control the style of your site on the global scale. This sidebar lets you choose various palettes and font settings to create different styles:
By clicking on any of them, you can reveal the design's the appropriate spot on your website. There's also an Edit'pencil icon located in the top right of the sidebar to further make changes in the Site Editor:
Each of the options within the bar here is a selection of fonts, colors, layouts as well as shadow settings. In particular, you could select site-wide fonts and then apply them to different elements of your design:
Going deeper into the menus may provide you with additional options to experiment with, such as spacing, colors and many more. Layoutsection Layoutsection lets you alter the dimensions of your main content area. You can also adjust padding and Block spacing:
If you'd like to know what these modifications look like without browsing your site You can click the "eye" icon to open the Style Book. It's an excellent tool to visualize which designers will appreciate:
Finally, while we won't be focusing on it You can customize the style of every Block on your own site. As an example, you can create a new style based on the Paragraph Block's style that is global. Again, when you finish up, you can save your modifications, and they will be applied to your website.
Using the theme.json file in conjunction with WordPress Full site editing
It lets you specify the default styling for your website and Blocks, and you'll utilize it as a configuration file. Moreover, it uses the JSON formatting and provides the user a simpler experience than in the past.
Ultimately, know that whatever you are able to do inside theme.json, you can also do within Site Editor.
3. Pages
Pages screen is a copy of the Pages screen is a duplicate of the features of the standard Posts Screens and Pages of the WordPress dashboard. You'll find, for instance, the statuses of your pages that categorize your posts into Published drafts, scheduled, and more.
Every page comes with additional options, like Edit View, View, Rename and Delete. It is also possible to edit a page using the 'pencil icon. On the uppermost part of the list, there's an"Add New" Page button, which will do the job of a lifetime.
If you already use the Block Editor the screens feel most at home to you. However, while you have the same features here like you normally do, the Site Editor gives you some extra Theme Blocks to assist you in building your own site. They cover common scenarios like adding a website logo as well as navigation, authors comments, and much more:
One of them - one of them - the query loop block - can help you achieve tasks that you'd often require PHP for. It, for instance, can display content in accordance with particular parameters, it is possible to display your latest posts or even build a portfolio. But, none of that will be possible without the two screens of the Site Editor.
4. Templates
The process of working with templates follows the same approach as posts and pages: you'll use the Editor for Sites to include Blocks into the template, then save the changes. Of course, these will apply to every page using the template.
To create a new template, click on the "Add New Template button:
The process will take you through a simple process to pick a kind of template you want to design and then a Block Pattern for the first design. These designs are the subject of our last section.
5. Patterns
Block Patterns are a related collection of Blocks which fulfill certain tasks on your site. You can, for instance, incorporate a header design that includes logo, navigation, and site title:
On the left-hand side there's a list of all the available patterns split into folders referred to as 'types. They are an excellent option to build quickly an online design and can often appear stunning.
Its Add New Patternbutton will open the editor, which lets you design those sections on your own. It allows you to design components that can be reused for your site that is a long-lasting and efficient way of creating websites for you and everyone else you work with.
How to use WordPress Full site editing in order for creating designs
There's plenty to dive into with regard to WordPress complete site editing and we can't cover everything that you can accomplish with it. We can however provide a few recommendations to make the most of FSE.
In this case, you could export your style and templates to be reused on different sites. To do this, head to the editor of each page or post, after which click the Options menu from the top toolbar. Within the drop-down menu, choose export:
The Search icon on the site editor's screen and in the search bar within the Block Editor toolbar will give you accessibility to WordPress Command Palette or Command Center. If you're a user of code editors, you'll know how it works. It's a means of getting to almost anywhere within the Site Editor by using a context-sensitive search query. You can also execute commands
This can accelerate your progress and decrease the amount of keyboard or mouse actions you need to make. It is possible to add, remove, and edit all manner of elements on your site from this as well as toggle various views and playing on the patterns.
Summary
WordPress full site editing represents the latest method to create your web site with no code. This is a major leap from previous editing versions, offering you a an array of choices to experiment with.
We like how flexible it can be: normal users of websites won't be required to edit a line of code and can use the screen of Site Editor. Developers have access to their own theme.json file, which we'll go over in the next post. Regardless, right now we are at the top of making the perfect WordPress website that is built to your precise needs.
Are you interested in making use of WordPress full-site editing in your WordPress work? Let us know your thoughts in the comment section below!
Jeremy Holcombe
Senior Editor at WordPress Web Developer as well as Content writer. Apart from everything related to WordPress, I enjoy the beach, golf, as well as movies. Also, I have height problems.