feat: allow selecting fonts in design-builder

thorbrink · thorbrink · commit 208b3ff24183 · 2026-04-15T12:15:47.000Z
diff --git a/library/Styleguide/Customize/Customize.php b/library/Styleguide/Customize/Customize.php
@@ -92,9 +92,11 @@ public function getCustomizeMarkup(): ?string
             return null;
         }
 
+        $overrideStateService = new \Municipio\Styleguide\Customize\OverrideState\OverrideState($this->wpService);
+
+        $overrideState = json_encode($overrideStateService->getOverrideState());
+        $tokenData = json_encode((new \Municipio\Styleguide\Customize\TokenData\TokenData($this->wpService, $overrideStateService))->getTokenData());
         $componentData = json_encode((new \Municipio\Styleguide\Customize\ComponentData\ComponentData($this->wpService))->getComponentData());
-        $tokenData = json_encode((new \Municipio\Styleguide\Customize\TokenData\TokenData($this->wpService))->getTokenData());
-        $overrideState = json_encode((new \Municipio\Styleguide\Customize\OverrideState\OverrideState($this->wpService))->getOverrideState());
 
         $componentData = htmlspecialchars($componentData, ENT_QUOTES, 'UTF-8');
         $tokenData = htmlspecialchars($tokenData, ENT_QUOTES, 'UTF-8');
diff --git a/library/Styleguide/Customize/OverrideState/OverrideState.php b/library/Styleguide/Customize/OverrideState/OverrideState.php
@@ -5,7 +5,7 @@
 use WpService\Contracts\ApplyFilters;
 use WpService\Contracts\GetThemeMod;
 
-class OverrideState
+class OverrideState implements OverrideStateInterface
 {
     public function __construct(
         private GetThemeMod&ApplyFilters $wpService,
diff --git a/library/Styleguide/Customize/OverrideState/OverrideStateInterface.php b/library/Styleguide/Customize/OverrideState/OverrideStateInterface.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Municipio\Styleguide\Customize\OverrideState;
+
+use WpService\Contracts\ApplyFilters;
+use WpService\Contracts\GetThemeMod;
+
+interface OverrideStateInterface
+{
+    /**
+     * Get the current override state from the database, and apply filters to it before returning. The override state is stored as a JSON string in the theme mods, and should be decoded into an array before being returned.
+     * The returned array should have the following structure:
+     * @return array{
+     *     token: array,
+     *     component: array,
+     * }
+     */
+    public function getOverrideState(): array;
+}
diff --git a/library/Styleguide/Customize/TokenData/Decorators/AddOverrideFontFamilies.php b/library/Styleguide/Customize/TokenData/Decorators/AddOverrideFontFamilies.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Municipio\Styleguide\Customize\TokenData\Decorators;
+
+use Modularity\HooksRegistrar\Hookable;
+use Municipio\Styleguide\Customize\OverrideState\OverrideStateInterface;
+use WpService\Contracts\AddFilter;
+
+/**
+ * Ensure that the font chosen and stored for OverrideState is added to the options list, otherwise it will be lost when the user opens the select again and saves without changing the value.
+ */
+class AddOverrideFontFamilies implements Hookable
+{
+    public function __construct(
+        private AddFilter $wpService,
+        private OverrideStateInterface $overrideState,
+    ) {}
+
+    public function addHooks(): void
+    {
+        $this->wpService->addFilter('Municipio/Styleguide/Customize/TokenData/FontFamilies', [$this, 'addOverrideFontFamilies']);
+    }
+
+    public function addOverrideFontFamilies(array $options): array
+    {
+        $state = $this->overrideState->getOverrideState();
+
+        foreach (['--font-family-base', '--font-family-heading'] as $variable) {
+            if (!empty($state['token'][$variable]) && is_string($state['token'][$variable])) {
+                $options[] = [
+                    'value' => $state['token'][$variable],
+                    'label' => $state['token'][$variable],
+                ];
+            }
+        }
+
+        return $options;
+    }
+}
diff --git a/library/Styleguide/Customize/TokenData/Decorators/AddOverrideFontFamiliesTest.php b/library/Styleguide/Customize/TokenData/Decorators/AddOverrideFontFamiliesTest.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Municipio\Styleguide\Customize\TokenData\Decorators;
+
+use Modularity\HooksRegistrar\Hookable;
+use Municipio\Styleguide\Customize\OverrideState\OverrideStateInterface;
+use PHPUnit\Framework\Attributes\TestDox;
+use PHPUnit\Framework\TestCase;
+use WpService\Contracts\AddFilter;
+
+class AddOverrideFontFamiliesTest extends TestCase
+{
+    #[TestDox('adds font family from override state to options')]
+    public function testAddOverrideFontFamilies(): void
+    {
+        $overrideStateService = self::createOverrideStateService([
+            'token' => [
+                '--font-family-base' => 'Custom Font Base',
+                '--font-family-heading' => 'Custom Font Heading',
+            ],
+        ]);
+
+        $decorator = new AddOverrideFontFamilies(self::createWpService(), $overrideStateService);
+
+        $options = [
+            ['value' => 'Default Font', 'label' => 'Default Font'],
+        ];
+
+        $result = $decorator->addOverrideFontFamilies($options);
+
+        static::assertCount(3, $result);
+        static::assertEquals('Default Font', $result[0]['value']);
+        static::assertEquals('Custom Font Base', $result[1]['value']);
+        static::assertEquals('Custom Font Heading', $result[2]['value']);
+    }
+
+    private static function createWpService(): AddFilter
+    {
+        return new class implements AddFilter {
+            public function addFilter(string $hookName, callable $callback, int $priority = 10, int $acceptedArgs = 1): true
+            {
+                return true;
+            }
+        };
+    }
+
+    private static function createOverrideStateService(array $overrideState): OverrideStateInterface
+    {
+        return new class($overrideState) implements OverrideStateInterface {
+            private array $overrideState;
+
+            public function __construct(array $overrideState)
+            {
+                $this->overrideState = $overrideState;
+            }
+
+            public function getOverrideState(): array
+            {
+                return $this->overrideState;
+            }
+        };
+    }
+}
diff --git a/library/Styleguide/Customize/TokenData/Decorators/DecoratorInterface.php b/library/Styleguide/Customize/TokenData/Decorators/DecoratorInterface.php
@@ -0,0 +1,8 @@
+<?php
+
+namespace Municipio\Styleguide\Customize\TokenData\Decorators;
+
+interface DecoratorInterface
+{
+    public function decorate(array $tokenData): array;
+}
diff --git a/library/Styleguide/Customize/TokenData/Decorators/FontFamilies.php b/library/Styleguide/Customize/TokenData/Decorators/FontFamilies.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace Municipio\Styleguide\Customize\TokenData\Decorators;
+
+use WpService\Contracts\ApplyFilters;
+
+class FontFamilies implements DecoratorInterface
+{
+    public function __construct(
+        private ApplyFilters $wpService,
+    ) {}
+
+    public function decorate(array $tokenData): array
+    {
+        $tagetVariables = ['--font-family-base', '--font-family-heading'];
+
+        foreach ($tokenData['categories'] as &$category) {
+            foreach ($category['settings'] as &$setting) {
+                if (in_array($setting['variable'], $tagetVariables, true)) {
+                    $setting = $this->modifySetting($setting);
+                }
+            }
+        }
+
+        return $tokenData;
+    }
+
+    private function modifySetting(array $setting): array
+    {
+        $setting = [
+            ...$setting,
+            'type' => 'select',
+            'options' => $this->getFontOptions($setting),
+        ];
+
+        return $setting;
+    }
+
+    private function getFontOptions(array $setting): array
+    {
+        $options = [];
+
+        if (!empty($setting['default']) && is_string($setting['default'])) {
+            $options[] = [
+                'value' => $setting['default'],
+                'label' => $setting['default'],
+            ];
+        }
+
+        return $this->wpService->applyFilters('Municipio/Styleguide/Customize/TokenData/FontFamilies', array_merge($options, [
+            ['value' => 'Arial, sans-serif', 'label' => 'Arial'],
+            ['value' => 'Helvetica, sans-serif', 'label' => 'Helvetica'],
+            ['value' => 'sans-serif', 'label' => 'sans-serif'],
+        ]));
+    }
+}
diff --git a/library/Styleguide/Customize/TokenData/Decorators/FontFamiliesTest.php b/library/Styleguide/Customize/TokenData/Decorators/FontFamiliesTest.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace Municipio\Styleguide\Customize\TokenData\Decorators;
+
+use PHPUnit\Framework\Attributes\TestDox;
+use PHPUnit\Framework\TestCase;
+use WpService\Contracts\ApplyFilters;
+
+class FontFamiliesTest extends TestCase
+{
+    #[TestDox('turns --font-family-base into a select with options')]
+    public function testDecorate(): void
+    {
+        $tokenData = [
+            'categories' => [[
+                'id' => 'typography',
+                'settings' => [[
+                    'variable' => '--font-family-base',
+                    'type' => 'font',
+                    'default' => 'Default Font',
+                ]],
+            ]],
+        ];
+
+        $decorator = new FontFamilies(static::createWpService());
+        $decoratedData = $decorator->decorate($tokenData);
+
+        static::assertSame('select', $decoratedData['categories'][0]['settings'][0]['type']);
+        static::assertContains(
+            [
+                'value' => 'Arial, sans-serif',
+                'label' => 'Arial',
+            ],
+            $decoratedData['categories'][0]['settings'][0]['options'],
+        );
+    }
+
+    #[TestDox('adds default font value to options')]
+    public function testDecorateWithDefaultFont(): void
+    {
+        $tokenData = [
+            'categories' => [[
+                'id' => 'typography',
+                'settings' => [[
+                    'variable' => '--font-family-base',
+                    'type' => 'font',
+                    'default' => '"Roboto", sans-serif',
+                ]],
+            ]],
+        ];
+
+        $decorator = new FontFamilies(static::createWpService());
+        $decoratedData = $decorator->decorate($tokenData);
+
+        static::assertContains(
+            [
+                'value' => '"Roboto", sans-serif',
+                'label' => '"Roboto", sans-serif',
+            ],
+            $decoratedData['categories'][0]['settings'][0]['options'],
+        );
+    }
+
+    private static function createWpService(): ApplyFilters
+    {
+        return new class implements ApplyFilters {
+            public function applyFilters(string $hookName, mixed $value, mixed ...$args): mixed
+            {
+                return $value;
+            }
+        };
+    }
+}
diff --git a/library/Styleguide/Customize/TokenData/TokenData.php b/library/Styleguide/Customize/TokenData/TokenData.php
@@ -3,14 +3,17 @@
 namespace Municipio\Styleguide\Customize\TokenData;
 
 use Composer\InstalledVersions;
+use Municipio\Styleguide\Customize\OverrideState\OverrideStateInterface;
+use WpService\Contracts\AddFilter;
 use WpService\Contracts\ApplyFilters;
 
 class TokenData
 {
     private const STYLEGUIDE_PACKAGE = 'helsingborg-stad/styleguide';
 
     public function __construct(
-        private ApplyFilters $wpService,
+        private ApplyFilters&AddFilter $wpService,
+        private OverrideStateInterface $overrideStateService,
     ) {}
 
     public function getTokenData(): array
@@ -22,6 +25,10 @@ public function getTokenData(): array
         $contents = file_get_contents($this->getFilePath());
         $contents = $contents === false ? [] : json_decode($contents, true);
 
+        // Apply local decorators
+        (new Decorators\AddOverrideFontFamilies($this->wpService, $this->overrideStateService))->addHooks();
+        $contents = (new Decorators\FontFamilies($this->wpService))->decorate($contents);
+
         return $this->wpService->applyFilters('Municipio/Styleguide/Customize/TokenData', $contents);
     }
 
diff --git a/library/Styleguide/Customize/TokenData/TokenDataTest.php b/library/Styleguide/Customize/TokenData/TokenDataTest.php
@@ -2,8 +2,10 @@
 
 namespace Municipio\Styleguide\Customize\TokenData;
 
+use Municipio\Styleguide\Customize\OverrideState\OverrideStateInterface;
 use PHPUnit\Framework\Attributes\TestDox;
 use PHPUnit\Framework\TestCase;
+use WpService\Contracts\AddFilter;
 use WpService\Contracts\ApplyFilters;
 use WpService\Implementations\FakeWpService;
 
@@ -12,18 +14,34 @@ class TokenDataTest extends TestCase
     #[TestDox('returns file contents as array')]
     public function testGetTokenData(): void
     {
-        $tokenData = new TokenData(static::createWpService());
+        $tokenData = new TokenData(static::createWpService(), static::createOverrideStateService());
         $result = $tokenData->getTokenData();
 
         $this->assertIsArray($result);
     }
 
-    private static function createWpService(): ApplyFilters
+    private static function createWpService(): ApplyFilters&AddFilter
     {
-        return new FakeWpService([
-            'applyFilters' => function (string $filterName, $value) {
+        return new class implements ApplyFilters, AddFilter {
+            public function addFilter(string $hookName, callable $callback, int $priority = 10, int $acceptedArgs = 1): true
+            {
+                return true;
+            }
+
+            public function applyFilters(string $hookName, mixed $value, mixed ...$args): mixed
+            {
                 return $value;
-            },
-        ]);
+            }
+        };
+    }
+
+    private static function createOverrideStateService(): OverrideStateInterface
+    {
+        return new class implements OverrideStateInterface {
+            public function getOverrideState(): array
+            {
+                return [];
+            }
+        };
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`use WpService\Contracts\ApplyFilters;`
`6`	`6`	`use WpService\Contracts\GetThemeMod;`
`7`	`7`
`8`		`-class OverrideState`
	`8`	`+class OverrideState implements OverrideStateInterface`
`9`	`9`	`{`
`10`	`10`	`public function __construct(`
`11`	`11`	`private GetThemeMod&ApplyFilters $wpService,`