Connect with us

DIY Site Owners

Full-Site-Editing: MVP and Ultimate Resource List

Published

on

Full-Site-Editing: MVP and Ultimate Resource List


Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less. — Marie Curie

Josepha Haden, executive director for the WordPress open-source project, published the Big Goals for 2021. Among other topics she wrote, the goal for Full-Site-Editing is the ability to edit all elements of a site using Gutenberg blocks. “This will include all in-progress features designed to help current users transition to Gutenberg as well.” She aims for April 2021 to have an MVP. A first version is slated for WordPress 5.8, scheduled for June 8th, 2021.

This seems to have gotten a lot of attention of the writers around WordPress. It was long overdue to put all resources around Full-Site-Editing into one post. Please leave missing content or your questions in the comments.


Full-Site-Editing MVP

Pressed on details of what an MVP would entail, Joseph Haden published a follow-up post defining it as “The MVP should make it possible to build a version of the Twenty Twenty-One theme, using only blocks, without any coding knowledge.” She also pointed to the Site Editing Milestone issue by Matias Ventura.

In his article “FSE and WordPress Themes:  What does the MVP look like“, Justin Tadlock dug a bit deeper into each of the seven milestones of infrastructure, site editor, Global Styles, Themes blocks, Query Block, Navigation Block and gradual adoption

What MVP it really means…

Maybe it’s the moment to stop and reflect on what an MVP actually is. It’s not the Most Valuable Player we will see announced after Sunday’s Super Bowl game between the Chiefs and the Buccaneers. MVP in this context means Minimum Viable Product. It’s a fancy title for a barely working product with a lot of quirky behavior. It will have a high-cringe factor for most people using it. Some of it is built with raw cut wood, duct-tape, wires and staples. It will have plenty of rough edges.

Remember when the first version of the block editor was merged into Core two years ago? There was a lot of noise about how bad it is and how it’s not ready and should never have been released? Since then, the block-editor went through over 50 more version updates, interface changes and refactoring.

From some corners of the WordPress universe you will hear that kind of noise again. This is the stage of FSE is comparable with the block-editor before it was merged with WordPress core. So, it will be a very early version.

Don’t get me wrong, I am not dismissing the awesome work of the brilliant people on the Gutenberg team. They are all innovating on big parts of WordPress’ site architecture, and found a way to make it simpler, hide away most complexities and put it all in one interface, the site editor. This is unbelievably hard to do and like all good things, it takes time.

It will take at least another year before it might be something you want to use for professional projects, and probably another 12 month to be comparable with any other site editor or page builder you have tried before.

The Gutenberg team does need help from the community. People need to test this MVP, find all the rough edges, start creating issues and bug reports, and enter the discussion on what a good product could look like. I just want to caution your enthusiasm in terms of the editing experience. It’s not yet for the faint of heart. (More on that below: Start Testing)

Our heads are round so our thoughts can change direction — Francis Picabia

What is Full-Site-Editing?

Status Check: Site Editing and Customization
It’s an excellent summary of the current status of Gutenberg’s Phase 2. It’s a bit longer, you probably should get another cup of hot beverage and get comfortable reading in. It definitely is worth your time.

Components and nature of Block-based Themes

  • Use blocks exclusively for content display
  • Made for Full-Site-Editing (Site Editor)
  • Have template & template parts as HTML files. 
  • Integrate with Global Styles
  • Experimental_theme.json file for settings and configuration

Components for User Interface for FSE then are. 

  • Site Editor to create or modify template and template parts
  • Sidebar to edit Global Styles. 

Assisting with migration and backwards compatibility

  • Block-based Widget Screen
  • Navigation Screen and Blocks

Overview Issues :

  • Template Tags in Full Site Editing. 22724 
  • Missing query block functionality. 24934
  • Query and Loop block tracking: 24762

What is Full Site Editing and how is it shaping a new WordPress? In this article, Munir Kamal explains all the aspects of Full-Site Editing that are in the works for the block editor. It’s a great overview and should get you caught up with the latest development.

Eric Karkovack took an Early Look at Full Site Editing in WordPress and guides you along his first impressions. If you are new to the topic this is an excellent introduction. Similar to the FSE testing group, Eric also has a few more questions for the Gutenberg developers.

What Is Full Site Editing and What Does It Mean for the Future of WordPress? By Justin Tadlock

You know a new feature is getting ready for mainstream, when Adam Preiser at WPCrafters makes a YouTube show about it: In Full Site Editing! It’s Coming, But Will Change How We Use WordPress? you can learn more about the Site Editor from a non-technical perspective. I also found reading through the comments quite interesting.

The Query Block

For the list of posts on archive pages or the loop on front page, the Gutenberg team works on a Query block. You, the site builder, won’t need any php or query knowledge to filter content from posts, pages, categories, custom post types or custom taxonomies anymore. The Query block will allow you to use dropdowns boxes and toggle switches in the site editor.

Triggered by audience questions, Justin Tadlock ventured into the details of the Query Block in his post “Understanding the Query Block and Its Importance in Site Editing”.

Full-Site Editing in Action. Short demos.

Over the last 18 months, we have seen demos of full-site editing and block-based themes.

Big Thank you to Carolina NymarkAri Stathopoulos and Anne McCarthy for sharing their wealth of knowledge with us and answer a ton of questions during last week’s Live Q & A Show: Updates on Full-Site Editing and block-based Themes with transcript and Resources.

Anne McCarthy is also fielding community questions about the full-site editing experience. She will publish them together with answers from the Gutenberg team later this month. Deadline is February 15, 2021. Watch this post for the link or subscribe to our eNews.

Start Testing Full-Site-Editing

For setting up local tests Carrie Dils published a Full-Site-Editing Blueprint for Local by Flywheel, now Local Lightening.

Anne McCarthy, program manager of the FSE Outreach Experiment published How to test FSE Guide. She gives comprehensive instructions to how to set up your test site, and she provides a list of features that need testing. She divided those up between “Anyone”, Theme and Plugin authors. Equal opportunity for testing and creating issues on GitHub. 

FSE – Outreach Experiment Updates

As a site implementer, you are invited to join the #fse-outreach-experiment program to test this new feature coming to WordPress in 2021, have a discussion with the developers and designers. This way you can be part of the decision-making and ensure your needs are heard.

Learn more about in the separate WP Slack channel #fse-outreach-experiment

Block-Based Themes

One of the most interesting aspects of block-based themes is that all previously dynamically created parts of a theme, like the site title, site tagline, navigation, widgets all have become blocks.

Full-Site-Editing Blocks for Theme developers

Early block-based themes

The TT1 Blocks theme is now available in the Theme Directory. That’s this year’s default theme version made ready for the Full-Site-Editing experience.

Block-Based Bosco, Second Full-Site Editing Theme Lands in the WordPress Directory by Justin Tadlock

Q – WordPress theme The first block-based Theme ready for full-site-editing was approved for the official WordPress repository. The author is Ari Stathopoulos and is labeled as experimental. Stathopoulos wrote on Twitter: “Hopefully this will allow more people to easier test FSE in Gutenberg and move the project forward a bit faster”.

More block-based Themes are available in the Themes-Experiments GitHub repository, among them also Empty Theme with all the boilerplate you need to get started building a block-based theme from scratch.

Carolina Nymark started the “Discussion: Requirements for full site editing themes” for themes to be approved to the official Themes repository on WordPress.org.

Making Themes for Full-Site Editing

How to use the scaffolding script to start your new block-based theme, is the topic of this article in the WPTavern by Justin Tadlock. He walks you how to get started and then use the Gutenberg site-editor to finish the theme. It’s a bar bones theme, of course, a fresh canvas for designers. Justin then digs into the various pieces of the generated theme.

Developer Documentation

Fränk Klein’s shared learnings

What I Learned Building a Full-Site Editing Theme with Gutenberg – “Right now developers spend their time switching between their code editor and their browser when developing a theme. When building Bosco as a full-site editing theme, I spent a large chunk of my time in the Gutenberg site editor.” wrote Fränk Klein, developer with Human Made.

He takes you along in his adventure and compares old way with new way of creating a header. He also shares the pitfalls and his frustrations that come with working with an experimental feature. Reading through Fränk’s post, made me eager to get my hands on testing things as well. We’ll see, maybe in a couple of weeks, there will be more time for experiments.

Klein’s earlier articles on Full Site Editing: Frequently Asked Questions and How To Try Full-Site Editing might also interest you.

In this article, Klein shared how he implemented the newly developed Global Styles feature into his experimental block-based Bosco Theme, available in the WordPress themes directory. Fränk gives you a tour around the experimental themes.json file, and compares working with styling for Full-Site-Editing with the current way themes deal with styling of headings, typography etc.

Tutorials at ThemeShaper

Creating a Block-based Landing Page Theme In this ThemeShaper article, Kjell Reigstad goes into all the details of the theme and explains the various parts needed for a block-based Theme.

In his post, Getting Started with Block ThemesBen Dwyer, provides you with the first steps to create your block-based Theme, with the Site-Editor in mind. It’s the first post of a series it seems.

Ernesto Mendez wrote Part II in ThemeShaper’s series of Getting Started with Block Themes on Templates. He explained: “In the classic way of theming, we usually have functions that give us the different parts that make up a post, such as the_title()the_content(), and so on. Block themes give us the same features using blocks directly!”. Ernesto also shared shared more about the difference between a classic WordPress theme and a block-based one and walks you through creation, saving and editing of the various pieces.

 Jason Crist published the 3rd part of “Get Started with Block Themes” tutorial. He covered how the new feature Global Styles come into play. “An important goal of Global Styles is to make it easier for users to change how their site looks without having to know or write any CSS. ” He explains the new global settings, naming conventions, how to set global and block styles not only via JSON file of your Theme. You also learn how users could change them via the Sidebar in the new Site Editor screen. Jason has links to an empty theme and the themes experiments repo and also to the developer documentation.

On ThemeShaper, Jack Lenox wrote the next post in the series “Getting Started with Block Themes”. In his post you’ll learn how to create block patterns in a from-Zero-to-Hero way

Speaking of Block Patterns: A lot more is on The WordPress Block Patterns Resource List

The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn.” – Alvin Toffle





Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.