FSE Program Rapid Revamp Summary

This post is a summary of the Rapid Revamp call for testing for the FSE outreach program, the twenty-third 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. 

Shout out to @poojabhimani @oncecoupled @josvelasco @krupalpanchal as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution! 

High level summary 

Once more, bug wise, the call for testing was quite contained, reflecting a solid state in the experience considering how many new features are being built upon. Overall, the feedback mostly centered on iterating upon 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. theme previewing, improving template vs content editing clarity, confusion around which revision tool to use, and some more minor usability pain points, like poor drag and drop for the Details block or inconsistent triggering of the command center. There was plenty of positive feedback around how much smoother and cohesive the experience feels, with easier access to high level items thanks to the Site Editor additions of top level items 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. for Pages, Styles, and Navigation.

The newly added details block is wonderful. I used it to create an FAQ section, which contained paragraphs, list of items, code, and quote blocks. When I rearranged the blocks, I found it incredibly easy to drag and drop them at any level of block hierarchy. This snap ability turned out to be a significant improvement for GB 15.8. Awesome…I noticed that we now have Pages in the Site Editor, which has made transitioning between editing page templates and editing page/post contents much more easy. However, I still feel the tension between them are still strong. This is mainly because the right sidebar of the template and page/post content still display their respective details and options.

@franz00 in this comment.

I love how everything is becoming more fluent.

@josvelasco in this comment.

@oncecoupled offered a recording of the experience that’s worth watching for an overall look at one person’s journey through this call for testing.

Bugs 

Despite a variety of new features to test, the bugs remained fairly tame in number and severity:

New:

• Block Theme Previews: Resolve “Quirks Mode” issue.
• Command Center: Unable to access draft pages.
• Command center: keyboard shortcut inconsistent.
• Aubergine Variation background implementation causes height changes, impacting the 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..

Previous:

• Links to the editor don’t work for template and template parts revisions in the revisions screen. Resolved and backported.
• Navigation block: create new page/draft naming lagging.

After adding content to About page and leaving the cursor in a paragraph block, when I click on the CMD + K, not open the command center. In this case, open a Search to add a link (the popup that appears when a link is inserted). I have to click in the parent block to work fine in the command center. @soivigol in this comment.

Feature Requests 

With a strong emphasis on block theme previewing and the feature itself being in an early state, numerous feature requests came up to polish that specific experience, alongside requests for more styling options for the Details block and an easier to find pathway for Style revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.. Block theme previewing is a game changer and the feedback provided here offers some solid iteration opportunities. 

New:

• Block Theme Previews: not able to use the Site Editor preview in “Add New” flow.
• Block Theme Previews: add option to switch between different themes to preview.
• Block Theme Previews: hide “View” when in the Edit View.
• Block Theme Previews: simplify Site View text or consider splitting out theme name.
• Block Theme Previews: show child theme information when relevant.
• Details block: allow the option to choose from a set of icons.
• Details block: Improve ability to drag & drop content into hidden text.
• Styles: consider increasing the prominence of revisions.
• Add a way to view a page in the Site Editor as part of the work around Stabilizing the Title Bar.

Previous:

• Styles: Saving style variations.

Once I clicked on the Live Preview link and entered the Site Editor with the Navigation Sidebar (the dark grey menu area) on the left, I was expecting to be able to navigate between all the installed block themes and WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ block themes, similar to how the preview of classic themes work.

@poena in this comment.

General usability 

Outside of more specific issues, feedback was repeated around the confusion between editing a template and a page, which aligns nicely with the already shipped next call for testing that focuses on some improvements there. Beyond the following, two folks mentioned that the “Work with me” link showed up twice as there was a Page list block present in the Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site., causing the item to automatically be added after publishing. This caused some confusion and wasn’t intuitive to understand what was happening.

• Desire for more information when clicking on links that move you out of the Site Editor, like “Manage all pages”.
• Desire for more guidance around when to use which revision tool (Styles vs Templates).
• Global Styles: Store active variation origin as it relates to resetting a style variation only to have the default style variation return.
• Site Editor: Add ability to focus on editing a page’s content vs the page’s template. Merged in 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/ 16.0.
• Styles: show a hierarchy of styles clearly (theme, user, global unspecific, global specific, local, etc)
• Desire for more clarity between template and content editing which should be aided by recently merged broader work.

Adding “Work with Me” again, I figured out why it appears twice on the outside navigation. I also see it twice on any template or the Header template part after the “Work with Me” page is published, if I leave the Editor and open the Editor again. The menu in the Twenty Twenty-Three theme is a “Page List”. When I add the additional Item, it always adds below or outside of the Page List. I couldn’t see how to add it to the Page List. But then when the Work with Me” page is published, it’s automatically added to the Page List, but it’s also outside where it was added originally.

@antigone7 in this comment.

When I made some revisions to the site design and clicked “Reset to defaults,” I expected to be taken back to the default settings of the active style (grapes), but instead the Editor presented me with TT3 default theme.

@franzaurus in this comment.

I was confused initially that the style revisions are stored together, not individually by block. I guess I expected this because they were on different “pages” and because I’m used to existing post/page revisions being separate.

@oncecoupled in this comment.

Clicking into the Post Content group it acts just like the Query 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. block. There is no page inserter but the inserter is at the bottom right of the Post Content. To me that feels strange. I expected to see the standard page inserter.

@paaljoachim in this comment.

With the Details Block I felt very frustrated. In a first moment, I tried to drag and drop to move the selected content to “Type / to add a hidden block”, but it’s impossible why the Details block is closed when lost the focus. I had to use the keyboard (CMD + X) to cut the content and paste it. Additionally, I tried to click in the arrow to close the block (by intuition), but don’t occur anything. Only close when lost the focus and open when get the focus.

@soivigol in this comment.

#fse-testing-summary