Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: theme.json handling for block settings #581

Merged
merged 2 commits into from
Aug 23, 2023
Merged

fix: theme.json handling for block settings #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c2a194
fix: theme.json handling for block settings
nicholasio Aug 23, 2023
1192e6b
chore: changeset
nicholasio Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/proud-dryers-repeat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@headstartwp/core": patch
---

Fix theme.json handling for block settings
1 change: 1 addition & 0 deletions packages/core/src/react/blocks/hooks/__tests__/useBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from 'react';
import { renderHook } from '@testing-library/react';
import { Element } from 'html-react-parser';
import { SettingsProvider } from '../../../provider';
Expand Down
22 changes: 11 additions & 11 deletions packages/core/src/react/blocks/hooks/useBlockColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Element } from 'html-react-parser';
import { useThemeSetting } from '../../provider';
import { Colors, IBlockAttributes } from '../types';
import { getColorStyles } from '../utils';
import { getColorStyles, safeArraySpread } from '../utils';
import { useBlock } from './useBlock';

interface ColorBlockAttributes extends IBlockAttributes, Colors {
Expand Down Expand Up @@ -32,20 +32,20 @@ export function useBlockColors(node: Element) {
const userColorsSettings = useThemeSetting('color.palette.user', null, []);
const userGradientsSettings = useThemeSetting('color.palette.user', null, []);

const blockColorsSettings = useThemeSetting('color.palette', name, [], false);
const blockGradientsSettings = useThemeSetting('color.gradients', name, [], false);
const blockColorsSettings = useThemeSetting('color.palette.theme', name, [], false);
const blockGradientsSettings = useThemeSetting('color.gradients.theme', name, [], false);

const allGradients = [
...blockGradientsSettings,
...userGradientsSettings,
...themeGradientsSettings,
...defaultGradientsSettings,
...safeArraySpread(blockGradientsSettings),
...safeArraySpread(userGradientsSettings),
...safeArraySpread(themeGradientsSettings),
...safeArraySpread(defaultGradientsSettings),
];
const allColors = [
...blockColorsSettings,
...userColorsSettings,
...themeColorsSettings,
...defaultColorsSettings,
...safeArraySpread(blockColorsSettings),
...safeArraySpread(userColorsSettings),
...safeArraySpread(themeColorsSettings),
...safeArraySpread(defaultColorsSettings),
];

const color: Colors = {
Expand Down
15 changes: 8 additions & 7 deletions packages/core/src/react/blocks/hooks/useBlockTypography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Element } from 'html-react-parser';
import { useThemeSetting } from '../../provider';
import { IBlockAttributes, Typography } from '../types';
import { useBlock } from './useBlock';
import { safeArraySpread } from '../utils';

interface BlockTypographyAttributes extends IBlockAttributes {
fontSize?: string;
Expand All @@ -24,9 +25,9 @@ interface BlockTypographyAttributes extends IBlockAttributes {
export function useBlockTypography(node: Element): Typography {
const { name, attributes } = useBlock<BlockTypographyAttributes>(node);
const defaultFontSizesSettings = useThemeSetting('typography.fontSizes.default', null, []);
const themeFontSizesSettings = useThemeSetting('typography.fontSizes.default', null, []);
const userFontSizesSettings = useThemeSetting('typography.fontSizes.default', null, []);
const blockFontSizesSettings = useThemeSetting('typography.fontSizes', name, [], false);
const themeFontSizesSettings = useThemeSetting('typography.fontSizes.theme', null, []);
const userFontSizesSettings = useThemeSetting('typography.fontSizes.user', null, []);
const blockFontSizesSettings = useThemeSetting('typography.fontSizes.theme', name, [], false);

const supportsCustomFontSize = !!useThemeSetting('typography.customFontSize', name);
const supportsFontStyle = !!useThemeSetting('typography.fontStyle', name);
Expand All @@ -37,10 +38,10 @@ export function useBlockTypography(node: Element): Typography {
const supportsTextTransform = !!useThemeSetting('typography.textTransform', name);

const allFontSizes = [
...blockFontSizesSettings,
...userFontSizesSettings,
...themeFontSizesSettings,
...defaultFontSizesSettings,
...safeArraySpread(blockFontSizesSettings),
...safeArraySpread(userFontSizesSettings),
...safeArraySpread(themeFontSizesSettings),
...safeArraySpread(defaultFontSizesSettings),
];

const fontSizePreset = attributes?.fontSize;
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/react/blocks/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,3 +216,7 @@ export function getTypographyStyles(domNode: Element) {

return typography;
}

export function safeArraySpread(array: any) {
return Array.isArray(array) ? array : [];
}
8 changes: 4 additions & 4 deletions packages/core/src/react/provider/__tests__/useThemeSetting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,16 +69,16 @@ describe('useThemeSetting', () => {
settings: {
color: {
palette: {
// TODO: fix theme json ts types
// @ts-expect-error
default: defaultPallete,
},
},

blocks: {
'core/button': {
color: {
palette: blockPallete,
palette: {
theme: blockPallete,
},
},
},
},
Expand All @@ -98,7 +98,7 @@ describe('useThemeSetting', () => {
expect(result1.current).toMatchObject(defaultPallete);

const { result: result2 } = renderHook(
() => useThemeSetting('color.palette', 'core/button', []),
() => useThemeSetting('color.palette.theme', 'core/button', []),
{
wrapper,
},
Expand Down
24 changes: 21 additions & 3 deletions packages/core/src/react/provider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ export type SettingsColorPreset = {
color: string;
};

export type SettingsColorPalette = {
theme?: SettingsColorPreset[];
default?: SettingsColorPreset[];
user?: SettingsColorPreset[];
};

export type SettingsGradientPreset = {
/**
* Name of the gradient preset, translatable.
Expand All @@ -59,6 +65,12 @@ export type SettingsGradientPreset = {
gradient: string;
};

export type SettingsGradient = {
theme?: SettingsGradientPreset[];
default?: SettingsGradientPreset[];
user?: SettingsGradientPreset[];
};

export type SettingsDuotonePreset = {
/**
* Name of the duotone preset, translatable.
Expand All @@ -74,6 +86,12 @@ export type SettingsDuotonePreset = {
colors: string[];
};

export type SettingsDuotone = {
theme?: SettingsDuotonePreset[];
default?: SettingsDuotonePreset[];
user?: SettingsDuotonePreset[];
};

export interface WpThemeJSON {
/**
* JSON schema URI for theme.json.
Expand Down Expand Up @@ -391,12 +409,12 @@ export interface SettingsProperties {
* Duotone presets for the duotone picker.
* Doesn't generate classes or properties.
*/
duotone?: SettingsDuotonePreset[];
duotone?: SettingsDuotone;
/**
* Gradient presets for the gradient picker.
* Generates a single class (`.has-{slug}-background`) and custom property (`--wp--preset--gradient--{slug}`) per preset value.
*/
gradients?: SettingsGradientPreset[];
gradients?: SettingsGradient;
/**
* Allow users to set link colors.
*/
Expand All @@ -405,7 +423,7 @@ export interface SettingsProperties {
* Color palette presets for the color picker.
* Generates three classes (`.has-{slug}-color`, `.has-{slug}-background-color`, and `.has-{slug}-border-color`) and a single custom property (`--wp--preset--color--{slug}`) per preset value.
*/
palette?: SettingsColorPreset[];
palette?: SettingsColorPalette;
/**
* Allow users to set text colors.
*/
Expand Down
Loading