Learning Path: Theme Development
Bodacious Block Themes: An in-depth Look at this New Era of Theming
We all knew the landscape of WordPress themes was shifting with the introduction of Gutenberg. What we didn’t know, was by how much.
Block themes are the catalyst by which the full block editing experience comes to fruition. With block templates, template parts (i.e. headers and footers), patterns, style variants, template editing, and more — there’s much to unpack in this new era of block themes.
So let’s dive in and take an in-depth look at what a block theme consists of, and how you can build and share them with others.
How the Block Editor Makes It Easier to Build Custom Websites
Extending WordPress to create an individualized website can be done through builders, custom themes, and child themes — it’s the beauty of WordPress. When WordPress changed to block-focused editing, it forced us to adjust how we thought about this platform we all call home.
But it also created a huge opportunity to extend WordPress in new ways, to make it easier to put just enough control on the content side. It gives us a chance to shift the way we think about creating solutions for clients and how we create processes around building websites.
We’ll focus on embracing blocks with custom sites so we can speak about the general functional and time-saving advantages, and we’ll touch on some ways various builders incorporate native blocks as well. Because when you’re not spending time dealing with each page’s content, you get to spend more time on other fun stuff.
Block Theme Adoption: A Gradual Approach
An entirely new way to think about theme development was introduced in WordPress 5.9 with the addition of Block Themes. Changing the way your existing and future themes are built, however, can be a daunting and time-prohibitive process.
Join Daisy as she shares some ways you can begin taking advantage of Block Theme features today, without a complete code overhaul. Tapping into exciting new features of the block editor can be added to almost any theme. By incorporating Global Styles via theme.json or templates and template parts made entirely of block markup you can see immediate benefits with gradual block theme adoption.
Convert a Classic Theme to a Block Theme
Throughout this workshop, we’ll discuss which website projects can benefit the most from the new full-site editing features, what limitations we are still facing, and a prediction of what the future of WordPress themes will most likely look like.
Ellen will use an old classic theme to demo how to convert it to a block theme. Together, we will set up the header and footer in a block theme, learn to work with Templates and Template Parts, set up page contents, and dive into how Styles work.
Build your own Block Based Theme
Full Site Editing for the WordPress Block Editor is coming to WordPress! Now is the time to get prepared to make block themes of your own. In this workshop, we’ll go over what you need to know to build a complete Block Theme like the TT1 Blocks Theme. Next, we’ll talk through the future of the theming based on the current implementation of the Gutenberg plugin. Finally, we’ll go hands-on to build a custom Block Theme from a blank starter theme.
Building Accessible Website Navigation
A website isn’t very useful if people can’t easily move from page to page. While navigation might seem simple and easy at first glance, there’s a lot of complexity and a lot of things that can (and do) go wrong.
In this workshop, we’ll discover how people with disabilities rely on proper HTML structure, ARIA attributes, smart Javascript, and CSS styles to interact with navigation menus. We’ll cover coding techniques to ensure your menus are accessible and usable by everyone, whether those menus are drop-downs, fly-outs, hamburger/off-canvas, or mobile. I’ll show you how to test your navigation to ensure it’s keyboard accessible, what design considerations come into play, and how to add handy tools and shortcuts for easily navigating a complex navigation structure without a mouse.
Blazing Fast Block Development
You are pretty good at developing blocks, but you need a better workflow. You need a way to create blocks faster. This talk will give you all the resources you need to make your process more efficient and save you a ton of time. Lee has vetted these tools and has his process down to a science. Come learn all of his ways.
Lee is OBSESSED with optimizing his block development workflow for speed and scalability. He’s built a BUNCH of custom block plugins over the years. In this talk, Lee shares the framework he created for quickly building custom block plugins.
What's Next?
After you've worked your way through the first sessions above, continue on with any of these in any order:
- Building your first custom block with PHP
- Faster & Better with Modular Design
- Your user is NOT a robot: Bringing design thinking to your development process
- Write better code by design: Five simple ways to improve your theme or plugin’s code with design thinking
- A Better Theme Process: Learning the Cascade
- Getting Sassy: Fun with CSS Pre-processors
- Understanding & Supporting Web Accessibility
- Accessibility Patterns from the Ground Up