Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't allow access to Styles-related pages via the command palette in the hybrid theme #53123

Merged
merged 2 commits into from
Aug 7, 2023
Merged

Don't allow access to Styles-related pages via the command palette in the hybrid theme #53123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02d5ced
Don't allow access to Styles-related pages via the command palette in…
t-hamano Jul 28, 2023
ebf53bc
Don't use
t-hamano Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/core-commands/src/admin-navigation-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
import { useIsSiteEditorAccessible } from './hooks';
import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
import { unlock } from './lock-unlock';

const { useHistory } = unlock( routerPrivateApis );

export function useAdminNavigationCommands() {
const history = useHistory();
const isSiteEditorAccessible = useIsSiteEditorAccessible();
const isTemplatesAccessible = useIsTemplatesAccessible();
const isBlockBasedTheme = useIsBlockBasedTheme();

const isSiteEditor = getPath( window.location.href )?.includes(
'site-editor.php'
Expand All @@ -43,9 +44,7 @@ export function useAdminNavigationCommands() {
name: 'core/manage-reusable-blocks',
label: __( 'Open patterns' ),
callback: ( { close } ) => {
if ( ! isSiteEditorAccessible ) {
document.location.href = 'edit.php?post_type=wp_block';
} else {
if ( isTemplatesAccessible && isBlockBasedTheme ) {
const args = {
path: '/patterns',
};
Expand All @@ -55,6 +54,8 @@ export function useAdminNavigationCommands() {
document.location = addQueryArgs( 'site-editor.php', args );
}
close();
} else {
document.location.href = 'edit.php?post_type=wp_block';
}
},
icon: isSiteEditor ? symbol : external,
Expand Down
15 changes: 9 additions & 6 deletions packages/core-commands/src/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
/**
* WordPress dependencies
*/
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';

export function useIsSiteEditorAccessible() {
export function useIsTemplatesAccessible() {
return useSelect(
( select ) =>
select( blockEditorStore ).getSettings()
.__unstableIsBlockBasedTheme &&
select( coreStore ).canUser( 'read', 'templates' ),
( select ) => select( coreStore ).canUser( 'read', 'templates' ),
[]
);
}

export function useIsBlockBasedTheme() {
return useSelect(
( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
[]
);
}
10 changes: 6 additions & 4 deletions packages/core-commands/src/site-editor-navigation-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
/**
* Internal dependencies
*/
import { useIsSiteEditorAccessible } from './hooks';
import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
import { unlock } from './lock-unlock';

const { useHistory } = unlock( routerPrivateApis );
Expand Down Expand Up @@ -124,13 +124,15 @@ function useSiteEditorBasicNavigationCommands() {
const isSiteEditor = getPath( window.location.href )?.includes(
'site-editor.php'
);
const isSiteEditorAccessible = useIsSiteEditorAccessible();
const isTemplatesAccessible = useIsTemplatesAccessible();
const isBlockBasedTheme = useIsBlockBasedTheme();
const commands = useMemo( () => {
const result = [];

if ( ! isSiteEditorAccessible ) {
if ( ! isTemplatesAccessible || ! isBlockBasedTheme ) {
return result;
}

result.push( {
name: 'core/edit-site/open-navigation',
label: __( 'Open navigation' ),
Expand Down Expand Up @@ -204,7 +206,7 @@ function useSiteEditorBasicNavigationCommands() {
} );

return result;
}, [ history, isSiteEditor, isSiteEditorAccessible ] );
}, [ history, isSiteEditor, isTemplatesAccessible, isBlockBasedTheme ] );

return {
commands,
Expand Down
217 changes: 149 additions & 68 deletions packages/edit-site/src/hooks/commands/use-common-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,143 @@ import getIsListPage from '../../utils/get-is-list-page';
const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
const { useHistory, useLocation } = unlock( routerPrivateApis );

function useGlobalStylesOpenStylesCommands() {
const { openGeneralSidebar, setCanvasMode } = unlock(
useDispatch( editSiteStore )
);
const { params } = useLocation();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isEditorPage = ! getIsListPage( params, isMobileViewport );
const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
const { set } = useDispatch( preferencesStore );
const { createInfoNotice } = useDispatch( noticesStore );

const history = useHistory();
const isDistractionFree = useSelect( ( select ) => {
return select( preferencesStore ).get(
editSiteStore.name,
'distractionFree'
);
}, [] );

const isBlockBasedTheme = useSelect( ( select ) => {
return select( coreStore ).getCurrentTheme().is_block_theme;
}, [] );

const commands = useMemo( () => {
if ( ! isBlockBasedTheme ) {
return [];
}

return [
{
name: 'core/edit-site/open-styles',
label: __( 'Open styles' ),
callback: ( { close } ) => {
close();
if ( ! isEditorPage ) {
history.push( {
path: '/wp_global_styles',
canvas: 'edit',
} );
}
if ( isEditorPage && getCanvasMode() !== 'edit' ) {
setCanvasMode( 'edit' );
}
if ( isDistractionFree ) {
set( editSiteStore.name, 'distractionFree', false );
createInfoNotice(
__( 'Distraction free mode turned off.' ),
{
type: 'snackbar',
}
);
}
openGeneralSidebar( 'edit-site/global-styles' );
},
icon: styles,
},
];
}, [
history,
openGeneralSidebar,
setCanvasMode,
isEditorPage,
createInfoNotice,
getCanvasMode,
isDistractionFree,
isBlockBasedTheme,
set,
] );

return {
isLoading: false,
commands,
};
}

function useGlobalStylesToggleWelcomeGuideCommands() {
const { openGeneralSidebar, setCanvasMode } = unlock(
useDispatch( editSiteStore )
);
const { params } = useLocation();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isEditorPage = ! getIsListPage( params, isMobileViewport );
const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
const { set } = useDispatch( preferencesStore );

const history = useHistory();
const isBlockBasedTheme = useSelect( ( select ) => {
return select( coreStore ).getCurrentTheme().is_block_theme;
}, [] );

const commands = useMemo( () => {
if ( ! isBlockBasedTheme ) {
return [];
}

return [
{
name: 'core/edit-site/toggle-styles-welcome-guide',
label: __( 'Learn about styles' ),
callback: ( { close } ) => {
close();
if ( ! isEditorPage ) {
history.push( {
path: '/wp_global_styles',
canvas: 'edit',
} );
}
if ( isEditorPage && getCanvasMode() !== 'edit' ) {
setCanvasMode( 'edit' );
}
openGeneralSidebar( 'edit-site/global-styles' );
set( 'core/edit-site', 'welcomeGuideStyles', true );
// sometimes there's a focus loss that happens after some time
// that closes the modal, we need to force reopening it.
setTimeout( () => {
set( 'core/edit-site', 'welcomeGuideStyles', true );
}, 500 );
},
icon: help,
},
];
}, [
history,
openGeneralSidebar,
setCanvasMode,
isEditorPage,
getCanvasMode,
isBlockBasedTheme,
set,
] );

return {
isLoading: false,
commands,
};
}

function useGlobalStylesResetCommands() {
const [ canReset, onReset ] = useGlobalStylesReset();
const commands = useMemo( () => {
Expand Down Expand Up @@ -170,80 +307,14 @@ function useGlobalStylesOpenRevisionsCommands() {
}

export function useCommonCommands() {
const { openGeneralSidebar, setCanvasMode } = unlock(
useDispatch( editSiteStore )
);
const { params } = useLocation();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isEditorPage = ! getIsListPage( params, isMobileViewport );
const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
const { set } = useDispatch( preferencesStore );
const { createInfoNotice } = useDispatch( noticesStore );
const history = useHistory();
const { homeUrl, isDistractionFree } = useSelect( ( select ) => {
const homeUrl = useSelect( ( select ) => {
const {
getUnstableBase, // Site index.
} = select( coreStore );

return {
homeUrl: getUnstableBase()?.home,
isDistractionFree: select( preferencesStore ).get(
editSiteStore.name,
'distractionFree'
),
};
return getUnstableBase()?.home;
}, [] );

useCommand( {
name: 'core/edit-site/open-styles',
label: __( 'Open styles' ),
callback: ( { close } ) => {
close();
if ( ! isEditorPage ) {
history.push( {
path: '/wp_global_styles',
canvas: 'edit',
} );
}
if ( isEditorPage && getCanvasMode() !== 'edit' ) {
setCanvasMode( 'edit' );
}
if ( isDistractionFree ) {
set( editSiteStore.name, 'distractionFree', false );
createInfoNotice( __( 'Distraction free mode turned off.' ), {
type: 'snackbar',
} );
}
openGeneralSidebar( 'edit-site/global-styles' );
},
icon: styles,
} );

useCommand( {
name: 'core/edit-site/toggle-styles-welcome-guide',
label: __( 'Learn about styles' ),
callback: ( { close } ) => {
close();
if ( ! isEditorPage ) {
history.push( {
path: '/wp_global_styles',
canvas: 'edit',
} );
}
if ( isEditorPage && getCanvasMode() !== 'edit' ) {
setCanvasMode( 'edit' );
}
openGeneralSidebar( 'edit-site/global-styles' );
set( 'core/edit-site', 'welcomeGuideStyles', true );
// sometimes there's a focus loss that happens after some time
// that closes the modal, we need to force reopening it.
setTimeout( () => {
set( 'core/edit-site', 'welcomeGuideStyles', true );
}, 500 );
},
icon: help,
} );

useCommand( {
name: 'core/edit-site/view-site',
label: __( 'View site' ),
Expand All @@ -254,6 +325,16 @@ export function useCommonCommands() {
icon: external,
} );

useCommandLoader( {
name: 'core/edit-site/open-styles',
hook: useGlobalStylesOpenStylesCommands,
} );

useCommandLoader( {
name: 'core/edit-site/toggle-styles-welcome-guide',
hook: useGlobalStylesToggleWelcomeGuideCommands,
} );

useCommandLoader( {
name: 'core/edit-site/reset-global-styles',
hook: useGlobalStylesResetCommands,
Expand Down