You’ve got style(guide)

One of the pages on this site is a style guide(book) that I tend to include on most of my projects. I find it useful for the client and sometimes designs to see clearly how the core styles for the site are set up. Sometimes I receive a style guide as part of the design handover and sometimes I don’t. Either way it can be useful for team members to see how I have translated the design into code (and let’s be clear we don’t export designs to html, they are translated into code, code we have to maintain). The stylebook uses a custom template, called template-stylebook.phpHere is the stylebook (not stye guide as this is the terminology WordPress uses) for this site https://dgw.ltd/stylebook/Given we are setting most of our design tokens in theme.json it makes sense we’ll want to use this as the source of truth (again debatable where this is, sometimes this might be a well maintained figma file with some form of tokenisation pipeline, but in many of my cases this is usually theme.json). So the main driver in our page template is this core WordPress class $settings = WP_Theme_JSON_Resolver::get_theme_data()->get_settings(); For example if we want to get the color palette we can traverse the json like so: if (isset($settings["typography"]["fontFamilies"]["theme"])) { $font_families = $settings["typography"]["fontFamilies"]["theme"]; } foreach ($color_palette as $color) { echo '

' . $color["name"] . "
" . $color["color"] . ""; } or the Fonts used on the site foreach ($font_families as $family) { //If the font has the fontFace property, use it if (isset($family["fontFace"])) { echo '<div class="dgwltd-text-l" style="font-family:' . $family["fontFace"]["0"]["fontFamily"] . ";font-weight:" . $family["fontFace"]["0"]["fontWeight"] . '">' . $family["name"] . ""; } else { echo '<div class="dgwltd-text-l" style="font-family:' . $family["fontFamily"] . ';">' . $family["name"] . ""; } } And so on. This means any changes we make to our core theme.json are reflected on our style guide keeping everything nice and up to date. I also have our old friend the loop on here: Meaning we can manually add core blocks to the page template after we have gone through the core styles, enabling further documentation of the components used on the site.