The power of FSE  ## Metadata - Author: [[Human Made]] - Full Title: The power of FSE - Category: #articles - Document Note: --- tags: [#FSE, #WordPress, #FullSiteEditing, #DesignSystems, #WebDevelopment] - #FSE - #WordPress - #FullSiteEditing Author: Tammy (Human Made) Source: [The power of FSE Transcript](https://www.youtube.com/watch?v=o6f0nzkt77w) Reference: Transcript timestamps & video link date created: {{date:2025-03-09}} {{time:HH:mm}} --- # Title: 🚀 The Power of FSE: An In-Depth Analysis ## Table of Contents: - [📝 Summary](#%F0%9F%93%9D-summary) - [📖 Main Content](#%F0%9F%93%96-main-content) - [🗒️ Notes](#%F0%9F%97%92-notes) - [📖 References](#%F0%9F%93%96-references) - [🗣️ Paraphrase](#%F0%9F%97%A3-paraphrase) - [📰 Newsletter](#%F0%9F%93%B0-newsletter) - [✅ Action Items](#%E2%9C%85-action-items) - [🧪 Hypotheses](#%F0%9F%A7%AA-hypotheses) - [📊 Methodology](#%F0%9F%93%8A-methodology) - [❓ Questions](#%E2%9D%93-questions) - [🔮 Future Research](#%F0%9F%94%AE-future-research) - [💡 Implications](#%F0%9F%92%A1-implications) - [🧠 Learning Styles Assessment](#%F0%9F%A7%A0-learning-styles-assessment) - [📊 Accessibility Assessment](#%F0%9F%93%8A-accessibility-assessment) - [🌍 DEIB Assessment](#%F0%9F%8C%8D-deib-assessment) - [✅ Logical Validity](#%E2%9C%85-logical-validity) - [🔍 DARVO Analysis](#%F0%9F%94%8D-darvo-analysis) - [🔍 SEO Evaluation](#%F0%9F%94%8D-seo-evaluation) - [🎯 Conclusion](#%F0%9F%8E%AF-conclusion) ## 📝 Summary: The transcript of "The power of FSE" delves into the transformative potential of Full Site Editing (FSE) in WordPress. It outlines how FSE streamlines website development by reducing time-to-market, enhancing design consistency through systematic patterns, and facilitating collaboration between design and development teams. Key points include the benefits of intuitive drag-and-drop interfaces, the integration of design systems, and the challenges of balancing flexibility with design integrity. ## 📖 Main Content: The discussion is structured around explaining what FSE is, its advantages, the challenges it poses, and practical advice on how to create and adopt FSE. The speaker emphasizes the need for structured planning and training to leverage FSE effectively. By focusing on patterns, templates, and reduced reliance on custom code, FSE promises to revolutionize how websites are built and maintained. ### 🗒️ Notes: - **Introduction & Technical Setup** - 😊 [00:01](https://www.youtube.com/watch?v=o6f0nzkt77w&t=1): Session begins with technical troubleshooting and participant engagement via Slack. - 😊 [00:26](https://www.youtube.com/watch?v=o6f0nzkt77w&t=26): Transition to the main discussion with an introduction by Tammy. - **Concept of Full Site Editing** - 😊 [01:20](https://www.youtube.com/watch?v=o6f0nzkt77w&t=80): Introduction to FSE, its interchangeable use with "site editing" and the importance of language adaptation. - 😊 [01:53](https://www.youtube.com/watch?v=o6f0nzkt77w&t=113): FSE is framed as an evolution from traditional block editing to a systematic, pattern-based approach. - **Advantages of FSE** - 😊 [00:07](https://www.youtube.com/watch?v=o6f0nzkt77w&t=7): FSE reduces time to market by allowing rapid site launches and empowering teams. - 😊 [02:19](https://www.youtube.com/watch?v=o6f0nzkt77w&t=139): Emphasizes intuitive drag-and-drop functionality and systematic design patterns. - 😊 [06:35](https://www.youtube.com/watch?v=o6f0nzkt77w&t=395): Highlights styling consistency via block variations and lean design systems. - **Systematic Approach & Planning** - 😊 [08:49](https://www.youtube.com/watch?v=o6f0nzkt77w&t=529): Discusses the importance of structured planning, including clear IA and site maps, for managing editing permissions. - 😊 [13:07](https://www.youtube.com/watch?v=o6f0nzkt77w&t=787): Underlines the need for training and structured planning to balance creative freedom with design integrity. - **Collaboration & Future Prospects** - 😊 [15:18](https://www.youtube.com/watch?v=o6f0nzkt77w&t=918): FSE promotes collaboration between designers and developers through shared templates and the Template API. - 😊 [19:32](https://www.youtube.com/watch?v=o6f0nzkt77w&t=1172): Projects benefit from a unified approach that minimizes custom code and streamlines design. - 😊 [25:35](https://www.youtube.com/watch?v=o6f0nzkt77w&t=1535): Introduction of "vibe editing" as a new standard and the challenges of over-customization. - 😊 [27:40](https://www.youtube.com/watch?v=o6f0nzkt77w&t=1660): Stresses the importance of planning in custom block development to avoid design chaos. - 😊 [31:43](https://www.youtube.com/watch?v=o6f0nzkt77w&t=1903): Phase one of FSE focused on enhancing writing and editing capabilities; clear style boundaries are critical. ## 📖 References: - [The power of FSE Transcript](https://www.youtube.com/watch?v=o6f0nzkt77w) - Specific timestamps within the transcript (e.g., [00:07](https://www.youtube.com/watch?v=o6f0nzkt77w&t=7), [02:19](https://www.youtube.com/watch?v=o6f0nzkt77w&t=139), [06:35](https://www.youtube.com/watch?v=o6f0nzkt77w&t=395), etc.) ## 🗣️ Paraphrase: - **Paragraph 1 Original ([01:20]-[01:57]):** *"There's no difference between FSE and site editing. The language is evolving because as new features are added, our vocabulary must adapt to describe the product accurately. The core idea is to empower users with a natural, intuitive interface where design patterns replace the old pixel-by-pixel approach."* - **Paraphrased:** "FSE and site editing are essentially the same, but the terminology changes as new features emerge. The goal is to offer a user-friendly interface where standardized design patterns take precedence over individual pixel adjustments." - **Paragraph 2 Original ([15:18]-[15:50]):** *"Effective site editing hinges on clear planning. Establishing detailed information architecture, including site maps and access controls, is essential to balance creative freedom with maintaining design consistency. Training teams to work within these structures minimizes disruption and ensures scalability."* - **Paraphrased:** "Successful site editing depends on meticulous planning. By defining a robust information architecture with well-organized site maps and precise access management, teams can harmonize creative innovation with consistent design. Proper training further ensures smooth scaling and minimal workflow disruptions." ## 📰 Newsletter: Hey WordPress community! In our latest issue, we explore the transformative power of Full Site Editing (FSE). Discover how FSE is streamlining site development by reducing time-to-market, enhancing design consistency, and fostering seamless collaboration between designers and developers. Learn about intuitive drag-and-drop interfaces, the strategic use of design patterns, and the future of vibe editing—all aimed at empowering your web projects. Dive deeper into these insights with our detailed analysis and check out the full transcript [here](https://www.youtube.com/watch?v=o6f0nzkt77w). Stay innovative and keep building amazing digital experiences! ## ✅ Action Items: - **For Developer Advocates & Educators:** - Map FSE concepts to your open-source advocacy initiatives and educational content. - Develop workshops or training sessions focused on implementing structured FSE workflows. - Highlight success stories and case studies that demonstrate reduced time-to-market and enhanced design consistency. - Integrate the FSE framework into contributor onboarding programs to promote sustainable community growth. - **Career Alignment:** - Leverage insights from FSE to reinforce your focus on open-source advocacy and education. - Use this analysis to guide strategic decisions in your pursuit of an OSPO role, emphasizing transparency and inclusivity in the WordPress ecosystem. ## 🧪 Hypotheses: - 😊 **Hypothesis 1:** Implementing FSE significantly reduces development time for large-scale WordPress projects. - 😊 **Hypothesis 2:** Structured FSE training improves team collaboration and reduces design inconsistencies. - 😊 **Hypothesis 3:** Integrating design systems with FSE will lower the reliance on custom code and increase overall site performance. ### 📊 Methodology: - **Data Sources:** Analyze project timelines, team feedback surveys, and performance metrics from WordPress deployments using FSE. - **Research Designs:** Utilize longitudinal studies comparing traditional editing methods with FSE-driven workflows. - **Analysis Techniques:** Employ statistical analysis, case studies, and qualitative interviews to validate improvements in efficiency and collaboration. ### ❓ Questions: - What specific training methods best facilitate the adoption of FSE? - How do teams balance creative freedom with design consistency using FSE? - Which aspects of FSE contribute most to reducing development time? ### 🔮 Future Research: - Investigate the long-term impact of FSE on site scalability and maintenance. - Explore how user feedback influences the iterative development of FSE features. - Examine the integration of advanced tools (e.g., AI-assisted editing) within the FSE framework. ### 💡 Implications: - **Advancing Knowledge:** Findings could redefine best practices in WordPress site development and influence design system strategies. - **Influencing Practice:** Empirical results may prompt widespread adoption of FSE, leading to more efficient workflows and reduced maintenance overhead. - **Policy & Funding:** Research outcomes could shape future open-source funding priorities and promote transparency in design standards. ## 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)** - **Present:** The transcript mentions design patterns and structured layouts. - **Improve:** Incorporate flowcharts and infographics to visually represent FSE workflows. 2. **Aural Learners (Auditory-Musical)** - **Present:** The session is originally delivered as a video with audio. - **Improve:** Provide audio summaries or podcast versions of the content. 3. **Verbal Learners (Linguistic)** - **Present:** Rich descriptions and detailed explanations are provided. - **Improve:** Add more storytelling elements and annotated transcripts for deeper context. 4. **Physical Learners (Kinesthetic)** - **Present:** Interactive session elements and live demos are referenced. - **Improve:** Suggest hands-on workshops or interactive exercises to practice FSE techniques. 5. **Logical Learners (Mathematical)** - **Present:** Systematic breakdown of FSE features and structured planning processes. - **Improve:** Integrate diagrams and step-by-step guides to reinforce logical progression. 6. **Social Learners (Interpersonal)** - **Present:** Emphasis on team collaboration and shared design systems. - **Improve:** Encourage group discussions and peer reviews via forums or live sessions. 7. **Solitary Learners (Intrapersonal)** - **Present:** Detailed analysis and reflective commentary are included. - **Improve:** Provide journaling prompts or self-assessment checklists to foster individual learning. 8. **Naturalistic Learners** - **Present:** Limited connection to environmental analogies. - **Improve:** Introduce examples that draw parallels between natural systems and design patterns to enhance relatability. ## 📊 Accessibility Assessment: - **Screen Reader Compatibility:** - **Present:** Text is well-structured; ensure that all images and diagrams include alt-text. - **Improve:** Add semantic HTML tags and descriptive alt-text for future visual aids. - **Keyboard Navigation:** - **Present:** Content is text-based and should be navigable. - **Improve:** Verify that interactive elements (e.g., embedded links, Q&A sections) are fully keyboard accessible. - **Contrast and Readability:** - **Present:** Content is clearly formatted. - **Improve:** Use high-contrast color schemes in any future graphics or visual materials. - **Text Resizing:** - **Present:** Expected to be responsive. - **Improve:** Test and optimize layouts to ensure text scales appropriately on various devices. ## 🌍 DEIB Assessment: - **Cultural Relevance:** - **Present:** Focuses on global collaborative efforts in open-source communities. - **Improve:** Incorporate diverse case studies and examples from multiple cultural contexts. - **Inclusive Language:** - **Present:** Language is professional and neutral. - **Improve:** Continually update terminology to be more inclusive and accessible to non-native speakers. - **Neurodiversity Support:** - **Present:** Structured content aids comprehension. - **Improve:** Break up long sections and add clear bullet points to improve focus and readability. - **Representation:** - **Present:** Highlights collaborative and interdisciplinary approaches. - **Improve:** Add imagery and case studies representing a wider array of identities and backgrounds. - **Psychological Safety:** - **Present:** Tone is encouraging and supportive. - **Improve:** Include explicit guidelines for respectful discourse and trigger warnings for highly technical or dense sections. ## ✅ Logical Validity: - **Sound Deductive Reasoning:** - **Example:** The argument that FSE reduces time-to-market is supported by evidence from [00:07](https://www.youtube.com/watch?v=o6f0nzkt77w&t=7) and [02:19](https://www.youtube.com/watch?v=o6f0nzkt77w&t=139). - **Strength:** Logical flow from improved workflow to reduced development time. - **Suggestion:** Augment with quantitative data for further validation. - **Strong Inductive Reasoning:** - **Example:** The systematic approach to FSE is illustrated through multiple practical examples (e.g., [06:35](https://www.youtube.com/watch?v=o6f0nzkt77w&t=395)). - **Strength:** Real-world case studies strengthen the argument. - **Suggestion:** Include comparative metrics from traditional methods. - **Potential Logical Fallacies:** - **Strawman:** Minimal instances; however, the risk exists when oversimplifying the challenges of FSE. - **Ad Hominem:** Not present. - **Circular Reasoning:** Some statements reiterate benefits without new evidence; recommend diversifying supporting data. - **Overall:** The reasoning is balanced and nuanced, though further empirical backing could enhance clarity. ## 🔍 DARVO Analysis: - **Deny:** - **Observation:** The speaker does not deny challenges; instead, they acknowledge learning curves and interface gaps (e.g., [10:00](https://www.youtube.com/watch?v=o6f0nzkt77w&t=600)). - **Analysis:** This approach builds trust by transparently discussing limitations. - **Attack:** - **Observation:** There is no language that targets individuals; critiques are focused on system limitations. - **Analysis:** Constructive criticism is employed to encourage improvement. - **Reverse Victim and Offender:** - **Observation:** The narrative does not shift blame; it emphasizes collaborative improvement and iterative development. - **Analysis:** The balanced tone reinforces the idea that challenges are shared obstacles rather than faults of specific parties. ## 🔍 SEO Evaluation: - **Keywords:** - **Presence:** Terms like "Full Site Editing," "FSE," "WordPress," "design systems," and "site editing" are naturally integrated. - **Placement:** Keywords appear in the title, headers, and early parts of the content. - **Meta Description:** - **Observation:** While the transcript does not include a meta description, a summary sentence could serve this purpose. - **Suggestion:** Craft a meta description within 150-160 characters that succinctly summarizes FSE benefits. - **Title Tag & Headers:** - **Observation:** The title and headers are clear and include primary keywords. - **Suggestion:** Maintain concise header structures to optimize for search engine indexing. - **Content Length & Value:** - **Observation:** The detailed transcript analysis exceeds 1,000 words and provides substantial value. - **Internal/External Links:** - **Observation:** Timestamp links (e.g., [02:19](https://www.youtube.com/watch?v=o6f0nzkt77w&t=139)) and the source link enhance credibility. - **Image Optimization & Mobile:** - **Observation:** Future visual aids should include descriptive alt-text. - **Suggestion:** Ensure all multimedia components are mobile-friendly and load quickly. - **User Engagement:** - **Observation:** The interactive elements (Q&A, live demo references) boost engagement. - **Suggestion:** Incorporate clear calls to action and social sharing buttons. - **Schema Markup & Social Sharing:** - **Observation:** Adoption of schema markup (e.g., FAQ or article schema) would further enhance SEO. - **Suggestion:** Implement Open Graph and Twitter Card tags for improved social sharing previews. ## 🎯 Conclusion: The transcript of "The power of FSE" offers a comprehensive exploration of Full Site Editing in WordPress, detailing its benefits, challenges, and future potential. By emphasizing a systematic approach, the speaker illustrates how FSE can reduce time-to-market, ensure design consistency, and foster collaboration across teams. While challenges such as learning curves and managing access remain, the iterative development and structured planning inherent in FSE promise significant improvements in modern web development. Overall, this analysis highlights the transformative impact of FSE on site editing and encourages further research and adoption within the WordPress ecosystem. - URL: https://www.youtube.com/watch?v=o6f0nzkt77w&ab_channel=HumanMade Okay, hopefully folks are now beingpulled over to this session. I see peopleflooding in. Drop a message inSlack if you are hearing me andseeing both myself and Tammy and someslides. Excellent! There we go. Sorryabout that; we had a few moments oftechnical issues, but we resolved themand we're ready to go. I'm very excited! Next, Italked a little bit about FSE. We'vebeen doing a bunch of full-site editingat Human Made. In fact, I saw one ofthe questions in the last sessionthat we didn't get a chance to answerwas around time to market and whetherwe're seeing time to market increase. I think, if anything, our learnings fromfull-site editing have been that itallows us to reduce time tomarket because you can get a site upquicker and give the marketing teamor whoever's managing that site moretools to be able to then build outsections themselves. So there we go, just a little bit of a tie into theprevious session. I'm going to takemyself off stage anyway because this isnot my session. I'm going to hand it over toTammy, who’s going to introduce theSession, and then, uh, take itaway. So, off you go, Tammy. Thank you somuch. Um, so I’m going to be talking aboutthe power of SFC, and in this talk, I’mgoing to cover what it is, the advantages,the challenges, and I’m also going tocover how to create itand show some examples. I’ll end upwith a look to the future, both near anda little further off, so let’s getstarted. What is it? In short, there’s nodifference between foresight editing andsite editing, and you’re going to see both terms. I’ll be using siteediting for ease in this talk a lot, sotypically, it’s also moving to siteediting. I say this for clarificationbecause language matters, and thisproduct is adapting. It’s also reallyimportant that we adapt our language aswe do it aswell. So, if we’re considering featuresand these features are increasing andadapting, these features are at thecore. It’s a lot more than these, though,but it starts with starles, building upthrough pents to templates, and theinterface-wise, we have drag and drop,which means the sensible native. Instinctively, people just expectthat when they're creating, you expect it.With any app, we expect it; it's justhuman nature. It's what we expect, and itjust fits our way that we interact withapplications. Site-wide editing simplymeans going across the entire site.Surprisingly enough, it's in the languagenot cornering styling or the experience.Navigation management is alsoa really key part, and it took quite sometime to get the foundations of that in,because it's such a pivotal piece of thesite editing puzzle as well. So this quote is a little bit older. Ifyou look at the timestamp on this, it's2022, and it shows that this project hasnot been new; it's been somethingthat's been growing and iterating forquite some time. Often, people thinkthat it's all or nothing, and I alwayscome back to this quote when I'd like toshare it with people, because foresightediting is a collection of features,that can be adoptedpartially. You can take a little bitand add it. I think that that's oftenthe best way to adopt it—adopt it inkind of that sprinkle fashion.Gradually, on these projects particularly. When you've got a large project at scale,take what's going to work for you anddon't take what's not going to work foryou. So, let's look at the advantagesfirst of all, and then we're going tolook at some challenges and then how youmight create and then build up fromthere. So, at the core of everything isthis: it's a systematic approach todesign. People don't think in blocks.Blocks are amazing and they're great;they're awesome, but they combine toform patterns, and that's a reallyimportant thing to think about. Whenpeople think of sites and layouts, theythink in patterns. If you just kind of close your eyes and start thinking of asite, you're seeing in patterns; you'renot seeing in pixels. This means that bythinking in these systems and creatingthis way, it not only works for thehumans using them, but for the moderntooling, such as Design Systems, whichparticularly at the enterprise level arereally, really common. It also separatesthat content frompresentation. At the heart is what yousee is kind of what you get.I'm going to kind of phrase that, becausethere are differences still. Nuances and those differences are whathave been worked on. Those kinds of papercuts are the best way that I can describeit because it’s a product and it’s beenworked on with design tools. That magicingredient added into the mixture allowspeople to learn the interface once.You don’t have to every time you welcomea different site, have a different way ofa kind of Color Picker, or a different wayof gradients or a different way of formcontrols. Starbug also helps when seeingthings that can be applied and it’s oftenoverlooked. I’m going to get a little bitinto that later. It’s literally a way tosee the design system then and there. You can set branding guidelines and peoplecan work within them as well, which isreally, really powerful to see someone beable to do that. Perhaps the biggestadvantage to site editing is that it worksas people expect to watch someone movesomething and get it to go where theyexpect it to. You moving a column sectionor a pattern up and down is really,really powerful, and to get it to do thatperformantly took an awful lot ofinfrastructure underneath, from moving animage to one side using list view. View is an incredibly powerful featureas well. The patterns I mentioned at theheart, but patterns combined intotemplates and buildups provide thesystem to create and browse real things.You interact with four layouts built onreality. You don’t create content in onearea devoid of styling and then applythe template by viewing it through acustomizer or setting themeoptions. Before I go into some of theprocess advantages, I want to show youhow you can easily reuse and makevisible code. One of the things often said inthe previous session with null was aboutno code. I would say it’s not aboutgetting less code, but rather about havingless code being passed around. I think theobjective of having less codebeing passed around in larger sites isreally critical, because thatoften is one of the problems. If you wantto have styling maintained, you need tosomehow store it somewhere and then haveit cataloged. So, things like block stylesare a really small thing. Blockvariations, section styles — all of thesedifferent ways to be able to have at a click of a button to be able to haveThat they are one feature, but they'rereally, really powerful to see people beable to apply. They stop just havingthis custom code passed around. All itactually does in reality is pass asimple CSS class, but it does so muchmore because it has that visual you canhover over and you can see it. Thenyou can apply it, so it brings that humankind of reality, and it brings it torather than having to go somewhere, grabthe CSS code and then apply or have thatknowledge. It keeps that consistency, also,which is a powerful part of this. Sothere are performance gains by beingnative or as close to native as you canbe. A stack is well-lean, uh, blockthemes are, by their very nature, minimaland performant. This approach can, ofcourse, easily get custom. But by having aperformal call, you can build up fromthere. Your foundation is solid. I'm notkind of saying that there aren't goingto be issues that you need to work with,because your stack is your stack. But theleaner your stack is, the better. Nowadays, most client projects have thatdesign system, so the classic theapproach wasn't built with this in mind.Because it was built in a time when thatWasn't part of it, of course. Those haveadaptive but natively site editing fitsthat systematic approach. It builds upfrom the smallest fragment, separates Slyand allows combinations by end users. From having starbu to patterns, there arenot only tools in set editing, but theway it’s set up to create encourages andempowers anyone taking this approach. One advantage is you get to reduce andrefine not only your process, but yourstack themes. You get to go back to beingthemes. What you can make blocks oftenthe answer is to use core blocks orconsider really how many blocks. One of the big mistakes I often see is peoplejust create blocks and create blocks andcreate blocks, and you create an issuefor yourself if you do that. Blocks canbe provided in a companion plugin, butthat makes them easier to manageacross teams. Also, you get to work withthe natural scale and the naturalroles in your team by taking asystematic approach, and then you candivide and conquer these projects. Youcan also get somewhat easily know wherethe issues are by having the theme justdo the theme things and using JSON, soyou can get those kinds of gains. From a team perspective and from asustainability perspective of theproject, however, more complex sites aregoing to need more complex solutions. Theanswer is always to lean into this kindof systems approach. Maybe you also don’tneed a page builder, and I say this ismaybe because page builders aren’t bad.Page builders have their own purpose. Iactually really like the idea of pagebuilders in the future if we’re kind oflooking to the future being for veryspecific purposes but built on top ofthe foundation of core. That’ssomething to maybe consider about howcan all of these things be built onto upof this and take advantage ofthis. Solet's have a look at some of thechallenges because I don’t want toignore these. All too often, peopleare more cautious when approaching andimplementing side editing. I repeat thereagain, it’s that sliding scale; you don’thave to do all ornothing. One of the biggest challengesthat’s worth recognizing is a shocker. It’s hard both creating andexperiencing something new, and it has been around a longTime, but often for a project, it will benew. We can't belittle this, and weshouldn't in how we approach any clientwork. There are some gaps in theinterface, which later I will share howsome of those are being eased, but theyneed to be made aware of in anythingcreating. The good news is most aredocumented and being worked on. However,depending on your project, they won't bedeal breakers, but they will beneeded to be awareness points. Thisis a kind of modified way of working,and there is some new language. Thatshock of the new is going to be real. There are also a lot of misconceptionsaround what can and can't be done insite editing. The site editing at thestart of the phase isn't the one that isthere today. I showed the kind of timethat had passed; it has been refined asit should be, as any product that hasbeen made. There are also companionthings that can be done. An example ofthis is an experiment in mega menus by NickDiego. Nick Diego does some of the bestexperiments. I'm just going to share thatfrom the mega menus and give him a shoutout to icon blocks. These experimentsthough, they push what then can be. Brought into core to be able to be done,so you can do these things very natively.These features are available and also inthe experimental feature. There are somethings that are also there. It should also notbe seen as this all-or-nothing approach.It should be a foundation. The way you canadd blocks, custom solutions, adapt, maybeuse the templating API or theinteractivity to achieve what exactly isthat turnkey solution for a client. That's where,when you're working on a project, that's your magic. You're reallygood at creating these projects. So kindof get your thinking hats on and usethis awesome new Lego kit and think about how you're going to build this, because all of thisis now possible. A challenge that gets worse thelarger the site or the amount ofusers is management, from access tomanaging the patterns. Although therehave been some improvements coming inthis next release of WordPress patternswith folders and different things, thiscan be a challenge to work out who cancontrol what and who can do things. Often,clients don’t want everyone to be ableto apply the color pink branding toeverything, because you know, Mar, she onceOne day, we let her loose, and she applied pink to everything, and it was horrible. So all of those kinds of things have to be considered, and you have to listen toyour client on what they want. A lot of this is IIA, and a lot of thisis just really good client work.This can be a challenge, though, to work out everything.With any large-scale site, it resolves with planning, butthere is an additional step needed in that planning process. A unique problem with site editing is that, while you can edit allthe site, it might be a bit of a mind-bending statement or a misnomer,but the reality is that when everything is editable,it can easily mean everything can be messed up.Just like me skipping to that slide without often intending, this can be achallenge. Later, I’m going to share how this is looking to be resolved,though it is a problem that’s at the top of my mindand the top of everyone’s mind who’s creating it. How do you give enough safety to have that freedomwithout wandering and causing issues?When you do that, how do you avoid thedestruction of design but allow freedomto create as well? Start creating your site editing with a site at scale. Now, I’m not goingto show you how to do it from A to Z; I’m notgoing to take you through thatbecause I want to show some examples, andI want to look to the future. But thereare some things to share if you’restarting to consider that first. Before anything, bring back IA.If there’s anything I can encourage you,it’s that I do think a lot of people havestopped doing IA so much. Um, really startconsidering flows, site maps, go back intothose structures, decide who and whataccess is going to be needed. Break outthose maps. This will help work out howmuch or how little site editing isrequired, where access is going to needwhat templates you’re going to need. Itwill also help with working out whatshould or shouldn’t be available, whatdifferent styling is going to beneeded, and then that’s going to helpboth designers and developers know when tostart sharing with clients. This sharesthose journeys, and then they’re going tobe able to reflect what Marge did, orwhat Bob did and what George did, and allthese kinds of stories that you can thenhumanize in these flows as well. Training is going to be key to avoidthat challenge of shock of the new.You’ll become aware of that veryearly on if you have a design system.Breaking down the design might be donefor you if all you have, though, arebranding guidelines in a PSD, whichunfortunately is quite common. You’re notgoing to have this deciding what is apattern, a template part, and a template.It is really, really importantto be clear and share collectively betweendesign and developers. This then allows youto make clients aware of what theycan use or not. This is a greatconversation to have. Add in and up thosecustom pieces from templates for plugins,which you can register now using thetemplate API to custom CSS.And in only once, add in only once. You can have thesolid block theme and the foundationpatterns.Get that minimal in, start reallysmall, and then build up. Often, I thinkwe’ve just kind of jumped straight intothe big, and that’s kind of theproblem. You can test ideas and bring somecalm into your process. Time a little bit, um, but I want to getto the kind of thefuture. So, the first example I want toshare is the Harvard Gazette because ithas some really impressive, uh, status.This is by Human Made, um, and one of theseis, the stats are great. This, and Ireally like this: if you're going toshare your project, please share thestats on your project because they arereally delightful to kind of look at. It's five of the core blocks wereextended, 13 block patterns, six archivetemplate layouts, 33, uh, custom blocks, and sixblock styles, um, various templates. Butthe reader, really, with this is a P, arecore and building up and using thosefoundational blocks and deciding whichone should be extended, which ones shouldbe new. You can see that thought as youread this case study, which I think isreally, really important, and I wouldencourage more people to start thinkingabout and sharing these case studies ifthey can. I know that you can't alwaysshare your work, but it's really, reallyimportant. So, Big Bite also worked withAmnesty, and there was even a themecreated to relaunchagain. The theme in these examples I’m sharing, thepatterns, is key. Here you have thisfoundation of a theme, but these patternskeep it going and keep it running.You can swap them in and out andhave all these different combinations.You can actually check this theme outand learn, and that’s really, reallyimportant before you start theseprojects. Learn from those that have comebefore you, and then at the heartof the site, um, isn’t just theperformance of VIP, but it’s patterns. Um,This apparently has Swifties gettingvery excited, uh, from a performanceperspective, but I think it’s also withthat, um, the ability to be createdbecause of patterns. Um, patterns are thestart; they enable you to have thatdifferentcombinations. So, I hope I’ve got some time. I’m just going to share the future, andin this section, I’m going to give creditto the awesome presentation. So, insteadof by Matias, he’s the lead architect ofGBER, where he looked at the future, and Ipulled out a few screenshots anddifferent images to add my own thoughtsalong with them. So, my first point is for theBuilders from the Intera API, which hassimplified the process of registeringand managing custom templates toextend functionality, allowing more to be done. The future is for the builders, and by usingthe site editors as a foundation, I hopethat I'm getting that point across. It'sthe starting point; it shouldn't ever bewhere you end your project and say no.Some of these features are alreadyavailable by turning on experimentswithin the GBER plugin, and I wouldencourage you to do that to start seeingwhat can be created. These are sometimessmall but often incredibly powerfulfeatures that solve real issues thatblock projects. Things have already been able to be done, butonce you start seeing how youcould do them, you can win contracts withthese because you can be like, "Oh, okay, wecould start planning to do this."If you're working on a project thatisn't going to get done for a year,then you can align to the roadmap. Youcan start seeing how you can align tothe roadmap in a year because thisfeature is already experimental, andyou can support that feature so thatthen you can also get that project. This is very, very exciting from a core perspective as more things are capable.More design tools are evolving and refining.This is important as it means less custom CSS flying around,it means less problems with merge,and it means more alignment to the client design systemand more common understanding as everyone uses the same interface. Part of the task here, though, is both auditing and unifying those,making sure all blocks have the right supports,or design tools have what they need.For example, to fill the gaps where perhaps essential experimental plugins have been used. Today, these experiments show us the way,but they shouldn’t be where we stop.One aspect of this is that we, in real sites, share those stories,making it also into a variation or then a tour from that.Exposing where you’re having to use all the time something as a block style,maybe that,or where you’re having to use custom CSS in your JSON file. Because maybe that needs to be a value in JSON,and then a design tool.That kind of feedback is really, really important to make this system the full system that’s needed to create with. So, perhaps one of the most requestedfeatures is responsive, and one of themost questioned: why it wasn’t in core yet.The short answer is it had to be doneright, and the short answer is a lotof our approach to the way thatresponsive was done was very dated. Wedon’t view things like this. I mean, ifyou do, that’s not how I view the world.The longer it actually neededthose foundations to be in place, as witha lot of the site editor, and the fluidnature of the existing site editor hasnow these tools. By using existing tools,like preview, this can take existingfeatures and make them even more powerful. In the future, this is just onepossibility being explored, and I raisethis as a challenge, and it’s beinganswered in the next release. Whilestarting to be the management of allthese features, iteration is key, andthey have to start initially withpushing to a point, finding one approach,then refining.Often a limitation won’t be knownuntil you kind of get to that point ofbreaking. We do that so well in thisproject; that’s part of open source. Wehave a new feature, we experiment with it. We push the boundary, and then we getfeedback, and then we iterate on it.Then, we set those guard rails. The issueof pattern management won't be totallysolved here, but it's a start. It alsomatures, a pattern which has been a featurethat has been there for such a long timeand has been refined. If you go back andyou view what patterns were, it's not whatit is today. Styles also are going toneed management and the same refinement.This also includes how previewing works,having started to detach and even beused in classic themes to start. So,this feature is going to unlock incredibleworkflows. It's collaborative editing. Imagine leaving a note on a piece ofwork: "Add this pattern in here," or"Background gray," or "Even swap this image."It's a very simple way of illustrating,but it starts to think about how reviews canhappen in the editor,not detached as they often are today.This is available today in experimentaloptions of the plug-in. The capability of editingreally unlocks another level, and I willshare later. Imagine this combined withAI, leaving notes for your agent. Thereare clearly two distinct creative modes,and that is why the destruction ofDesign has been an issue, and oftenpeople are overwhelmed with editing. You know that the shock of the newsleads to overwhelm, often even fearing totouch that templated content.By simply bringing in this mode switch,it really helps to create acompassionate interface that understandsthat we need distinct contexts indicated.At times, it also locks areas, avoidingmistakes and creating a safety net,projecting the design integrity, keepingconsistency. For clients, this is agreat example of understanding they havea brand, a system, andrespect. A final thing Matia shared,that I want to bring before one of myown final thoughts, is of siteediting started with everything split,but together, this still doesn’tquite make sense when you have atemplate content that needs work. Then, global styling moving design to itsown section begins to solve this. It’slike many of these problems, one thatneeds gradual, iterativesolutions. Stylebooks honestly are one ofthe most underrated features of siteediting. Countless large projects havedesign systems, logging applications. WP has it right in the editor that’s powerful. It isn’t fully unlocked yet, butit will be. The seed has been planted.What does it look like though when youopen up these AI tools? I feel like everyoneneeds kind of an AI side, so I’mgoing to have one. You load an image andallow it to be the background color change.Well, that’s already happening.Beyond that, you could click a button andthe website will style based on content. But that’s not AI; that’s workflows. Imentioned collaborative editing. Whatdoes leaving that note on a design youragent look like?That takes out of the button click into conversation. It movesit out of real time to all time and eveninto a sync. Is this true art direction?Does that human set the boundaries inthe system? The AI simply moves into thoseboundaries. That makes a lot of sense, andside editing is set up for this. We’vealready seen experiments along theselines, and more are around to come. Curso andother interfaces are starting to set alanguage and a standard for vibe coding. But what does vibe editing look like?Vibe site editing? I’m actually going tostop, but maybe what is the vibe dreamweaver of the future? Okay, I’m gonna stop. There and to wrap up, the future isexciting, and foresight editing—whatever you call it—has come along way. There are undeniable challenges,but the advantages do outweigh them. Eachproject does need planning, and it needseven more planning than ever. We need touse the incredible skills we have inthe company, and incredible skills we have inbuilding sites. That’s just like any tool—though, that’s what this is. And anyapproach that we need to kind of refineoften, that’s a mistake, though—presumingthat it’s going to do everything for us. Thank you for giving me time toshare this today. I hope that I sharedsome insight, but with some excitementabout where it’s going to go. The answer isthat those building it need feedback.So those building need to really knowwhat people are building with it, andthen it can be formed in the most usefulway for those to create with. That’s howit got where it is today. So thank you. Alrighty, thank you so much, Tammy.That was perfectly delivered under whatI know are difficult circumstances,with a bit of a sore throat, so well donefor soldiering through. Very muchappreciated. Um, before I pull everyoneOver to the next session, which actuallyis going to segue perfectly because, um,you gave a little tease of some of thesite edit to work on the Harvard Gazette. I think we've got a demo of some ofthat, um, up next, so that's very cool. Um,we've got some questions, so we'llperhaps take a moment. Um, one of thequestions is asking about the pitfalls ofsite editing and whether we have anyinsights to share there. Actually, one youtouched on in the session, whichdefinitely, um, I recognize from the earlydays of human-made diving into the blockeditor and the site editor, is thattemptation to just build a ton of customblocks for everything. You see yourdesign, and you cut it up into custom blocks and you code them up. Perhaps ourskills building out custom meta boxesare like transferring directly into customblocks. So, um, I think often I make a jokeabout, um, the Portlandia sketch of like"Put a bird on it," um, with "Put a block onit." I also think we can substitute AI forthat now, um, but, uh, it really, like,felt for a long time that everyone wasjust like "Just make a block, just make ablock." And then you had the problem; weare also doing that for patterns now. Though, I do think we also need to beincredibly careful. That's why I go backto, how about we plan? I know all thattime product, human. Um, and that's likemy thing. Like, if literally we weregoing to do something sporadic, I'd belike doing this first. I'd be like, howcan I make a little plan just beforewe're sporadic about doing something? I’dbe trying to plan in my brain.Um, but that's the essential thing,because you just, like, people don'tsearch these things. Aren't going to besuch a problem when we do have moreintuitive search. We've seen with, um, alot, a lot better when we can ask betterquestions, and we can have more intuitive. We can use our voice to surfaceblocks better. We can have bettersuggested blocks. In the early days,suggested blocks were something that wastried. It's still not been quite there, sowhen we have better suggested patterns,better suggested blocks, all those kindsof things, we could have an awful lot ofthings, and it wouldn’t be such a problemat scale. But while we don’t have thosethings, um, if you suddenly open and youhave this mass scale, they could be themost beautiful things in the world. You can't manage them. The other problemwith blocks is not using templating. Um,I come across this an awful lot. So,people will create a block and then putthe code in the block, so they're put,and then you can't edit it, oryou can edit it, and then the moment theblock reloads, it resets everything again,which is not helpful for the editor user.So, you're having like two things intwo places, which is helpful. So, let thetheme do what it's really good at anddon't overwhelm things. Um, the otherchallenge that people think is that they— and I'm kind of like, I think I overwhelm people a little bit sometimes by saying,"Don't use Sass, don't do this." You candon't start by using Sass; build upgradually doing it. Um, I think that'skind of the best message because peoplethen take the approach of just puttingmass custom CSS in their JSON file; that isway worse than having a really clean CSSfile. Uh, using CSS variables, which turnsout to be really cool and supported by a lotmore. And we don't even need to have Sassnow. So, that kind of approach—like whatmodern CSS can you use with the JSON—not just put these unreadable. The computer's fine, reading it, but thenthe human that comes after you is not.Still, documenting the code would also bea really good idea. Yeah, I mean, you know,maybe it's something general to say aboutsome of those pitfalls, especially tofolks who maybe checked it out a littlewhile ago, because we are, I think,eight years into this Penberg journey.It's come a long way, and so someof the pitfalls early on have actuallybeen solved. Now, I think I see there’s aquestion here around giving too muchfreedom, especially inenterprise; you may not want yourcontent team to rebuild your entire site. But now, actually, there’s a lot offunctionality, right? It’s blocking.It turns out it took a long time to getblocked, but this is the thing you have toput—when I worked on phase one, wewere just trying to get it so that youcould write a paragraph. Literally, thatwas like the biggest objective ofphase one of Gober, was doing about takes. It takes a lot of time to do that right.Site editing, like, being able to swapthe friction to be able to swap animage left and right, like, but it nowkind of works. Set up a lot of stylebook. I go back to youhave a strong boundary set in your JSONfile, and you have a real strongstylebook set that loads up, andclients just love it. Combined withblock styles, this blog stylesand section styles, I think, are also thesecret there because you are providingrather than this custom CSS orsaying to them like you can't—you—handcraft a beautiful quote star. Youhandcraft a way that the headlinesappear right. You handcraft these waysand then they can hover over and applyit, and I think that that is really, reallypowerful. They aren't going to go offpiece and make everything pink becauseyou have that way to limit what theydo, and you can lock certain things. Nowand I think that that's also the control. There, and you can have a lot moregranular control yourself as well. Yeah,so definitely, you know, dive in andcheck out just the latest release. Staytalking about site editing for ageswith you, Tammy, because there's somuch there, and it's moving so fast. Um,but we've got the next session,waiting and ready to go. So I'm going toend this broadcast. Thank you very much. Again,let's get some thanks in chat for Tammy,and I will end this one and hop over tothe next one. I'll call you all over there,audience, and I'll see you in a fewmoments. Thank you, everyone., The power of FSE, Human Made, 01jnyrz5v5djx9355s8hsx5c7b.