Overlapping Problems  ## Metadata - Author: [[agm]] - Full Title: Overlapping Problems - Category: #articles - Document Note: --- tags: - SiteEditing - WordPressPhase3 - GlobalStyles Author: Unknown Source: WordPress Blog Reference: date created: 2024-09-10 18:00 --- # Title: On My Mind: Site Editing Friction Points and Future Challenges ## Table of Contents: - [Summary](#summary) - [Main Content](#main-content) - [Changing Site-Wide Elements](#changing-site-wide-elements) - [Understanding Where Elements Are Used](#understanding-where-elements-are-used) - [Navigating Inconsistencies in the Interface](#navigating-inconsistencies-in-the-interface) - [Challenges in Editing and Styling](#challenges-in-editing-and-styling) - [Looking Forward to Phase 3](#looking-forward-to-phase-3) - [Notes](#notes) - [References](#references) - [Paraphrase](#paraphrase) - [Newsletter](#newsletter) - [Action Items](#action-items) - [Hypotheses](#hypotheses) - [Methodology](#methodology) - [Questions](#questions) - [Future Research](#future-research) - [Implications](#implications) - [Logical Validity](#logical-validity) - [Conclusion](#conclusion) ### References: - WordPress Blog ## 📝 Summary: The post explores ongoing challenges and friction points within the WordPress Site Editor, particularly focusing on the nuances of global vs. local changes, navigating interface inconsistencies, and the complexity of understanding inherited values and what users can edit. The goal is to improve the user experience as WordPress moves into Phase 3 of its development cycle. ## 📖 Main Content: ### Changing Site-Wide Elements One of the most persistent challenges with the Site Editor has been understanding the global impact of seemingly local changes. For instance, users may not realize that editing a synced pattern, replacing an image in a pattern, or adjusting the menu in a header template part could have site-wide consequences. These changes are not always communicated clearly, which can lead to unexpected results. There’s also confusion around the Styles panel, which controls global styles but appears alongside block settings, leading users to mistakenly assume they’re only adjusting one block. ### Understanding Where Elements Are Used Users often need more visibility into where their edits will be applied. There’s a growing demand for features that show which templates use a given template part, or which patterns are impacted by a particular change. This could clarify the local vs. global changes and help users understand the scope of their edits, especially in complex sites with multiple interconnected templates and patterns. ### Navigating Inconsistencies in the Interface There are many inconsistencies in the current WordPress interface, especially around icon usage and default options. The same icon might represent vastly different concepts, leading to confusion. For example, the "settings" icon has been repurposed in various parts of the editor, creating ambiguity about its function. Similarly, the "revisions" icon is used to mean "resetting" a template, merging two distinct concepts without sufficient explanation. ### Challenges in Editing and Styling Inherited values, locked elements, and confusing placeholders are all significant friction points. Users struggle to understand what they can and cannot edit, and why certain elements are locked. The interface does not always communicate these limitations effectively, leading to frustration. Improving the clarity of editing modes, inherited styles, and locking mechanisms is crucial for a better user experience. ### Looking Forward to Phase 3 As WordPress enters Phase 3, which will focus on collaboration and workflows, these issues become even more critical. Users need clarity on how changes made by one user will impact the rest of the site. Additionally, managing permissions and understanding the effects of collaborative edits will be key to ensuring a smooth user experience in multi-user environments. ## 🗒️ Notes: - Persistent confusion about global vs. local changes. - Users need more visibility into where templates, patterns, and styles are used. - Interface inconsistencies with icons and default settings create friction. - Clarity around inherited values and editing limitations is necessary for improving the user experience. ## 📖 References: - WordPress Blog ## 🗣️ Paraphrase: 1. **Original**: "Whether it’s editing a synced pattern to add a new block, replacing an image in a pattern with an override in place, or changing out your menu in a header template part, there are a lot of scenarios where folks are traversing changes that might echo far beyond what they might understand." **Paraphrased**: "Editing a synced pattern, swapping an image with an override, or altering the menu in a header template part can result in changes that extend across the site in ways users might not fully realize." 2. **Original**: "There are a fair number of related requests for more information including seeing which templates use a given template part, seeing what templates pages use in Site Editor > Pages, displaying the templates in which a navigation block is used, and seeing all instance of where a pattern is used." **Paraphrased**: "Many users have asked for more visibility, such as showing which templates utilize a specific template part, which templates are tied to certain pages, or where patterns and navigation blocks are used across the site." ## 📰 Newsletter: 📢 **WordPress Site Editing Challenges and the Road Ahead!** As WordPress gears up for Phase 3, it’s time to reflect on the friction points users face in the Site Editor. From confusing global vs. local changes to inconsistencies in icons and inherited styles, there’s plenty of room for improvement. If you’ve found yourself puzzled by site-wide edits or locked elements, you’re not alone! Phase 3 will address many of these concerns, focusing on collaboration and better workflows. Keep an eye on these updates and explore what’s to come in the future of site editing! Read more [here](https://wordpress.org). ## ✅ Action Items: - Evaluate current issues with site-wide changes and consider solutions for clearer communication of global impacts. - Explore ways to provide more transparency on where elements like templates, patterns, and styles are used. - Focus on improving the consistency of icons and interface elements in WordPress. - Clarify the editing and locking mechanisms to reduce user confusion. ## 🧪 Hypotheses: - **Hypothesis 1**: Providing clearer visibility into global vs. local changes will reduce user confusion and improve satisfaction. - **Hypothesis 2**: Consistency in interface elements and iconography will lead to a smoother and more intuitive user experience. ### 📊 Methodology: - **Data Collection**: Survey WordPress users on their experiences with global vs. local changes and interface consistency. - **Analysis**: Use qualitative feedback to identify common pain points and test solutions in beta versions. ### ❓ Questions: - How can WordPress better communicate global vs. local changes to users? - What are the most confusing elements of the current interface, and how can they be improved? - How can WordPress Phase 3 streamline collaborative editing and reduce confusion around permissions and global edits? ### 🔮 Future Research: - Investigate user satisfaction with collaborative features in Phase 3 of WordPress. - Study the effectiveness of improved visibility and consistency in reducing user frustration during site edits. ### 💡 Implications: Addressing these friction points will not only improve user satisfaction but will also set the stage for a smoother transition into Phase 3, where collaboration and multi-user environments will be critical. A clearer interface and better communication of changes will help reduce errors and enhance the editing experience. ### ✅ Logical Validity: - **Sound Inductive Reasoning**: The author identifies common user pain points, using them to argue for specific improvements in the WordPress Site Editor. - **Balanced View**: The post doesn’t focus on milestones but rather areas of friction, offering a well-rounded critique aimed at fostering improvements. ## 🎯 Conclusion: As WordPress progresses int - Document Tags: [[wordpress]] - Summary: In this post, the author shares some thoughts and concerns about overlapping problems in the Site Editor and the need for interconnected solutions. One problem highlighted is the challenge of making changes across a site without fully understanding the potential impact. The author suggests improving the Styles panel to better communicate the global impact of styling changes. The post also discusses the importance of being able to see where items are used across the site and navigating pervasive inconsistencies in icon usage and default options. The author concludes by emphasizing the relevance of these issues for phase 3 of the Site Editor. - URL: https://nomad.blog/2024/02/16/overlapping-problems/  Since I’m no longer running the FSE Outreach Program and [it’s moving to better days in a new evolution](https://make.wordpress.org/core/2024/01/29/proposal-whats-next-for-the-outreach-program/), I sometimes find myself with swirling thoughts and no solid avenue to share. A post on Make Core would be too serious yet keeping it to myself feels unhelpful. All of this is to say, here are some “on my mind” style thoughts as we get deeper into site editing and begin to enter phase 3 mainly in the form of some overlapping problems to address. Each will need their own solutions to match their nuances, but I’m sharing to advocate for us to think about these problems as being interconnected that our users will *collectively* experience when using our tooling. I also want to know what areas others have noticed so we can all have them in mind. Leave a comment! Before diving in, please know that this post is entirely focused on friction points and not big celebratory milestones. Take that as me loving what I do deeply enough that I can criticize it with rigor in order to continue improving it and not a take down of all the awesome work that’s been done. #### **Changing something across your entire site or just for one block** Whether it’s editing a synced pattern to add a new block, replacing an image in a pattern with an override in place, or changing out your menu in a header template part, there are a lot of scenarios where folks are traversing changes that might echo far beyond what they might understand. This has been a tension point since the start of the Site Editor and it remains! We see it with folks removing the post content block from templates [with work underway to help.](https://github.com/WordPress/gutenberg/issues/55025) This tension goes beyond just adding content and also includes Styling changes. [I’d love to see the Styles panel improved](https://github.com/WordPress/gutenberg/issues/53483) and perhaps moved out of being available when editing more individual “pieces”, whether a template or pattern, to help communicate the global impact. Here are just a few examples of all of the various scenarios where, no matter where I go, I could make site wide changes with limited friction to communicate what I might be doing. To this day, I still hear from folks that it took them a long time to realize this Styles option impacted the entire site, especially when it lives next to block settings. Some content could not be imported from the original document. [View content ↗](https://video.wordpress.com/embed/d2JMXVPR?cover=1&autoPlay=0&controls=1&loop=0&muted=0&persistVolume=1&playsinline=0&preloadContent=metadata&useAverageColor=1&hd=0) #### **Seeing where items are used across the experience** With changes potentially cascading across the site, folks want to see where things are used and what the impact might be to change something. To me, this could be a way into communicating that local vs global scenario. It’s the difference between a simple saving flow where you see changes made to a pattern vs a saving flow where you are notified of how many places are about to be updated. Here’s an example below where I’m updating a synced pattern but it’s not really clear what the impact might be:  There are a fair number of related requests for more information including [seeing which templates use a given template part](https://github.com/WordPress/gutenberg/issues/20476), [seeing what templates pages use in Site Editor > Pages](https://github.com/WordPress/gutenberg/issues/59040), [displaying the templates in which a navigation block is used](https://github.com/WordPress/gutenberg/issues/53170#top), and [seeing all instance of where a pattern is used](https://github.com/WordPress/gutenberg/issues/58990). Going a step further, this could even be helpful with styling options to understand how many instances of something might be impacted when you change the button colors for example, similar to what you might find with search and replace:  #### **Navigating pervasive inconsistencies** We don’t seem to have gotten our icon usage right nor our default options available. In talking with some folks recently about some new work coming to WordPress 6.5, one person mentioned how the “settings” icon feels out of place in the new views in the editor! Other folks agreed — they are used to seeing this settings icon next to an individual block setting rather than in the interface. As of 6.5, here are a few places where this icon is reused:  This comes up across the interface, including [feedback around how the same style icon](https://github.com/WordPress/gutenberg/issues/49242) in use for global styles and styling an individual block *creates* confusion even as it might solve some at the same time. Let’s talk about the locking icon and how confusing using the [same icon is for theme patterns in Site Editor > Patterns](https://github.com/WordPress/gutenberg/issues/55469). This has resulted in some folks thinking that meant those patterns need to be paid for to be used! Whew. Take another example where [we use the revisions icon to represent “resetting” a template rather than displaying access to revisions](https://github.com/WordPress/gutenberg/issues/56603). This takes two VERY different concepts and merges them into one, without so much as a confirmation modal before resetting the template: Some content could not be imported from the original document. [View content ↗](https://video.wordpress.com/embed/WoOsr7jb?cover=1&autoPlay=0&controls=1&loop=0&muted=0&persistVolume=1&playsinline=0&preloadContent=metadata&useAverageColor=1&hd=0) As another example, there’s no [“Add new pattern” button available when navigating in the Site Editor](https://github.com/WordPress/gutenberg/issues/59099) but there are “Add new” options for templates, template parts, and pages. This makes adding a new pattern harder to discover, despite them being powerful and likely more often used than creating a new template or template part. When creating a new page via Pages > Add New, you get the option to select a starter pattern if your theme provides them, helping you start with some content rather than from scratch. Using the same theme, if you try to create the same exact page in the Site Editor, [you won’t get access to this same starter pattern modal](https://github.com/WordPress/gutenberg/issues/55108) making it a big missed opportunity. This too touches on what we show by default with [design tool consistency](https://github.com/WordPress/gutenberg/issues/43241), both in terms of having consistent tools available across blocks *and* ensuring what’s shown by default makes the most sense. This popped up when box shadow was added as a block setting, [leading to confusion around what to label that section](https://github.com/WordPress/gutenberg/issues/58907) if shadow is supported but borders not and whether to have these sections separated out. #### **Understanding inherited values and options** There are numerous situations where we might see something inherited or provided by something else: * A pattern with blocks with and without overrides. In each of these, we’re coming up with similar solutions to show where the value is provided from, be it a [global style](https://github.com/WordPress/gutenberg/issues/49278) or a custom field:  This is also going to come up as [we think about “states”](https://github.com/WordPress/gutenberg/issues/57719) and “interactions” from the interactivity API. How will folks conceptualize these things in the editor and know where they can go to make changes (or when they can’t)? #### **Understanding what you can and can’t edit** This connects to the problems around global vs local and inherited values because in some cases something is locked and in others it needs to be edited elsewhere, like creating a page and editing the template or editing the original synced pattern to make changes. We’ve tried a few ways to get around this, including highlighting the parts you can edit, having snackbars that nudge you where you can edit what you want, and block toolbar options. In some cases, these block toolbar options are confusing though, like in the case of `Edit` taking you to focus mode vs `Edit Original` taking you into yet another focus mode that, in this case, impacts every instance of this pattern: Some content could not be imported from the original document. [View content ↗](https://video.wordpress.com/embed/Bce1VDtV?cover=1&autoPlay=0&controls=1&loop=0&muted=0&persistVolume=1&playsinline=0&preloadContent=metadata&useAverageColor=1&hd=0) This also comes up with placeholders where you can’t edit the text there, despite being able to edit every other block. I’ve read feedback from folks using the Site Editor how confusing that is with folks again thinking they are purposefully being locked out in order to have to pay to upgrade in some capacity. #### **Thinking about phase 3** If you zoom out, each of these impacts phase 3 in different ways. If you’re planning to release a new product on your website with a discount code for folks, you want to ensure that it appears in the right place. You wouldn’t want to realize later that the product page uses a different header template and the information never showed up. If you want to collaborate with a crew of folks with different permission levels, you want it to be clear what they can edit and the impact of what they edit has, potentially even across the site. You get the point! If more of these swirling and overlapping areas come up, I’ll update this post and leave a changelog. Even for my own sake, I want to keep track., Overlapping Problems, agm, 01hpsjmcntddwfew2m33t65hg3.