Full Site Editing Revise

Summary: Learning and revising Full Site Editing in WordPress.

Full Site Editing (FSE) represents a significant shift in how WordPress users and developers create and manage websites. Introduced as part of the Gutenberg project, FSE leverages the block editor to provide a unified interface for editing all parts of a WordPress site, including headers, footers, sidebars, and content areas.

Before FSE, WordPress utilized a clear separation between content editing (handled by the Gutenberg block editor) and site design (managed through themes and customizer settings). This separation often required developers to write PHP templates and users to navigate multiple interfaces for customization.

FSE aims to bridge this gap by enabling a cohesive editing experience where users can design their entire site using blocks, making customization more intuitive and flexible.

  • Unified Editing Experience: Manage all site parts within the block editor.
  • Enhanced Flexibility: Customize templates and template parts without delving into PHP.
  • Improved Theme Development: Streamline the creation of themes with built-in support for FSE features.
  • Greater Control: Fine-tune global styles and layouts directly from the editor.

Gutenberg Block Editor

At the heart of FSE is the Gutenberg block editor, which replaces the classic WordPress editor with a block-based interface. Blocks are modular units that can represent various content types like paragraphs, images, galleries, and more complex structures like headers and footers.

  • Drag-and-Drop Interface: Easily arrange blocks to build complex layouts.
  • Reusable Blocks: Save and reuse blocks across different pages or sites.
  • Block Patterns: Predefined block layouts that can be inserted with a click.
  • Extensibility: Developers can create custom blocks to extend functionality.

Block-Based Themes

FSE relies on block-based themes that are designed to integrate seamlessly with the block editor. These themes provide the necessary templates and styles to support full site customization.

Characteristics of Block-Based Themes

  • Template Hierarchy Using Blocks: Templates are built using blocks instead of traditional PHP template files.
  • Theme JSON Configuration: Centralized configuration for global styles and settings.
  • Template Parts as Blocks: Reusable components like headers and footers are managed as blocks.

Templates and Template Parts

FSE introduces the concept of templates and template parts to define the structure of different site areas.

  • Templates: Define the layout and blocks for specific types of pages (e.g., single post, archive).
  • Template Parts: Reusable sections like headers, footers, and sidebars that can be included in multiple templates.

Theme JSON

The theme.json file is a central configuration file that allows developers to define global styles, settings, and block defaults. It replaces much of the functionality previously handled by PHP in the customizer.

Capabilities of theme.json

  • Global Styles: Define typography, colors, spacing, and other design elements globally.
  • Block Settings: Configure default settings and styles for individual blocks.
  • Layout Controls: Manage layout constraints like content width and alignments.

Block-Based Theme

Creating a block-based theme is the first step to harnessing the power of FSE. This section walks through setting up a basic block-based theme with the essential files and configurations.

Theme Structure

A typical block-based theme has a specific directory structure to support FSE features.

my-fse-theme/
├── assets/
│   ├── styles/
│   │   └── style.css
│   └── scripts/
│       └── editor.js
├── parts/
│   ├── header.html
│   └── footer.html
├── templates/
│   ├── single.html
│   ├── archive.html
│   └── index.html
├── theme.json
├── index.php
├── functions.php
└── screenshot.png

theme.json

The theme.json file is crucial for defining global styles and settings.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#005177"
        }
      ],
      "custom": false,
      "customGradient": false
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "36px"
        }
      ],
      "customFontSize": false
    },
    "spacing": {
      "customPadding": false,
      "customMargin": false
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontFamily": "Arial, sans-serif",
      "fontSize": "16px",
      "lineHeight": "1.6"
    }
  }
}
  • version: Specifies the version of the theme.json format.
  • settings: Defines configurable options available in the editor.
    • color: Sets up color palettes and whether custom colors are allowed.
    • typography: Defines font sizes and custom font size options.
    • spacing: Manages padding and margin settings.
    • layout: Controls the content and wide sizes for layouts.
  • styles: Establishes global styles applied across the site.
    • color: Sets default background and text colors.
    • typography: Specifies global font family, size, and line height.

Block Templates

Block templates define the default block structure for specific types of pages. Here’s how to create a basic index.html template.

templates/index.html

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme"} /-->

<!-- wp:query {
    "queryId": 1,
    "query": {
        "perPage": 10,
        "pages": 0,
        "offset": 0,
        "postType": "post",
        "order": "desc",
        "orderBy": "date",
        "author": "all",
        "search": "",
        "exclude": [],
        "sticky": "",
        "inherit": false
    }
} -->
<div class="wp-block-query">
    <!-- wp:post-template -->
        <!-- wp:post-title /-->
        <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

<!-- wp:template-part {"slug":"footer","theme":"my-fse-theme"} /-->
  • Template Parts: Includes the header and footer using wp:template-part.
  • Query Block: Fetches and displays posts with titles and excerpts.

Global Styles with theme.json

The theme.json file provides a centralized way to define and manage global styles, ensuring consistency across the entire website. This section delves into customizing typography, color palettes, and spacing using theme.json.

Typography Settings

Define global typography settings to control fonts across the site.

{
  "settings": {
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "36px"
        }
      ],
      "customFontSize": false,
      "fontFamilies": [
        {
          "fontFamily": "Arial, sans-serif",
          "name": "Arial",
          "slug": "arial"
        },
        {
          "fontFamily": "'Times New Roman', serif",
          "name": "Times New Roman",
          "slug": "times-new-roman"
        }
      ],
      "customFontFamilies": false
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "Arial, sans-serif",
      "fontSize": "16px",
      "lineHeight": "1.6"
    }
  }
}
  • fontSizes: Defines preset font sizes available in the editor.
  • customFontSize: Disables custom font sizes to enforce consistency.
  • fontFamilies: Lists available font families.
  • customFontFamilies: Disables adding custom font families.

Color Palette

Establish a consistent color scheme using predefined color palettes.

{
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#005177"
        },
        {
          "name": "Accent",
          "slug": "accent",
          "color": "#ff5733"
        },
        {
          "name": "Background",
          "slug": "background",
          "color": "#f0f0f0"
        },
        {
          "name": "Text",
          "slug": "text",
          "color": "#333333"
        }
      ],
      "custom": false,
      "customGradient": false
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333",
      "primary": "#0073aa",
      "secondary": "#005177",
      "accent": "#ff5733"
    }
  }
}
  • palette: Defines a set of named colors that users can select.
  • custom and customGradient: Disable adding custom colors and gradients.
  • styles.color: Sets default color values for background, text, and other elements.

Spacing and Layout

Control the spacing and layout constraints to maintain design consistency.

{
  "settings": {
    "spacing": {
      "blockGap": "1.5rem",
      "units": ["px", "em", "rem", "%", "vh", "vw"],
      "padding": {
        "top": "20px",
        "right": "20px",
        "bottom": "20px",
        "left": "20px"
      },
      "margin": {
        "top": "20px",
        "right": "20px",
        "bottom": "20px",
        "left": "20px"
      }
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px",
      "allowWide": true,
      "allowFullWidth": true
    }
  },
  "styles": {
    "spacing": {
      "blockGap": "1.5rem",
      "padding": {
        "top": "20px",
        "right": "20px",
        "bottom": "20px",
        "left": "20px"
      },
      "margin": {
        "top": "20px",
        "right": "20px",
        "bottom": "20px",
        "left": "20px"
      }
    }
  }
}
  • blockGap: Sets the default gap between blocks.
  • units: Defines acceptable units for spacing.
  • padding and margin: Specifies default padding and margin values.
  • layout: Controls content width and enables wide/full-width layouts.

Custom Blocks

Custom blocks extend the functionality of the block editor, allowing developers to create unique content elements tailored to specific needs.

PHP Registration

<?php
function my_fse_theme_register_custom_block() {
    // Automatically load dependencies and version
    $asset_file = include( get_template_directory() . '/assets/scripts/custom-block.asset.php');

    wp_register_script(
        'my-fse-theme-custom-block',
        get_template_directory_uri() . '/assets/scripts/custom-block.js',
        $asset_file['dependencies'],
        $asset_file['version']
    );

    wp_register_style(
        'my-fse-theme-custom-block-editor',
        get_template_directory_uri() . '/assets/styles/custom-block-editor.css',
        array( 'wp-edit-blocks' ),
        filemtime( get_template_directory() . '/assets/styles/custom-block-editor.css' )
    );

    wp_register_style(
        'my-fse-theme-custom-block',
        get_template_directory_uri() . '/assets/styles/custom-block.css',
        array(),
        filemtime( get_template_directory() . '/assets/styles/custom-block.css' )
    );

    register_block_type( 'my-fse-theme/custom-block', array(
        'editor_script' => 'my-fse-theme-custom-block',
        'editor_style'  => 'my-fse-theme-custom-block-editor',
        'style'         => 'my-fse-theme-custom-block',
    ) );
}
add_action( 'init', 'my_fse_theme_register_custom_block' );
  • wp_register_script: Registers the block’s JavaScript.
  • wp_register_style: Registers editor and frontend styles.
  • register_block_type: Defines the block’s metadata and associates scripts and styles.

JavaScript Registration

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

registerBlockType('my-fse-theme/custom-block', {
    title: __('Custom Block', 'my-fse-theme'),
    icon: 'smiley',
    category: 'design',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { content } = attributes;

        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };

        return (
            <RichText
                tagName="p"
                value={content}
                onChange={onChangeContent}
                placeholder={__('Enter custom content...', 'my-fse-theme')}
            />
        );
    },
    save: ({ attributes }) => {
        const { content } = attributes;

        return <RichText.Content tagName="p" value={content} />;
    },
});
  • registerBlockType: Registers the block with WordPress.
  • attributes: Defines the block’s data structure.
  • edit: Defines the block’s editor interface using RichText.
  • save: Specifies how the block is saved in the frontend.

Block Attributes and Save Function

Attributes define the data that the block manages. The save function determines how the block’s content is rendered on the frontend.

  • content: A string attribute sourced from the block’s <p> tag.
  • edit: Uses RichText to allow users to edit the paragraph content.
  • save: Outputs the edited content wrapped in a <p> tag.

Building Templates and Template Parts

Templates and template parts are essential for defining the structure and reusable components of our site. This section explains how to create and use them effectively.

Creating Template Files

Template files define the layout for different types of pages. Here’s an example of a single.html template for single posts.

templates/single.html

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme"} /-->

<!-- wp:post-content /-->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
    <!-- wp:query-pagination-previous /-->
    <!-- wp:query-pagination-numbers /-->
    <!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

<!-- wp:template-part {"slug":"footer","theme":"my-fse-theme"} /-->
  • Template Parts: Includes header and footer.
  • Post Content: Displays the content of the current post.
  • Query Pagination: Adds pagination controls if applicable.

Using Template Parts

Template parts are reusable sections that can be included in multiple templates. Common examples include headers, footers, and sidebars.

Creating a Header Template Part

parts/header.html

<!-- wp:group {"tagName":"header","className":"site-header"} -->
    <!-- wp:site-title /-->
    <!-- wp:navigation {"layout":{"type":"flex","justifyContent":"left"}} /-->
<!-- /wp:group -->
  • Group Block: Wraps the header content.
  • Site Title: Automatically displays the site’s title.
  • Navigation: Includes the site’s navigation menu.

Including the Header in a Template

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme"} /-->
  • template-part: References the header.html file in the parts directory.
«
»

Leave a Reply

Your email address will not be published. Required fields are marked *