diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/index.js new file mode 100644 index 00000000000000..8cdbbc02f6184c --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/index.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { __experimentalNavigation as Navigation } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { GLOBAL_STYLES_VIEWS, VIEW_ROOT } from './navigation/constants'; +import GlobalStylesNavigation from './navigation'; +import GlobalStylesCurrentView from './navigation/view'; + +export default function GlobalStylesV2() { + return ( + + + + ); +} + +function GlobalStylesView() { + return ( + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/constants.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/constants.js new file mode 100644 index 00000000000000..28f2c5404a06e1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/constants.js @@ -0,0 +1,15 @@ +export const VIEW_ROOT = 'root'; +export const VIEW_COLORS = 'colors'; +export const VIEW_COLORS_PALETTE = 'colors-palette'; +export const VIEW_COLORS_ELEMENT = 'colors-element'; +export const VIEW_TYPOGRAPHY = 'typography'; +export const VIEW_TYPOGRAPHY_ELEMENT = 'typography-element'; + +export const GLOBAL_STYLES_VIEWS = [ + { title: 'Global Styles', slug: VIEW_ROOT }, + { title: 'Colors', slug: VIEW_COLORS }, + { title: 'Colors Palette', slug: VIEW_COLORS_PALETTE }, + { title: 'Colors Element', slug: VIEW_COLORS_ELEMENT }, + { title: 'Typography', slug: VIEW_TYPOGRAPHY }, + { title: 'Typography Element', slug: VIEW_TYPOGRAPHY_ELEMENT }, +]; diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/context.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/context.js new file mode 100644 index 00000000000000..080350e0978477 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/context.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { VIEW_ROOT } from './constants'; + +export const GlobalStylesNavigationContext = createContext( { + currentView: VIEW_ROOT, + setCurrentView: () => {}, +} ); + +export const useGlobalStylesNavigationContext = () => + useContext( GlobalStylesNavigationContext ); diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/index.js new file mode 100644 index 00000000000000..6ca3de28d2a738 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/index.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { VIEW_ROOT } from './constants'; +import { GlobalStylesNavigationContext } from './context'; + +export default function GlobalStylesNavigation( { children } ) { + const [ currentView, setCurrentView ] = useState( VIEW_ROOT ); + + return ( + + { children } + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/view.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/view.js new file mode 100644 index 00000000000000..4dd60b5ffc7816 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/view.js @@ -0,0 +1,38 @@ +/** + * Internal dependencies + */ +import { + VIEW_COLORS, + VIEW_COLORS_ELEMENT, + VIEW_COLORS_PALETTE, + VIEW_ROOT, + VIEW_TYPOGRAPHY, + VIEW_TYPOGRAPHY_ELEMENT, +} from './constants'; +import { useGlobalStylesNavigationContext } from './context'; +import GlobalStylesViewColors from '../views/colors'; +import GlobalStylesViewColorsElement from '../views/colors-element'; +import GlobalStylesViewColorsPalette from '../views/colors-palette'; +import GlobalStylesViewRoot from '../views/root'; +import GlobalStylesViewTypography from '../views/typography'; +import GlobalStylesViewTypographyElement from '../views/typography-element'; + +const allViews = { + [ VIEW_ROOT ]: GlobalStylesViewRoot, + [ VIEW_COLORS ]: GlobalStylesViewColors, + [ VIEW_COLORS_ELEMENT ]: GlobalStylesViewColorsElement, + [ VIEW_COLORS_PALETTE ]: GlobalStylesViewColorsPalette, + [ VIEW_TYPOGRAPHY ]: GlobalStylesViewTypography, + [ VIEW_TYPOGRAPHY_ELEMENT ]: GlobalStylesViewTypographyElement, +}; + +export default function GlobalStylesCurrentView() { + const { currentView } = useGlobalStylesNavigationContext(); + const CurrentView = allViews[ currentView ] ?? null; + + return ( +
+ +
+ ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js new file mode 100644 index 00000000000000..4453647671514d --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js @@ -0,0 +1,10 @@ +/** + * Internal dependencies + */ +import GlobalStylesV2 from '../'; + +export default { title: 'Edit Site (Experimental) /Global Styles v2' }; + +export const _default = () => { + return ; +}; diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-element.js new file mode 100644 index 00000000000000..cc606a70f18333 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-element.js @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import { useGlobalStylesNavigationContext } from '../navigation/context'; + +export default function GlobalStylesViewColorsElement() { + const { setCurrentView } = useGlobalStylesNavigationContext(); + + const navigateToColors = () => setCurrentView( 'colors' ); + const navigateToColorsPalette = () => setCurrentView( 'colors-palette' ); + + return ( + <> +

Colors Element view

+ + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-palette.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-palette.js new file mode 100644 index 00000000000000..6bd9badd775656 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-palette.js @@ -0,0 +1,19 @@ +/** + * Internal dependencies + */ +import { useGlobalStylesNavigationContext } from '../navigation/context'; + +export default function GlobalStylesViewColorsPalette() { + const { setCurrentView } = useGlobalStylesNavigationContext(); + + const navigateToColorsElement = () => setCurrentView( 'colors-element' ); + + return ( + <> +

Colors Palette view

+ + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors.js new file mode 100644 index 00000000000000..563b90db4c0886 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import { useGlobalStylesNavigationContext } from '../navigation/context'; + +export default function GlobalStylesViewColors() { + const { setCurrentView } = useGlobalStylesNavigationContext(); + + const navigateToColorsElement = () => setCurrentView( 'colors-element' ); + const navigateToRoot = () => setCurrentView( 'root' ); + + return ( + <> +

Colors view

+ + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/root.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/root.js new file mode 100644 index 00000000000000..193b7b95af5db9 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/root.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import { useGlobalStylesNavigationContext } from '../navigation/context'; + +export default function GlobalStylesViewRoot() { + const { setCurrentView } = useGlobalStylesNavigationContext(); + + const navigateToColors = () => setCurrentView( 'colors' ); + const navigateToTypography = () => setCurrentView( 'typography' ); + + return ( + <> +

Root (main) view

+ + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography-element.js new file mode 100644 index 00000000000000..5ea624164d36e2 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography-element.js @@ -0,0 +1,19 @@ +/** + * Internal dependencies + */ +import { useGlobalStylesNavigationContext } from '../navigation/context'; + +export default function GlobalStylesViewTypographyElement() { + const { setCurrentView } = useGlobalStylesNavigationContext(); + + const navigateToTypography = () => setCurrentView( 'typography' ); + + return ( + <> +

Typography Element view

+ + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography.js new file mode 100644 index 00000000000000..8b79e46a30ee31 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import { useGlobalStylesNavigationContext } from '../navigation/context'; + +export default function GlobalStylesViewTypography() { + const { setCurrentView } = useGlobalStylesNavigationContext(); + + const navigateToTypographyElement = () => + setCurrentView( 'typography-element' ); + const navigateToRoot = () => setCurrentView( 'root' ); + + return ( + <> +

Typography view

+ + + + ); +} diff --git a/storybook/main.js b/storybook/main.js index 14c3db1adb0771..e0f7e6ad8eb82e 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -8,6 +8,7 @@ const stories = [ '../packages/block-editor/src/**/stories/*.js', '../packages/components/src/**/stories/*.js', '../packages/icons/src/**/stories/*.js', + '../packages/edit-site/src/**/stories/*.js', ].filter( Boolean ); const customEnvVariables = {};