The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
We kicked off the call with an introduction from @elblakeo31, a member of the FSE Outreach Program who has long been seeking to use the latest and greatest as soon and as much as possible. As an early adopter himself, part of his work is helping people adopt new technology too.
Clients are now reaching out to me about FSE features and want to use it. We’re starting to see a transition from people being very wary to really wanting to use the CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. features that WordPress has offered.
@elblakeo31
General Approach
They have had seven different sites moving to the Site Editor in production. They are purposefully not trying to create themes for these projects and are trying to use as much of the site editor as possible. Currently, they are using child themes for some of the projects but mostly just taking Twenty Twenty-Three and using that outright. Blake sees a huge advantage in using the Site Editor directly as a design tool rather than using figma before replicating in WordPress. There are some challenges here in that folks are used to Figma and the Site Editor has a learning curve, along with some limitations (like a more dynamic navigation experience). Alongside this, a lot of work is done to evaluate what plugins are needed on a site and to ensure whatever they might want to use has support within the Site Editor. Generally speaking, they try not to build that many custom blocks and instead rely on patterns with an emphasis on employing as much as possible from the curating the editor experience doc. This is especially true with larger organizations, like a big university, where they need to lock things down more.
What does a web agency look like in a site editor universe?
How can we provide services when clients can do so much on their own with the Site Editor? This naturally came up as a point of conversation with Blake sharing how he aims to train clients to use the site editor capabilities and how “a lot of time spent developing is now spent on teaching”.
The biggest challenge right now is teaching people a new tool. Coming into GutenbergGutenbergThe 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/, there’s already some “trepidation and anger” from folks at times. Whatever size website a client is working with them on, if they’ve used WordPress before, they are a bit feature fatigued. To help combat this and bring them into the future, they spend a lot of time bringing them into a culture of collaboration and experimentation which folks don’t normally want. As a result, they specifically choose clients who appreciate some level of experimentation that comes with adopting new tech.
Right now with the latest release, we’re at a point where I can bring projects into production and feel confident that they’ll stick.
@elblakeo31
When are you deciding to use a child themeChild themeA Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. vs TT3? What drives that decision?
Blake shared that he has talked to a lot of folks around best practices and aims to do as much as possible in the editor. He knows too that he’ll get more support from the community if he’s pushing the limits of Twenty Twenty Three than another theme. As he’s digging in, he’ll also document anywhere code is added to keep up to date with what might change in the future. Fonts is a great example of this and comes up a lot. In the future, fonts will be managed more directly in Core but, currently, they are using the Create BlockBlockBlock 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 pluginPluginA 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 handle.
What process do you follow for using the site editor directly as a design tool vs figma?
Since the early days of using a WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editor, Blake has dreamed of not using anything except an editor to mock things up and to cut out needing to use things like Adobe. It feels like a waste of time to have multiple sources of truth when it could all be in a single editor. In terms or process for this, they’ll follow something like the following:
Add content into WordPress using Twenty Twenty-Three with no style changes.
Add in some style elements with the site editor and explain various style pieces to a client directly, alongside options they have going forward depending on what they want to do.
Build anything custom, like custom elements or adding plugins to improve the accessibilityAccessibilityAccessibility (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) of sites.
In the 7-8 sites using site editor, they haven’t gotten to a point where a client says this won’t work for me. Because they have not done any mockups, they’ve ended up literally leading them through with the Site Editor. Metering client expectations is one of the biggest tools for the trade as a result: “There’s this new technology that will position you better in the future but there are limits at the same time.”
I can relate to everything Blake is speaking on. I’m only an agency of one, but I follow the exact same approach for all my builds, including using TT3 as a base, or the Frost them from Brian Gardner. I mockup in the site editor. Collaboration is via a P2P2P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. or a communication page I’ll make, as this gives the clients easy opportunities to work with blocks and get comfortable.
Micro in the chat of the zoom
What kinds of clients do you work with and how does your approach change depending?
In general, there are three kinds of clients:
Create something from a template: Someone comes with a full design mock up saying they want X. This is becoming more and more rare as their agency is known to create things from scratch. Often times take a design and use either a custom block or an HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. block if they want a pixel perfect match.
Small build out: Wants a website designed and built from scratch that isn’t a large organization. They’ll work with folks to get all the content into WordPress. Set up 1-3 hour calls to talk about content, look at different WP sites, and see what the client wants to do (drop it in a google doc or wants to get into the WP editor right away). Then have a meeting that’s more design focused to emphasize and create patterns, find sites they like, etc. That iteration process then just continues.
Big organization like a university. At this level, focus more on features and act as almost consultants working alongside an IT team that’s aware of WP. For larger orgs, it’s whatever they want. Recently, built 80% of the site then did a teaching piece and eventually will do a finishing piece. For other orgs, it’s more about giving lessons and guidance on how to use it to employ best practices. These can often take longer.
On the education piece, a lot of time is spent getting folks comfortable with the editor, including designers. Having folks get comfortable with site editor, including designers. Each block has different controls, etc. once you have some of that in place, can have folks go wild. Blake shared how he tries to get folks to think about being designers themselves of the block editor and thinking about blocks as the fundamental level of a design.
What clicked to make you feel confident in using the site editor in production?
Another attendees asked this and Blake shared how every time there’s a new release, he spends a ton of his own time testing things. Often times, he’ll spend a weekend seeing if he can get a project to work in the Site Editor and share it ahead of time for a client to see if it will then work for them. He’s finding increasingly that things are working and he can just give things to the client. With the latest release, he has always moved away from using the Gutenberg plugin as a stop gap (“It’s been liberating to move away from that”).
Other
We talked through some aspects of maintenance, the broader adoption of the Site Editor within the WordPress community, and looked to the future with a few GitHubGitHubGitHub 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/ issues. This include a more in depth discussion around template parts, patterns, and reusable blocks with a look at a recent discussion on ways to unify.
VIP’s design system bridge repo that contains a tool making it easy to sync figma design system values with theme.jsonJSONJSON, 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..
