An Introduction to Building Block Themes Without Leaving the Editor

Transcript

1. An Introduction to Building Block Themes Without Leaving the Editor Sarah Norris
2. What is a block theme?
3. A block theme is a theme with templates entirely composed of blocks so that in addition to the post content of the different post types, the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc. Block Theme Handbook https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overvie w/#what-is-a-block-theme
4. Advantages of Block Themes ★ Great web performance ★ Very flexible ★ Great preview functionality ★ Allow for cross-discipline collaboration ★ Utilise the latest Core functionality ★ They’re atomic
5. WordPress 6.3 + Twenty Twenty-Three + Create Block Theme bit.ly/build-block-theme
6. Getting started
7. Clone active theme
8. Create blank theme
9. Create style variation
10. Remember to “Save Changes”
11. Theme building tools: 5 highlights
12. 1. Style Book ★ Great way to view global styles ★ Easily compare style variations ★ Good for testing many different blocks
13. 2. Pattern Management and Template Parts ★ Full premade layouts ★ Separate sections ★ Use community patterns from the Pattern Directory ★ Enable PHP code ★ Great for small reusable snippets
14. 3. Font Management in Create Block Theme
15. 3. Font Management in WordPress 6.4
16. 4. Image Asset Management in Create Block Theme
17. 5. Export Options in Create Block Theme
18. GitHub & WordPress.org: @mikachan 𝕏 / Twitter: @mikachan_ bit.ly/intro-to-block-themes
19. Resources • WordPress Playground (with Twenty Twenty-Three and Create Block Theme) • Block Theme Handbook on WordPress.org • Block Theme Tools & Resources on WordPress.org • Pattern Directory on WordPress.org • Learn WordPress: Develop Your First Low-Code Block Theme by Sarah Snow • Learn WordPress: Developer’s Guide to Block Themes by Jonathan Bossenger • Full site editing for theme developers by Carolina Nymark • Create Block Theme GitHub repo and .org directory page • Pootlepress’ guide to block themes • Text & Video chats - #themereview, Hallway Hangouts • Live coding sessions - Ryan Welcher, Jonathan Bossenger