{"id":775,"date":"2026-04-16T09:23:27","date_gmt":"2026-04-16T09:23:27","guid":{"rendered":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/2026\/04\/16\/gutenberg-times-building-a-block-theme-from-scratch-workshop-resources\/"},"modified":"2026-04-16T09:23:27","modified_gmt":"2026-04-16T09:23:27","slug":"gutenberg-times-building-a-block-theme-from-scratch-workshop-resources","status":"publish","type":"post","link":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/2026\/04\/16\/gutenberg-times-building-a-block-theme-from-scratch-workshop-resources\/","title":{"rendered":"Gutenberg Times: Building a block theme from scratch \u2013 Workshop resources"},"content":{"rendered":"<p class=\"wp-block-paragraph\">It was great fun to conduct a Workshop at WordCamp Asia contributor day. Roughly 100 students were in the class and it was a great interactive session. I also know that there were quite a few of you who didn\u2019t get to join us because there wasn\u2019t enough room. <\/p>\n<p class=\"has-light-background-background-color has-background has-small-font-size wp-block-paragraph\">Birgit Pauli-Haack workshop on the block editor and full-site editing was a highlight of the entire event. Her depth of knowledge and infectious enthusiasm for the future of WordPress left me inspired and ready to dive deeper. \u2013 <a href=\"https:\/\/www.linkedin.com\/in\/web-developer-kinjal-dwivedi?miniProfileUrn=urn%3Ali%3Afsd_profile%3AACoAACgywxYBuG3MU5Yxf0kyyfzjDhx6yfZufKU\">Kinjal Dwivedi<\/a> <\/p>\n<p class=\"wp-block-paragraph\">If you attended the\u00a0<strong>Block Theme Development<\/strong>\u00a0workshop at WordCamp Asia 2026 in Mumbai and want to revisit the exercises, or if you couldn\u2019t make it but want to work through it on your own, the complete\u00a0<a href=\"https:\/\/github.com\/bph\/workshop\">workshop bundle is available on GitHub<\/a>. Everything you need to follow along is included: <\/p>\n<ul class=\"wp-block-list\">\n<li>the reference theme, <\/li>\n<li>demo content with media, <\/li>\n<li>step-by-step instructions to start your theme, and <\/li>\n<li>a blueprint to set up a local site with WordPress Studio or with WordPress Playground. <\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">You can get started within minutes.<\/p>\n<p class=\"wp-block-paragraph\">If you have used the Site Editor to customize a theme but have not yet built one from scratch, this workshop is a great next step. The exercises stay entirely within the visual editor. By the end, you will have a working portfolio theme and a solid understanding of how template parts, patterns, global styles, and custom templates fit together. Using the <a href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\">Create Block theme plugin<\/a>, you can save all your changes in the new theme files, export it and use it on other websites. <\/p>\n<h3 class=\"wp-block-heading\">A quick primer before you start<\/h3>\n<p class=\"wp-block-paragraph\">Before jumping into the exercises, it is worth reviewing the\u00a0<a href=\"https:\/\/docs.google.com\/presentation\/d\/1PhgUSe6gyjPxXFq315yCH-zavA2rZHQD34nVmnGgC1I\/edit?slide=id.p1#slide=id.p1\">workshop slide deck<\/a>. If you are coming from classic WordPress themes, the mental model is different. A block theme replaces PHP template files with HTML templates built from block markup, and it replaces scattered CSS with a single\u00a0<code>theme.json<\/code>\u00a0file that defines your colors, typography, spacing, and layout in one place. Templates and template parts live in their own folders, and every piece of them is made of blocks.<\/p>\n<p class=\"wp-block-paragraph\">The Site Editor is where it all comes together. It gives you a visual canvas for designing templates, setting global styles, and previewing changes in real time. Developers ship defaults through\u00a0<code>theme.json<\/code>; site owners customize through the Site Editor. When a user makes a change in the editor, it takes precedence over the theme default. Understand that layering is key before you dive into the exercises.<\/p>\n<h3 class=\"wp-block-heading\">What the workshop covers<\/h3>\n<p class=\"wp-block-paragraph\">The workshop walks you through building\u00a0<em>Concrete &amp; Light<\/em>, a block theme for a fictional heritage architecture studio based in Mumbai. Rather than starting from theory, you start from a working site with real content \u2014 five pages and three project posts \u2014 and progressively shape the design through the Site Editor.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" alt=\"Reference theme for the Building block theme from scratch Concrete &amp; Light. \" class=\"wp-image-45230\" height=\"489\" src=\"https:\/\/i0.wp.com\/gutenbergtimes.com\/wp-content\/uploads\/2026\/04\/screenshot.png?resize=652%2C489&amp;ssl=1\" width=\"652\" \/><\/figure>\n<p class=\"wp-block-paragraph\">Three guided exercises take you from basics to custom templates:<\/p>\n<p class=\"wp-block-paragraph\"><strong>Exercise 1: Styling the Header.<\/strong>\u00a0You install fonts (Jost and Playfair Display), set up a semantic color palette, configure typography presets, and transform the default header into a dark, minimal navigation bar with uppercase text and an accent border. This is where you get comfortable with global styles and template parts.<\/p>\n<p class=\"wp-block-paragraph\"><strong>Exercise 2: Footer and Global Elements.<\/strong>\u00a0You build a four-column footer with studio branding, page links, social channels, and addresses. Then you style headings, links, and buttons across the entire site to ensure design consistency. By the end, you understand how global element styles cascade through your theme.<\/p>\n<p class=\"wp-block-paragraph\"><strong>Exercise 3: Page Templates.<\/strong>\u00a0This is where it gets interesting. You create a Landing Page template with a full-viewport hero image, a 40% overlay, and a dynamically pulled page title \u2014 no hardcoded text. Then you build a Category Projects template with a three-column query loop grid, giving you hands-on experience with archive templates and dynamic content.<\/p>\n<p class=\"wp-block-paragraph\">You use the visual tools WordPress provides and see the results immediately. The\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\">Create Block Theme<\/a>\u00a0plugin is pre-installed so you can export your modifications as a proper theme at any point.<\/p>\n<h3 class=\"wp-block-heading\">Getting started on your own<\/h3>\n<p class=\"wp-block-paragraph\">You have three options for setting up your site:  <\/p>\n<ul class=\"wp-block-list\">\n<li>A visual app,\u00a0<a href=\"https:\/\/developer.wordpress.com\/studio\/\">WordPress Studio<\/a>\u00a0can import the included blueprint and have your site ready in a couple of minutes. <\/li>\n<li>Using the command line, the Studio CLI will do the same thing with a single command. <\/li>\n<li>Or skip the install entirely,\u00a0<a href=\"https:\/\/playground.wordpress.net\/?blueprint-url=https:\/\/raw.githubusercontent.com\/bph\/workshop\/main\/blueprint-studioapp.json\">open the workshop site directly in WordPress Playground<\/a>\u00a0\u2014 it loads right in your browser with all the content and plugins already in place. <\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/gutenbergtimes.com\/wordcamp-asia-2026-workshop\/\">Instructions<\/a> for installing WordPress Studio or using the Studio CLI for the workshop are also available. <\/p>\n<p class=\"wp-block-paragraph\">Whichever route you choose, the blueprint automatically installs WordPress, activates the required plugins, imports all demo content and media, and configures the site settings.<\/p>\n<p class=\"wp-block-paragraph\">Once your site is running, open the\u00a0<a href=\"https:\/\/github.com\/bph\/workshop\/tree\/main\/instructions\">exercise instructions on GitHub<\/a>\u00a0and work through them at your own pace. The instructions include color references, specific block settings, and enough context that you should not get stuck even without a workshop facilitator in the room.<\/p>\n<p class=\"wp-block-paragraph\">The\u00a0<a href=\"https:\/\/github.com\/bph\/workshop\">full workshop bundle<\/a>\u00a0is on GitHub. Fork it, clone it, or just download the ZIP. And if you build something with it, we would love to hear about it.<\/p>\n<p class=\"wp-block-paragraph\">If you have trouble or run into problems, email pauli@gutenbergtimes.com or ping me on WP Slack or create an issue or discussion on GitHub <\/p>\n<h2 class=\"wp-block-heading\">Resources to learn more<\/h2>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/docs.google.com\/presentation\/d\/1PhgUSe6gyjPxXFq315yCH-zavA2rZHQD34nVmnGgC1I\/edit?slide=id.p1#slide=id.p1\">Slidedeck: Building a block theme from scratch<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/themes\/\">Theme Handbook<\/a> on WordPress.org <\/li>\n<li><a href=\"https:\/\/gutenbergtimes.com\/wordcamp-asia-2026-workshop\/\">Setup Instructions<\/a>\u00a0<\/li>\n<li><a href=\"https:\/\/href.li\/?https:\/\/github.com\/bph\/workshop\">GitHub Repo<\/a>\u00a0with instructions for the workshop<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/news\/page\/2\/?s=theme.json&amp;post_type=post\">List of tutorials on theme.json <\/a>on the WordPress developer blog<\/li>\n<li><a href=\"https:\/\/fullsiteediting.com\/courses\/full-site-editing-for-theme-developers\/\">Full site editing for theme developers <\/a>by Carolina Nymark<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">\n<\/p>","protected":false},"excerpt":{"rendered":"<p>It was great fun to conduct a Workshop at WordCamp Asia contributor day. Roughly 100 students were in the class and it was a great interactive session. I also know that there were quite a few of you who didn\u2019t get to join us because there wasn\u2019t enough room. Birgit Pauli-Haack workshop on the block [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts\/775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=775"}],"version-history":[{"count":0,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts\/775\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/media\/776"}],"wp:attachment":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}