Full Site Editing basics in Wordpress

Introduction

Full Site Editing lets you change your whole website's look and feel using blocks. It makes building and customizing your site easier without coding.

You want to design your website header and footer without coding.

You want to create custom page layouts using blocks.

You want to change site colors and fonts globally.

You want to preview design changes live before publishing.

You want to build a consistent style across all pages.

Syntax

Wordpress

Use the WordPress Site Editor to drag and drop blocks.
Edit templates like header.html, footer.html, and page.html using block patterns.
Save changes to update the whole site design.

Full Site Editing uses blocks everywhere, not just in posts or pages.

You work inside the Site Editor found in the WordPress admin under 'Appearance > Editor'.

Examples

This example shows a header with a site logo and navigation menu blocks.

Wordpress

<!-- Header template -->
<!-- wp:site-logo /-->
<!-- wp:navigation /-->

This footer uses a paragraph block to show copyright text.

Wordpress

<!-- Footer template -->
<!-- wp:paragraph -->
<p>© 2024 My Website</p>
<!-- /wp:paragraph -->

A sidebar template part with a search box and latest posts blocks.

Wordpress

<!-- Template part for sidebar -->
<!-- wp:search /-->
<!-- wp:latest-posts /-->

Sample Program

This is a simple header template using Full Site Editing blocks: a group block containing the site logo, site title, and a navigation menu.

Wordpress

<!-- wp:group -->
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
<!-- wp:navigation -->
<!-- wp:navigation-link {"label":"Home","url":"/"} /-->
<!-- wp:navigation-link {"label":"About","url":"/about"} /-->
<!-- /wp:navigation -->
<!-- /wp:group -->

Important Notes

Full Site Editing requires a block-based theme that supports it.

Changes you make in the Site Editor affect the whole site immediately after saving.

You can create reusable blocks and template parts to keep your design consistent.

Summary

Full Site Editing lets you build your entire website layout with blocks.

You edit templates like header, footer, and pages visually in the Site Editor.

This approach makes customizing your site easier and faster without coding.