The block editor was a game-changer for WordPress. The idea that we can create blocks of content and arrange them in a component-like fashion means we have a lot of flexibility in how we create content, as well a bunch of opportunities to develop new types of modular content.
But there’s so much more happening in the blocks ecosystem since the initial introduction of the editor. Last year, Dmitry Mayorov wrote about the emergence of block variations and how they provide even more flexibility by extending existing blocks to create styled variations of them.
Then we got block patterns, or the ability to stitch blocks together into reusable patterns.
So, that means we have blocks, block variations, reusable blocks, and block patterns. That’s a lot of awesome tooling for designing layouts directly in the editor!
But you may have heard that WordPress has plans for blocks that go beyond the post editor. They’re outright targeting global elements — menus, headers, footers, and such — in an effort to establish full-site editing (FSE) capabilities right in WordPress.
Whoa. I certainly cannot speak for everyone else, but my mind instantly goes to what this means for theme developers. I mean, what is a theme where the templates are designed in the editor instead of code? I’d imagine a theme is a lot like a collection of shells that contain very little markup. And perhaps more development goes into creating blocks, block patterns and block variations to stitch everything together.
That’s actually the case, and you can test it now. Make sure you’re on WordPress 5.6+, then install the experimental TT1 Blocks theme and Gutenberg plugin.
Cracking open the theme, it’s really two PHP templates then — get this — HTML files used for block templates and block template parts.
I’m personally all-in on this direction. I’d even go so far as to say (peeking over my shoulder at Chris) that CSS-Tricks is all-in on this as well. We made the switch to blocks last year and it has reinvigorated our love for writing blog posts just like this one. (Honestly, I would have probably written something like this in the past with a code editor first, then port it to WordPress with the classic editor. That was a better writing experience for me at the time.)
While I’m bullish on blocks, I know others aren’t. In fact, I work with plenty of folks who are (and I mean this kindly) blissfully ignorant of the block editor. Developing for the block editor is a huge mental shift and there’s a lack of documentation for it at the moment. Things are still very much in active development, and iterations to the block editor come with every new WordPress release. Can’t blame folks for deciding to wait for the next train as things settle and standards evolve.
But, at the same time, it’s true to Matt Mullenweg’s now infamous advice to WordPress developers in 2015: Learn JavaScript, deeply.
I was (and am still very much) excited about blocks. Full-site editing freaks me out a bit, but that’s mostly because it moves the concept of blocks outside the editor, where I’m only now beginning to get a good feel for them.
Whatever it all means, what I’m looking forward to most is an official release of a default theme that supports FSE. Remember the first time you opened up a WordPress theme? I marveled at the markup and spent countless hours picking at lines of code until I made it my own. That’s the experience I’m expecting the first time I open up the new theme.
Until then, here’s a sorta roundup of ways to stay in the loop:
- Make WordPress Design – The handbook lists FSE as one of the team’s current priorities with an overview of the project. It was last updated May 2020, so I’m not sure how current the information is and whether the page is still maintained.
- How to Test FSE – Instructions for setting up a FSE site locally and participate in testing.
- TT1 Theme Repo – See what’s being reported and the status of those issues. This is the spot to watch for theme development.
- Gutenberg Plugin Repo – Issues reported for the plugin. This is the spot to watch for block development.
- Theme Experiments Repo – Check out more themes that are experimenting with blocks and FSE.
- #fse-answers – A collection of responses to a bunch of questions about FSE.
- #fse-outreach-experiment – Slack channel for discussing FSE.
My opinion on CMS:
1) The industry needs to stop using WordPress and instead use developer friendly, modern systems like Strapi and Directus, which use coding best practices unlike WordPress’s archaic functions
2) Users need to be given less abilities to edit entire site designs as most of them can’t even build a proper website with optimizations. They should focus only on text content, not the layout and design
1) Right on! WordPress uses really old functionality, we have so much more on our hands now and it feels like WP is staying behind its possibilities.
2) Exactly. That was well in the old WP editor. Now Gutenberg complicates and obscures plenty things for users. Although I love the concept of blocks I could see it confusing new users. But maybe that’s just bias.
I’d agree with point two. As someone who worked for a national newspaper in Ireland as a designer, the CMS we had gave journalists and editorial staff far too much ‘flexibility’. In some cases no thought was given to design, the relationship of whitespace to content, typography or aesthetics. Your first point, you’ll need to replace far more than just WordPress, Woocommerce for one. Its ubiquitous at this stage and there is far more that hangs off that
Your second point is spot on, there a huge number of individuals and small agencies that use wordpress to create websites for small businesses who not only don’t have the abilities but don’t have an interest in creating and putting together whole new pages of content (as exciting to developers as that may be), just keeping the existing content updated and publishing articles/news etc, I think this will always be the case.
Thanks so much for writing up this post and for highlighting the FSE Outreach Program. I am currently taking point on efforts there so I was excited to see this post! I did want to highlight specifically that one of the exciting aspects of Full Site Editing is how the tools and features being built as part of the wider project will be helpful whether you fully opt into FSE or not. The final milestone of this work is “Gradual Adoption” for a reason! For example, in the future, we might see variations like the following:
A traditional theme + global styles
A traditional theme + FSE templates
A traditional theme + Site Editing blocks
A block theme w/no support for Global Styles (so all the styles are CSS)
A block theme with full global styles support
A traditional theme + block based widgets
A traditional theme + block based widgets + block based navigation screen
This means that if people want to be on the cutting edge they can. Conversely, if folks want to ease in there will be great pathways to do so. Stay tuned either way! Finally, in case it’s helpful, I wanted to mention this post on ways to keep up with FSE as it’s still relevant today.
I’m @annezazu in WordPress.org slack if anyone wants to chat there or has feedback about the Outreach Program too (help test FSE by building a fun 404 page).
This is super helpful, thanks Anne!
Here is the right entrance to the developer block editor documentation https://developer.wordpress.org/block-editor/
I’m the Lead Dev in an agency and we have been building like this for quite a while now using ACF Flexible Content Layouts and building re-usable blocks as Template Parts.
It has proven to be hugely efficient to build with as we have built up a repository of common blocks, which we can drop into a project and then simply adjust the CSS according to the design.
Block Variations, Patterns and Reusable Blocks will be another game changer, which will also force us to finally move to the Block Editor.
I’m super excited about the possibilities this brings, particularly with building JS frontends with the JAMStack and the WP REST API.
Watch this space!
I really wanted to love the new editor- I tried it several times. But I think this is thing is a total UX desaster (at least for me). It consequently violates all rules of proper ux, for example it doesń´t give proper feedback so i have to click wildly around on the screen to make it do something. No layout guidelines. I dońt know the start and end of a block. It is impossible to relate the editor to the actual visual appearence in my mental model of a page. Image scaling doesn’t work, it breaks the layout in editor mode entirely and looks totally different on the frontend. I could go on and on.. I think this editor wants to slap a cool new layer on a product that just doesn’t have the tech behind it to make it work. Also I’d seriously doubt this was ever touched by a ux designer or even properly user tested. I’m looking into kirby, grav, bolt and other cms now. Just need an option to replace woocommerce so clients can have their ecommerce. if anyone has a good woocommerce / wordpress alternative, i’d be glad to hear!