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