Skip to content

Commit

Permalink
Remove stylebook
Browse files Browse the repository at this point in the history 
Disable animation for style view
  • Loading branch information
@ramonjd
ramonjd committed Nov 2, 2024
1 parent fd25db5 commit 6c8a23f
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 113 deletions.
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,12 @@ export default function Layout( { route } ) {
isResizableFrameOversized
}
/>
<SidebarContent routeKey={ routeKey }>
<SidebarContent
shouldAnimate={
routeKey !== 'styles-view'
}
routeKey={ routeKey }
>
{ areas.sidebar }
</SidebarContent>
<SaveHub />
Expand Down
109 changes: 4 additions & 105 deletions packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,72 +2,22 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { useMemo } from '@wordpress/element';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { useViewportMatch } from '@wordpress/compose';
import {
Button,
privateApis as componentsPrivateApis,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import GlobalStylesUI from '../global-styles/ui';
import Page from '../page';
import { unlock } from '../../lock-unlock';
import StyleBook from '../style-book';
import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';

const { useLocation, useHistory } = unlock( routerPrivateApis );
const { Menu } = unlock( componentsPrivateApis );
const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';

const GlobalStylesPageActions = ( {
isStyleBookOpened,
setIsStyleBookOpened,
} ) => {
return (
<Menu
trigger={
<Button __next40pxDefaultSize variant="secondary">
{ __( 'Preview' ) }
</Button>
}
>
<Menu.RadioItem
value
checked={ isStyleBookOpened }
name="radio-controlled"
onChange={ () => setIsStyleBookOpened( true ) }
defaultChecked
>
<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
<Menu.ItemHelpText>
{ __( 'Preview blocks and styles.' ) }
</Menu.ItemHelpText>
</Menu.RadioItem>
<Menu.RadioItem
value={ false }
checked={ ! isStyleBookOpened }
name="radio-controlled"
onChange={ () => setIsStyleBookOpened( false ) }
>
<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
<Menu.ItemHelpText>
{ __( 'Preview your site.' ) }
</Menu.ItemHelpText>
</Menu.RadioItem>
</Menu>
);
};

export default function GlobalStylesUIWrapper() {
const { params } = useLocation();
const history = useHistory();
const { canvas = 'view' } = params;
const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( true );
const isMobileViewport = useViewportMatch( 'medium', '<' );
const pathWithPrefix = params.path;
const [ path, onPathChange ] = useMemo( () => {
const processedPath = pathWithPrefix.substring(
Expand All @@ -87,59 +37,8 @@ export default function GlobalStylesUIWrapper() {
}, [ pathWithPrefix, history ] );

return (
<>
<Page
actions={
! isMobileViewport ? (
<GlobalStylesPageActions
isStyleBookOpened={ isStyleBookOpened }
setIsStyleBookOpened={ setIsStyleBookOpened }
/>
) : null
}
className="edit-site-styles"
title={ __( 'Styles' ) }
>
<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
</Page>
{ canvas === 'view' && isStyleBookOpened && (
<StyleBook
enableResizing={ false }
showCloseButton={ false }
showTabs={ false }
isSelected={ ( blockName ) =>
// Match '/blocks/core%2Fbutton' and
// '/blocks/core%2Fbutton/typography', but not
// '/blocks/core%2Fbuttons'.
path ===
`/wp_global_styles/blocks/${ encodeURIComponent(
blockName
) }` ||
path.startsWith(
`/wp_global_styles/blocks/${ encodeURIComponent(
blockName
) }/`
)
}
path={ path }
onSelect={ ( blockName ) => {
if (
STYLE_BOOK_COLOR_GROUPS.find(
( group ) => group.slug === blockName
)
) {
// Go to color palettes Global Styles.
onPathChange( '/colors/palette' );
return;
}

// Now go to the selected block.
onPathChange(
`/blocks/${ encodeURIComponent( blockName ) }`
);
} }
/>
) }
</>
<Page className="edit-site-styles" title={ __( 'Styles' ) }>
<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
</Page>
);
}
30 changes: 23 additions & 7 deletions packages/edit-site/src/components/sidebar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function createNavState() {
};
}

function SidebarContentWrapper( { children } ) {
function SidebarContentWrapper( { children, shouldAnimate } ) {
const navState = useContext( SidebarNavigationContext );
const wrapperRef = useRef();
const [ navAnimation, setNavAnimation ] = useState( null );
Expand All @@ -66,10 +66,19 @@ function SidebarContentWrapper( { children } ) {
setNavAnimation( direction );
}, [ navState ] );

const wrapperCls = clsx( 'edit-site-sidebar__screen-wrapper', {
'slide-from-left': navAnimation === 'back',
'slide-from-right': navAnimation === 'forward',
} );
const wrapperCls = clsx(
'edit-site-sidebar__screen-wrapper',
/*
* Some panes do not have sub-panes and therefore
* should not animate when clicked on.
*/
shouldAnimate
? {
'slide-from-left': navAnimation === 'back',
'slide-from-right': navAnimation === 'forward',
}
: {}
);

return (
<div ref={ wrapperRef } className={ wrapperCls }>
Expand All @@ -78,13 +87,20 @@ function SidebarContentWrapper( { children } ) {
);
}

export default function SidebarContent( { routeKey, children } ) {
export default function SidebarContent( {
routeKey,
shouldAnimate,
children,
} ) {
const [ navState ] = useState( createNavState );

return (
<SidebarNavigationContext.Provider value={ navState }>
<div className="edit-site-sidebar__content">
<SidebarContentWrapper key={ routeKey }>
<SidebarContentWrapper
shouldAnimate={ shouldAnimate }
key={ routeKey }
>
{ children }
</SidebarContentWrapper>
</div>
Expand Down

0 comments on commit 6c8a23f

Please sign in to comment.