search
HomeWeb Front-endCSS TutorialThe WordPress Evolution Toward Full-Site Editing

The WordPress Evolution Toward Full-Site Editing

WordPress’s block editor revolutionizes the way content is created. It allows us to create content blocks and arrange them in a component way, which makes content creation more flexible and provides more opportunities for developing new modular content.

Since the editor was first introduced, the block ecosystem has undergone earth-shaking changes. Last year, Dmitry Mayorov wrote an article exploring the rise of block variants and how they can create their style variants by extending existing blocks, thus providing greater flexibility.

Then we have block styles , which can combine blocks into reusable styles.

This means we have blocks , block variants , reusable blocks and block styles . These powerful tools can design layouts directly in the editor!

But you may have heard that WordPress plans to extend the functionality of blocks beyond the article editor . They directly target global elements—menu, header, footer, etc.—and strive to implement the site-wide editing (FSE) function in WordPress.

Wow! I certainly can't represent everyone, but I immediately thought of what this means for theme developers. I mean, if the template is designed in the editor rather than in the code, what is the theme? The topic I imagined was more like a set of shells containing very few marks. Perhaps more development efforts will focus on creating blocks, block styles, and block variants to bring everything together.

It's true, you can test it now. Make sure you are using WordPress 5.6 or later, and then install the experimental TT1 Blocks theme and Gutenberg plug-in.

Open the theme and it actually has only two PHP templates—and then—the HTML files for the block template and the block template section .

I personally am very optimistic about this direction. I can even say (sneaking Chris) CSS-Tricks is also very optimistic about this direction. We switched to blocks last year and it rekindled our passion for writing blog posts like this. (Honestly, in the past I might have written something like this in a code editor and then imported it into WordPress with a classic editor. At the time, it was a better writing experience for me.)

While I'm optimistic about blocks, I understand that's not the case for others. In fact, I've worked with many people (I mean well-intentioned) who know nothing about block editors. Developing a block editor requires a huge shift in thinking, and there is currently a lack of relevant documentation. Things are still under active development, and each new WordPress release iterates over the block editor. People can’t be blamed for deciding to wait for the next bus to stabilize things and gradually improve standards.

But at the same time, this is in line with Matt Mullenweg's infamous advice to WordPress developers in 2015: Learn JavaScript deep.

I'm excited about the blocks (and still do). Site-wide editing makes me a little uneasy, but that's mainly because it moves the concept of blocks out of the editor, and I'm just starting to get a little bit about them at the moment.

Whatever this means, what I most look forward to most is the official release of a default theme that supports FSE. Remember how you felt when you first opened a WordPress theme? I was amazed at the marks in it and spent countless hours studying each line of code carefully until I turned it into my own. This is the experience I was looking forward to when I first opened a new theme.

Before that, here are some ways to help you get up to date:

  • Make WordPress Design – The manual lists FSE as one of the team’s current priorities and outlines the project. It was last updated in May 2020, so I don't know how new the information is and whether the page is still under maintenance.
  • How to Test FSE – Instructions for setting up a FSE site locally and participating in the test.
  • TT1 Theme Repository – View the reported content and the status of these issues. This is where the topic development is focused.
  • Gutenberg Plugin Repository – Reported plugin issues. This is where you focus on block development.
  • Topic Experiment Repository – See more topics that are experimenting with blocks and FSEs.
  • #fse-answers – A collection of replies to many questions about FSE.
  • #fse-outreach-experiment – ​​Slack channel for discussion of FSE.

The above is the detailed content of The WordPress Evolution Toward Full-Site Editing. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
@keyframes vs CSS Transitions: What is the difference?@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

Using Pages CMS for Static Site Content ManagementUsing Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLThe Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewCSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesHow to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.