refactor(themer-component): restores initial field renders & moves co…

…ntext
bigbite · Aug 7, 2023 · 4076d63 · 4076d63
1 parent ff19703
commit 4076d63
Showing 1 changed file with 72 additions and 65 deletions.
diff --git a/src/editor/components/fields/ThemerComponent.js b/src/editor/components/fields/ThemerComponent.js
@@ -1,5 +1,5 @@
 import { mergeWith, isEmpty } from 'lodash';
-import { Button, Spinner } from '@wordpress/components';
+import { Button, Spinner, TabPanel } from '@wordpress/components';
 import { useSelect, dispatch } from '@wordpress/data';
 import { useEffect, useState, useMemo } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
@@ -11,6 +11,7 @@ import StylesContext from '../../context/StylesContext';
 import Preview from './Preview';
 import ResponsiveButton from './ResponsiveButton';
 import ButtonExport from '../ButtonExport';
+import Fields from '../fields/Fields';
 
 /**
  * main component
@@ -131,70 +132,76 @@ const ThemerComponent = () => {
 
  return (
  <>
- <div className="themer-topbar">
- <Button isSecondary onClick={ () => reset() } text="Reset" />
- <Button isPrimary onClick={ () => save() } text="Save" />
- </div>
- <div className="themer-body">
- <div className="themer-nav-container">
- { /* demo */ }
- <EditorContext.Provider
- value={ {
- globalStylesId,
- themeConfig,
- } }
- >
- <StylesContext.Provider
- value={ {
- setUserConfig,
- } }
- >
- <Border selector="styles.blocks.core/pullquote.border" />
- </StylesContext.Provider>
- </EditorContext.Provider>
- { /* demo */ }
- { /* <TabPanel
- className="themer-tab-panel"
- activeClass="active-themer-tab"
- tabs={ [
- {
- name: 'placeholder',
- title: 'Placeholder',
- className: 'placeholder',
- },
- {
- name: 'placeholder2',
- title: 'Placeholder 2',
- className: 'placeholder2',
- },
- {
- name: 'placeholder3',
- title: 'Placeholder 3',
- className: 'placeholder3',
- },
- ] }
- >
- { ( tab ) => (
- <>
- <p>{ tab.title }</p>
- <Fields sourceObject={ themeConfig } />
- </>
- ) }
- </TabPanel> */ }
- </div>
- <div className="themer-preview-container">
- <ResponsiveButton
- setPreviewSize={ setPreviewSize }
- previewSize={ previewSize }
- />
- <Preview
- baseOptions={ baseConfig }
- previewCss={ previewCss }
- previewSize={ previewSize }
- />
- <ButtonExport />
- </div>
- </div>
+ <EditorContext.Provider
+ value={ {
+ globalStylesId,
+ themeConfig,
+ } }
+ >
+ <StylesContext.Provider
+ value={ {
+ setUserConfig,
+ } }
+ >
+ <div className="themer-topbar">
+ <Button
+ isSecondary
+ onClick={ () => reset() }
+ text="Reset"
+ />
+ <Button
+ isPrimary
+ onClick={ () => save() }
+ text="Save"
+ />
+ </div>
+ <div className="themer-body">
+ <div className="themer-nav-container">
+ <TabPanel
+ className="themer-tab-panel"
+ activeClass="active-themer-tab"
+ tabs={ [
+ {
+ name: 'placeholder',
+ title: 'Placeholder',
+ className: 'placeholder',
+ },
+ {
+ name: 'placeholder2',
+ title: 'Placeholder 2',
+ className: 'placeholder2',
+ },
+ {
+ name: 'placeholder3',
+ title: 'Placeholder 3',
+ className: 'placeholder3',
+ },
+ ] }
+ >
+ { ( tab ) => (
+ <>
+ <p>{ tab.title }</p>
+ <Border selector="styles.blocks.core/pullquote.border" />
+ <Fields sourceObject={ themeConfig } />
+ </>
+ ) }
+ </TabPanel>
+ </div>
+ <div className="themer-preview-container">
+ <ResponsiveButton
+ setPreviewSize={ setPreviewSize }
+ previewSize={ previewSize }
+ />
+ <Preview
+ baseOptions={ baseConfig }
+ previewCss={ previewCss }
+ previewSize={ previewSize }
+ />
+ <ButtonExport />
+ </div>
+ </div>
+ </StylesContext.Provider>
+ </EditorContext.Provider>
  </>
  );
 };