feat: attributes

packages/primitives/package.json

@@ -7,6 +7,10 @@
   "author": "10up <[email protected]> (https://10up.com/)",
   "type": "module",
   "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
     "./rich-text": {
       "block-editor": "./dist/src/block-editor/rich-text.js",
       "types": "./dist/src/primitives/rich-text.d.ts",
@@ -47,6 +51,7 @@
     "lint": "eslint src"
   },
   "dependencies": {
+    "@headstartwp/core": "^1.4.2",
     "@types/wordpress__block-library": "^2.6.3",
     "@types/wordpress__block-editor": "^11.5.12",
     "@types/wordpress__components": "^23.0.11"

packages/primitives/src/blocks-renderer/universal-block.tsx

@@ -0,0 +1,11 @@
+import { IBlock, IBlockAttributes, useBlock } from '@headstartwp/core/react';
+
+export interface IUniversalGutenbergBlock extends IBlock<IBlockAttributes> {}
+
+const UniversalGutenbergBlock = ({ domNode, component: Component }: IUniversalGutenbergBlock) => {
+	const { attributes } = useBlock(domNode);
+
+	return <Component attributes={attributes} />;
+};
+
+export default UniversalGutenbergBlock;

packages/primitives/src/index.ts

@@ -0,0 +1,2 @@
+export * from './shared/types.js';
+export * from './blocks-renderer/universal-block.js';

packages/primitives/src/shared/types.ts

@@ -110,3 +110,9 @@ export interface RichTextPrimitive<T extends keyof HTMLElementTagNameMap>
 		attributes: Attributes,
 	) => void;
 }
+
+export interface GutenbergBlock<T extends Record<string, unknown>> {
+	attributes: {
+		[k in keyof T]: T[k];
+	};
+}

projects/component-library/src/button/Button.stories.ts

@@ -25,26 +25,34 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
 	args: {
 		primary: true,
-		label: 'Button',
+		attributes: {
+			button_label: 'Button',
+		},
 	},
 };
 
 export const Secondary: Story = {
 	args: {
-		label: 'Button',
+		attributes: {
+			button_label: 'Button',
+		},
 	},
 };
 
 export const Large: Story = {
 	args: {
 		size: 'large',
-		label: 'Button',
+		attributes: {
+			button_label: 'Button',
+		},
 	},
 };
 
 export const Small: Story = {
 	args: {
 		size: 'small',
-		label: 'Button',
+		attributes: {
+			button_label: 'Button',
+		},
 	},
 };

projects/component-library/src/button/Button.tsx

@@ -1,34 +1,37 @@
 import React from 'react';
 import RichText from '@headstartwp/blocks-primitives/rich-text';
+import type { GutenbergBlock } from '@headstartwp/blocks-primitives';
 
-interface ButtonProps {
+type BlockAttributes = {
+	button_label: string;
+};
+
+interface ButtonProps extends GutenbergBlock<BlockAttributes> {
 	/**
 	 * Is this the principal call to action on the page?
 	 */
 	primary?: boolean;
+
 	/**
 	 * How large should the button be?
 	 */
 	size?: 'small' | 'medium' | 'large';
-	/**
-	 * Button contents
-	 */
-	label: string;
+
 	/**
 	 * Optional click handler
 	 */
 	onClick?: () => void;
 }
 
-export const Button = ({ primary = false, size = 'medium', label, ...props }: ButtonProps) => {
+export const Button = ({ primary = false, size = 'medium', attributes, ...props }: ButtonProps) => {
 	const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 	return (
 		<RichText
-			name="button-label"
+			name="button_label"
 			tagName="button"
 			type="button"
 			placeholder="Type a label for you button"
-			value={label}
+			value={attributes.button_label}
 			className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
 			{...props}
 		/>