Skip to content

Commit

Permalink
Add path sync mechanism and sylebook block selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Sep 27, 2024
1 parent 2cdf171 commit a8acf9d
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 87 deletions.
205 changes: 122 additions & 83 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import { __ } from '@wordpress/i18n';
import { store as preferencesStore } from '@wordpress/preferences';
import { moreVertical } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
import { useEffect } from '@wordpress/element';
import { useEffect, Fragment } from '@wordpress/element';
import { usePrevious } from '@wordpress/compose';

/**
* Internal dependencies
Expand Down Expand Up @@ -276,120 +277,158 @@ function GlobalStylesEditorCanvasContainerLink() {
}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
}

function GlobalStylesUI() {
function NavigationSync( { path: parentPath, onPathChange, children } ) {
const navigator = useNavigator();
const { path: childPath } = navigator.location;
const previousParentPath = usePrevious( parentPath );
const previousChildPath = usePrevious( childPath );
useEffect( () => {
console.log({
parentPath,
previousChildPath,
previousParentPath,
childPath,
});
if ( parentPath !== childPath ) {
if ( parentPath !== previousParentPath ) {
navigator.goTo( parentPath );
} else if (
childPath !== previousChildPath &&
parentPath !== childPath
) {
onPathChange( childPath );
}
}
}, [
onPathChange,
parentPath,
previousChildPath,
previousParentPath,
childPath,
navigator,
] );
return children;
}

function GlobalStylesUI( { path, onPathChange } ) {
const blocks = getBlockTypes();
const editorCanvasContainerView = useSelect(
( select ) =>
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);
const WrapperComponent = path && onPathChange ? NavigationSync : Fragment;
return (
<NavigatorProvider
className="edit-site-global-styles-sidebar__navigator-provider"
initialPath="/"
>
<GlobalStylesNavigationScreen path="/">
<ScreenRoot />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/variations">
<ScreenStyleVariations />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/blocks">
<ScreenBlockList />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography">
<ScreenTypography />
</GlobalStylesNavigationScreen>
<WrapperComponent path={ path } onPathChange={ onPathChange }>
<GlobalStylesNavigationScreen path="/">
<ScreenRoot />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/font-sizes/">
<FontSizes />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/variations">
<ScreenStyleVariations />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
<FontSize />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/blocks">
<ScreenBlockList />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/typeset">
<ScreenTypeset />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography">
<ScreenTypography />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/text">
<ScreenTypographyElement element="text" />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/font-sizes/">
<FontSizes />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/link">
<ScreenTypographyElement element="link" />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
<FontSize />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/heading">
<ScreenTypographyElement element="heading" />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/typeset">
<ScreenTypeset />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/caption">
<ScreenTypographyElement element="caption" />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/text">
<ScreenTypographyElement element="text" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/button">
<ScreenTypographyElement element="button" />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/link">
<ScreenTypographyElement element="link" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/colors">
<ScreenColors />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/heading">
<ScreenTypographyElement element="heading" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/shadows">
<ScreenShadows />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/caption">
<ScreenTypographyElement element="caption" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
<ScreenShadowsEdit />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/typography/button">
<ScreenTypographyElement element="button" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/layout">
<ScreenLayout />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/colors">
<ScreenColors />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/css">
<ScreenCSS />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/shadows">
<ScreenShadows />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/revisions">
<ScreenRevisions />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
<ScreenShadowsEdit />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/background">
<ScreenBackground />
</GlobalStylesNavigationScreen>
<GlobalStylesNavigationScreen path="/layout">
<ScreenLayout />
</GlobalStylesNavigationScreen>

{ blocks.map( ( block ) => (
<GlobalStylesNavigationScreen
key={ 'menu-block-' + block.name }
path={ '/blocks/' + encodeURIComponent( block.name ) }
>
<ScreenBlock name={ block.name } />
<GlobalStylesNavigationScreen path="/css">
<ScreenCSS />
</GlobalStylesNavigationScreen>
) ) }

<ContextScreens />
<GlobalStylesNavigationScreen path="/revisions">
<ScreenRevisions />
</GlobalStylesNavigationScreen>

{ blocks.map( ( block ) => (
<ContextScreens
key={ 'screens-block-' + block.name }
name={ block.name }
parentMenu={ '/blocks/' + encodeURIComponent( block.name ) }
/>
) ) }
<GlobalStylesNavigationScreen path="/background">
<ScreenBackground />
</GlobalStylesNavigationScreen>

{ 'style-book' === editorCanvasContainerView && (
<GlobalStylesStyleBook />
) }
{ blocks.map( ( block ) => (
<GlobalStylesNavigationScreen
key={ 'menu-block-' + block.name }
path={ '/blocks/' + encodeURIComponent( block.name ) }
>
<ScreenBlock name={ block.name } />
</GlobalStylesNavigationScreen>
) ) }

<ContextScreens />

{ blocks.map( ( block ) => (
<ContextScreens
key={ 'screens-block-' + block.name }
name={ block.name }
parentMenu={
'/blocks/' + encodeURIComponent( block.name )
}
/>
) ) }

{ 'style-book' === editorCanvasContainerView && (
<GlobalStylesStyleBook />
) }

<GlobalStylesActionMenu />
<GlobalStylesBlockLink />
<GlobalStylesEditorCanvasContainerLink />
<GlobalStylesActionMenu />
<GlobalStylesBlockLink />
<GlobalStylesEditorCanvasContainerLink />
</WrapperComponent>
</NavigatorProvider>
);
}
Expand Down
33 changes: 29 additions & 4 deletions packages/edit-site/src/components/layout/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { useEffect, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -75,6 +75,31 @@ function useRedirectOldPaths() {
}, [ history, params ] );
}

const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';

function GlobalStylesUIWrapper() {
const { params } = useLocation();
const history = useHistory();
const pathWithPrefix = params.path;
const [ path, onPathChange ] = useMemo( () => {
const processedPath = pathWithPrefix.substring(
GLOBAL_STYLES_PATH_PREFIX.length
);
return [
processedPath ? processedPath : '/',
( newPath ) => {
history.push( {
path:
! newPath || newPath === '/'
? GLOBAL_STYLES_PATH_PREFIX
: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
} );
},
];
}, [ pathWithPrefix, history ] );
return <GlobalStylesUI path={ path } onPathChange={ onPathChange } />;
}

export default function useLayoutAreas() {
const { params } = useLocation();
const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
Expand Down Expand Up @@ -150,7 +175,7 @@ export default function useLayoutAreas() {
}

// Styles
if ( path === '/wp_global_styles' ) {
if ( path && path.startsWith( '/wp_global_styles' ) ) {
return {
key: 'styles',
areas: {
Expand All @@ -159,15 +184,15 @@ export default function useLayoutAreas() {
),
content: (
<Page className="edit-site-styes" title={ __( 'Styles' ) }>
<GlobalStylesUI />
<GlobalStylesUIWrapper />
</Page>
),
preview: <Editor isPreviewOnly />,
mobile: hasEditCanvasMode ? (
<Editor isPreviewOnly />
) : (
<Page className="edit-site-styes" title={ __( 'Styles' ) }>
<GlobalStylesUI />
<GlobalStylesUIWrapper />
</Page>
),
},
Expand Down
11 changes: 11 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
Expand All @@ -22,6 +23,8 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
import SidebarButton from '../sidebar-button';

const { useHistory } = unlock( routerPrivateApis );

export function SidebarNavigationItemGlobalStyles( props ) {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
Expand Down Expand Up @@ -56,6 +59,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
}

export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
const history = useHistory();
const { revisions, isLoading: isLoadingRevisions } =
useGlobalStylesRevisions();
const { openGeneralSidebar } = useDispatch( editSiteStore );
Expand Down Expand Up @@ -148,6 +152,13 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
isSelected={ () => false }
showCloseButton={ false }
showTabs={ false }
onSelect={ ( blockName ) => {
history.push( {
path: `/wp_global_styles/blocks/${ encodeURIComponent(
blockName
) }`,
} );
} }
/>
) }
</>
Expand Down

0 comments on commit a8acf9d

Please sign in to comment.