FSE Program Site Editor Sneak Peek Summary

This post is a summary of the Site Editor Sneak Peek for the FSE outreach program, the eighteenth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

  • InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test. 
  • Props to Saxon Fletcher for creating the prototype used to test the new navigation UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. before it was more evolved in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

Shout out to @worldomonation @wpchai @sereedmedia @jordesign @goblinartificer @rwye1  @nigeljoy  @vinnykaur @augustuswp for being first time contributors. Expect a badge on your WordPress profiles for your contribution!

Important note: compared to other summaries, this summary is going to be simply divided between each task with indications of bugs vs enhancements to better reflect how the exploration was conducted and to make the information easier to consume.

Watch the experience

For anyone wanting to see folks run through the experience, here are videos from a few contributors who very kindly recorded and passed along their experience for others to benefit from: 

Walkthrough from @piermario

Walkthrough from @paaljoachim

Browse mode, new pattern inserter experience, and contextualized zoomed out view

Overall, browse mode felt modern and smooth with a few key items around general usability to level up what’s possible: more visible edit button, clearer way to get back to the dashboard, and breadcrumbs/more understanding of where you are in the site editor. Each of these items are listed as follow up to-dos as part of this broader effort so expect to see quick iteration here. Some feedback came in around how jarring the zoom out view was and that was partially due to this exploration testing an earlier version of what’s now being worked on, where those issues have been smoothed out as the work has evolved. 

Finally, two folks mentioned expecting to have a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer pattern that was selected from the Inserter to automatically replace the current header/footer in the site editor and expressed confusion when that didn’t happen. While this is intentional in the current experience and there’s currently a replace option built into template parts, it’s worth noting in case it becomes a trend. 

Everything except the final item below are enhancements pulled from the shared feedback: 

  • [Enhancement] Easier to find the edit button due to confusion around inability to edit the templates directly (planned for iteration)
  • [Enhancement] Provide a more visible/clear way to get back to the dashboard as the W menu isn’t clear enough for folks as it is (planned for iteration). 
  • [Enhancement] Show more information/breadcrumbs about where you are in the site editor (planned for iteration).
  • [Enhancement] Desire to see Styles in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. with templates and template parts (planned for iteration).
  • [Enhancement] Add zoomed out view to live previews of blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes. 
  • [Enhancement] Highlight template or template part when selecting from each section.
  • [Enhancement] Desire to pick whether a header or footer pattern will replace the current header/footer when inserting a new one.
  • [Bug] Remove flash on screen when loading the site editor. 

I still think that getting back out to the Dashboard could be more obvious. I’ve been working in it for a while now so I know that clicking the W gets you there, but if I was just encountering this for the first time, I would be looking for a “Dashboard” button or link.

@itsjustdj in this comment.

When I tried to add a new header pattern, it ended up being placed within the existing header. When adding a pattern to the header or footer, maybe ask if it should replace the existing header? In my case, it was within the existing one, so it was hard to remove the old blocks.

@clubkert in this comment.

It would be cool if while dragging the pattern on the page, its shape and proportions were kept so that 1) you have a better idea of where it’s going to be placed and 2) you have a better idea of the space and position on the page.

@piermario in this comment.

Pattern library is categorized nicely and easy to navigate.

@nigeljoy in this comment.

New navigation management experience 

Generally speaking, a few folks struggled with the Maze option that was used to create the prototype, finding it to be a bit too constrained to get a full sense of the experience. This is something to consider when it comes to future experiments and thoughtfully considering when it makes sense to use a tool like this again. Outside of that, the feedback was overall extremely positive with folks being able to see how this takes a big step in a better direction for the navigation experience. With the more scaled back experience, feedback was limited to two items: desire for a cue for folks to open the sidebar for those who might have it collapsed and curiosity around how sub-menus will be handled. Stay tuned for a more comprehensive call for testing when the feature is further along.

It was exponentially better. Much more in line with my other block and site editor UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. expectations.

@sereedmedia in this comment.

Having some settings or the possibility to edit a menu in the sidebar is a step in the right direction, but it feels crammed and is still way less intuitive than the previous experience. If I want to add a link to a page or a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., I’d expect an option to choose that, not a custom link block.

@piermario in this comment.

I’m a big fan of anything that makes managing menus easier. This seems MUCH clearer on the steps of dealing with your existing menu and making changes.

@jordesign in this comment.

I wish we’d been able to see what setting up submenus will look like, since I suspect that’ll be one of the biggest remaining sticking points (that and mobile layout, which I’d love to see as well). beyond that, I’m wondering if there’ll be a cue for those who have that sidebar collapsed, so that they know it needs to be popped out to edit the menu items.

@goblinartificer in this comment.

Styles Randomizer

Beyond a few specific pieces of feedback below, most folks found this feature to be neat and easy to use but in some ways lacking in practical application with a few wondering if they would end up using it. On the flip side, others could see how it would speed up site creation for both block themers and end users alike. 

I think it would be more useful if the user could pick between random colors themes (say, pastel, neon, duotone and such). That and allowing only accessible color combination could turn this into an actually useful tool.

@piermario in this comment.

It’s also an opportunity for users who have trouble coming up with color schemes to find something that works faster than using the color sliders or hex values for each element.

@itsjustdj in this comment.

I tried this out on a newly installed theme to customize the style variations, and use it in tandem with Create Block Theme plugin to create custom style and a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.. This is good. It really speeds things up & definitely useful. Just one note, perhaps the randomizer engine would generate a more contrasting color palette.

@franz00 in this comment.

Clicking it a bunch of times will cycle through various colors. What if I want to go back to the colors I had before clicking the Randomize colors button? It would be nice with a method to go back to the default color palette before I started randomizing the colors.

@paaljoachim in this comment.

Additional related feedback

Some items of feedback didn’t fit in nicely to the specific features being tested but are worth mentioning, namely as they are all repeat enhancement items that have come up before:

I kept unchecking the box to save the template part, but this preference wasn’t remembered the next time I went to save. I felt like it should remember that (at least until I made another edit to that template part).

@clubkert in this comment.

When I viewed a preview of the page in a new tab, it just took me to the home page. Upon looking again, it says that the link is to “view site”, but this was not what I was used to from using this functionality in the page/post editor.

@clubkert in this comment.

Under Styles > Typography > Elements > (choose one) > Line Height, clicking on the “+” will set the value to 0.1 even if a default value exists (eg. 1.5).

@worldomonation  in this comment.

#fse-exploration, #fse-testing-summary

FSE Program: Seeking volunteers to use Replay.io for capturing bugs

The FSE Outreach Program is always seeking ways to improve the access, ability, and reliability of capturing feedback for the latest and greatest with WordPress. Previously, this has looked like experimenting with “explorations” of early features using prototypes/specific PRs to test or the recent addition of InstaWP to make creating test sites and unique testing situations far easier. In the coming months, another tool, replay.io, will be piloted, and volunteers are needed to help determine how it can be used to better WordPress’ bug finding and fixing feedback loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop..

Volunteer Requirements

  • Ability to help for the next 3 months whenever a call for testing is started (at least 1 hour per call for testing with calls for testing about every 3-4 weeks). 
  • Time to learn how to use replay.io and use it when going through the calls for testing. 
  • Comfort in using GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/’s GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository and opening issues. 

If you are interested in volunteering, please comment on this post between now and December 28th 2022! If you have questions/comments/concerns, just ask below. Right now, I’m looking for at least 3 folks to participate. 

What is Replay?

Replay is a “time travel debugger” for JS. Replay lets you record a browser session to produce a shareable replay for collaborative debugging. The replay isn’t a video — everything from the browser is recorded so you can inspect anything from HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. elements, JS execution, network requests, user events, and even the state of your ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. components at any moment in time.

Replay refers to both the Replay Browser (recording) and the Replay App (debugging). One major use case for using this kind of tool in the WordPress project is to reduce time to resolution on bug fixes i.e. writing steps to reproduce & reproducing issues locally.

 Here’s more information:

  • An app for Linux, MacOS, and Windows that is a custom browser that can record all actions and background processes of any website.
  • Using the Replay browser, you can record problems on any website and upload them to the Replay WordPress Team. Once recorded and uploaded, you may add comments to the timeline or simply pass it off to a developer with a link or inside a GitHub issue.
  • Developers can then view the recordings and see exactly what’s happening and when rather than needing to look at screenshots of the console or replicate on their end.

You can learn more in the Replay Documentation

Why Replay? 

@chanthaboune brought Replay to the FSE Outreach Program’s attention as a tool that could help supercharge our bug finding and fixing. Replay’s OSS commitment, including free support, makes it stand out as a possible option to consider. Rather than trying to roll it out on a broader scale, this is an attempt to do so on a small scale first to understand what does and doesn’t work to help determine if it might be a tool the broader WordPress community can use in the future. This will be trialed for the next three months, dependent on volunteer capacity. Feedback will be collected and shared along the way before bigger decisions are made. 

What kind of issues will this help with?

While just about any issue will benefit from the additional information captured by replay.io, there is a sweet spot in issues that are difficult to reproduce and that seem environment dependent. Here’s a recent example with a performance concern ahead of WordPress 6.1 where this would have helped cut down on resolution time.

Who will be able to access the recordings? 

Only those with developer seats can access certain “time travel” features of DevTools e.g. Print Statements of the replay app. Various developer seats will be given as needed based on the issues filed. I (Anne) will handle that since I can monitor the funnel of issues created through the FSE Outreach Program while we explore this.

How long will these recordings last?

As of now, Replay guarantees the recordings will be fully operational for 3 months. However, new features might make recordings lose information such as in the developer tools.

Do I have to download this app to make recordings?

Yes, there is a firehose of information that it’s tracking that include all click interactions and everything happening at all levels of the code, network, etc. There’s no way to do this in regular browsers that isn’t terribly difficult or tedious to the point of being useless.

Do I have to use this browser as my primary?

No, we recommend only using the native application when doing actual recordings.

How long can my recordings be?

As of now, anything more than 2-3 minutes gets difficult to use however they are working on improving this.

Privacy & Security Questions

See here.

#fse-outreach-program, #replay-experiment

X-post: Call for Testing: WordPress for Android 21.3

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for Android 21.3

X-post: Test Team Update: 5 December 2022

X-post from +make.wordpress.org/updates: Test Team Update: 5 December 2022

X-post: Call for Testing: WordPress for iOS 21.3

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for iOS 21.3

X-post: Test Team Update: 28 November 2022

X-post from +make.wordpress.org/updates: Test Team Update: 28 November 2022

X-post: Test Team Update: 21 November 2022

X-post from +make.wordpress.org/updates: Test Team Update: 21 November 2022

X-post: Call for Testing: WordPress for Android 21.2

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for Android 21.2

X-post: Call for Testing: WordPress for iOS 21.2

X-post from +make.wordpress.org/mobile: Call for Testing: WordPress for iOS 21.2

X-post: Test Team Update: 14 November 2022

X-post from +make.wordpress.org/updates: Test Team Update: 14 November 2022