From 4de0d580c988dc9d9f839ee272d7b8a723a9a18c Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Mon, 29 Jan 2024 10:38:29 +0000 Subject: [PATCH 01/11] feat(bbt-123): add basic switcher UI --- src/editor/components/ThemerComponent.js | 64 ++++++++++++++++++++---- 1 file changed, 54 insertions(+), 10 deletions(-) diff --git a/src/editor/components/ThemerComponent.js b/src/editor/components/ThemerComponent.js index 8ae68bb..e2a3bc7 100644 --- a/src/editor/components/ThemerComponent.js +++ b/src/editor/components/ThemerComponent.js @@ -4,6 +4,7 @@ import { Spinner, MenuGroup, MenuItem, + SelectControl, __experimentalNavigatorProvider as NavigatorProvider, } from '@wordpress/components'; import { useSelect, dispatch } from '@wordpress/data'; @@ -37,6 +38,8 @@ const ThemerComponent = () => { const [ previewExampleIsActive, setPreviewExampleIsActive ] = useState(); const [ schema, setSchema ] = useState( {} ); const [ validThemeJson, setValidThemeJson ] = useState(); + const [ globalStylesId, setGlobalStylesId ] = useState( 0 ); + const [ styleVariations, setStyleVariations ] = useState( [] ); const setUserConfig = ( config ) => { dispatch( 'core' ).editEntityRecord( @@ -47,33 +50,38 @@ const ThemerComponent = () => { ); }; - const { globalStylesId, baseConfig, userConfig, savedUserConfig } = - useSelect( ( select ) => { + const { baseConfig, userConfig, savedUserConfig } = useSelect( + ( select ) => { + if ( ! globalStylesId ) { + return { + baseConfig: {}, + userConfig: {}, + savedUserConfig: {}, + }; + } + const { - __experimentalGetCurrentGlobalStylesId, __experimentalGetCurrentThemeBaseGlobalStyles, getEditedEntityRecord, getEntityRecord, } = select( 'core' ); - const currentGlobalStylesId = - __experimentalGetCurrentGlobalStylesId(); - return { - globalStylesId: currentGlobalStylesId, // eslint-disable no-underscore-dangle -- require underscore dangle for experimental functions baseConfig: __experimentalGetCurrentThemeBaseGlobalStyles(), // eslint-disable no-underscore-dangle -- require underscore dangle for experimental functions userConfig: getEditedEntityRecord( 'root', 'globalStyles', - currentGlobalStylesId + globalStylesId ), savedUserConfig: getEntityRecord( 'root', 'globalStyles', - currentGlobalStylesId + globalStylesId ), }; - } ); + }, + [ globalStylesId ] + ); /** * Returns merged base and user configs @@ -118,6 +126,18 @@ const ThemerComponent = () => { setValidThemeJson( res ); }; + const getStyleVariations = async () => { + const styleVariationsRes = await apiFetch( { + path: '/themer/v1/theme-style-variation-posts', + method: 'GET', + } ); + setStyleVariations( styleVariationsRes ); + const activeVariation = styleVariationsRes.find( + ( variation ) => variation.post_status === 'publish' + ); + setGlobalStylesId( activeVariation.ID ); + }; + /** * Resets preview blocks to default template */ @@ -137,6 +157,10 @@ const ThemerComponent = () => { validateThemeJson(); }, [] ); + useEffect( () => { + getStyleVariations(); + }, [] ); + /** * Alert user if they try to leave Themer without saving. */ @@ -196,6 +220,19 @@ const ThemerComponent = () => { ); } + const selectOptions = [ + { + disabled: true, + label: __( 'Select a style variation', 'themer' ), + value: '', + }, + , + ...styleVariations.map( ( variation ) => ( { + label: variation.post_name, + value: variation.ID, + } ) ), + ]; + return ( <> { { validThemeJson === true && ( <>
+ + setGlobalStylesId( value ) + } + />