Adventures in Block Theme Switching

FSE Outreach Program coordinator Anne McCarthy facilitated a recent call for responses (a slight change in format from the recurring FSE calls for testing) on the topic 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. theme switching, which officially kicked off the process of “thinking long term about what folks would want to be able to have across themes.” According to Anne’s follow up summary:

When it came to ideas for how to best manage the switching process, it quickly became clear that there’s a balance to strike between not adding too much friction to the process while also offering users options to pick and choose what can come with them when they switch.

The call for replies resulted in some imaginative descriptions of how this all could work. The responses also raise some important questions: what role should themes play in the world of block themes, especially when users may want to mix & match styles and layouts from different themes? What does switching themes mean in this context, when you might be able to use aspects from several different themes?

I used some of the responses to Anne’s post as a starting point for a blue-sky exploration around what theme switching might look like in a world of highly flexible themes that — in the true spirit of WordPress — can be hacked and cobbled together to your heart’s content.

Approach

The flows shown below stem from on an ongoing series of posts by Javier Arce and I that explore the possibility of introducing a 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/-style mosaic interface across WordPress screens — including, for example, on the Appearance/Themes page. This is a thought experiment that we are excited to share more widely — please feel free to leave comments on the blog posts or message us directly in the Making WordPress Slack!

Idea 1

Redesign the current Live Preview theme switching flow to incorporate a process similar to multi-entity saving

Entry point: Appearance/Themes

First, I explored the most literal translation of the current theme switching flow as it exists today while incorporating the top bar and other familiar Gutenberg components.

Just like the Live Preview functionality works now, we could utilize a CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.-like preview that would allow users to preview and navigate the site before activating the changes. Selections regarding which styles and layouts to activate could be made in a 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. panel, similar to the one used for multi-entity saving.

Like the current flow, the default behavior is a one-click activation that would switch styles and layouts to the new theme’s defaults (or to the user’s prior customizations of that theme’s templates, where applicable). This is based on the assumption that the majority of users will want to switch everything to the new theme’s look — but the activation panel also provides an opportunity to offer more granular selections. 

We could utilize the thumbnail preview that appears within the Global Styles panel, and there could be a toggle allowing you to switch between the theme being previewed and the active theme on your site.

A close-up view of the upper right hand corner of a live preview screen. It shows a sidebar panel containing a toggle for switching between the preview and current theme, as well as activation options.

From there, it would be possible to drill down into more nuanced selections. For example, you might want to keep certain aspects of your active styles (e.g., just the color or typography) and have those be activated rather than the new theme’s defaults. Similar selections could be made for the layout by picking and choosing which Templates and Template parts to keep active on your site when switching.

A fun variation on this idea is to utilize a slider for comparing the before and after layouts (similar to an Image Compare block):

Idea 2

Make Theme management accessible directly from the Site Editor

Entry point: Global Styles panel

This approach utilizes a “design dashboard” focused on theme management. This idea was originally explored as part of an Appearance menu overview screen.

What if block theme switching could be integrated directly within the site editing flow? For example, a modal containing the Appearance/Themes page could be directly accessible from the Global Styles sidebar. This would allow theme switching to happen more seamlessly without ever leaving the site editor, and hopefully turn the sometimes stressful moment of theme switching into something more akin to changing settings — it’s a low effort modal to close, reopen, and keep tinkering with.

Idea 3

Reconceptualize themes to emphasize styles (with optional or de-emphasized Templates)

Entry point: Global Styles panel

Editing "Index" template in the site editor. Image shows the Global Styles panel with options for three different theme styles. The options are a yellow, white, or black background color palette with various type styles.

The last idea takes inspiration from a super interesting alternate range of color schemes shipping with the upcoming Twenty Twenty-Two theme. What if changing themes was about swapping styles, with template changes becoming something more seamlessly intertwined with existing editing flows? For example, maybe you could browse Template parts from other themes via the inserter or an in-canvas selector.

In this case, navigation between theme styles could happen directly from within the Global Styles panel. Utilizing the current Global Styles navigation pattern, perhaps you could drill down further to adjust and fine-tune after selecting a theme style.

What’s next?

While there’s a lot left unexplored in these flows, I hope these sketches can help serve as a starting point for design discussions around things we would like to see in the future of block theme switching! A great next step would be to start narrowing in on an iterative pathway towards enabling the mixing-and-matching of block themes — at the moment of the theme switch and potentially beyond.

#design, #site-editor, #theme-switcher

4.7 Beta 1 User Testing in the Customizer and with Twenty Seventeen

I ran four users through some tasks in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. with 4.7 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 and Twenty Seventeen. The format was pretty free, but due to time considerations I gave them some level of direction at times. Arim, Kai, and Triet participated in the previous testing for customizer themes, Teresa was using WordPress for the first time.

Arim

Notes:

  • Bug: add menu items not closed when clicking in preview
  • Can’t see whether an external link in a menu actually works
  • No easy path to cropping a currently selected 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. image, but she found a way.
  • Doesn’t understand a lot of the theme feature filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. options (she lists specifics!)
  • Header video (from YouTube) didn’t work for her at first, this was actually a ticket with a patch somewhere regarding broken selective refresh I think (it showed up after a full refresh).
  • Clicks the customizer close button a lot, before realizing that that’s not how you go back.
  • “How would I put something in the second column if I use the two column layout”
  • Bug: she hit an infinite 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. in the customizer preview 🙁 Not sure why.
  • Previewing video on device preview is broken in Twenty Seventeen. Also, can we hide the video when entering device preview modes to reflect that it’s not displayed? That could probably be done with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
  • Thought that the logo being “bigger” (relative to the size of the screen/video) on smaller screens was weird.
  • Expected more to change with custom colors in Twenty Seventeen. But thinks it’s more aesthetically pleasing the way it works.
  • After recording, she said she likes the idea of having a video header, and also being able to use a YouTube video was really helpful. She likes that there’s an option to use an .mp4 directly, but feels like she’d have access to a YouTube video more often.
  • Thinks the placeholder is actual text in the custom css textarea.
  • I knew that she knows what CSS is, so I had her try changing something. She wasn’t successful, but felt like she could do it if she cared enough and appreciated that there was a way to do it.

Kai

Notes:

  • Calling a menu “top” implies that it’s shown at the top of the screen and was confusing, since it’s at the bottom of the screen. This led to menu locations confusion.
  • Edit shortcuts: “that’s cool”. Wants them to just be there without clicking.
  • Weird that you can’t edit the titles of dummy content pages. This conflicts with the usefulness of being able to create new pages within the customizer – you have to create a new one, but then also have to figure out how to delete the old one.
  • Also tries static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example. well before theme options to get to the front page section options.
  • Bug: something went wrong with save/publishing – but the content came back when she re-opened the customizer. It looks like the front page options got cleared.
  • Add new page under each option is confusing, thinks it’ll add another front page content section.
  • Menu locations are confusing, but “display location” helps a little bit.
  • Prefers edit shortcuts over finding options in the section/panel navigation.
  • Even on this very large screen, the feature filter has far too many options.
  • “They’re all like shopping themes”. She was browsing in the “portfolio” subject.
  • Didn’t see any major issues with the theme installer.
  • Has concerns about not being able to really see a demo of themes with content.

Triet

Notes:

  • Conceptually, icons and shift-click make sense, but the details get confusing. For widgets with a list of categories, it’s unclear that the individual categories are coming from the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. instead of being able to be edited directly. The difference between widgets and menus led to the confusion here, I think.
  • Can’t find static front page section, even when prompted with specific terminology. Granted, this was testing on a random test site with a bunch of imported content that may have added to the confusion.
  • Doesn’t know where to click to edit different content. Preview vs. controls areas are very unclear to him.
  • Was generally confused by the fact that not everything could be edited with the icons, leading to confusion about how to edit other things on the site.
  • The front page sections in Twenty Seventeen made sense once he was directed to them. Again, the content on the test site led to some confusion.
  • Found selecting text as the way to show/hide icons, as opposed to clicking. Wasn’t able to figure it out even with some hints.
  • After he stopped the recording he suggested having outlines on the site for what areas can be edited, with edit icons there and being able to edit in the preview instead of having to switch between the site and the controls “bar”.
  • Bug: Front page section placeholders are shown before changing the sections in Twenty Seventeen.

Teresa

(video is hopefully coming soon, there were some issues with her computer saving the recording)

Notes:

  • I started her from a clean install to test starter content.
  • Her computer/internet was really slow, so keep that in mind. (it was her computer, not WP)
  • She also hit an infinite reload.
  • Can’t find a way to remove content from a front page section in Twenty Seventeen.
  • Looks in static front page for front page sections, eventually find it in theme options but says it was confusing. We should reconsider the placement and naming of these.
  • No issues with browsing/installing themes.

Action Items

Some initial changes we need to make that I noted during the tests:

  • We need a better link for custom CSS help.
  • For CSS, we can add validation if someone pastes in a `<font>` or some sort of markup with a `style=` attribute, and provide a more useful user feedback message that whatever they pasted isn’t actually CSS.
  • The “randomize” options for custom headers shouldn’t show up unless there’s more than one image.
  • Menu item screen options are all enabled by default. They should all be disabled by default. This is a regression, possibly dating to 4.3.
  • Dummy content doesn’t show up in available nav menu items. That fees like a bug.
  • Based on these results, it would make more sense to put the front page section controls in the static front page section than in theme options in Twenty Seventeen.

#4-7, #custom, #customize, #theme, #theme-install, #theme-switcher, #twenty-seventeen

User Testing the New Customizer Themes Experience

I ran four users through the new themes experience in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. (#37661) today. I sat with them for each test to take notes and hand them the test steps as they went (written on slips of paper). All of the testers are somewhat technical but not particularly experienced with WordPress; they all used Chrome on Mac with two on laptops and two on desktops (using their own devices). We started out with a clean install, then I added an import of posts from another site before the third test (the featured images didn’t carry over).

I’ve been living with this feature for the past two months, and also witnessed all of the tests directly, so independent analyses of the videos would be much appreciated in the comments.

Summary

There were no major issues that everyone had trouble with. However, each test revealed a few things that we should improve. Most of these items are unrelated to the feature at question – the new theme browser/installer – but they could all use thoughts and in some cases tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets. The biggest potential change to the feature at this point would be to add an additional notice about unsaved changes before opening the themes panel – I’m looking for opinions on whether that’s needed here. Also looking for thoughts on whether we need the install without previewing functionality, or if maybe it should only be available in the details modal?

It was interesting to see how different each test was, despite all of the testers being extremely demographically similar. A lot of this also stemmed from the variety of themes that they looked at. Several of the themes violate various theme review team guidelines, and I made a list that I’ll send to someone in the TRT to address, as unfortunately I still haven’t had time to go through and find ticket for all of them (cc @greenshady).

Each of the videos and the key takeaways from each individual test are available after the jump.

Continue reading

#customize, #theme, #theme-install, #theme-switcher

Usability Testing for WordPress Customizer Theme Switcher Improvements

I did five usability tests for theme switcher and sliding panels in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings..

Summary

  • Users found the customizer very user-friendly overall.
  • Expected clicking on a theme thumbnail to open a preview, not the details modal.
  • Difficulty navigating back using the current 4.2-alpha design (pre-31289.diff).
  • Expected clicking the “Save & Activate” button to not kick them to the front end.
  • “Save & Publish” is clicked a lot more often for sliding panels.
  • I asked two users (note small sample size) which navigation style they preferred, both picked accordion.

Full Videos

  1. 1406491a-usertesting.mp4 (17m5s)
  2. 1408362a-usertesting.mp4 (8m53s)
  3. 1408760a-usertesting.mp4 (7m58s)
  4. 1408936a-usertesting.mp4 (11m15s)
  5. 1414874a-usertesting.mp4 (15m35s)

Continue reading

#accordion-vs-sliding-panels, #customizer, #theme-switcher, #usability-testing-2