Skip to content

Commit

Permalink
Site editor: integrate global styles controls and style book preview …
Browse files Browse the repository at this point in the history
…into the styles panel (WordPress#65619)

This commit integrates global styles controls and a style book preview into the styles panel. This affects the site editor in view mode. A toggle allows users to switch between previewing the site and the style book while editing global styles. 

---------

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: mtias <[email protected]>
Co-authored-by: afercia <[email protected]>
  • Loading branch information
14 people authored Nov 4, 2024
1 parent 03225e0 commit 2a18aae
Show file tree
Hide file tree
Showing 13 changed files with 400 additions and 157 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,10 @@ export default function useEditorIframeProps() {
} );
}
},
onClick: () => {
onClick: () =>
history.push( { ...params, canvas: 'edit' }, undefined, {
transition: 'canvas-mode-edit-transition',
} );
},
} ),
onClickCapture: ( event ) => {
if ( currentPostIsTrashed ) {
event.preventDefault();
Expand Down
39 changes: 37 additions & 2 deletions packages/edit-site/src/components/global-styles/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,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 @@ -291,18 +292,52 @@ function GlobalStylesEditorCanvasContainerLink() {
}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
}

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

// This component is used to wrap the hook in order to conditionally execute it
// when the parent component is used on controlled mode.
function NavigationSync( { path: parentPath, onPathChange, children } ) {
useNavigatorSync( parentPath, onPathChange );
return children;
}

function GlobalStylesUI( { path, onPathChange } ) {
const blocks = getBlockTypes();
const editorCanvasContainerView = useSelect(
( select ) =>
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);

return (
<Navigator
className="edit-site-global-styles-sidebar__navigator-provider"
initialPath="/"
>
{ path && onPathChange && (
<NavigationSync path={ path } onPathChange={ onPathChange } />
) }
<GlobalStylesNavigationScreen path="/">
<ScreenRoot />
</GlobalStylesNavigationScreen>
Expand Down
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/layout/index.js
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo, useState } 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="tertiary" size="compact">
{ __( 'Preview' ) }
</Button>
}
>
<Menu.RadioItem
value
checked={ isStyleBookOpened }
name="styles-preview-actions"
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="styles-preview-actions"
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( false );
const isMobileViewport = useViewportMatch( 'medium', '<' );
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 (
<>
<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 ) }`
);
} }
/>
) }
</>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.edit-site-styles .edit-site-page-content {
.edit-site-global-styles-screen-root {
box-shadow: none;
& > div > hr {
display: none;
}
}
.edit-site-global-styles-sidebar__navigator-provider {
.components-tools-panel {
border-top: none;
}
overflow-y: auto;
padding-left: 0;
padding-right: 0;

.edit-site-global-styles-sidebar__navigator-screen {
padding-top: $grid-unit-15;
padding-left: $grid-unit-15;
padding-right: $grid-unit-15;
padding-bottom: $grid-unit-15;
outline: none;
}
}
.edit-site-page-header {
padding-left: $grid-unit-60;
padding-right: $grid-unit-60;
@container (max-width: 430px) {
padding-left: $grid-unit-30;
padding-right: $grid-unit-30;
}
}
.edit-site-sidebar-button {
color: $gray-900;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

&:hover,
&:focus,
&[aria-current] {
&[aria-current="true"] {
color: $gray-200;
background: $gray-800;

Expand All @@ -16,7 +16,7 @@
}
}

&[aria-current] {
&[aria-current="true"] {
background: var(--wp-admin-theme-color);
color: $white;
}
Expand Down
Loading

0 comments on commit 2a18aae

Please sign in to comment.