| 1 |
import blockStyleVariations from '@launch/_data/block-style-variations.json'; |
| 2 |
import apiFetch from '@wordpress/api-fetch'; |
| 3 |
import useSWRImmutable from 'swr/immutable'; |
| 4 |
|
| 5 |
export const useSiteVibesVariations = () => { |
| 6 |
const { data, error, isLoading } = useSWRImmutable( |
| 7 |
{ |
| 8 |
key: 'site-vibes-variations', |
| 9 |
themeSlug: window.extAgentData.context.themeSlug, |
| 10 |
}, |
| 11 |
fetcher, |
| 12 |
); |
| 13 |
return { data, error, isLoading }; |
| 14 |
}; |
| 15 |
|
| 16 |
const fetcher = async () => { |
| 17 |
const stylesResponse = await apiFetch({ |
| 18 |
path: '/wp/v2/global-styles/themes/extendable?context=edit', |
| 19 |
}); |
| 20 |
|
| 21 |
const styles = stylesResponse?.styles; |
| 22 |
if (!styles?.blocks) return null; |
| 23 |
|
| 24 |
const optionsResponse = await apiFetch({ |
| 25 |
path: '/extendify/v1/launch/options?option=extendify_siteStyle', |
| 26 |
}); |
| 27 |
|
| 28 |
const currentVibe = optionsResponse?.data?.vibe; |
| 29 |
|
| 30 |
return { |
| 31 |
vibes: extractVibesFromTheme(styles), |
| 32 |
css: { ...blockStyleVariations }, |
| 33 |
currentVibe: currentVibe || 'natural-1', |
| 34 |
}; |
| 35 |
}; |
| 36 |
|
| 37 |
const extractVibesFromTheme = (themeStyles) => { |
| 38 |
if (!themeStyles?.blocks) return []; |
| 39 |
|
| 40 |
const vibeSet = new Set(); |
| 41 |
const { blocks } = themeStyles; |
| 42 |
|
| 43 |
// Scan all blocks for vibe variations |
| 44 |
for (const blockObj of Object.values(blocks)) { |
| 45 |
if (!blockObj?.variations) continue; |
| 46 |
|
| 47 |
for (const styleName of Object.keys(blockObj.variations)) { |
| 48 |
if (!styleName.startsWith('ext-preset--')) continue; |
| 49 |
|
| 50 |
// Split the slug: ext-preset--group--gradient-1--item-card-1--align-center |
| 51 |
const parts = styleName.split('--'); |
| 52 |
|
| 53 |
if (parts.length >= 4) { |
| 54 |
const vibe = parts[2]; // 'gradient-1' ← This is what we want! |
| 55 |
if (vibe) vibeSet.add(vibe); |
| 56 |
} |
| 57 |
} |
| 58 |
} |
| 59 |
|
| 60 |
return Array.from(vibeSet).map((slug) => ({ |
| 61 |
name: slugToDisplayName(slug), // "gradient-1" → "Gradient 1" |
| 62 |
slug, |
| 63 |
})); |
| 64 |
}; |
| 65 |
|
| 66 |
const slugToDisplayName = (slug) => |
| 67 |
slug |
| 68 |
.split('-') |
| 69 |
.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) |
| 70 |
.join(' '); |
| 71 |
|
