Hallway Hangout: Pattern Party Testing Walkthrough (6 October)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. It was intended to be a casual walkthrough of the current call for testing with @sparklingrobots taking the lead sharing their screen. Big thank you for being brave enough to meander around the call for testing publicly.

As a reminder, there is still 1 week left to participate so please join in if you can.

Attendance:

 Thank you to everyone who attended 🙂 @karmatosed @mkaz @shaunandrews @paaljoachim @annezazu @sparklingrobots @richtabor

Video Recording:

Feedback Overview

Throughout the session, some specific issues were noted as problem areas to follow up on, including some previous reported and some new:

  • It’s not clear when you are adding a theme 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. outside 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. vs within. In this case, it was confusing when the Post Comment Count block wasn’t properly displaying the number of comments and it wasn’t clear the issue was that it needed to be within the loop. There’s an open issue to discuss this general phenomenon.
  • She had a desire to change the post excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. length, which has an open enhancement issue.
  • There was an issue with the post title overflowing outside the bounds of a Query Loop block pattern. Need to replicate and open an issue!
  • There was a strange Inserter issue where you couldn’t find any theme blocks based on the current block you were selecting. Need to replicate and open an issue!
  • The call for testing itself needed to have updated instructions as you need to install 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/ first before activating a block theme. This was updated live on the call.

Outside of specific points of feedback about the experience, there were also high level themes that became apparent as @sparklingrobots made her way:

  • They were confused about where various settings were expected to be, sometimes seeking out the block toolbar and other times the block 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 example, it was unclear at a glance how to change width of overall query and how to change the number of posts displayed.
  • The placeholders for various theme blocks were underwhelming and often not informative enough to know quite how to customize.
  • She was confused by how by selecting one Query Loop pattern, they instead ended up with two Query Loops! This is part of one of the default patterns included in the Query Loop block and could cause confusion long term when thinking about having more complex patterns.
  • There was a desire for more dimension controls for various blocks including the Columns Block and Post Comments block. This is under active iteration!

We ended the call talking about how the future of the Query Loop block powering more user friendly variations, an integrated block pattern library, an overhaul of the IA of the various design tools, & more will help ease this current experience. For now though, we’re in an in between state where loads can still be learned to improve the default tools themselves.

Next Steps

@annezazu will follow up next week after she returns (she’s out Thurs/Fri) to replicate and open issues.

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

Hallway Hangout: Discussion on adoption pathways for Full Site Editing (16 September)

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

Attendance: @paulbigai @karmatosed @mkaz @get_dave @annezazu @courane01 @shaunandrews @pdclark

Video Recording:

Topics Covered:

  • Started the call with an open question asking how folks are exploring adopting FSE features. This led to an initial discussion around 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. both in terms of what it unlocks and various pain points.
  • A few of us found it to be easier to compare their own theme.json files to TT1 Blocks’ theme.json rather than relying on documentation to figure out what might be going wrong.
  • Ideas were shared namely around improved documentation for theme.json combined with improved error messaging, especially since eventually the visual interface will only be used.
  • Some of the problems with theme.json feel similar to the usual functions.php experience and there was a desire for a “Something has gone wrong with theme.json, here’s what you should do” resource (even if just a personal post for now). For example, leaving out version number can make the experience very unpredictable.
  • Tammie noted it often feels like “playing rather than exploring” with theme.json because of how much one can do.
  • Marcus encouraged folks to use a syntax editor (ex: vscode) since it will alert you to json errors. In general though, folks wished it was more forgiving to hand write until we’re able to build directly in the editor.
  • We talked through being able to disable items and how there are different ways to disable different items. @poena has a great post showing ways to disable for colors.
  • Marcus likes the idea of splitting files up and allowing people to do whatever they want. “Here’s typography, here’s how I want headers to be, etc” and then share those individually amongst different themes.
  • We then switched topics to hear from Courtney what she sees on the training side. She noted that there’s likely a huge market that is not going to instantly switch and need to think about how do training for moving away from older methods.  
  • We talked about having more “small chunk onramps”, particularly around having courses for 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. widgets and block navigation and how to adopt with more details.
  • Dave noted that both editing with block based 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. and rendering with blocks is new when being able to edit the whole site. It’ll be an excellent thing if we can get folks comfortable/familiar with that concept without jumping into the site editor first via the widgets and navigation work.
  • We talked through how neat it would be from a training perspective to have various levels of adoption outlined so folks don’t have to dig in to know what might be best for them to try first. This could like similar to this approach in this 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/ Times post on Customizing WordPress Block Editor for Client Projects. Anne is going to explore this.
  • We then discussed what the Hello Dolly + underscores theme equivalent is in today’s world and whether less needs to be known now with block themes.
  • The topic of how to lock things down while still adopting features came up. There’s a balance to have between adding items for theme developers (keeping options open to foster creativity) and then eventually what the user experiences (likely need more guardrails/locked down options).
  • A few of us chatted about eventually wanting to have more conditionally logic with templates, similar to what can be done with 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. now. For example, Anne shared that it would be lovely to have categories of posts with different templates so she could link to the WordPress categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. with a different menu for speaking at events so personal posts are stripped out.
  • In the future, Anne talked about how neat it’ll be to run explorations or calls for testing around setting a timer for 10-15 minutes and seeing how far one can get in changing your site. This is where theme.json has such a greater safety net than the previous dangers of trying to edit the code of your site.
  • We ended chatting about how all of this is putting art direction in the hands of people so they can say proudly, “I didn’t do it but I did it with WordPress.” We all love patterns and agree that they are, in many ways, democratizing design.

Ideas for improvement

  • Better error messaging with theme.json.
  • Improved theme.json documentation, including how to disable features, lock items down, and using a syntax editor.
  • Resources for how to adopt features across varying levels of difficulty.
  • Learn WP courses for adopting block widgets and navigation (more “small chunk onramps”).

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (10 September)

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: @poena @richtabor @karmatosed @paulbigai

Video Recording:

Topics Covered:

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: on adoption pathways for full site editing

Date2021-09-16 16:00 UTC

Format: Zoom (recorded). A link will be shared in the #fse-outreach-experiment channel before the meeting time. Please join that channel if you’d like to participate!

Length: 45 – 60mins. This will not run longer than an hour.

Topic: This session will focus on adoption pathways with full site editing.

Facilitator(s): @mkaz @get_dave @annezazu

Goal: To have a broader discussion about adoption pathways, what’s working, what successes folks have had, what blockers people are running into, and what might help more folks participate. Beyond just the benefits of learning from each other, this information will ideally be used to help influence future resources and to give insights to the teams working on these items.

Intended Audience: Anyone who has adopted or is interested in adopting site editing related features (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 editor, theme blocks, navigation editor, etc).

Agenda

This conversation is meant to casual, collaborative, and open ended rather than prescriptive about how one should approach adoption. With that in mind, we’ll start the session asking folks who are comfortable doing so to share what they’ve tried and how it’s gone. Once everyone who wants to go has done so, we’ll talk about successes, blockers, and what resources folks have used (along with what resources folks would like to see). We’ll see where the conversation takes us from there!

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (30 July)

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: @bobbingwide @poena @jcasabona @richtabor @desrosj @paulbigai

Video Recording:

Topics Covered:

  • Happy birthday to @bobbingwide! Thanks for hanging with us for part of your special day.
  • Before recording, we talked a bit about various courses people are working on/have worked on related to FSE and the difficulty in keeping things up to date while so much is changing.
  • We started the call chatting about a TT1 blocks and global styles bug that Joe found. He’ll pass along the details. With the launch of 5.8, it’s been harder it seems to replicate problems and their sources.
  • We talked about various theme related topics including how to handle theme switches, different ways to set color options (particularly for patterns), a creative solution for having responsive font sizes (and later a PR exploring next steps to make this happen), and what else still requires custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
  • Rich shared that he just converted his site’s theme to 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. theme and we briefly went over his recent post on block templates. He also shared how he made older color slugs still work with new sequential ones while working with Ana on a recent block theme.
  • Once more, we talked through having a dedicated place for global settings/styles.
  • We went through the recent PRs on flex layout which led to a discussion around general confusion in setting layouts, including with template parts.
  • We checked out the site editor mosaic view designs and very recent PR to implement some of the functionality.
  • We discussed the difference between patterns, templates, template parts, and reusable blocks, including going over a discussion about having starter page templates/patterns.
  • Herb shared some struggles with a combination of the new 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. screen and configuring multiple block.jsons. Rich shared this plugin that has multiple as an example to review.
  • Carolina gave a final plug after the recording stopped for anyone who might have any ideas about how best to solve this reported dark mode problem.

If you’re a theme author who has worked 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. in some capacity, please fill out this theme survey.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (14 July)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. It ended up just being me and @bobbingwide so I decided to not record and instead have a free flowing chat with Herb that was less structured and more in line with our interests. We chatted for just over an hour!

We mainly chatted about 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., what’s coming to 5.8, a few individual blocks (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., Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., etc), responsive controls, and various explorations Herb has done including building a few 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. plugins. Of those, we went through the following links that I recommend spending time reviewing too:

Next Steps

I followed up on two issues that we found while chatting: The reset to default option being too close to X for global styles UI and a bug with an empty template name and trying to rename it.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on theme.json (7 July)

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 the conversation!

Attendance: 10 Attendees in total

You can watch the recording of the call here:

Notable Topics Covered:

  • Difficulty with knowing the initial values of some things that are defined outside of 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.
  • Challenges in making responsive designs work well across unlimited resolutions, both large and small.
  • Need for a well documented and complete schema of settings available as well as the default initial values.

The call for testing will remain open for feedback until July 14th. Please feel free to check the test here.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (20 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: @mkaz @annezazu @bobbingwide @bph

Video Recording:

Topics Covered:

  • We chit chatted before recording about our various usernames and why we picked what we did!
  • Anne briefly gave an overview of the current call for testing open until May 26th.
  • We briefly covered the UX of using the Post Content Block as Anne thought she was running into a bug but it’s more of a painful 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. than anything else.
  • We talked about the proposal to hide Post Blocks in the post editor for 5.8 since many of these theme blocks aren’t truly necessary there. Everyone agreed that this makes sense to have in place to prevent possible confusion with users.
  • We explored Appearance > Template Parts and Templates talking about whether this entry point will be available in 5.8 and confirming that Template Part Block isn’t planned to be unlocked in classic themes for 5.8.
  • We talked about a known bug with embeds, specifically YouTube not rendering in the Site Editor.
  • We discussed the “click through to edit” approach being explored for template parts, reusable blocks, query 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., and more.
  • We covered the navigation block, the two dash icon over three dash icon, and how JS is being rendered on the front end in order to make the hamburger menu keyboard accessible.
  • We closed out talking about the upcoming call for testing launching also on May 26th and focused on a more open ended exploration of Template Editing Mode. We chatted a bit about the pros and cons of having a test being very defined vs open ended in terms of getting the right balance to result in productive feedback for the project.

Next Steps

Anne is going to follow up on a few issues found and a discussion point to include as a comment in an issue:

  • Replicate and report a bug in the spacing of a Query Block pattern.
  • Replicate and report bug with Query Block pattern where the Title color does not update if you select the “make title a link” option.
  • Re-share idea an idea from @mkaz to this discussion around adding into the “Quick edit” options the ability to assign a template or template part to a new theme.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (29 April)

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! If you’re keen to join an effort like this in the future, please join the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.

Attendance: @mkaz @annezazu @sabrinazeidan

Video Recording:

Topics Covered:

  • We kicked off the call going through the latest summary post on building a restaurant header and some of the feedback items that came up there including talking about 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., list view, and more.
  • We talked in depth about the Navigation Block, including showing a demo of the mobile responsive menu that’s in progress. This will be part of the next call for testing so stay tuned!
  • We discussed the theory behind the click through to edit pattern with template part blocks and viewed the current design/development in progress.
  • We reviewed the Enhancing select mode overview issue, talked about what Select mode is for, and touched on a few other medium sized projects.
  • List View was brought up while talking about more tools to use within the Site Editor leading to a discussion around using the persistent List View (always keeping it up) and general discoverability of the tool itself.
  • The conversation about List View led nicely into discoverability of the toolbar items themselves and this recent exploration from a designer about moving more document attributes into the top bar in the post editor to help mimic some of what’s to come in the Site Editor.
  • Finally, we plugged a few posts/docs including: the Full Site Editing Overview document in the dev handbook, the refinements to the core editor toolbar, and the latest call for questions.

Next Steps:

@annezazu found a small bug with the navigation block where changing global styles typography changes the typography of the placeholder text and will report it!

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (8 April)

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! If you’re keen to join an effort like this in the future, please join the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.

Attendance: @poena @paaljoachim @mkaz @annezazu @oglekler and Karl joined.

Video Recording:

Topics Covered

  • We started off with a neat issue from Paal around adding the post/page title to the post editor‘s top bar to create a more consistent experience between the site editor and post editor for users.
  • We talked about the saving 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
    and how it’s a key part to build trust with users exploring a new feature for the first time. Currently, it’s a bit confusing and not yet robust enough to be fully intuitive to use.
  • We discussed how consistency across saving experiences will go a long way including having similar flows for saving individual 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. changes, a reusable block, a template, and more.
  • We talked through the designs shared around saving drafts of changes along with scheduling changes. This could be a neat but complex feature to manage due to the multi-entity aspect of FSE.
  • We talked about how it would be neat for there to be a “builder mode” where certain tool could be more visible when you’re in the process of active building vs maintaining. This is likely a role for a 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 play in the future.
  • While chatting about dismissing changes, Marcus brought up an interesting point around dismissing changes wondering aloud how often do people unselect changes? It would be neat to find comparison points.
  • Paal shared a neat design he worked on where if someone unchecks/unselects changes, the save button changes to discard changes. This could be a neat way to act as a confirmation message for the user and a neat contextual nudge.
  • We went through template editing and the recently merged PR allowing classic themes access to a blank template. Carolina shared that this is currently setup as being opt out for themers and that one can’t choose from an existing template yet (can only edit the current template or create a new one).
  • As we were going through template editing, we paused to talk about how valuable a welcome guide will be at this stage. There is one in progress for the site editor that should cover this as it mentions if a user accesses site editing via editing a post.
  • We chatted about the dynamic between editing one piece of your site vs the entire thing and how to add necessary friction to the experience. This included talking about the designs shared around clicking in to edit template parts.

Next Steps:

@annezazu reported a few bugs found and left a comment on an issue to pass along feedback from the group:

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing