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