Hallway Hangout: Let’s chat about the experience of building a block theme

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment and #accessibility channels as part of the FSE Outreach Program. Huge props to @alexstine and @joedolson for demoing.

Attendees:

There were enough folks who I don’t know so am going to leave out WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ usernames on this!

@annezazu @elmastudio @greenshady @arrayhq @luminuu @richtabor @jffng, Nahuai Badiola, Sonia Gaballa, Jeffrey Pearce, Henriette Stewart, Jason Crist, Kafleg, Sarah Norris, Jos Velasco, Digamber, Arkadiusz Salek, Patrick Posner, Gravnetic, Vikas Singhal, Jeremy Techtmann.

Video Recording:

Notes/Links:

Context setting

Mike reached out to @annezazu to share some feedback about his recent 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 building experience and they decided together to turn it into a hallway hangout in order to have it benefit the wider community and gather more insights.

Mike’s high level thoughts

Point 1: The elements that you need to build a block theme are solid, reliable, and they aren’t changing everyday. You can build a block theme for broad use a lot faster and in a better way. If you’ve had hesitations about that, get in there and try it again. Have an open mind. 

Point 2: Folks expect to intuitively know this stuff but you do have to treat it as a new tool to learn. You put a page builder on your site, you don’t expect to just know it. Take this new experience with a fresh perspective and learn it in the same way.

Point 3: Follow people who have been building themes and learn with them.  

Thoughts on current adoption blockers

Ellen chatted about her experience jumping into the experience early on and how they felt the different pain points. From her perspective, the biggest issue is that adoption from users is way behind the potential of what’s available partially due to the reputation 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/. How can we change this?

We no longer have a technology problem in WordPress. It’s capable of whatever you want it to do. Now, we need people building on it. 

Mike

We discussed how we can show off what’s being built and how TT4 is a way to do that, especially since full page patterns are coming to this new default theme and the theme in general matches a more real life use case outside of blogging.

Highlighting block themes

Block themes are the introduction to the new WordPress and highlighting them more feels blocked by various CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets. For example, folks talked about wanting an introduction video for themes and a better option for demo content. Seeing a preview of patterns is nice but there’s a desire for more.

@richtabor mentioned trying out a playground blueprint where you can pick patterns, templates, post content, image sources, and have folks dive into the theme to try it out. Perhaps it could reuse the starter content APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and extend what’s already there. 

This naturally led to a conversation bout the refresh of the Theme Showcase and the ways that can help highlight block themes more. This is especially important since block themes pave the way to use the site editor. 

“The themes page is really better these days. but we have to improve it even more.  The main thing is we need Block theme users, we need to show them the importance of using it. If we have users, we will get more beautiful themes.” –

Kafleg in the zoom chat.

We talked about wanting a built in way to demo using WordPress.org that’s so good that theme authors link to that instead of their own demo on their own site. @luminuu shared the idea of “A separate multisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network. for theme demos so you can fully customize that demo to the theme’s needs.”

Exporting theme

Mike touched on his experience of using the Create Block Theme plugin and how the overall workflows needs to be refined, including in exporting the theme. This would help make it a defacto tool for now until more functionality can be added into Core itself.

Pattern management

We discussed the potential and power of patterns alongside the overall pain points in managing/maintaining them. Mike talked about the early days before you could create them in the interface and how cumbersome the process was (had to create in the page, export the content, put it into a file, figure out the image, etc). Maintaining patterns is immense still: have to manually put in a file, translate the strings again, change the image tags, etc.

“If you were to tell this to a new user for distribution, they would say no way.”

Mike

We talked about incorporating this more into 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 folks, some of whom were on the call, and they haven’t had the bandwidth to add it in yet. However, it’s clear that this is a part of the 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. that isn’t covered well anywhere right now and definitely needs attention. We talked about the broader discussion kicked off here.

Interoperability

We talked about the long term aim to have things be interchangeable between patterns, templates, style variations, etc. Ellen shared a vision of how simple it would be to upload patterns to the directory and easily reference them in new themes she’s creating. During this conversation, we touched on a wide range of issues:

“My idea was always how can be get components like patterns and style variations out of one theme and maybe/possibly make them interchangeable and usable within multiple themes. So maintaining patterns of a theme from the patterns library would be amazing…I feel so much that the seeds are all there we just need it together.”

Ellen reflecting ont his topic.

There’s a draft PR for TT4 to include patterns via 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. which helps also push this forward. We ended talking a bit about nailing a color system for a theme without needing to repeat yourself with @richtabor talking about his “colorways” idea.

Theme documentation call out

@greenshady is doing a ton of work to overhaul the theme handbook and folks are welcome to share feedback along the way as we all continue to help push block theme and adoption forward.

Action items

I’ll follow up on this early next week.

#fse-hallway-hangout

Hallway Hangout: Let’s chat about improving accessibility in the Site Editor

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment and #accessibility channels as part of the FSE Outreach Program. Huge props to @alexstine and @joedolson for demoing.

Attendees:

@alexstine @joedolson @richtabor @annezazu @poena @joen @jerryj @sergey @afercia @queerdevperson

Video Recording:

Notes/Links:

Overall demos

To start, we did a brief round of intros for @alexstine and @joedolson before deciding to dive into the actually content to give more time to the topic. Overall, the following demos were done with a screen reader, each marked in the YouTube video with chapters:

  • Manage the navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site..
  • Edit 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 add Site Logo. 
  • Using the Command Palette. 

Overall discussions

Outside of that, two discussions broke out in between demos around the following:

  • Use of inert for disabled blocks with a broader discussion ongoing in GitHub.
  • The number of different modes, along with the usefulness of List View combined with focus mode, and the ways in which edit and navigation mode weren’t created at a time when nested blocks existed. A broader discussion is underway around providing a focused mode for any container block.

Balancing verbosity

Throughout the discussion, there were different mentions of too much verbosity, like upon entering Site View of the Site Editor, compared to moments where there’s a lack of information, like upon selecting 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.. On the flip side, with the Command Palette, what’s announced is incorrect information!

On the discussions of different modes

@alexstine doesn’t like the different modes and finds List View is easier to work with partially because you don’t know where to navigate around in the canvas otherwise with the keyboard. It’s very unpredictable what direction you will be traveling based on what you select. Right now, we’re in a situation where we have too many ways to move around: arrow keys in the canvas, have an edit mode, have a navigation mode, have list view. Can we consolidate? @afercia added context that edit and navigation mode were done when there were no inner blocks. It was a way to simplify navigation between blocks but the structure of the blocks was way simpler. This led to a broader discussion around showing List View for individual blocks, similar to what’s been done with the Navigation block, where you can only see the “tree” of that specific block with the inner blocks. @joen jumped in to talk about design explorations on exactly that where you can use a “focus mode” to zoom in on just that part of the page and have List View for just that part of the system.

Manage navigation menu demo

From the demo, here are a running list of notes in order:

  • Wasn’t able to manipulate the individual items in the Site view. Had to enter into Edit view to make changes.
  • It was hard to know what would trigger editing.
  • Upon getting into Edit View, there was tons of verbosity and ultimately focus loss after trying to edit.
  • @alexstine had to then navigate back to where he was which showed the huge cost that comes with focus loss moments.
  • @alexstine demoed how one can select the navigation block but it’s not clear how to act upon it without knowing how to get to the toolbar view. Keyboard users don’t know that pressing right arrow key would lead to what you need. 
  • Detaching page list is a confusing to understand and is required before you can edit the links– can we update the language? The language is hard to understand in general and also impacts synced patterns currently.
  • After detaching and editing, the navigation block still doesn’t give a lot of information.
    • There’s not a way to get more information about the current link you’re working on (what the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is, where it’s pointing to, etc). 
    • Information is more limited here and it’s assuming pre-existing knowledge about the menu. 
  • Open up the panel to save but it doesn’t say what’s in there when you first enter. It would be nice to have more info upon entering the Save section rather than going through each section to learn more.
  • Discard changes is confusing and relates to this larger known issue.
  • If you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode. 
  • Back button in Site View doesn’t have context around what you’re going back to. 

Changing Site Icon demo

  • This worked fairly smoothly once he found where the template parts are.
  • He went into Templates first before going to Patterns based on his experience working with templates.
  • While going through the Template section, @alexstine noted that it might be worth considering not having each template as individual tab stops. 
  • Having a summary of “My patterns: zero, theme patterns: 19” upfront when entering this section would be helpful. 
  • Empty state could be improved which relates to a current open issue on that topic.
  • Confusing to have template parts under patterns rather than templates. This is due to being in an in-between state with template parts. 
  • @alexstine struggled to open up the Header pattern and, upon opening it, lost focus same as before with the navigation block. 
  • Being able to rename group blocks would be a huge help but it’s unclear how that’s announced. This is currently a feature slated for 6.4 so let’s get some testing in place!
  • Ran into a problem where 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. is open once you select a block in the Post Editor but in the Site Editor, it doesn’t open, causing you to need to do a lot of navigating to get it open. 
  • Alex demoed the editable list view for the navigation block in the sidebar, where all inner blocks of navigation block are there. 
  • A larger discussion around showing heading level occurred, along with the lack of document overview in the Site Editor. Instead, we discussed showing the heading level icon along with the text in List View.
  • It would be good to get a solid pattern in place for this experience considering work is underway for adding text to paragraph and list blocks in List view.

Using the command palette:

  • Need to fix naming of the prompt which matches this previously opened issue.
  • Searching within the Command Palette doesn’t share how many results are shown.
  • When going through the results for the command palette, numbers are read off but only shows 5/5 and it’s hard to know to keep going since more than 5 were listed.
  • Doesn’t announce enough results found and there’s an incorrect number of announcements. 
  • Need more accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing at the start before these features are implemented. 
  • A third party library was used so it’s tricky to keep BC when addressing problems. 

Inert usage 

  • Broader discussion and demo of inert was done with the Comments block
  • When selected, it only announced “selected” because this form is specified as inert. 
  • Using inert makes something non interactive which is something we do desire (aka folks won’t try to submit a form) but if we’re using a technique that causes it to not exist for one group of people, it’s inactive and absent. There’s no parity between the experiences. For screen reader users, there’s no preview. 
  • This entire discussion is very similar to how to hide content, like using display:none. Anytime you say something is inert and if it were invisible, it’s fine and has no impact. 
  • In this case though, we’re using inert to reflect a preview state while that preview state is nonexistent for screen readers.

Follow up issues:

I (@annezazu) will follow up to open each of these but welcome folks to help me out here as anyone has time 🙂

  • Focus loss after entering edit mode for the navigation block and for header template part. 
  • Update detach language for navigation block and synced patterns.
  • Add more information when you open up the save panel without needing to go through each section. 
  • Open bug for when you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode. 
  • Back button in Site View needs to provide more context around what it’s going back to.
  • Heading in List View doesn’t indicate the heading level – show heading level in list view and have aria label show heading level. 
  • Consider not having each template be a tab stop when in the Site Editor > Template view.
  • Provide a summary upon entering the pattern section (ex: “My patterns: zero, theme patterns: 19”).
  • Open sidebar upon block selection in the Site Editor to prevent labor of navigating to get it open (match experience in Post Editor).
  • Bug with Command Palette announcements for results. 
#fse-hallway-hangout

Hallway Hangout: Let’s chat about the WordPress 6.4 & Evolving the FSE Outreach Program

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program.

Video Recording:

Notes/Links:

When I was the only one in attendance, I decided to still record an update on both WordPress 6.4 and the FSE Outreach Program. To do so, I went through the Evolving the FSE Outreach Program post and went through various top 6.4 related items. Anything starred is not yet merged:

From there, I went through the Roadmap to 6.4 post in more detail, explaining what isn’t going to make it and has been punted.

#fse-hallway-hangout, #fse-outreach-program

Hallway Hangout: Let’s chat about the Site Editor & 6.3

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@karmatosed @paaljoachim @beckej @scruffian @annezazu @piermario @james-roberts

Video Recording:

Notes:

We kicked off the hallway hangout going over various places to stay up to date on what’s happening:

  • Phase 2 overview issue: tracking the high level, larger projects for 6.3.
  • Phase 2 board: tracking the high level projects alongside medium projects that ladder into the larger work.
  • UX and Polish board: tracking smaller, developer ready items that help polish the experience. This is a great place for folks who want to dive in to help without needing to stay up to date on the larger projects.

From there, we discussed the larger topic of reintroducing content editing to the site editor, including where hints in the interface should be, the need to have strong user stories around using this functionality, and ensuring clarity between template and post editor. We very briefly touched on how there will be expanded Detail views of page, template, template part, styles without going into much detail. 

We then jumped into evolving the wp:pattern block and how that ties in with work to add UI to save patterns and having a library to store patterns alongside reusable blocks. This included watching a video demo about syncing patterns and going through details of sync, partial sync, unsync. Later on, we discussed being able to see a hierarchy of styles and knowing which make up a pattern. 

With Ben on the call, we went over the focuses for 6.3 for navigation, including: adding back the navigation section to the Site Editor, improved link control, and using slugs to reference menus. We talked about the problem with how you can repeatedly import classic menus, leading to lots of extra menus, and discussed the need to see where menus are used when they are listed out so you know which to delete. 

We ended on some interesting technical happenings that lead to some powerful 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./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. options:

Lots of work has momentum right now so stay tuned for much of it to be tested! 

#fse-hallway-hangout

Hallway Hangout: Let’s chat about Moving to the Site Editor

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@elblakeo31 @beckej @annezazu @paaljoachim @rbest Lauren Gray, @FahimMurshed, James Riordon, Micro.

Video Recording:

Notes:

Introduction

We kicked off the call with an introduction from @elblakeo31, a member of the FSE Outreach Program who has long been seeking to use the latest and greatest as soon and as much as possible. As an early adopter himself, part of his work is helping people adopt new technology too.

Clients are now reaching out to me about FSE features and want to use it. We’re starting to see a transition from people being very wary to really wanting to use the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. features that WordPress has offered.

@elblakeo31 

General Approach

They have had seven different sites moving to the Site Editor in production. They are purposefully not trying to create themes for these projects and are trying to use as much of the site editor as possible. Currently, they are using child themes for some of the projects but mostly just taking Twenty Twenty-Three and using that outright. Blake sees a huge advantage in using the Site Editor directly as a design tool rather than using figma before replicating in WordPress. There are some challenges here in that folks are used to Figma and the Site Editor has a learning curve, along with some limitations (like a more dynamic navigation experience). Alongside this, a lot of work is done to evaluate what plugins are needed on a site and to ensure whatever they might want to use has support within the Site Editor. Generally speaking, they try not to build that many custom blocks and instead rely on patterns with an emphasis on employing as much as possible from the curating the editor experience doc. This is especially true with larger organizations, like a big university, where they need to lock things down more. 

What does a web agency look like in a site editor universe?

How can we provide services when clients can do so much on their own with the Site Editor? This naturally came up as a point of conversation with Blake sharing how he aims to train clients to use the site editor capabilities and how “a lot of time spent developing is now spent on teaching”.   

The biggest challenge right now is teaching people a new tool. Coming into 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/, there’s already some “trepidation and anger” from folks at times. Whatever size website a client is working with them on, if they’ve used WordPress before, they are a bit feature fatigued. To help combat this and bring them into the future, they spend a lot of time bringing them into a culture of collaboration and experimentation which folks don’t normally want. As a result, they specifically choose clients who appreciate some level of experimentation that comes with adopting new tech.

Right now with the latest release, we’re at a point where I can bring projects into production and feel confident that they’ll stick.

@elblakeo31 

When are you deciding to use 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/. vs TT3? What drives that decision? 

Blake shared that he has talked to a lot of folks around best practices and aims to do as much as possible in the editor. He knows too that he’ll get more support from the community if he’s pushing the limits of Twenty Twenty Three than another theme. As he’s digging in, he’ll also document anywhere code is added to keep up to date with what might change in the future. Fonts is a great example of this and comes up a lot. In the future, fonts will be managed more directly in Core but, currently, they are using the Create 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 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 handle.

What process do you follow for using the site editor directly as a design tool vs figma? 

Since the early days of using a WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editor, Blake has dreamed of not using anything except an editor to mock things up and to cut out needing to use things like Adobe. It feels like a waste of time to have multiple sources of truth when it could all be in a single editor. In terms or process for this, they’ll follow something like the following:

  • Add content into WordPress using Twenty Twenty-Three with no style changes.
  • Add in some style elements with the site editor and explain various style pieces to a client directly, alongside options they have going forward depending on what they want to do.
  • Build anything custom, like custom elements or adding plugins to improve the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) of sites.

In the 7-8 sites using site editor, they haven’t gotten to a point where a client says this won’t work for me. Because they have not done any mockups, they’ve ended up literally leading them through with the Site Editor. Metering client expectations is one of the biggest tools for the trade as a result: “There’s this new technology that will position you better in the future but there are limits at the same time.”

I can relate to everything Blake is speaking on. I’m only an agency of one, but I follow the exact same approach for all  my builds, including using TT3 as a base, or the Frost them from Brian Gardner. I mockup in the site editor. Collaboration is via a P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. or a communication page I’ll make, as this gives the clients easy opportunities to work with blocks and get comfortable.

Micro in the chat of the zoom

What kinds of clients do you work with and how does your approach change depending?

In general, there are three kinds of clients:

  • Create something from a template: Someone comes with a full design mock up saying they want X. This is becoming more and more rare as their agency is known to create things from scratch. Often times take a design and use either a custom block or an HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. block if they want a pixel perfect match.
  • Small build out: Wants a website designed and built from scratch that isn’t a large organization. They’ll work with folks to get all the content into WordPress. Set up 1-3 hour calls to talk about content, look at different WP sites, and see what the client wants to do (drop it in a google doc or wants to get into the WP editor right away). Then have a meeting that’s more design focused to emphasize and create patterns, find sites they like, etc. That iteration process then just continues. 
  • Big organization like a university. At this level, focus more on features and act as almost consultants working alongside an IT team that’s aware of WP. For larger orgs, it’s whatever they want. Recently, built 80% of the site then did a teaching piece and eventually will do a finishing piece. For other orgs, it’s more about giving lessons and guidance on how to use it to employ best practices. These can often take longer. 

On the education piece, a lot of time is spent getting folks comfortable with the editor, including designers. Having folks get comfortable with site editor, including designers. Each block has different controls, etc. once you have some of that in place, can have folks go wild. Blake shared how he tries to get folks to think about being designers themselves of the block editor and thinking about blocks as the fundamental level of a design.

What clicked to make you feel confident in using the site editor in production?

Another attendees asked this and Blake shared how every time there’s a new release, he spends a ton of his own time testing things. Often times, he’ll spend a weekend seeing if he can get a project to work in the Site Editor and share it ahead of time for a client to see if it will then work for them. He’s finding increasingly that things are working and he can just give things to the client. With the latest release, he has always moved away from using the Gutenberg plugin as a stop gap (“It’s been liberating to move away from that”).

Other

We talked through some aspects of maintenance, the broader adoption of the Site Editor within the WordPress community, and looked to the future with a few GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues. This include a more in depth discussion around template parts, patterns, and reusable blocks with a look at a recent discussion on ways to unify.

Resources shared:

The following documentation was shared:

The following GitHub links were shared:

Next Steps:

Some quick follow up from yours truly:

  • Wrangle another hallway hangout on this topic as folks were keen to talk more.
  • Explore what resources might be helpful to add to Learn WP around designing within the Site Editor.
#fse-hallway-hangout, #fse-outreach-channel

Hallway Hangout: Let’s chat about All Things Layout

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@annezazu @isabel_brison @saxonafletcher @beckej @nomadskateboarding @bph @sjx65 @jordesign

Video Recording:

Notes:

Demo and discussion of various 6.2 items

@isabel_brison, a developer who has spent much of the last year diving deep into layout controls, took us through a look at 6.2 related layout changes including:

As part of this, she showed how you can now create layouts where the Site Icon can be next to the Site Title or a three cards can always have the same height with a Button 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. at the bottom. This led to a discussion both around how even a few additional controls has a big impact for increasing the design possibilities along with some pain points with the current system. For the latter, as it related to one of the demos, could we do something to make it easier for setting things like width automatically rather than individually for each column?

Thinking about layout from a designer perspective

@saxonafletcher, a designer who has thought deeply about these problems, shared some high level thoughts on how he aims to approach this work:

  • How can we make layout more accessible to more people regardless of technical knowledge?
  • How can we increase the speed at which you can design layouts? Ex: patterns.
  • How can we expand what’s possible? Ex: overlapping designs, responsive layouts.

Exploring the new Grid layout type

We then dug into some of what’s coming up next with the Grid layout type:

  • Responsive out of the box.
  • Set min column width and the columns will adapt to the space available. 
  • Can turn responsive off and then set columns (can cause super narrow columns). 

@beckej, who works in higher ed and teaches students, commented on how simple this is!

Overview of sticky positioning

At the very end, we talked about sticky positioning for 6.2 and how it’s distinct from yet related to layout. Essentially, layout is about inner blocks whereas positioning is about how that content relates to the rest of the page. This was very nicely demo-ed with a community theme (more about the community theme initiative here) that Saxon worked on that greatly leans on sticky positioning. We ended by talking about some follow up items, including how it can only be applied to root blocks. This is a great time to give feedback as this work evolves.

Ideas for future calls for testing

After digging into sticky positioning, the work around the negative margins PR came up and we briefly chatted about perhaps getting both the negative margins PR and grid layout type PR behind experimental flags for some early testing, alongside the navigation section that was removed for 6.2.

#fse-hallway-hangout, #fse-outreach-program

Hallway Hangout: Let’s chat about using Replay.io in the FSE Outreach Program

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@annezazu @paaljoachim @bassgang @dealbuquerque Jason from Replay.io and Dig (no further info).

Video Recording:

Notes:

For broader context, this is a hallway hangout building off of the initial effort to gather volunteers to help test Replay.io in the FSE Outreach Program as a way to consider possible ways of including the tool more broadly in the project. Replay has a big OSS commitment, including free support, which allows the FSE Outreach Program to explore using it ahead of potential broader use.

Quick introductions

We started with some quick introductions to get a sense of who was on the call, how we’re connected to the WordPress project, and what drew folks to help with testing replay.io:

  • Oliver: Sponsored by replay, been in WordPress community since 2017, used to work for Google where he worked on their first WordPress 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 (site kit).
  • Paul: from Germany, self employed web developer, passion for automation and previously led a QA team.
  • Jason: used to be the tech lead for firefox devtools, worked on etsy with a big focus on their PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. work, big fan of WordPress and PHP. 
  • Paal: from Norway, helps a ton with testing and design, used to be a teacher and enjoys being a regular user, looking for sponsorship.
  • Anne: sponsored by Automattic for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. & Test teams, runs the FSE Outreach Program.

What is replay.io?

Replay,io is a “time travel debugger”. It’s just like a video where you can pause, fast forward, rewind but the entire browser session is recorded. Replay is free for open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. communities so we’re trying to see if it’ll make a difference in how the community reports bugs and maintainers solve them. Oliver and Jason shared some additional details including a case study from Pantheon.

Examples

We briefly went through some examples with TechCrunch as an initial overview followed by an example from @paaljoachim.

Feedback on Replay.io

At a high level, there have been various notes around the Site Editor loading slowly in the Replay browser from folks using the tool. Since the Replay browser isn’t something to aim to get widespread compatibility with, the Replay team is going to dig in to see what might be causing the problem and how we can resolve that in order for a better experience in testing. This will be a huge help since the Site Editor is an obvious thing we want to be testing regularly. @franz00 kindly provided some examples of this (replay recording 1, replay recording 2) while trying to replicate a current issue.

From there, @paaljoachim gave some 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. feedback around using replay and setting up bookmarks. After the call, he recorded the following video and passed along the following notes:

  • Adding a preview button/icon. To view the video before deciding to save or discard.
  • Adding all the icons for Viewer and DevTools at the same time in the left 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.. Using a separator between these. Reasoning is that the left sidebar icons are easier to notice compared to clicking the Viewer and DevTools buttons top right.
  • Editing/cutting in the video timeline. 

Oliver and Jason shared a link to Replay’s discord and GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo for folks to continue to share feedback.

Test automation

We briefly covered test automation where you can write your playwright tests and debug with Replay. There’s an effort in the WordPress project to switch to Playwright so it would be neat to explore more once the Replay Playwright integration is in a better spot.

Next steps

  • Replay to look into slow performing replays.
  • Replay to reproduce the GitHub issue we discussed on the call.

#fse-hallway-hangout, #fse-outreach-program

Hallway Hangout: Themer Goodies Edition

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

On January 18th, 2023, a few community members from the FSE Outreach Program gathered to chat about various upcoming features specific to 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. Themers:

  • Applying local styles globally: push block design changes from post/template editor to global styles.
  • Inputs for Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.: Ability to add custom CSS from site editor Styles panel.
  • Exploring the Style Book: feature that shows all blocks (including third-party) in site editor, making it easier to test everything when designing.
  • Edit block style variations: Ability to edit (not yet create) existing block styles of a theme from Styles panel.

Attendees: @daisyo, @colorful-tones, @ndiego, @annezazu, @fabiankaegy, @greenshady, @elmastudio, Mark-Andrew, @luminuu

Recording

Notes

Anne started things off with a mention of the latest FSE Outreach Program call for testing “Find Your Style.” Feedback can be left until February 1st, 2023. 

A number of PRs and discussion issues were discussed with a particular focus on the benefits to theme developers and designers.

Add paste styles to the block settings: #45477

Ability to copy styles and apply them to another compatible block.

Could be a time saver for anyone working with complex design setup in the site editor. Stands to save a lot of clicking!

Push local block styles to global block styles #44361

Provides a path for styling blocks in the content or site editor and applying those styles globally to propagate across the site to other blocks. 

Features like this will help to lower the barrier for non-developers getting into theme design. Quality of Life improvements. 

There is no clear indication in the list view or for blocks where the global styles have been overridden.  – A specific comment mentions more exploration being considered.

It was mentioned that it would be good to have a way to turn off the option to apply block styles globally. – Issue opened (#47256)

A workflow that seems likely would be to apply styles globally and then export to the theme (via 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.)

Translations for New concepts

Translations for some new concepts and features do not always represent the purpose or main idea of the concept. There could be room for improvement in the way translation comments are added in block editor development.

As an example, the “Apply globally” string doesn’t have any translator comment. This is a good example of what a translator comment should look like.

 Global styles: add custom CSS panel to site editor #46141

A new control in the block settings panel allows site editor users to add globally applied custom CSS. For theme authors, this could potentially help with supporting users. This has long been a feature of 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.. Having this available brings things closer to feature parity.

The idea of per-block custom CSS came up. The benefits and downsides of per-block custom CSS were also discussed. There are some concerns about having customizations spread out but also interest in potentially making it easier to add CSS without leaving the block settings. This concept has some developer discussion and a bigger discussion as well.

Edit block style variations from global styles #46343

Add the ability to edit(but not create) registered block style variations. 

Variations can, in many cases, be a better option than a block style variation as it is possible to apply attributes and not simply a class.

Design Tools: Add a position block support (including sticky) decoupled from layout #46142

Set blocks to be static and sticky. This will be very helpful for theme authors as sticky headers, footers, and sidebars are frequently requested by clients/users. Follow-up issues are being tracked here.

Global Styles: Add Styles Book to Global Styles #45960

Option to preview all available blocks, including custom, with the active theme or available style variation applied. 

Template Parts: Add an option to import widgets from the sidebars #45509

A mechanism to migrate blocks in widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas to template parts. This is a bit of a misnomer since it imports only blocks into parts, not widgets. The widget group block doesn’t work at the moment. There are steps; it’s not a streamlined 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
at this point.

Full-Page Patterns

There is a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life for theme authors that would like to organize and present full-page patterns in a user-friendly way. Users find building a page with multiple patterns too hard or outside their comfort zone.
There are active, related explorations related to shuffling issues here and here.

Thanks to @annezazu for reviewing this post.

#fse-hallway-hangout

Hallway Hangout: Let’s chat about the Future of Custom CSS with block themes

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

Daisy Olsen, Justin Tadlock, Anne McCarthy, Michael Burridge, JuanMa Garrido, Damon Cook, Rich Tabor, Jessica Lyschik, Paal Joachim Romdahl, Birgit Pauli-Haack, Ganga Kafle.

Video Recording:

Topics:

General Updates

  • We went through the latest wrapping up Phase 2 updates
  • We briefly discussed the Site editor sneak peek summary.
  • We covered the call for volunteers for replay.io tooling testing.
  • We lightly went over the next call for testing coming up for the FSE Outreach Program focused on 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. 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. changes, browse mode, split tabs for blocks, etc.

Future of Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. discussion

  • We discussed the issue around
    Global Styles: Allow saving, importing, exporting, copying from another theme without switching to it
    which quickly brought up the topic of saving issues and needing a more robust auto-save system. This is particularly true to have just after perhaps importing and switching to different styles, depending on how saving works.
    • Concerns immediately around color naming and how this will actually work came up.
  • We went through some prior art around block theme switching in general from a prior FSE Program exploration.
  • We went over the Global Styles: an input for custom CSS and Global styles – per-block custom css issues as they both interconnect. Two questions came up here:
  • Once more the topic of revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. came up with the custom CSS options as well. Overall, folks felt this will greatly help with the adoption of block themes and helps bring parity to the experience, while also expressing concerns around 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. overload.
  • We then switched to talking about the keeping up with block theme changes in general where Rich Tabor brought up an interesting bug/use case around block themes where switching to a style variation keeps you “frozen in time” in terms of additional updates to the theme. You have to switch to the default style and switch back for updates to occur. A regular check to ensure updates are propagated/able to be opted into would be great.
  • We lightly touched on layout controls and recent work there to stay up to date with Justin Tadlock mentioning that he always sticks to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in order to manage layout to make maintenance easier.
  • Finally, we ended talking about the new split in the block settings sidebar with questions around how folks might adopt this and needing to show best practices when that does happen.

#fse-hallway-hangout

Hallway Hangout: On 6.1, 6.2, and block themes (Nov 2nd)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

Jeff Ong, Ellen Bauer, Nick Diego, and Edwin Cromley 

Video Recording:

Topics:

We covered a wide variety of topics: the outreach program’s future, updates for the 6.1 release, aspects of phase 2 to wrap up, the current experience of developing and maintaining 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, and more.

What will happen to the outreach program now that 6.1 is out?

The outreach program is continuing as is! When it comes time to wind it down, it will be heavily communicated and, ideally, continued in some form or another. As with “gradual adoption” of FSE features, expect a more gradual phasing out.

Various updates around 6.1

We chatted through some of the key feedback coming in with 6.1 released last week. This was shared publicly in the release leads channel prior to the call.

Managing updates for block themes

The discussion around 6.1 feedback led to a conversation about managing updates for block themes. In particular, there were some layout changes that needed to be managed. Keeping up with these changes for each release can lead to a feeling of “Why did we build these themes already?!” when there’s so much to keep on top of with each release. It still is taking a lot of work with each release.

@bph the idea was brought up to have a compressed set of links to follow based on audience perhaps for the Developer blog, inspired by Rich Tabor’s twitter roundup. We discussed how there were also 2x the number of dev notes for this release compared to 5.9 and 6.0.

In general, there seems to be a cycle of finding a solution to work around current limitations > the gap getting filled in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. > needing to update > cycle repeats. There are questions around when this process will get less intense.

Themeshaper

Questions around themeshaper came up with folks wanting to see more there and reminiscing on the kinds of posts that were shared previously as being quite illuminating. Speaking personally, I’m now trying to share more directly in Core when posting but it is an “outlet” that would be great to see revived.

Pixl theme discussion 

After Matt tweeted about the Pixl theme, this led to questions around: “Is this the direction we’re heading in? Is it meant to be super simple block theme? Am I overcomplicating it somehow?” We talked about how it was likely just a note about a cool, quirky theme and that ultimately block themes are for all cases (or will be in the future as functionality grows). The goal is to do everything, from very simple to very high level. Nick shared that he’s, “Taking a lot of block themes and throwing them away. I took what was available and took it to the next level, like custom classes or custom code, that block themes couldn’t do at that time. Now, I’m stripping it out and refreshing it with a much simpler architecture.” Ellen is doing the same and it’s a lot of work. From there, you have to consider propagating updates. While this is a big part of being an early adopter, it’s still worth noting and it becomes intimidating to step into eCommerce considering.

Stability for maintenance & stability for 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. of block themes

We talked about how there’s a split when talking about stability: stability of block themes in terms of less maintenance and stability of the UX for end users of block themes. We discussed how patterns are a big deal for UX in general and shared some examples of using starter patterns, with Nick sharing a great resource he wrote.

Latest Phase 2 Update

We went through the latest phase 2 overview issue update, talking at a high level about what’s to come and how work is progressing. This included a lot of discussion around the ability to save, import, and export variations. Feedback was given that style variations are often ignored for clients and that it would be more useful to be able to copy style variations/copying block styles. At the same time, being able to import/export your own branding via style variations would also be wildly helpful.

What about removing the beta label?

We ended by talking about the 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. label, how it’s likely slated for 6.2, how another update will need to be done to ensure the issue is up to date, and how the label itself might change away from just “editor”.

#fse-hallway-hangout