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

Hallway Hangout: Discussion on wrapping Phase 2 (26 Oct)

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: Rich Tabor, Damon Cook, Courtney Roberston, Paal Joachim Romdahl, Jeff Ong, Nick Diego, Vagelis, Sé Reed, Piermario Orecchioni. 

Video Recording:

Topics:

The main topic centered around the work underway to wrap phase 2 gathered in this overview issue. Expect regular updates to this issue and know that other work will continue but there’s a big emphasis to complete the tasks outlined there. 

As of last week, the following was in place:  

  • Work has been completed (1)
  • Dev work is underway (9)
  • We’re in the design stage still (3).
  • Dev is assigned but hasn’t started (3).
  • Means work is stuck but there’s follow up to try to get unstuck (1).
  • Means work is stuck, either due to a problem or a time lapse of 14+ days, and unclear how to unblock (11).

From there, we dug into the following individual issues to chat through at a high level what we were seeing. At a high level, it stuck out to folks how many different explorations there are, conflicting designs at times, etc. By doing this work concurrently, these differences can be resolved and the solutions refined together. 

Introduce “Browser” and surface main navigation UI

We talked about how this was a change in the entrance to the site editor just as much as it was for navigating between content. There was a desire to be able to click on the site title in the nav component to take you to the front end of the site. We discussed the important of 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 for this change and it’s top of mind to test for the FSE Outreach Program. 

Global styles: Offer a way to view a document containing all blocks and styles

  • Overall, this would be a great way to get a sense of how changes impact the entirety of the site and in creating a more unified approach. 
  • When looking at this issue, various folks commented on how it feels like there’s a number of different modes and it isn’t always clear how they relate and don’t relate. Part of this is due to designs being in progress at various stages and including some work but not others. 
  • We chatted about how the IA needs to improve around right/left sidebars. Is there a best practice for when to put things in left vs right 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. in the design library? Are we at a critical point in that convo right now? What about RTL when it comes to moving where things “live”? 

Make it possible to push local block styles to global block styles

  • This was noted as something that’s likely for more advanced folks but still very handy.
  • There are some tricky things to figure out since the styles pushed would have to be supported within GS.
  • It also requires a site to be built in a certain way to work since there’s some complexity around the specificity of global styles. 

Using the template editor for plugins

  • We talked about plugins using the template editor (example from Woo) and how the template editor doesn’t have access to global styles, leading to viewing Consider exposing the Styles UI for classic themes using theme.json.
  • We discussed what consolidation of the various editors might look like and how the current work seeks to make everything more unified, with the option to edit content in the site editor for example. 

Media library getting the “FSE treatment”

Feedback on the Quick Inserter prioritizing patterns in certain circumstances 

  • We discussed some pain points around when the quick inserter prioritizes patterns, especially the struggle to be able to add a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.!
  • Talked about having it be a user preference to start with blocks vs patterns. 
  • There are generally two different mindsets when working with blocks vs patterns. 
  • Could the slash inserter work with patterns? There’s already an open issue here

Other topics and questions

Folks shared that responsiveness is still a big topic along with navigation block. Multiple people echoed both. Damon shared in the chat: “The Navigation block has SO much complexity, but tackling the challenges will likely surface many great ideas that can be rolled out to other blocks that have complete 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./interaction”. Finally, we chatted at the end about the history of the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block naming (why not loop?), where folks can report issues when 6.1 is out in the wild, and what’s next for the FSE Outreach Program.

#fse-hallway-hangout

Hallway Hangout: Discussion on Block Themes (25 Aug)

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: Carolina Nymark, Daisy Olsen, Manuel Esposito, Rich Tabor, Herb Miller, Ellen Baeur, Ana Segota, Evan Mullins, Damon Cook, David Bowman, Jessica Lyschik, Ed Beck, Courtney Roberston, Amy L, Rita Best.

Video Recording:

Topics:

Apologies for the lack of timestamps – this conversation was vast and deep, making it hard to separate out into specific sections.

  • Pain points with 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, including naming conventions for color palettes/mapping colors, managing updates to the theme, oddities with switching between style variations/losing styles, and keeping up with all the various changes to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Pain points from users including “how can I change fonts”, using the navigation block, and confusion around the split between the post editor vs site editor (ie have to go into the site editor to manage styles).
  • Theme switching and the 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. around picking/choosing parts of Styles from a theme, which ties into this prior exploration.
  • Discussion around “Who are our users?” and how there’s a spectrum of use cases to cover from those who want a ready made theme to those who want to dig into the details. How do you build for each or all?
  • Discussion around having a pattern library/pool as a way to speed up development for themes with a note around how there are so many ways to build smarter for block themes and how much more accessible it is for designers compared to classic themes.
  • Discussion around using Figma and design tokens to create a system for updating/working with 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.. The following links were shared: Figma Tokens & Style Dictionary (What’s used to transform the output for theme.json). This is currently being used by the VIP team at Automattic.
  • Discussion around custom blocks, when to build them, and why they are often times preferable due to the ability to completely manage updates rather than chasing after changes to Core. This led to a conversation around why themes aren’t able to require custom blocks (it breaks a users site when they switch away).
  • A follow up idea was shared after the hangout from Damon Cook to consider: “It would be super helpful to have a single Figma file with all blocks, colors, and properties that could go in a theme.json. It would undoubtedly be high maintenance and would have to be under active updates alongside new 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/ features being merged into core, but it could also have a webpage equivalent to markup/output. A WordPress theme Style Guide: Figma file with the equivalent of block output on a site for users to copy/paste the code into their theme and see everything on a page… kinda deal.”

Overall, while there is both excitement and interest in what block themes unlock, it’s also clear that there are a build up of pain points to address, whether through clearer resources or changes to Gutenberg itself. These conversations are just one way to start surfacing these themes (get it) and to begin finding ways forward.

#fse-hallway-hangout

Hallway Hangout: Discussion on Full Site Editing visions and plans (30 June)

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:

@elmastudio @fabiankaegy @annezazu Lisa Synder @beckej @oglekler

Video Recording:

Topics

We mainly talked through the following different posts that help show both the complex problems at hand and potential thoughts around how to approach solutions:

Throughout the conversation, we had mini dives into various topics, including talking about comparing patterns, template parts, and reusable blocks. We also discussed how there are various layers in which to approach this work from the end user level to the deeper technical considerations. The hope throughout it all is to make these more complex and detailed explorations more understandable and engaging.

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (1 June)

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:

@ndiego @annezazu @elmastudio and a Marcy joined us for a time.

Video Recording:

Topics

Briefly touched on two recent blog posts to be aware of:

What’s missing and what’s stopping people from switching 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. themes

  • Responsiveness continues to come up with Ellen sharing how she built their own system to handle this for now, knowing that they can always switch over. She believes this is one of the main reasons people are holding back from switching to block themes.
  • We chatted briefly through intrinsic responsiveness ideas related to this and how that’ll ease much of these tensions in time.
  • Onboarding to the FSE experience was brought up, particularly around how confusing it is that 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 still exists since that seems to imply it’s not usable. There’s an open discussion around removing the beta label (in time) on this exact topic.
  • The question came up around “How do we get folks to use block themes if there’s a beta label?” and how difficult that can be.
  • @poena has a post on switching over to a block theme, Ellen is working on a post for a 10 step process, and there are clear areas that can be improved to ease this process from a technical point of view in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (see “Ease switching to a block theme/between block themes” in this post).
  • People are very confused about when to switch in general though, even if folks like Ellen are building things that are ready to go for production sites.

Communicating the value of FSE

  • Nick has done some hardcore testing with folks who are new to the site editor and when watching them go into the experience and they change the typography of paragraphs but then can’t with headings! Why? We need to take a look at consistency across the tools we’re providing people. People get very frustrated and confused when one block has controls and another doesn’t. 
  • Block themes truly is a better experience for getting a design into WordPress but the confusion added is a bit sad for the project that it gets a rough reputation.
  • Right now, it feels like more of a communication issue to the end user around what they should actually do and what they can do with consistent communication. Figma does this well.
  • This has come up in DevRel for WP Engine. When you’re talking about the basics of how to do XYZ, this should be on Learn and in docs. When you’re talking about the cool, cutting edge stuff, we need more of that. “Here’s how to learn the basics of creating a block theme but here’s how to take it to the next level.” 
  • We discussed how if we can standardize block settings across all core blocks but allow agencies to turn on/off easily that’ll be huge for the user experience.

Patterns and opening up tooling

  • We spent some time chatting about issues for unifying the pattern modals and patterns as sections work since having consistency in the interfaces for patterns and in the larger editor can really help folks take advantage of what’s possible.
  • In many ways, it feels like users can rely on patterns and/or learn by doing over time as they explore more tools. As a result, exposing those tools doesn’t feel as risky as a pattern can guide the experience and, if they do want to dive in more, they can have access to the tools outright.
  • We discussed how valuable locking is when it comes to patterns as a way to curate and guide the experience more.
  • We went back and forth on the question of “How do we get people excited about what’s possible rather than worrying about folks breaking things?”

Difficulty with terminology

Naming of bock themes and the theme directory

  • We talked about how there have been different names for block themes, like “full site editing theme” or “block-based theme”. This is causing confusion and also differs from what shows up in the Theme Directory.
  • We discussed how difficult it is to find block themes in the directory since the tag you have to use is “full site editing” , which both isn’t intuitive and hard to find.
  • This led to questions around having a separate menu item for themes or improving the filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
  • Ellen shared how it’s unattractive to put free themes in the directory – “who clicks on FSE to filter?” Discoverability is so low – it’s not featured enough. She shared that they don’t put any effort into free themes. 
  • We all felt that the entire theme directory was due for an overhaul but were curious about what some quick solutions could be for now to make it more attractive and interesting to add block themes there.
  • Perhaps there could be a block label in the section below:
Image of the theme directory filtering showing the number of themes, a popular, latest, and feature filter label.

Limitations of the pattern directory

  • In talking about the theme directory, we discussed how neat it would be to find patterns associated with different themes, partially as a way to entice people to download that specific block theme and improve the user experience.
  • Ellen brought up how it’s not possible to add patterns to the pattern directory that use third party blocks. This sometimes prevents submissions for block themes who have specific blocks for their theme. 
  • We discussed how the pattern directory is overwhelming for users yet also limited: you can’t use named variables for color palette + can’t use third party blocks + no curation. 
  • The crux of the problem is t hat block themers are creating blocks to fill gaps with core right now which then limits what can be added to the pattern directory.
  • We discussed how there perhaps could be a filter to allow for third party blocks vs Core blocks. For those who want to venture into needing third party blocks, they could then opt in by filtering to show those.
  • @shaunandrews recently shared a post about 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 dependencies so some of that thought/design could likely be re-used there.
  • Nick shared how for the new feature in 6.0 where block themes can feature specific patterns from the directory, it’s still not granular enough. It would be nice to be ale to disable all patterns but then bring in a few from the directory to feature. There’s an issue open for this topic already!
  • We ended the call talking about how these dynamics often fragment the community  – people building premium themes or patterns rather than using the Core pathways. This then moves everything away from Core distribution channels and harms the community/branding/experience of WP.
  • Ellen described it as feeling like you’re building against something.
  • We ended the call talking about how important it is to share feedback, engage in discussions, and help influence the direction of where things go so we can get to where we need to.

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (25 May)

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:

@ndiego @karmatosed @shaunandrews @beckej @fabiankaegy @dhansondesigns @codemanas Colin Duwe

Video Recording:

Topics

Style variations

  • Started off checking in on the new Global styles ongoing roadmap overview issue.
  • Ed discussed how he wishes there were options to pick and choose only certain parts of style variations rather than whole variation.
  • In order for that to be an option, there needs to be a combination of improvements/changes including more granularity with saving, the ability to partially switch styles, and exposing more style options. This is somewhat touched on here.
  • Overall, the resounding question was “How can we make it less overwhelming for users?” especially if they might want to take advantage of aspects of the style variations without switching entirely.
  • Right now, there are two extremes without much ease for middle ground options: all the options to customize in Styles vs wholesale full switching between styles (with variations). 
  • What could we offer for theme developers? If we can extend this for themers, they can manage more granular options for their users rather than CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

How can we curate the experience? 

  • Colin brought up a very important topic around curating the experience for folks, especially clients. He asked whether there was an issue that summarized the various approaches being taken (there is not and I followed up after around perhaps creating a Discussion issue).
  • This led to a conversation around various curation options through 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 locking, and 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. locking, including being able to control who can do block locking with filters.
  • The question of “How can you build a theme and lock things down/curate for clients?” at the same time came up.
  • For example, clients need to be able to edit 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. and 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. but don’t touch the logo on the left! You could lock various items down to ensure things aren’t deleted. 
  • In general, there was agreement that the power lies between theme.json and locking options. 
  • During this conversation, a few folks from the agency world mentioned how theme.json is only useful if it works in tooling for existing agencies and design systems. For example, people are struggling a bit switching to theme.json from CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.
  • While, in time, folks should be able to rely on the site editor to build a theme, it’s a big workflow change regardless and not everyone is going to build from there. This is where the power of import/export functionality will be key.
  • Trying to push towards doing these things in theme.json but the amount of uncertainty around even just simply adding a theme.json feels nerve wracking. 

Explore options for standardizing and extending theme.json design tokens for spacing

  • We touched on the desire to standardize spacing options and have the same t-shirt sizing/spacing scale that is being done with typography controls. This will help guide the user while also give them flexibility to choose from some presets.
  • By having standardization, it’ll be easier to have content portability/theme switching/etc.
  • This conversation led to a discussion around how inconsistent the dimension controls are across blocks. It’s hard to know why one option is available in X block but not Y. There’s a sense they should all be available.

Split block tools between “settings” and “appearance” 

  • The initial reaction from two folks was “Ahhh two sets of tabs!” when first seeing some of the designs.
  • When thinking about the various tools, this brought up the question of “What’s a primary or secondary tool for each block?”. It seems wise for an audit of some sort to occur.
  • These pain points relate to both blocks not all having the same controls + understanding what’s in block toolbar vs sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..
  • For folks in the agency world, there’s also an element of how different people need to look at each set of tooling (visual vs content focus) depending on what they are doing (are they a designer or a copy person?).
  • Keynote was shared as an example of an application that manages this experience quite well.
  • We went through the Query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block as an example of current pain points.

Rows/stacks/group: variations or new blocks?!

  • Right now, the transformation is in sidebar rather than transform menu. There’s an issue open to add the variations to the transform menu.
  • We briefly talked about when does it make sense to have as a standalone block with different controls being exposed rather than variations that comes with inherent limitations? 

New Blocks Adoption label

  • We ended by briefly touching on a new label for items that block adoption for these features.
  • If folks have any they want with that label, please do just let me know and I can add it in!

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