Full Site Editing WordPress Website Designer UK

an image of Geniez Web

Geniez Web

The Full Site Editing (or FSE) project is another evolutionary step taken by the WordPress development team to provide a unified block-based editing experience throughout the site.

In a market WordPress Website Designer UK where other so-called “website builder” platforms are developing more competitive offerings, Full Site Edit (or Full Site Edit) offers an enhanced user experience and frees WordPress users from many previously reserved tasks. Internet experts.

WordPress FSE relies on the Gutenberg editor integrated in the CMS since version 5.0. Gutenberg Editor actually provides WordPress content editing (pages and posts) based on the edit block form system. It is this operation that gradually extends to all functions and modification of WordPress sites. In WordPress 6, most CMS editing interfaces now benefit from the concept of Gutenberg blocks, whether for post creation, static or dynamic page creation, or website content creation templates.

Complete Site Modification

Therefore, Full Site Editing relies on Project Gutenberg to provide complete editing of block-based sites and integrate them into a flexible template. Project Gutenberg originally consisted of providing editor blocks for the WordPress editor based on components from the REACT library. The developers then redesigned the CMS itself to provide structural components such as headers, site logos, taglines and footers, widget areas, sidebars, navigation menus, etc.

This is the template system currently used for WordPress pages and posts and has evolved from the concept of blocks to provide a fully integrated and streamlined editing experience at site scale. 

While the WordPress template system originally allowed for the creation of dynamic templates, FSE now uses so-called “requests” which benefit from blocks. You can create a rendering of the call result in the database. Finally, the WordPress full site editor now includes a system for defining global styles and parameters) Site developers and authors can use a simple JSON file (theme.json) that you can use to edit and define Default style definitions provided by WordPress Themes All Features.

Among other things, this file can define fonts, default sizes, color palettes, page width, etc.

As a result, WordPress Full Site Editing opens up website building to the masses, simplifies the work of website creators, allows them to focus again on website content and design, and integrates front-end and back-office interfaces. Achieve three goals: Simplify the process of learning the platform and managing the site over time.

Structure of WordPress FSE

The site-wide editing provided by WordPress is based on four elements to globalize the site-wide editing experience.

Gutenberg’s Editorial Section and Patriarchal Composition

The move from WordPress to the Gutenberg editor has made it possible to present users with a set of components called blocks thanks to an intuitive interface that appears directly in the editing window. These editorial units let you create anything with text elements (headings, paragraphs, quotes, etc.) and media (photos, videos, galleries, etc.), but also groups, columns, and other sections. The HTML rendering logic is integrated into the underlying system, giving WordPress users a simple and intuitive out-of-the-box editing experience.

Article Page Templates and Template Components

Template and partial template editing is the second step in WordPress’ evolution towards full site editing. These templates replace the traditional PHP templating system for WordPress themes. Their concern is to provide a highly intuitive user experience that is close to content editing, but the overall document structure (headers, footers, menus, sidebars, etc.) and site settings (colors, fonts, alignment, etc.) extends up to.

WordPress Template Block

While Gutenberg block templates are now popular for reusing site portfolios, template blocks (or theme blocks) allow users to directly add and edit elements such as logos, taglines, navigation menus, or templates. provide a way. WordPress site. The system also provides a set of so-called dynamic blocks. This allows you to retrieve articles and other specialized content from databases located anywhere on the site.

Global Styles and Theme Files as a Simple Theming Tool

The default styles for a WordPress site or theme were previously defined using the Customizer, the main tool that allows WordPress users to customize their own themes. Global site styles that affect page titles, images, colors, widgets, and other backgrounds are now predefined using a single file. This simplifies the work of the developer and her web agency. These styles are accessible from the Global Styles tab and allow users to customize their site with just a few clicks.

Finally, the theme.json file allows you to define a set of functions that help suggest blocking functionality based on the WordPress theme used by the developer or agency responsible for building the site.

All of these elements inherit directly from the Gutenberg block, so in order to better understand how these components work and how they extend to all levels of your WordPress site structure, we recommend that you use these. It can be important to remember what a component is.

Content Management Block

Since being integrated into WordPress version 5, Gutenberg has gradually acquired a library of so-called “native” blocks for creating HTML documents. Integrating components into the WordPress editor is an important step in the evolution to FSE.

Gutenberg Block

These editing blocks allow you to instantly integrate headings, paragraphs, buttons, quotes, tables, etc., and provide tabs, accordions, counters, and other typographic elements commonly used on modern websites. Gradually integrated through plugins.

Edit blocks also contain document formatting components such as sections, groups, and columns. Gutenberg blocks are constantly being enhanced with external libraries, free or paid, to continuously expand the editing possibilities of your WordPress content.

Reusable Templates and Blocks

The concept of blocks also allows WordPress users to use patterns (or compositions) to group a set of elements that define all or part of a layout. This way, your saved work on your website can be reused in any page, post, or WordPress content template.

Finally, the Gutenberg editor provides so-called “reusable” blocks, global elements that find the same characteristics no matter where they change on your site.

Dynamic Block

The desire to provide users with a full editing experience of a website created building blocks for Boeotian users to remove the code normally required to build a website. He can configure the overall structure of the page himself, place the logo and tagline, create the header and place the navigation menu, create the text layout and define elements of the footer page.

Finally, dynamic blocks allow users to search and display titles, summaries, categories, images, and other content for posts or elements displayed in the WordPress query loop.

Since version 6, this fully user-editable edit block allows WordPress to integrate a new content model system previously defined in PHP files (templates).

WordPress Full Site Editing Templates and Template Elements

Content templates existed in WordPress long before WordPress was introduced as a full site editing platform. The main difference introduced by the FSE concept is that it gives the user control over the architecture of the site. In the past, the PHP model was defined by the developer or the agency responsible for the project. to the scene.

Editable Content Template

That’s why the WordPress FSE interface now offers a separate admin area to manage your website templates. Here, Twenty Two Theme provides FSE templates for homepage, posts (article or custom content), pages, blog index, search results and 404 errors. Note that you can use multiple templates for the same type of content, such as an “alternative blog” template for the theme you want to set. Every FSE template provided by the theme is of course fully editable, so WordPress users can create as many templates as they want or choose alternative solutions for specific content.

WordPress FSE templates use not only blocks, but also “template elements” that work like Gutenberg configuration templates. Therefore, in the spirit of ESF, these elements can be reused and edited across the content of a WordPress site as many sub-models.

WordPress FSE Template Elements

The Twenty Twenty Two theme currently offers four template elements, but WordPress themes can also provide as many sub-templates as you need.

Headers and Footers

A header (or header) sits at the top of an HTML document (web page) and usually displays a site logo, tagline, navigation menu, and sometimes a presentation banner. Here, the WordPress FSE editor takes over the builder body and is responsible for building all visible parts of the document.

You can also create footer (or footer) rules directly for users, or to provide alternatives to login pages or other special content on your site. Ultimately, this may lead people to question whether there are widgets for the WordPress platform.

Post Metadata and Comments

Metadata and Comment elements are very useful FSE submodels for managing dynamic content on WordPress sites. It allows WordPress users to build their own pages by defining their own dynamic and/or static content areas for each publication. I “Metadati di pubblicazione” includono un insieme di dati relativi a un articolo pubblicato, come il nome e l’avatar dell’autore, la data di pubblicazione, la sua categoria o altri metadati aggiuntivi.

Commentare i post del blog ti consente di arricchire i tuoi contenuti fornendo al contempo un alto grado di interattività al tuo sito web. As we have seen, the direction WordPress has taken over the past four years is to provide an integrated editing experience with a completely block-based site administration and page creation interface. We invite you to find out how this new interface works in practice.

Use the new WordPress FSE Interface

Gutenberg, I won’t go back to the subject of this entire article, but I will try to provide some details on how the site-wide editing interface in WordPress site administration actually works.

Note: The official WordPress FSE Testing Information page specifies the minimum requirements to take advantage of these features.

  • Use the latest version of WordPress, or at least version 6.0. Please download it from here.
  • Use a block-based WordPress theme.
  • Use the latest version of Gutenberg or at least version 13.3.

Editing an FSE template might seem counterintuitive at first, because when you enter the editor (beta mode), the page that hosts your website (blog page or static page) opens. But keep in mind that site-wide editing is primarily a way to create templates that can be assigned to pages and other WordPress content. To access the complete list of site templates, you need to access the administration menu of this new system by clicking on the WordPress icon in the upper left corner of the window.

But in the first editing screen, you’ll learn how to use the Unity editor to create page templates and also configure the site’s overall style and navigation elements.

Top Bar

So the top bar of the FSE template edit screen looks like Gutenberg, but for good reason, because you can edit any edit block the same way. Therefore, I won’t be going back to the block editing tool (left side of this toolbar) that I detailed in my previous post.

However, there are two other interesting areas of the top bar.

  • A list of shortcuts in the center allows you to browse the elements of the current template and select a template to edit: return to the Templates page and select a template
  • A series of buttons for accessing the following items.

Global Styles of WordPress

or to the navigation block used in the modified template (only in beta mode if you have enabled the latest version of the Gutenberg plugin (currently 14.7.3). Navigating and selecting templates in the editor is very simple, so I recommend learning more about the concept of editing global WordPress FSE styles.

Global Style Settings

The first WordPress style selection option allows the user to select a global setting definition.

  • Color palettes for text elements, fills and backgrounds, links, titles and buttons.
  • The typographic settings for these same elements (title, text, link and button) are font and font style, size and line height (again, the user can choose the units (px, em or rem).
  • The size of the site, in particular.

Each palette typically has five so-called “solid” theme colors and a default color scheme.

  • Base: background (theme color)
  • Contrast (depends on background color)
  • Dominant color (also called accent color in some themes)
  • Secondary colors (usually separate from primary colors)
  • Tricolor

The concept of sitewide editing is fully utilized here, as each change is displayed in the editor in real-time, just like when editing a page or post.

Manage Global Styles for Gutenberg Blocks

Finally, the Styles tab of the WordPress FSE interface allows you to define basic settings for each block available in your theme. Accessibility settings also correspond to typography, colors, and “layout”, i.e. settings for padding and margins.

This principle of defining advanced styles upstream of the settings of each block in the document is undoubtedly what Advanced Themes and other well-known page builders on the market such as Elementor, Divi, Avada, etc. Used to use it before. It reminds me of a widely used process. The WordPress Customizer that provides this functionality.

Choose a Template for the Current Content

Users will be able to select any template created or modified directly from the Gutenberg editor. This feature is neither new nor specific to full site editing, as it is exactly the same as using the classic WordPress editor.

Leave a Reply