FSE Program Exploration: Build a block theme

With WordPress 6.2 released, this exploration seeks to explore the Site Editor as a design tool, asking folks to create a 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 without any code directly in the editor using the current tools. The aim is to both find gaps in functionality and to get feedback on the experience of using the Site Editor in this design centric way, as we look to expand the number of block themes. 

The focus of this exploration is to think with a more open minded, “what can I build today?” approach. If you’ve never built a block theme, consider this an invitation to give it a try. Tooling has come a long way and the power of what’s being built is that it allows more folks to dive into the future (and present) of WordPress. For this experience, you’ll use the Create Block Theme 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 to facilitate the creation and export process so you can keep what you create! Feel free to read these brief instructions for how to get started or follow the steps below.

In the near future, expect a more formal call for testing once more, dedicated to some of the newer functionality being worked on as part of the remaining major phase 2 items

Exploration Instructions

To use a prebuilt test site: 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-block-theme-exploration&d=v1  Please do not repeatedly open this link as it creates a new site each time.
  2. This will launch a site for you to use for up to 5 days. 
  3. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the Create Block Theme plugin.
  3. Install and activate 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/ 15.4 (or the latest version). 

Create the base of your theme

  1. Navigate to Appearance > Create Block Theme.
  2. Choose either “Create blank theme” to start completely from scratch or you can use the currently active block theme by choosing the “Clone” option. Note: You are welcome to use a block theme of your choosing if you Clone!
  3. Fill out the information for either option. Feel free to keep this pretty simple since this is just for testing and not official block theme launching purposes. When done, select “Generate”.
  4. Head to Appearance > Themes and activate the theme you just created.

Configure your fonts

  1. Head to Appearance > Manage Theme Fonts.
  2. From here, you can add a Google font or a Local font if you have any you’d like to use. This will install the fonts (download them) as part of the theme but these fonts still need to be applied. 
  3. Once added, you can then manage the font weights. 
  4. After you’re done, head to Appearance > Editor and open Styles to configure these fonts for use on your theme under Typography. 

Make your changes and export

  1. Head to Appearance > Editor and begin customizing as you’d like! 

Here are some high level ideas: 

  • Use the Styles interface to make global changes to the Layout, Typography, and more. Use the Stylebook to see your changes at a glance to individual blocks. 
  • Use the design tools built into each block to make individual changes. 
  • Create new templates or template parts. 
  • Add or remove different blocks from current templates or template parts.

Export your theme

  1. When you’re done making your changes, head to Appearance > Create Block Theme.
  2. From there, choose the “Export” option. This option will automatically include user changes so you don’t have to overwrite them first.

Please share feedback by April 26th, 2023

What to notice

While you’re welcome to share feedback on any aspect of the experience, here are a few specific questions to focus your feedback.

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What did you need to use Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. for, if at all? 
  • Was there anything you weren’t able to accomplish that you’d like to see considered? 

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). 

#fse-exploration, #fse-outreach-program

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 Exploration: Site Editor Sneak Peek

With WordPress 6.1 released and work deeply underway around a collection of key items for phase 2 completion, this exploration takes a peek at what’s to come in the short to medium term based on those same items to evolve the site editing experience.

As before, the focus of this exploration is to think with a more open minded, “how would I like this to work” perspective in order to gather useful insights that will help inform these in progress items. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen, points of confusion, etc. Because this work is in various stages, each item below has its own unique way of diving into what’s underway based on what’s currently possible. Remember too that this is very much a true sneak peek with this work being quite early.

In the near future, expect a call for testing dedicated to these items as they evolve and enter a more actively testable state. Depending on how work progresses, this might occur as this exploration is in progress!

Brief overview

Here’s a quick rundown of what this exploration will cover with links to the related PRs if you want more information:

  • Reorganizing the Site Editor to introduce browse mode, offering an easier way to navigate between content in the site editing experience. 
  • Redesign the Pattern inserter to allow for larger previews and improved clarity between categories. 
  • Invoke zoomed out view when selecting a style variation to better see the overall impact of the variation options.
  • Introduce a new UX for the navigation block where changes can be made from within the 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. settings 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.
  • Try a random color palette generator for Styles, making it easy for users to switch up their colors intelligently.

Taken together, the aim is for each of these items to create a smoother and cohesive experience, with features working together to make the site editor a delight. For example, the new pattern inserter scales nicely with a pattern rich future and the targeted use of the zoomed out view means the view appears right when you’re likely to need it most. 

As you look over the post, remember that you can engage with all of the items or just one of them! Either way, it’s all helpful.

Task 1: Exploring browse mode, a new pattern inserter experience, and contextualized zoomed out view

For those who are curious to learn more but don’t have time to explore further, here’s a video going through each feature quickly.

Testing environment 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-exploration- 
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 8 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the exploration.

If you want to use your own environment, please follow these instructions around how to test an individual 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/ PR for this PR on reorganizing the Site Editor. 

Explore

These tasks are purposefully open-ended to encourage you to make the experience your own and find the edges. When you respond below, share what approach/steps you took and why! Any bugs you find too, report away in your comment. 

  • Edit and save a template.
  • Add a few patterns (remember you can drag & drop from the Inserter). 
  • Replace 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 with a different pattern.
  • Change style variations. 
  • Navigate between templates and template parts a few times. 

Describe your experience and what you’d like to see

As you go through the above experiences, consider the following questions as a way to reflect on what you’d like to see in the future. Don’t hold back and don’t worry about how practical an idea might be. This is just to get a sense of what folks might want to do in the future.   Answer one, all, or none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • How did this experience compare to the previous one? 
  • How cohesive did navigating between the various pieces of the experience feel?
  • What felt easier to do? Conversely, what felt harder?
  • Where else would you like to see the zoomed out view used?
  • What problems or opportunities do you anticipate with these new items?
  • Anything else? Think big!

Task 2:  Imagining a new navigation management experience 

For those who aren’t participating but are still curious, here’s a screenshot of the original design idea:

Navigation block design with a sidebar open, showing a few places to manage the items within the block.

Testing environment 

Props to Saxon Fletcher for creating the prototype used for this section, allowing us an early look at what’s underway.

  1. Open this link: https://t.maze.co/124892347 
  2. After reading the initial instructions, click “Get started”.
  3. Go through the different tasks and, if you’d like, take notes on anything as you go.
  4. When done, close out of the tab.

Describe your experience and what you’d like to see

As before, please consider the following questions as a way to reflect on what you’d like to see in the future. 

  • How did this experience compare to the current navigation block experience?
  • What felt easier to do? Conversely, what felt harder?
  • What problems or opportunities do you anticipate with this new 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.?
  • Anything else? Think big!

Task 3: Switch up your Styles with a new randomizer

Open site editor with a red background and black and white text with the Styles interface open to a section that shows the option to randomize colors.

Testing environment 

  1. Open this link only once: https://app.instawp.io/launch?t=fse-exploration-style-switcher
  2. Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created. 
  3. This will launch a site for you to use for up to 8 hours. Select “Magic Login” to log in to the wp-admin dashboard. 
  4. Save the link to your site so you can access it again during the exploration.

If you want to use your own environment, please follow these instructions around how to test an individual Gutenberg PR for this PR.

Explore

To help explore the feature, here are a few steps to take. Repeat them as many as you’d like to get a better sense of what’s changing with this PR:

  1. Head to Appearance > Editor (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.).
  2. Open the Styles settings.
  3. Open the “Colors” section.
  4. Select “Randomize colors” and see your colors change. Click this option as much as you’d like.
  5. Head back to the main Styles options and select “Browse Styles”.
  6. Change to a different style variation and repeat the same steps to randomize the colors.

Describe your experience and what you’d like to see

As before, please consider the following questions as a way to reflect on what you’d like to see in the future. 

  • How likely do you think you are to use this feature?
  • How easy or hard was it to use this feature and understand what it was doing?
  • What problems or opportunities do you anticipate with this new option?
  • Anything else? Think big!

Please share feedback by December 2nd, 2022

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

#fse-exploration, #fse-outreach-program

FSE Program Exploration: All Things Media

With WordPress 5.9 shipped, the big pieces of full site editing are out in the open ready for feedback. Rather than digging once more into these pieces for now, let’s leave that to the wider world to absorb and switch into an aspect of site building that can be very make or break: the role of media. Whether it’s setting a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. or adding 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. image, there are tons of ways media touches all parts of building a great site. 

Like last time, the focus of this exploration is to think with a more long term, “wishful thinking” perspective in order to gather useful insights that will help inform the design of media related experiences going forward. This is achieved by guiding you through some common tasks for site building with media, and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen.

As you look over the post, remember that you can engage with all of the items or just one of them! Either way, it’s all helpful.

Brief Overview

Part of why we’re doing this call for testing is because there are a few new projects and tools around media in the WordPress project that you might have missed: the WordPress Photo Directory and Openverse. 

The WordPress Photo directory is currently in 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., and aims to offer a curated source of high-quality images. By adding your photos there, the photos will automatically appear in Openverse, a search engine for openly licensed media with over 600 million items to use free of charge. Right now, these are standalone tools but, in the future, there will be huge opportunities to integrate them directly into the WordPress experience. This exploration will help inform this very early work that’s also in line with various 2022 goals

To read more about the WordPress Photo Directory and Openverse, check out this comprehensive post sharing everything you need to know.

Task 1: Explore what’s currently possible 

These tasks are purposefully open ended as there’s often a few ways to accomplish them. When you respond below, share what approach/steps you took and why! Any bugs you find too, report away in your comment. 

  • Add a duotone 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. to a Cover 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. with an image or video in it and add text over top, adjusting the opacity as needed. 
  • Add an image to the background of your header.
  • Add a caption to an image. 
  • Crop or rotate an image in a gallery block. 
  • Add an external non-copyrighted photo to your post as a featured image. Bonus points to share where you searched for the image and where you normally do so.
  • Change the size of your featured image for your posts by editing your post template. 

For this exploration, it would be advantageous to use a block theme since this is meant to capture media in the context of full site editing. As a result, please follow these steps:

  1. Set up a test site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  2. Install and activate a block theme from the options listed in the theme directory

Task 2: Describe what you’d like to see

As you go through the above experiences, consider the following questions as a way to reflect on what you’d like to see in the future. This could be everything from being able to use a featured image as a background of a cover block to having more built in controls to style your images to rethinking featured images in general. Don’t hold back and don’t worry about how practical an idea might be. This is just to get a sense of what folks might want to do in the future.   Answer one, all, or none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • How would you like to see Openverse or the WordPress photo directory integrated into the experience?
  • What comes to mind when you think about Patterns and media?
  • What workflow improvements can you think of? What was hard to accomplish? 
  • What basic tasks do you find you have to do outside of WordPress to get your media just right and how would you like to see those tasks integrated into the experience? 
  • How would you feel about using an image where attribution information couldn’t be removed? What about an image where you can not make significant changes?
  • Anything else? Think big!

Please share feedback by Wednesday, Feb 23rd, 2022

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

Join a hallway hangout on Feb 16th, 2022 @ 5:30PM UTC 

If you want to dig into this exploration more and chat about All Things Media, join @fcoveram and @annezazu in an upcoming hallway hangout. As a reminder, these are casual, open calls that anyone can join and leave as they’d like, have their video on/off, talk or just listen! It’ll last under an hour and will be recapped on Make Test

To join, head to #fse-outreach-experiment in Make Slack where a zoom link will be shared at the time of the hangout. 

#fse-exploration, #fse-outreach-program, #fse-testing-call, #full-site-editing

FSE Program Exploration: Help with the future of Block Theme Switching

With the advent 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 in the WordPress ecosystem, new possibilities are on the horizon, from easier theme development for developers and designers to easier site creation for users. Rather than just examining the value of block themes in isolation though, it’s important to expand to think about what can be done across different block themes. For example, imagine a world where one could seamlessly take product review patterns from one theme, styling from another, and product display templates from an eCommerce focused theme to create a store. Or imagine being able to switch themes while retaining your favorite palette of colors and typography. Regardless, it’s imperative that the experience is reliable, intuitive, and expansive pushing beyond what’s been possible in the past. 

As a result, the focus of this exploration is on thinking from this longer term, “wishful thinking” perspective first by guiding you through a very basic theme switching process and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen or would like to occur. The aim is to gather useful insights that will help inform how we design this experience. 

Note: this is intentionally just focusing on block theme switching only for now rather than, for example, switching from classic to block. 

Explore what’s currently possible 

The steps below are meant to be high level with the aim to have you set up initial block theme related items that you might want to keep upon switching themes. It’s not required to run through these steps for the sake of this test since many of the flows are not yet built. 

If you don’t have time to create quick content, feel free to import this demo content (open the link and select “Download) created especially for this test via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.

  1. Set up a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  2. Install and activate the latest version of Gutenberg
  3. Install and activate a block theme from the options listed in the theme directory
  4. Create a custom template under Appearance > Templates > Add New. 
  5. Create a custom template part under Appearance > Template Parts > Add New. 
  6. Open the Site Editor and, using the Global Styles 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., select a few custom block styles and overall default styles. Save all changes. 
  7. Head to Appearance > Themes and switch themes. 
  8. Review the Site Editor, Templates, and Template parts. 

Bonus: Try importing and exporting content from a current site you have to a test site to make the test feel more real and applicable, even if the site is not using a block theme. From there, switch to any theme, block or not. This is purely to get you in the headspace of thinking more about what you’d like to retain even if this is focused specifically on block themes. 

Describe what you’d like to see

Comment below after reflecting on the following questions. Remember to share what you’d like to see ideally rather than focusing on what’s currently in place. Answer one, answer all, answer none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • What would you want to be able to do when switching themes?
  • What parts of a block theme would you expect to be able to keep when switching themes? 
  • What sort of confirmation prompts would you want to see? 
  • Share a time when you switched themes and something unexpected happened.
  • When you switch themes on your site, can you share your routine?
  • If you wanted to switch to a new theme today, where do you go or which places would you expect to be able to do this?
  • What are some reasons you have had for wanting to switch to a new theme?
  • Anything else? Think big!

Please share feedback by September 29th, 2021

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

Thank you to @poena @kellychoffman @priethor @daisyo for reviewing!

#block-themes, #fse-exploration, #fse-outreach-program, #full-site-editing