Key concepts of full site editing
The key concepts of full site editing are:
- The Site Editor interface, where you can create, preview edit, and remove templates.
- A Styles interface for selecting default styles for the website and individual blocks.
- The template editor, where you can create and edit post and page templates.
- Templates for full-page layouts, including site header, content, and footer areas.
- Template parts, are structural blocks that you can reuse within templates.
- Block patterns with unique design elements for different types of pages and sites.
- Blocks for site building, such as site title and site logo.
- Theme.json is a theme configuration file with default styles and settings for blocks.
- Managing which blocks and block options that are available to users, including block locking.
Finally, one important aspect is the deliberate focus on improving the performance of your WordPress site.
These features are closely tied together. You can use some of the features on their own, even with a classic PHP-based theme.
Changes to site creation
You will build the entire page layout using blocks -everything you see on a page is a block.
And yes, it means that you can finally use the cover block as your header image :).
A page can consist of a single template, or it can be a combination of template parts and block patterns. You can create, edit and preview templates and template parts in the new Site Editor:
Full site editing removes the customizer and widget menu links
Because you build pages using blocks -and nothing but blocks -WordPress hides the menu links to the Customizer and widgets when you activate a full site editing theme.
-The Customizer menu item is automatically re-enabled when you activate a plugin that uses it.
This change emphasizes ensuring that the blocks in the editor and front match and that theme and plugin developers test their blocks and block styles carefully.
Default colors and typography with global styles
In the Site Editor, you will find a new sidebar panel named Styles. Here, you can select default colors, typography, and spacing for the website and different block types:
Changes for theme developers
With full site editing, developers will primarily use HTML templates instead of PHP files and HTML comments and block markup instead of PHP functions.
Example block markup:
<!-- wp:paragraph -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->Theme authors can no longer rely on the Customizer for global options.
Instead, global styles and block patterns have more significant roles.
How the Site Editor and themes work together
When you update or save a design in the Site Editor or template editor, WordPress saves the changes in the database. The files inside the theme folder are not updated, and the website uses the saved templates.
WordPress saves the content, markup, and styles in four new custom post types:
- Template (
wp_template) - Template part (
wp_template_part). - Styles (
wp_global_styles) - Navigation menus (
wp_navigation)
If the user has saved changes to a template and the theme is updated, WordPress will not apply the update unless the user resets their customizations.
Building themes using the Site Editor
You can create and preview layouts by placing your blocks in the Site Editor. When the design is ready, export it as a .zip file, directly from the editor’s tools and options modal:
The export contains a copy of the active theme with the changes applied, and you can use it as a base for a new theme.
The WordPress community has also created tools to help with theme creation, like the Create Block Theme plugin
Theme.json — A new theme configuration file
Another key concept of full site editing is the new theme configuration file called theme.json.
Both classic themes and block themes can take advantage of theme.json.
With this file, theme developers use JSON to define defaults like content width, color palettes and gradients, background color, text color, padding, font families, and font sizes.
You use this file to:
- Enable and disable features like gradients or drop caps.
- Set default values for the Styles interface in the editor.
- Create CSS custom properties used to style the blocks in the editor and the front of the website.
Conclusion
Full Site Editing is a solid choice for anyone who wants a comprehensive CMS solution to create websites. Frontend drag-and-drop design tools as well as backend capabilities for managing content and other aspects of the website is a attractive proposition
Overall, I believe this service is ideal for individuals and small businesses wanting more control over their online presence, without requiring advanced technical skills. Ultimately though, it comes down to personal preference so anyone interested should definitely look into it further before making a decision.
Leave a Reply