feat: typescript

package.json

@@ -25,15 +25,19 @@
 		"yard-toolkit": "yard-toolkit"
 	},
 	"devDependencies": {
-		"@yardinternet/eslint-config": "^1.1.5",
-		"@yardinternet/prettier-config": "^1.1.2",
+		"@types/wordpress__blocks": "^12.5.18",
+		"@yardinternet/eslint-config": "^1.1.7",
+		"@yardinternet/prettier-config": "^2.0.2",
 		"@yardinternet/stylelint-config": "^1.1.2",
-		"@yardinternet/toolkit": "^1.1.10",
-		"@yardinternet/vite-config": "^1.0.10",
-		"tailwindcss": "^4.1.13",
-		"vite": "^7.1.3"
+		"@yardinternet/toolkit": "^2.0.3",
+		"@yardinternet/vite-config": "^1.0.11",
+		"tailwindcss": "^4.1.18",
+		"vite": "^7.3.1"
 	},
 	"dependencies": {
+		"@wordpress/blocks": "^15.12.0",
+		"@wordpress/dom-ready": "^4.39.0",
+		"@wordpress/hooks": "^4.39.0",
 		"@yardinternet/a11y-cookie-yes": "^1.2.10",
 		"@yardinternet/brave-frontend-kit": "^0.7.0",
 		"@yardinternet/gutenberg-components": "^1.3.2"

tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"lib": [ "ES2020", "DOM" ],
+
+		"strict": true,
+
+		"esModuleInterop": true,
+		"resolveJsonModule": true,
+
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true
+	},
+	"include": [
+		"web/app/themes/sage/resources/scripts/**/*.ts",
+		"web/app/themes/sage/resources/scripts/**/*.d.ts"
+	],
+	"exclude": [ "node_modules" ]
+}

vite.config.js

@@ -6,8 +6,8 @@ import { braveConfig } from '@yardinternet/vite-config';
 export default braveConfig( {
 	theme: process.env.THEME,
 	entryPoints: [
-		'resources/scripts/editor/editor.js',
-		'resources/scripts/frontend/frontend.js',
+		'resources/scripts/editor/editor.ts',
+		'resources/scripts/frontend/frontend.ts',
 		'resources/styles/editor.css',
 		'resources/styles/frontend.css',
 	],

web/app/themes/sage/resources/scripts/declaration.d.ts

@@ -0,0 +1,2 @@
+declare module '@yardinternet/brave-frontend-kit';
+declare module '@yardinternet/gutenberg-components';

web/app/themes/sage/resources/scripts/editor/block-styles.js → web/app/themes/sage/resources/scripts/editor/block-styles.ts

@@ -4,22 +4,22 @@
 import { registerBlockStyle } from '@wordpress/blocks';
 import domReady from '@wordpress/dom-ready';
 
-const buttonStyles = [
+const blockStyles = [
 	{
+		block: 'core/button',
 		label: 'Outline',
 		name: 'outlined',
 	},
-];
-
-const listStyles = [
 	{
+		block: 'core/list',
 		label: 'Stijlloos',
 		name: 'unstyled',
 	},
 ];
 
 domReady( () => {
 	// Register block styles
-	registerBlockStyle( 'core/button', buttonStyles );
-	registerBlockStyle( 'core/list', listStyles );
+	blockStyles.forEach( ( { block, label, name } ) => {
+		registerBlockStyle( block, { name, label } );
+	} );
 } );

web/app/themes/sage/resources/scripts/editor/block-variations.jsx → web/app/themes/sage/resources/scripts/editor/block-variations.tsx

@@ -28,6 +28,7 @@ window.addEventListener( 'DOMContentLoaded', () => {
 		isDefault: true,
 		isActive: [ 'className' ],
 		name: 'group-with-background',
+		title: 'Groep met achtergrond',
 		attributes: {
 			backgroundColor: 'white',
 		},