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:

• Allow importing your own patterns and favorite patterns from the pattern directory.
• Pattern Directory: Add an option to filter by author and author collections.
• Pattern directory: show theme source for individual patterns.
• Patterns: iterate on experience of registering patterns from pattern directory for themers.

“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

• Create a trac issue about a live preview link using playground that perhaps works with the starter content API to provide a set experience for folks to try out block themes.
• Leave recap comment on pattern management issue for Create Block Theme.

I’ll follow up on this early next week.

#fse-hallway-hangout