FSE Program Pattern Party Summary

This post is a summary of the tenth (!) call for testing for the FSE outreach program. Per usual, I love an excuse to celebrate so here are some fun stats to continue the party:

  • There have been Italian translations for nearly every single call for testing thanks to @piermario. This consistent hard work has allowed folks from the Italian community to better stay up to date and involved in these efforts.
  • There have been numerous Japanese translations and group calls for testing through WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Japan thanks to @mimitips @ippei-sumida @atachibana (and likely others!). Similar to the Italian translations, it’s wonderful to see a pathway created here for the Japanese community to be involved.
  • @paaljoachim has responded to every single call for testing with comprehensive feedback each time! It’s wildly helpful to have someone be so consistent in exploring each test over time.
  • There have been 69 badges given to folks who have responded to the various calls for testing with an average of 1.6 replies per person (meaning most folks don’t just contribute once). 

Thank you to every single person who has come along for the first ten calls for testing. Here’s to at least ten more (Twenty more? Thirty more?). 


For this specific release, I want to offer special thanks to @piermario for the Italian translation, Yoast for focusing attention on this call for testing for their latest contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/., and @sparklingrobots for bravely walking through their experience for the call for testing on a hallway hangout.

Finally, shout out to the following folks as first time contributors to a call for testing: @evarlese, @oksankaa, @nynkedeblaauw, @suascat_wp, @mikes41720, @iamyvonne, @adetolah, @josevarghese, @ankurchauhan126. Get excited – you now have a testing contributor badge on your WordPress profile!

High level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following more specific feedback. Generally speaking, most folks found problems with more of the details of the experience rather than running into any major blockers with 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., crashing, bugs, etc that prevented them from doing what they wanted to do. Tied to this, much of the feedback centered around the desire to be able to go even further than what’s currently possible, which is reflected in the robust Feature Requests section.

While some things are still not totally intuitive to new users, I feel that 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/ made more big steps ahead in just a few months. I enjoy creating content in it and some of the things I have in mind are easier to achieve.

@piermario 

It’s been fun testing out 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.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. in FSE. No crashes or bugs. The saving worked properly. 

@mikes41720

Confirmed bugs

What follows are confirmed bugs that break expected functionality or the experience of different features. Thankfully, there were only a few of these items!

General Usability Feedback

Overall, most of the feedback for this section surrounded taking very specific actions or insights around how pieces fit together rather than a massive gap in the experience or a blocker to accomplishing a task. As a result, I’ve included more quotes than usual below to help give more context to what was shared. Of note, some are repeat items from previous tests and are labeled as such below. 

For the Query Block specifically, I’m not sure if this is expected, but I didn’t find a way to get back to the initial layout options if I wanted to change.

@evarlese

I had to open a new tab and go to Posts -> Categories and check out the names of the categories. It would be very useful with the multi select so that we can easily choose various categories from a drop down.

@paaljoachim

It makes sense that ‘Post Categories’ and ‘Post Tags’ blocks can only work within the Query Loop block and when editing a Post and each would display categories and tags associated with that post. However, when someone tries to insert those blocks on the Page outside the Query loop block would just drop the spinning icon. Probably, because as we know Page has no categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and outside the Query Loop, it can’t query the category. ‘Categories’ block would however work.

@suascat_wp

Query Loop – the anchor link of ‘create a new post’ leads to creating a new post or page (depending on the post type chosen in the settings), but I felt like it would break interaction with full site editing since it leads you to create a totally new post or page using the block editor. 

@mikes41720

Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. – there’s a section to ‘add “read more” link text‘ (which I’m not sure what it means?) that if you click on, it doesn’t show the blinking “|” which signifies that you can add text to it (although it does work and you can add text). If you click directly right after it, it’ll then show the blinking “|” and that acts as more of a sign that you can modify and add text. It might be a bit confusing for some users from a visual cue standpoint.

@mikes41720

I’m having a hard time adding the columns within the Query Loop block unless have to do it via the help of list view.

@iamyvonne

I was playing with the theme.json and added under the styles section on the file a font size for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./post-title for the page, that syle is applyed at the root level so every nested core/post-title will inherit this stile and it’s ok abviously, it’s a css behavior, this is something to pay attention because now with blocks we must take into account much more kind of indentation of blocks than before where we had well-defined structures.

@overclokk

I’m still misled by the WordPress button in the top left corner of the Site Editor. I know that its function toggles a menu open/close, but being the WordPress logo such a familiar affordance, I often click on it in auto-mode expecting to come back to the dashboard…way too many clicks if I just want to “escape” to the dashboard or the live site.

@piermario 

I often feel the “double” saving step slows me down and in 99% of the cases, the options provided in “Select the changes you want to save” are something I don’t want to check off.

@piermario 

Feature Requests

Generally speaking, at a high level, most feature requests in this section come down to two things: more design tool options and more settings for blocks. As with the previous section, some are repeat items from previous tests and are labeled as such below. 

I was also initially surprised by 1 item per page as the default, and it took me a moment to find the settings again to change it.

@evarlese

When selecting ‘Display settings’ one can set the number of items per page. But actually you pick the number of items in the column if you choose a layout with multiple columns. May be easier to understand if ‘items per page’ would be renamed to ‘items per column’ or something similar.

@nynkedeblaauw 

Site Logo – has a Rounded style but no border radius control. It would be helpful to add the various new controls also to the Site Logo block. Dimensions panel etc.

@paaljoachim

I wish I had a margin and padding setting on the Columns block level.  

@piermario

#fse-outreach-experiment, #fse-outreach-program, #fse-testing-summary

FSE Program Block Theme Switching Summary

This post is a summary 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 exploration for the FSE outreach program. This was the first of its kind, enabling folks to share very early feedback on something that has yet to be robustly defined. Thank you to everyone who participated, whether through sharing feedback directly or sharing the exploration with others. 

Shout out to @richtabor @elmastudio @anariel-design who officially got badges for responding, despite having engaged with surveys the program has done in the past. 

Big thank you to @piermario for the Italian translation and @greenshady for the WP Tavern article, which both help bring the exploration to even more folks.

High level summary

Overall, the current experience proves to be frustrating and inconsistent, especially when taking into account custom block styles, keeping customized templates, etc. Thinking long term about what folks would want to be able to have across themes, there was mass consensus around being able to retain templates, template parts, and menus. There was somewhat mixed feedback around whether Global Styles should persist as some saw those as differentiating a theme. 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. Ideally, there can be a simple and visual way to intuitively guide users and help them take advantage of the power of what block themes unlock without discouraging them with too many options. 

On templates and template parts

There was mass agreement around the desire to keep customized templates and template parts across themes, with many expressing surprise and frustration at the current experience. This was previously documented and discussed here as part of an earlier call for testing.

I’m very surprised that any templates I’ve created are tied to the theme that was active when I created them. I’d expect that my custom templates should remain applied to pages when the new theme is active, instead of being disregarded. I’m not sure why templates are omitted when a theme is changed.

@richtabor in this comment.

I would like to be able to use templates and templates that I have created and saved, no matter which theme that is active. I know that I can view them under appearance templates/template parts, open them, copy the code and paste it into a new template, but I don’t think that is a good experience. It should be easier.

@poena in this comment

On menus

Similar to templates and template parts, this was another area that folks inherently expected would persist across changing block themes. 

An issue I’ve ran into now a few times when trying out different Full Site Editing themes is that losing menu data is frustrating. I think as a non-technical user it would be confusing, because you are prompted to “Add an existing menu”, which I would think would be my menu from the last theme I was using.

@timothyblynjacobs in this comment

I think it is important that navigation blocks that I have set up remains. The “Add existing menu” feature in the navigation block assumes that I have already created a menu in the navigation screen. If I only setup the navigation block as part of 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. template part in the previous theme, then I can’t re-apply or reuse that navigation block. Perhaps navigation blocks should also work the other way around? I mean why can’t I select a name for my navigation block as I create it in the editor, save that in isolation like I can save the site blocks in isolation, and have that 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. present on the navigation screen?

@poena in this comment

Keeping any menus created in the Site Editor available would be important, I think this is one of the biggest issues right now.

@elmastudio in this comment.

On Global Styles

Global Styles left folks a bit split with some seeing them as being theme dependent and others wanting the option to carry settings/styles across themes. There’s currently a discussion around what can and can’t be standardized which will impact how this could be implemented. 

I see Global Styles tied to the theme, but it could be helpful if some common settings are taken from one theme to the next.

@elmastudio in this comment.

Understandably global styles settings would adapt when a theme is changed (just like 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.) – and I like how my custom GS settings persist when I change back to a theme (just like the customizer as well).

@richtabor in this comment.

When you export the demo and import it to the other installation, theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file styles are not imported. As a theme developer, I would love to develop one theme with different demos for example. When I export the demo file I would love that global and block type styles are exported too and imported to other installations.

@anariel-design in this comment

Have the option to keep Global styles modifications. Perhaps a kind of dialog box that shows up when entering the Site Editor listing adjustments I made to the previous theme, asking if I wanted to keep these adjustments or to start anew.

@paaljoachim in this comment

One question that keeps me up at night is how cross-theme compatibility will work on the content level. Default block output should translate from one theme to the next with little or no issues. However, custom block styles, font sizes, colors, and the full range of presets are already a problem area.

@greenshady in this WP Tavern article

On ideas for how to manage the process

Outside of a desire for the experience to be overall easier and more seamless, the following ideas were shared with a split in terms of folks who wanted decisions upfront vs after switching:  

  • Create a directory for templates and template parts, similar to block plugins or patterns, to make it easier to keep and reuse various templates/template parts.
  • Offer an option to pick and choose what you want to keep before switching themes.
  • Make switching easy upfront but, after switching, offer an option to import various items from the previous theme. 
  • Offer a side by side visual comparison of various parts of a theme before switching (templates, patterns, etc). 
  • Offer a way to import a color palette or template into your current theme so you don’t have to switch fully but can take advantage of different pieces. 

I have experimented with one theme but figured out along the way that it does not have the patterns or finished templates or something else I had hoped for. Instead of creating the patterns and templates myself I switch themes. When I click to switch a theme I get a warning message saying that switching themes will remove the adjustments I made to the current active theme, but I have an option to save these adjustments in a kind of twilight zone between one theme and another. I select to save changes I made, and notice that these carry over to the new theme that I activate. I check and notice that the changes do carry over. I am relieved that I am able to create adjustments in one theme and have these with me to the next time…In the Site Editor I can check out what the new theme offers and when I feel ready for it I can either say yes to bringing over the changes or no because I notice that the new theme has what I need.

@paaljoachim in this comment

I actually don’t want to be prompted with having to make several decisions as soon as I activate a new theme. I would find that stressful. I want to take my time. I want to understand what the differences are between the themes, and what changes I need to make. Perhaps there would be a side-by-side comparison of common page templates like page, single post, home? Like a revision? 

@poena in this comment

It needs to be easier for the users. They already needed to deal with the domain, hosting, choosing a theme etc.

@anariel-design in this comment

It could also be awesome to pull a color palette and drop it into an existing theme. Sort of like having a Colour Lovers directory to pick color schemes from but keep all the other bits. This could be fun for people who can recognize a palette that they like but would never be able to handpick all those colors. I’ve often seen color schemes that I’d love to use from other themes but didn’t like other things about them.

@greenshady in this WP Tavern article

On reasons for switching and the experience

Of the various questions folks could answer, some touched on both reasons for switching and the current experience. I’ve listed each response below since only a few folks addressed this area specifically. I’m also including images from @greenshady’s post where he took a simple blog post with some custom block styles, gradient colors, and font sizes and compared the output across three different themes highlighting current problems with theme switching.

To see prebuilt template layouts (could be done in a template mosaic view to where I can choose various prebuilt layouts instead of switching themes). To have a base that I want to start from. A design that I would like to use and modify.

@paaljoachim in this comment

I think the most common scenario is a missing functionality in one theme like WooCommerce support. Next would be outdated design and lack of updates and support from the theme author.  

@elmastudio in this comment.

When I switched to the Quadrat I mostly lost everything that I set up in the Clove theme. That means, About page doesn’t look anything similar, colors, fonts are now from the Quadrat theme and button style too. From the user’s side, this is very confusing. If u ever used Elementor for example, and many are using it they are used to the similar overflow. If I create a template and change the look and styles and switch to any other theme this template will look the same and it will remain available.

@anariel-design in this comment

I am not one for switching themes. Since I learned how to design for WordPress well over a decade ago, I have never moved from one theme to the next. At least not in the same way that the average user would. Instead, every time I have added a new coat of paint on my websites, I have simply switched over the foundation to whatever I had been working on at the given moment. WordPress themes, for me, were always just an iteration upon the last project…The first thing I do when testing any theme is to load a demo post. Lately, this has been the “Welcome to 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/ Editor” test post. The primary question: Can I read the content comfortably? If I do not get past this stage, I simply deactivate the theme.

@greenshady in this WP Tavern article

What’s next?

@critterverse is exploring how to approach these flows from a design perspective and has been following along as feedback has come in. You can expect to see a more in depth design exploration shared soon enough with some of these pieces of feedback and ideas integrated in! I’ll flag this in the outreach program channel when the time comes and will see how we can explore these experiences in future calls for testing. 

#fse-outreach-experiment, #fse-outreach-program, #fse-testing-summary

Hallway Hangout: on adoption pathways for full site editing

Date2021-09-16 16:00 UTC

Format: Zoom (recorded). A link will be shared in the #fse-outreach-experiment channel before the meeting time. Please join that channel if you’d like to participate!

Length: 45 – 60mins. This will not run longer than an hour.

Topic: This session will focus on adoption pathways with full site editing.

Facilitator(s): @mkaz @get_dave @annezazu

Goal: To have a broader discussion about adoption pathways, what’s working, what successes folks have had, what blockers people are running into, and what might help more folks participate. Beyond just the benefits of learning from each other, this information will ideally be used to help influence future resources and to give insights to the teams working on these items.

Intended Audience: Anyone who has adopted or is interested in adopting site editing related features (theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., template editor, theme blocks, navigation editor, etc).

Agenda

This conversation is meant to casual, collaborative, and open ended rather than prescriptive about how one should approach adoption. With that in mind, we’ll start the session asking folks who are comfortable doing so to share what they’ve tried and how it’s gone. Once everyone who wants to go has done so, we’ll talk about successes, blockers, and what resources folks have used (along with what resources folks would like to see). We’ll see where the conversation takes us from there!

#fse-hallway-hangout, #fse-outreach-program, #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

FSE Program Testing Call #9: Handling HigherEd Headers

This is the ninth call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

In comparison with previous calls for testing, this one is even more community driven with the suggestion to do a Higher Education themed call for testing coming from @blake. If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the 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/. channel or via DM to me (@annezazu). 

Feature Overview

To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized 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. to welcome students, parents, and teachers alike to our hypothetical university. For inspiration, check out the following sample of university sites or just look up some near you! Since this test is focused on building out the header portion, focus in on that aspect and take note of what is done on each site: 

https://www.kyoto-u.ac.jp/en

https://www.ni.ac.rs/en/student-info

https://engineering.asu.edu/

As you can imagine, this test is going to enable us to go deep into the Navigation 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.. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s 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., both in terms of structure and design. To help prepare it for inclusion in a future WordPress release, this test is meant to explore the edges of what this block can do. 

Similar to prior tests, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example below with the multiple layers of sub-menu items displayed:

Image of a pretend Gutenberg University header with two different menus, including one with multiple sub-menu layers open.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Known issues

While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most important items:

Beginner testing steps

This section is for those who want to follow specific steps to create a header and might not have a lot of time to take the test further. 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Create structure (template part, columns, etc)

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Upon opening your homepage, remove the Navigation Block found inside the Header Template Part. This is to help reset the header to add more to it later on. 
  3. Select the parent Columns Block and, using the Block Settings 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., change the columns from 2 to 3 columns. 
  4. Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.

Build out site branding 

  1. In the first column, add the Site Logo Block and upload/use a site logo. You can use this free logo from logodust.com if you’d like. 
  2. From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
  3. In the second column, add a Buttons block to add a warning about COVID by linking to the August COVID Update post. You can do this by searching for the post title. If you haven’t yet imported the necessary demo content, please do so now using this export file (open the link and select the “Download” option). 

Create a simple menu for high level items

  1. In the third column, add a Navigation Block and select the “Start Empty” option.
  2. From there, use the Page Link Block to add in the following pages from the imported content: Contact, Directions, Make a Donation. To do this, just start typing the title of each page. You will likely notice this spacing bug at this point that’s slated to be fixed in Gutenberg 11.3. 
  3. Rename menu item Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block. 
  4. To finalize the menu, add in a Search Block and, using the sidebar settings, customize it to your liking (picking background color, text colors, width, etc). 
  5. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. You can also customize the block styles at this point as you like. 

Create a more complex menu for specifics 

  1. Select the overall Columns Block that contains your three columns (this is where you might find the List View helpful). Using the More Settings menu option, select “Insert After” to add a block after. 
  2. Add another Columns Block and select the 30/70 option. 
  3. From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width.
  4. Add a Navigation Block to the larger 70% width column and select the “Start Empty” option.
  5. From there, use the Page Link Block to add in the following pages from the imported content: About, Admissions, Student Life, Research, and News. To do this, just start typing the title of each page. 
  6. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. 
  7. From there, add in sub-menu items to About, Admissions, Student Life, and Research. In case you need a hint, here’s a screenshot of the icon for adding sub menu items. 
    1. About should have the following sub-menu items: Distinguished Alumni,  Diversity and Inclusion, Faculty, History, Leadership.
    2. Admissions should have the following sub-menu items: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition. 
    3. Research should have the following sub-menu items: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research. 
    4. Student Life should have the following sub-menu items: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services. 
  8. At this point, add sub menu items under Admissions > Career: Business, Design, Technology. 
  9. Once the sub menu items are added, rearrange and rename various sub-menu items to your liking. You can rearrange using the Block Navigation option when selecting the entire Navigation Block as shown in this GIF
  10. If you want to add more pages that don’t exist yet, you can do so by typing a title that doesn’t currently exist on your site. From there, you’ll see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it HigherEd-themed! 
  11. From there, customize the overall Navigation block as you’d like (change alignment, color, font size, etc). Remember that for sub-menu items you can use the Overlay color settings to set the colors you want. 

Save your work & customize further

  1. Select “Save” to save your changes and view your site on the front end. Note any differences in what you see in the editor vs what you see on the front end. If you have any drafted pages, you’ll want to publish them in order to see them listed in the menu.
  2. Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu. 
  3. From there, continue to customize as you’d like by changing any alignment, color, font size, removing/renaming/rearranging items, and more. You can also add additional blocks to either Navigation Block including Spacer or Social Icons. 

Advanced testing steps

This section is for those who have the time to take the test further and who are comfortable venturing into the site editor without much guidance. 

The steps for this section are simple: find a university site’s header and try to recreate all or part of it. You’re welcome to continue to use TT1 Blocks or to use the block theme of your choosing (please note if you use a different theme). You can use the universities listed above or you can find your own. When leaving a comment, please share a screenshot of what you were attempting and a screenshot of what you were able to do. It’s very helpful to see what folks would like to be able to do so don’t hesitate to share different designs you see. 

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing while creating the header? Please be as specific as possible, especially if you followed the Advanced steps. 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • How did you find the Navigation block worked when viewed on smaller screen sizes? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • If you’d like, try running your test site through a tool like https://wave.webaim.org or https://www.accessify.com/ to see how it performs. 

Leave Feedback by September 1, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

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

FSE Program Testing Call #8: Thrive with Theme.json

Props to @daisyo and @jffng for the massive amount of help in writing and perfecting this call for testing. 

Important note: Compared to previous calls for testing for the FSE Outreach program, this is intentionally targeting a more developer-centric audience compared to site builders or end users in order to bring high impact feedback for theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., a new tool for extenders. You can read more about what to expect with upcoming efforts here

Feature Overview

At the highest level, theme.json is a configuration file used to enable or disable features and set default styles for both a website and blocks. Rather than dealing with a ton of theme support flags or alternative methods, theme.json provides a consolidated and canonical way to manage it all. These settings include options like:

  • What customization options should be made available or hidden from the user.
  • What are the default colors, font sizes, etc available to the user.
  • Defines the default layout of the editor (widths and available alignments).

This configuration file is a big part of what makes 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 so powerful as it allows for finer-grained control, and introduces the first step in “managing styles” for future WordPress releases. Here are a few of the top benefits of using this new mechanism: 

  • It allows themes to provide settings per block which wasn’t possible before since add_theme_support targets settings for the entire editor. 
  • Themes using theme.json will automatically get classes and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Custom Properties enqueued for the presets they declare instead of needing to handle this themselves. Plus, this means translations of preset names are also managed for them!
  • Theme.json will coordinate coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., theme, and user styles in a way that reduces the amount of CSS that needs to ship as well as help resolve specificity problems. 

While block themes won’t work with WordPress 5.8 without 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 due to some theme blocks being left out of the release that weren’t quite ready to ship, it’s still an important feature coming to 5.8 that needs testing and exploration. If you’ve been curious about the world of block themes or have started building your own, this call for testing is for you and should help you to continue to explore what’s possible with theme.json while giving you a chance to share what else you’d like to see.

You can read more about this feature in the documentation here

Beginner Testing Steps

This section is for those wanting to get a sense of what theme.json can control and what the output will look like. 

  1. Head to https://gutenberg-theme.xyz/. This is a tool that can help generate the settings section of the theme.json file. 
  2. From there, try toggling on and off various theme supports. This will help you explore just a few settings that are possible to control with theme.json. For example, you can toggle on and off Custom Colors or Custom Link controls. Notice that the output in the browser changes based on your selection.
  3. Use the + button next to Palette, Gradients, or Font Sizes to explore adding customizations. Keep in mind that you can edit both the slug and specific variables, like color name or font size. 
  4. Add a few customizations and review the output! If you want to go a step further and use what you’ve created, check out the intermediate steps. 

Intermediate Testing Steps

This section is for those wanting to dig deeper into theme.json by writing their own file and exploring the various settings it can control. 

Note: this mainly focuses on just theme supports and presets for blocks in the settings section of theme.json rather than Global Styles. 

Set up your testing environment

  1. Create a Fresh WordPress Install.
  2. Install and Activate Gutenberg Plugin while using the latest version (10.9.0 as of writing this).
  3. Download and Install TT1 Blocks from the Theme Directory
  4. Navigate to the TT1 Blocks Theme directory and open the theme.json file in a text editor or IDE.
  5. Replace the theme.json file with this gist before starting the next steps. It’s expected that this will really simplify what the theme looks like so don’t panic if you see a lot of options removed. This is intentional to simplify the settings you’re changing.

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Layout

  1. Create a new post.
  2. Add a cover block with a solid colored background and several lines of content in an inner paragraph block to the post.
  3. Add another cover block with a solid colored background and several lines of content in an inner paragraph block. Set this block to “Wide Width”.
  4. Add a third cover block with a solid colored background and several lines of content to the post and set the block to “Full Width”.
  5. Publish Post.
  6. Load the post on the front end and note the width of the cover blocks.
  7. Change the contentSize value to a different pixel value in the layout section of theme.json.
  8. Change wideSize value to a different pixel value in the Layout section of theme.json.
  9. Load the edit view of the previously created post and confirm that new widths are reflected in the editor
  10. Load the post on the front end and confirm that the new widths are reflected on the front end of the site
  11. Extra Credit: Try setting the width values to something other than “px” such as “em”, “rem”, “vh”, “vw”, or “%”.

Typography

  1. Set the following typography settings to true in theme.json
    • customFontWeight (Heading Block)
    • customFontSize (Paragraph Block)
    • customLineHeight (Paragraph Block)
    • dropCap (Paragraph Block)
  2. Test the visibility of typography settings in a paragraph block (font size, line height and drop cap).
  3. Test the visibility of typography settings in a Heading block (font size, font weight, line height).
  4. Test that each of settings apply to the block on the front end.
  5. Change the typography settings to false in theme.json.
  6. Confirm that each of the custom typography settings in the paragraph block are no longer present in the block editor (Note the typography settings applied previously may still apply to existing blocks).
  7. Extra credit: Add one or more font families and font sizes to the typography section of the theme.json file. Test your custom font families and sizes using a Button block.

Border

  1. Set the following border settings to true in theme.json:
    • "customColor": true
    • "customRadius": true
    • "customStyle": true
    • "customWidth": true
  2. Create a group block with an inner paragraph block with several lines of text.
  3. Test visibility of border settings in a group block (Style, Width, Radius, Custom Color).
  4. Test that settings apply to the block on the front end.
  5. Change the above border settings to false in theme.json.
  6. Confirm that border settings in group block are no longer present in the block editor.

Color

  1. Set the following color settings for custom and customGradient to true in theme.json:
    • "custom": true
    • "customGradient": true
    • "link": true
  2. Add a cover block with a custom gradient background and several lines of content in an inner paragraph block to the post.
  3. Add a link to the paragraph block and set the link color to a custom color.
  4. Add another cover block with an image background and several lines of content in an inner paragraph block to the post. Set the cover background to use a duotone preset.
  5. Change the duotone colors for the background image to use custom colors for the duotone shadows and highlights settings.
  6. Extra Credit: Add one or more additional colors to the palette and duotone or gradient presets. For more information about CSS gradients check these resources from CSS Tricks and CSS Gradient. Keep in mind that for duotone presets, you’ll need to use RGB, Hex or specifically named colors when adding custom colors.

(Very) Advanced Testing Steps

This section is for those looking to create a more robust block theme using theme.json and who are experienced theme developers. This isn’t for everyone! 

If you feel more comfortable with block themes and have ample time to dig into theme.json, try replicating a classic theme. Here are two options that should be fun to dig into but keep in mind any default theme should work well:

As you try to do this, write down what gaps remain, what proves to be the most difficult to do, and what feels surprisingly easy! Share in the comments below so we can learn from your experience. This is intentionally extremely open ended and advanced so don’t worry if you don’t feel up for the challenge. If you want to follow along while someone else explores doing this, check out @mkaz‘s exploration video on learning to create a block theme.

What to notice:

These questions are specifically for the Intermediate and Advanced sections: 

  • Do the colors added to the theme.json file appear with the assigned names visible on hover in the color palette for various blocks?
  • Do the font sizes added to the theme.json file appear with the assigned names and sizes in the font size dropdowns in blocks?
  • Do the colors and font sizes appear correctly when used with blocks in the editor?
  • Do the colors and font sizes appear correctly when used with blocks on the front end?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 

Leave Feedback by July 14th

Please leave feedback (questions, comments, concerns) in the comments of this post and be sure to note which section you followed. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg but, for this test, it’s unlikely you’ll need to. However, if you do leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/, please comment below with the link. 

Join a hallway hangout for theme.json testing on July 7th

To help those who might want to explore this test and theme.json in a group, @daisyolsen will be hosting a hallway hangout specifically for this exercise. If you have never attended a hallway hangout, you can read more about them here. Ultimately, they are meant to be casual and collaborative sessions to bring like minds together. 

Hope to see you there. 

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

FSE Program Testing Call #5: Query Quest

This post is the fifth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Feature Overview

Not many blocks get an entire milestone dedicated to them but the Query Block did! As the name implies, this is a pretty powerful 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. allowing you to display posts/pages on your site and customize them as you see fit. For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts. In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do. 

If you find yourself interested in the future of this block, check out this recent GitHub issue asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and get excited about Gutenberg 10.5 which will offer more patterns to choose from.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use 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
  • Use the latest version of WordPress (downloadable here).
  • Use the latest version of the TT1 Blocks Theme
  • Use the latest version of 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/ (10.4 as of writing this).

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Testing FlowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
 

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a 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. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Create eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test via the WordPress importer under Tools >  Import.
  4. Go to the website’s admin.
  5. Install and activate the 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.4.
  6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. From there, make sure you are in the Index template (this should be the default upon opening).

General Testing Instructions:

  1. Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! Here’s a GIF that shows how to do this. 
  2. From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing.
  3. In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”. 
  4. Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options.
  5. Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org”. 
  6. From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”.
  7. After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. 
  8. Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there!
  9. View your site and see if what you created matches the Site Editor view. 

If you’re looking for more ways to customize the experience, try changing the width of the columns, adding in additional relevant blocks, changing colors, and more. 

Customization Instructions/Ideas:

Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block:

Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like!

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing?
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by May 5th, 2021

While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

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