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

Moves "Patterns" command to site editor main navigation #61416

Merged
merged 3 commits into from
May 9, 2024
Merged

Moves "Patterns" command to site editor main navigation #61416

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6fe6cc
moves pattern command to site editor main navigation
bacoords May 6, 2024
90c26a9
updates patterns command to properly display and link for non-block t…
bacoords May 7, 2024
0461bba
Merge remote-tracking branch 'origin/trunk' into update/moves-pattern…
bacoords May 8, 2024
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
43 changes: 1 addition & 42 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 @@ -3,26 +3,9 @@
*/
import { useCommand } from '@wordpress/commands';
import { __ } from '@wordpress/i18n';
import { plus, symbol } from '@wordpress/icons';
import { addQueryArgs, getPath } from '@wordpress/url';
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
* Internal dependencies
*/
import { useIsTemplatesAccessible } from './hooks';
import { unlock } from './lock-unlock';

const { useHistory } = unlock( routerPrivateApis );
import { plus } from '@wordpress/icons';

export function useAdminNavigationCommands() {
const history = useHistory();
const isTemplatesAccessible = useIsTemplatesAccessible();

const isSiteEditor = getPath( window.location.href )?.includes(
'site-editor.php'
);

useCommand( {
name: 'core/add-new-post',
label: __( 'Add new post' ),
Expand All @@ -39,28 +22,4 @@ export function useAdminNavigationCommands() {
document.location.href = 'post-new.php?post_type=page';
},
} );
useCommand( {
name: 'core/manage-reusable-blocks',
label: __( 'Patterns' ),
icon: symbol,
callback: ( { close } ) => {
// The site editor and templates both check whether the user
// can read templates. We can leverage that here and this
// command links to the classic dashboard manage patterns page
// if the user can't access it.
if ( isTemplatesAccessible ) {
const args = {
path: '/patterns',
};
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = addQueryArgs( 'site-editor.php', args );
}
close();
} else {
document.location.href = 'edit.php?post_type=wp_block';
}
},
} );
}
7 changes: 7 additions & 0 deletions packages/core-commands/src/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ export function useIsTemplatesAccessible() {
);
}

export function useIsTemplatesEditable() {
return useSelect(
( select ) => select( coreStore ).canUser( 'create', 'templates' ),
[]
);
}

export function useIsBlockBasedTheme() {
return useSelect(
( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
Expand Down
159 changes: 93 additions & 66 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 @@ -10,6 +10,7 @@ import {
post,
page,
layout,
symbol,
symbolFilled,
styles,
navigation,
Expand All @@ -21,7 +22,11 @@ import { useDebounce } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
import {
useIsTemplatesAccessible,
useIsTemplatesEditable,
useIsBlockBasedTheme,
} from './hooks';
import { unlock } from './lock-unlock';
import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';

Expand Down Expand Up @@ -258,83 +263,105 @@ function useSiteEditorBasicNavigationCommands() {
'site-editor.php'
);
const isTemplatesAccessible = useIsTemplatesAccessible();
const isTemplatesEditable = useIsTemplatesEditable();
Copy link
Contributor

Choose a reason for hiding this comment

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

Based on this discussion, it seems better not to create custom hooks. You will only need to check whether it is possible to create a template, as shown below.

const canCreateTemplate = useSelect( ( select ) => {
	return select( coreStore ).canUser( 'create', 'templates' );
}, [] );

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks - this makes sense and uses the same canCreateTemplate value to determine whether the user should be sent to the classic admin screen for patterns or to the site editor's Pattern screen.

const isBlockBasedTheme = useIsBlockBasedTheme();
const commands = useMemo( () => {
const result = [];

if ( ! isTemplatesAccessible || ! isBlockBasedTheme ) {
return result;
}
if ( isTemplatesAccessible && isBlockBasedTheme ) {
result.push( {
name: 'core/edit-site/open-navigation',
label: __( 'Navigation' ),
icon: navigation,
callback: ( { close } ) => {
const args = {
path: '/navigation',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );

result.push( {
name: 'core/edit-site/open-navigation',
label: __( 'Navigation' ),
icon: navigation,
callback: ( { close } ) => {
const args = {
path: '/navigation',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );
result.push( {
name: 'core/edit-site/open-styles',
label: __( 'Styles' ),
icon: styles,
callback: ( { close } ) => {
const args = {
path: '/wp_global_styles',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );

result.push( {
name: 'core/edit-site/open-styles',
label: __( 'Styles' ),
icon: styles,
callback: ( { close } ) => {
const args = {
path: '/wp_global_styles',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );
result.push( {
name: 'core/edit-site/open-pages',
label: __( 'Pages' ),
icon: page,
callback: ( { close } ) => {
const args = {
path: '/page',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );

result.push( {
name: 'core/edit-site/open-pages',
label: __( 'Pages' ),
icon: page,
callback: ( { close } ) => {
const args = {
path: '/page',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );
result.push( {
name: 'core/edit-site/open-templates',
label: __( 'Templates' ),
icon: layout,
callback: ( { close } ) => {
const args = {
path: '/wp_template',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
},
} );
}

result.push( {
name: 'core/edit-site/open-templates',
label: __( 'Templates' ),
icon: layout,
name: 'core/edit-site/open-patterns',
label: __( 'Patterns' ),
icon: symbol,
callback: ( { close } ) => {
const args = {
path: '/wp_template',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
if ( isTemplatesEditable ) {
const args = {
path: '/patterns',
};
const targetUrl = addQueryArgs( 'site-editor.php', args );
if ( isSiteEditor ) {
history.push( args );
} else {
document.location = targetUrl;
}
close();
} else {
document.location = targetUrl;
// If a user cannot access the site editor
document.location.href = 'edit.php?post_type=wp_block';
}
close();
},
} );

Expand Down
Loading