forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Site editor: integrate global styles controls and style book preview …
…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
1 parent
03225e0
commit 2a18aae
Showing
13 changed files
with
400 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 145 additions & 0 deletions
145
packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ) }` | ||
); | ||
} } | ||
/> | ||
) } | ||
</> | ||
); | ||
} |
35 changes: 35 additions & 0 deletions
35
packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.