[MERL-798] getStyles helper (#1420)

* Feat: getInlineStyles + tests

* Feat: Add getTypographyStyles()

* Feat: getBackgroundStyles()

* Feat: getTextStyles()

* Feat: getBorderStyles()

* Refactor: Use getCSSRules instead of compileCSS

* Refactor: Improve BlockWithAttributes type

* Refactor: Fix types for BlockWithAttributes

* Test: getStyles()

* Chore: Fix WordPressBlock type

* Chore: Changeset

.changeset/eighty-carpets-occur.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/blocks': patch
+---
+
+Adds getStyles helper that generates inline styles from block attributes.

packages/blocks/README.md

@@ -33,6 +33,12 @@ Install the blocks package:
 npm i @faustwp/blocks
 ```
 
+Additionally if you are using the `theme.json` helper functions (`getStyles()`) you need the following peer dependency:
+
+```bash
+npm i @wordpress/style-engine
+```
+
 Open `_app.js` and import the blocks provider:
 
 ```jsx

packages/blocks/package.json

@@ -8,7 +8,8 @@
   "peerDependencies": {
     "@faustwp/core": ">=0.2.10",
     "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "react-dom": ">=17.0.2",
+    "@wordpress/style-engine": ">=1.15.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.15.0",

packages/blocks/src/components/DefaultBlock.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 import React from 'react';
 import { ContentBlock } from './WordPressBlocksViewer.js';
 

packages/blocks/src/components/WordPressBlocksViewer.tsx

@@ -53,6 +53,13 @@ export interface ContentBlock {
   name?: string;
   renderedHtml?: string;
 }
+
+export type BlockWithAttributes<
+  T extends ContentBlock = Record<string, unknown>,
+> = T & {
+  attributes?: Record<string, unknown> | null;
+};
+
 /**
  * WordPressBlocksViewer is the main component that renders blocks taken from WordPress as a list of ContentBlock[] data.
  * @param props WordpressBlocksViewerProps

packages/blocks/src/index.ts

@@ -9,8 +9,12 @@ import {
   useBlockData,
   WordpressBlocksViewerProps,
   WordPressBlocksViewer,
+  BlockWithAttributes,
 } from './components/WordPressBlocksViewer.js';
 
+import getStyles from './utils/getStyles.js';
+import { ThemeJson } from './theme.js';
+
 export {
   WordPressBlocksContext,
   WordPressThemeContext,
@@ -20,4 +24,7 @@ export {
   WordpressBlocksViewerProps,
   WordPressBlocksViewer,
   useBlocksTheme,
+  getStyles,
+  ThemeJson,
+  BlockWithAttributes,
 };

packages/blocks/src/theme.ts

@@ -1,8 +1,8 @@
 type Keys = string | number;
 
 export type ThemeJson = {
-  colors: ThemePropertiesColor;
-  spacing: ThemePropertiesSpacing;
+  colors?: ThemePropertiesColor;
+  spacing?: ThemePropertiesSpacing;
   blocks?: ThemePropertiesBlocks;
   layout?: ThemePropertiesLayout;
   typography?: ThemePropertiesTypography;

packages/blocks/src/utils/getBackgroundStyles.ts

@@ -0,0 +1,21 @@
+import { ThemeJson } from '../theme.js';
+import { BlockWithAttributes } from '../components/WordPressBlocksViewer.js';
+
+/**
+ *
+ * Returns the specified block Background Styles
+ * @param theme Block Theme object
+ * @returns React CSS Properties object
+ */
+export default function getBackgroundStyles<T extends BlockWithAttributes>(
+  theme: ThemeJson,
+  block: T,
+): React.CSSProperties {
+  const { attributes } = block;
+  const styles: React.CSSProperties = {};
+  if (attributes?.backgroundColor) {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    styles.backgroundColor = `var(--wp--preset--color--${attributes.backgroundColor})`;
+  }
+  return styles;
+}

packages/blocks/src/utils/getBorderStyles.ts

@@ -0,0 +1,21 @@
+import { ThemeJson } from '../theme.js';
+import { BlockWithAttributes } from '../components/WordPressBlocksViewer.js';
+
+/**
+ *
+ * Returns the specified block Border Styles
+ * @param theme Block Theme object
+ * @returns React CSS Properties object
+ */
+export default function getBorderStyles<T extends BlockWithAttributes>(
+  theme: ThemeJson,
+  block: T,
+): React.CSSProperties {
+  const { attributes } = block;
+  const styles: React.CSSProperties = {};
+  if (attributes?.borderColor) {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    styles.borderColor = `var(--wp--preset--color--${attributes.borderColor})`;
+  }
+  return styles;
+}

packages/blocks/src/utils/getInlineStyles.ts

@@ -0,0 +1,34 @@
+import { getCSSRules } from '@wordpress/style-engine';
+
+type Style = Parameters<typeof getCSSRules>[0];
+
+export function parseInlineStyles(styles: Style): React.CSSProperties {
+  const output: Record<string, unknown> = {};
+  getCSSRules(styles).forEach((rule) => {
+    output[rule.key] = rule.value;
+  });
+
+  return output;
+}
+
+/**
+ * Parses and returns any inline css styles on this block attributes
+ * @param attributes Block Attributes object
+ * @returns React CSS Properties object
+ */
+export default function getInlineStyles(
+  attributes: Record<string, unknown>,
+): React.CSSProperties | undefined {
+  let styles;
+  // Duck Typing
+  if (attributes?.style) {
+    try {
+      styles = parseInlineStyles(
+        JSON.parse(attributes?.style as string) as Style,
+      );
+    } catch (e) {
+      return styles;
+    }
+  }
+  return styles;
+}

packages/blocks/src/utils/getStyles.ts

@@ -0,0 +1,20 @@
+import { ThemeJson } from '../theme.js';
+import { BlockWithAttributes } from '../components/WordPressBlocksViewer.js';
+import getInlineStyles from './getInlineStyles.js';
+import getTypographyStyles from './getTypographyStyles.js';
+import getBackgroundStyles from './getBackgroundStyles.js';
+import getTextStyles from './getTextStyles.js';
+import getBorderStyles from './getBorderStyles.js';
+
+export default function getStyles<T extends BlockWithAttributes>(
+  theme: ThemeJson,
+  block: T,
+): React.CSSProperties {
+  return {
+    ...getInlineStyles(block?.attributes ?? {}),
+    ...getTypographyStyles(theme, block),
+    ...getBackgroundStyles(theme, block),
+    ...getTextStyles(theme, block),
+    ...getBorderStyles(theme, block),
+  };
+}

packages/blocks/src/utils/getTextStyles.ts

@@ -0,0 +1,21 @@
+import { ThemeJson } from '../theme.js';
+import { BlockWithAttributes } from '../components/WordPressBlocksViewer.js';
+
+/**
+ *
+ * Returns the specified block Text Styles
+ * @param theme Block Theme object
+ * @returns React CSS Properties object
+ */
+export default function getTextStyles<T extends BlockWithAttributes>(
+  theme: ThemeJson,
+  block: T,
+): React.CSSProperties {
+  const { attributes } = block;
+  const styles: React.CSSProperties = {};
+  if (attributes?.textColor) {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    styles.color = `var(--wp--preset--color--${attributes.textColor})`;
+  }
+  return styles;
+}

packages/blocks/src/utils/getTypographyStyles.ts

@@ -0,0 +1,28 @@
+import { ThemeJson } from '../theme.js';
+import { BlockWithAttributes } from '../components/WordPressBlocksViewer.js';
+
+/**
+ *
+ * Returns the specified block Typography Styles
+ * @param theme Block Theme object
+ * @returns React CSS Properties object
+ */
+export default function getTypographyStyles<T extends BlockWithAttributes>(
+  theme: ThemeJson,
+  block: T,
+): React.CSSProperties {
+  const { attributes } = block;
+  const styles: React.CSSProperties = {};
+  if (attributes?.fontFamily) {
+    // TODO: Have a CSS Var generator strategy generate those.
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    styles.fontFamily = `var(--wp--preset--font-family--${attributes.fontFamily})`;
+  }
+
+  if (attributes?.fontSize) {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    styles.fontSize = `var(--wp--preset--font-size--${attributes.fontSize})`;
+  }
+
+  return styles;
+}

packages/blocks/tests/components/WordPressBlocksProvider.test.tsx

@@ -44,7 +44,7 @@ describe('useBlocksTheme', () => {
     const theme = result.current;
 
     expect(result.error).toBeUndefined();
-    expect(theme?.colors.palette).toStrictEqual({ primary: 'black' });
+    expect(theme?.colors?.palette).toStrictEqual({ primary: 'black' });
   });
 
   it('uses the path param', async () => {

packages/blocks/tests/utils/getBackgroundStyles.test.ts

@@ -0,0 +1,30 @@
+import { BlockWithAttributes } from '../../src/components/WordPressBlocksViewer.js';
+import { ThemeJson } from '../../src/theme.js';
+import getBackgroundStyles from '../../src/utils/getBackgroundStyles.js';
+
+describe('getBackgroundStyles()', () => {
+  const theme = {};
+  it.each([
+    [theme, { attributes: {} }, {}],
+    [
+      theme,
+      {
+        attributes: {
+          backgroundColor: 'primary',
+        },
+      },
+      {
+        backgroundColor: 'var(--wp--preset--color--primary)',
+      },
+    ],
+  ])(
+    'theme %p and block %p expecting background Styles %p',
+    (
+      theme: ThemeJson,
+      block: BlockWithAttributes,
+      result: React.CSSProperties | undefined,
+    ) => {
+      expect(getBackgroundStyles(theme, block)).toEqual(result);
+    },
+  );
+});

packages/blocks/tests/utils/getBorderStyles.test.ts

@@ -0,0 +1,30 @@
+import { BlockWithAttributes } from '../../src/components/WordPressBlocksViewer.js';
+import { ThemeJson } from '../../src/theme.js';
+import getBorderStyles from '../../src/utils/getBorderStyles.js';
+
+describe('getBorderStyles()', () => {
+  const theme = {};
+  it.each([
+    [theme, { attributes: {} }, {}],
+    [
+      theme,
+      {
+        attributes: {
+          borderColor: 'primary',
+        },
+      },
+      {
+        borderColor: 'var(--wp--preset--color--primary)',
+      },
+    ],
+  ])(
+    'theme %p and block %p expecting border Styles %p',
+    (
+      theme: ThemeJson,
+      block: BlockWithAttributes,
+      result: React.CSSProperties | undefined,
+    ) => {
+      expect(getBorderStyles(theme, block)).toEqual(result);
+    },
+  );
+});