Skip to content

Commit

Permalink
Give style book its own route so it can be linked to directly. (#67811)
Browse files Browse the repository at this point in the history 
* Give style book its own route so it can be linked to directly.

* Fix paths to and from global styles.

* Use query instead of path

* Fix path

* Effect for editor settings update
  • Loading branch information
@tellthemachines
tellthemachines authored Dec 18, 2024
1 parent c5e8fd2 commit 2af83af
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 65 deletions.
73 changes: 26 additions & 47 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 @@ -6,7 +6,7 @@ import { useMemo, useState } from '@wordpress/element';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { useViewportMatch } from '@wordpress/compose';
import { Button } from '@wordpress/components';
import { addQueryArgs } from '@wordpress/url';
import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
import { seen } from '@wordpress/icons';

/**
Expand All @@ -15,35 +15,42 @@ import { seen } from '@wordpress/icons';
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 GlobalStylesPageActions = ( {
isStyleBookOpened,
setIsStyleBookOpened,
path,
} ) => {
const history = useHistory();
return (
<Button
isPressed={ isStyleBookOpened }
icon={ seen }
label={ __( 'Style Book' ) }
onClick={ () => {
setIsStyleBookOpened( ! isStyleBookOpened );
const updatedPath = ! isStyleBookOpened
? addQueryArgs( path, { preview: 'stylebook' } )
: removeQueryArgs( path, 'preview' );
// Navigate to the updated path.
history.navigate( updatedPath );
} }
size="compact"
/>
);
};

export default function GlobalStylesUIWrapper() {
/**
* Hook to deal with navigation and location state.
*
* @return {Array} The current section and a function to update it.
*/
export const useSection = () => {
const { path, query } = useLocation();
const history = useHistory();
const { canvas = 'view' } = query;
const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
const isMobileViewport = useViewportMatch( 'medium', '<' );
const [ section, onChangeSection ] = useMemo( () => {
return useMemo( () => {
return [
query.section ?? '/',
( updatedSection ) => {
Expand All @@ -55,6 +62,16 @@ export default function GlobalStylesUIWrapper() {
},
];
}, [ path, query.section, history ] );
};

export default function GlobalStylesUIWrapper() {
const { path } = useLocation();

const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
path.includes( 'preview=stylebook' )
);
const isMobileViewport = useViewportMatch( 'medium', '<' );
const [ section, onChangeSection ] = useSection();

return (
<>
Expand All @@ -64,6 +81,7 @@ export default function GlobalStylesUIWrapper() {
<GlobalStylesPageActions
isStyleBookOpened={ isStyleBookOpened }
setIsStyleBookOpened={ setIsStyleBookOpened }
path={ path }
/>
) : null
}
Expand All @@ -75,45 +93,6 @@ export default function GlobalStylesUIWrapper() {
onPathChange={ onChangeSection }
/>
</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'.
section ===
`/blocks/${ encodeURIComponent( blockName ) }` ||
section.startsWith(
`/blocks/${ encodeURIComponent( blockName ) }/`
)
}
path={ section }
onSelect={ ( blockName ) => {
if (
STYLE_BOOK_COLOR_GROUPS.find(
( group ) => group.slug === blockName
)
) {
// Go to color palettes Global Styles.
onChangeSection( '/colors/palette' );
return;
}
if ( blockName === 'typography' ) {
// Go to typography Global Styles.
onChangeSection( '/typography' );
return;
}

// Now go to the selected block.
onChangeSection(
`/blocks/${ encodeURIComponent( blockName ) }`
);
} }
/>
) }
</>
);
}
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/site-editor-routes/stylebook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const stylebookRoute = {
) }
/>
),
preview: <StyleBookPreview />,
mobile: <StyleBookPreview />,
preview: <StyleBookPreview isStatic />,
mobile: <StyleBookPreview isStatic />,
},
};
6 changes: 5 additions & 1 deletion packages/edit-site/src/components/site-editor-routes/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Editor from '../editor';
import { unlock } from '../../lock-unlock';
import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
import { StyleBookPreview } from '../style-book';

const { useLocation } = unlock( routerPrivateApis );

Expand All @@ -30,7 +31,10 @@ export const stylesRoute = {
areas: {
content: <GlobalStylesUIWrapper />,
sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
preview: <Editor />,
preview( { query } ) {
const isStylebook = query.preview === 'stylebook';
return isStylebook ? <StyleBookPreview /> : <Editor />;
},
mobile: <MobileGlobalStylesUI />,
},
widths: {
Expand Down
63 changes: 48 additions & 15 deletions packages/edit-site/src/components/style-book/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
useContext,
useRef,
useLayoutEffect,
useEffect,
} from '@wordpress/element';
import { ENTER, SPACE } from '@wordpress/keycodes';

Expand All @@ -47,6 +48,8 @@ import {
} from './categories';
import { getExamples } from './examples';
import { store as siteEditorStore } from '../../store';
import { useSection } from '../sidebar-global-styles-wrapper';
import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';

const {
ExperimentalBlockEditorProvider,
Expand Down Expand Up @@ -346,33 +349,63 @@ function StyleBook( {
/**
* Style Book Preview component renders the stylebook without the Editor dependency.
*
* @param {Object} props Component props.
* @param {string} props.path Path to the selected block.
* @param {Object} props.userConfig User configuration.
* @param {Function} props.isSelected Function to check if a block is selected.
* @param {Function} props.onSelect Function to select a block.
* @param {Object} props Component props.
* @param {Object} props.userConfig User configuration.
* @param {boolean} props.isStatic Whether the stylebook is static or clickable.
* @return {Object} Style Book Preview component.
*/
export const StyleBookPreview = ( {
path = '',
userConfig = {},
isSelected,
onSelect,
} ) => {
export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
const siteEditorSettings = useSelect(
( select ) => select( siteEditorStore ).getSettings(),
[]
);

// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
useEffect( () => {
dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
}, [ siteEditorSettings ] );

const [ section, onChangeSection ] = useSection();

const isSelected = ( blockName ) => {
// Match '/blocks/core%2Fbutton' and
// '/blocks/core%2Fbutton/typography', but not
// '/blocks/core%2Fbuttons'.
return (
section === `/blocks/${ encodeURIComponent( blockName ) }` ||
section.startsWith(
`/blocks/${ encodeURIComponent( blockName ) }/`
)
);
};

const onSelect = ( blockName ) => {
if (
STYLE_BOOK_COLOR_GROUPS.find(
( group ) => group.slug === blockName
)
) {
// Go to color palettes Global Styles.
onChangeSection( '/colors/palette' );
return;
}
if ( blockName === 'typography' ) {
// Go to typography Global Styles.
onChangeSection( '/typography' );
return;
}

// Now go to the selected block.
onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
};

const [ resizeObserver, sizes ] = useResizeObserver();
const colors = useMultiOriginPalettes();
const examples = getExamples( colors );
const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );

const { base: baseConfig } = useContext( GlobalStylesContext );
const goTo = getStyleBookNavigationFromPath( path );
const goTo = getStyleBookNavigationFromPath( section );

const mergedConfig = useMemo( () => {
if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
Expand Down Expand Up @@ -404,8 +437,8 @@ export const StyleBookPreview = ( {
settings={ settings }
goTo={ goTo }
sizes={ sizes }
isSelected={ isSelected }
onSelect={ onSelect }
isSelected={ ! isStatic ? isSelected : null }
onSelect={ ! isStatic ? onSelect : null }
/>
</BlockEditorProvider>
</div>
Expand Down

1 comment on commit 2af83af

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 2af83af.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12385294363
📝 Reported issues:

Please sign in to comment.