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

Site editor: use constants rather than hard coded template strings (round 3) #54705

Merged
merged 2 commits into from
Sep 22, 2023
Merged

Site editor: use constants rather than hard coded template strings (round 3) #54705

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
953c98c
Another round of replacing hard-coded strings with available constants
ramonjd Sep 21, 2023
9e07256
Update E2E test selector match the label
ramonjd Sep 22, 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
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/block-editor/block-editor-provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ import { useSelect } from '@wordpress/data';
import { store as editSiteStore } from '../../../store';
import DefaultBlockEditorProvider from './default-block-editor-provider';
import NavigationBlockEditorProvider from './navigation-block-editor-provider';
import { NAVIGATION_POST_TYPE } from '../../../utils/constants';

export default function BlockEditorProvider( { children } ) {
const entityType = useSelect(
( select ) => select( editSiteStore ).getEditedPostType(),
[]
);
if ( entityType === 'wp_navigation' ) {
if ( entityType === NAVIGATION_POST_TYPE ) {
return (
<NavigationBlockEditorProvider>
{ children }
Expand Down
11 changes: 4 additions & 7 deletions packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface';
import { STORE_NAME } from '../../../store/constants';
import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
import { store as editSiteStore } from '../../../store';

const entityLabels = {
wp_navigation: __( 'Navigation' ),
wp_block: __( 'Pattern' ),
wp_template: __( 'Template' ),
};
import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';

const SettingsHeader = ( { sidebarName } ) => {
const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
Expand All @@ -35,7 +30,9 @@ const SettingsHeader = ( { sidebarName } ) => {
};
} );

const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
const entityLabel =
POST_TYPE_LABELS[ entityType ] ||
POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ];
Comment on lines -38 to +35
Copy link
Contributor

Choose a reason for hiding this comment

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

There is a very subtle change here — we can now match against TEMPLATE_PART_POST_TYPE to get the Template part label, which wasn't possible before. This seems like a good change to me 👍

Trunk This PR
image image

I noticed one of the Playwright tests was failing. I've just kicked it off again, but if it's still failing, perhaps due to this label being updated?

This is the line where I think it might need to be updated to Template part?

gutenberg/test/e2e/specs/site-editor/writing-flow.spec.js

Line 69 in 420013b

'role=region[name="Editor settings"i] >> role=button[name="Template"i]'

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks for tracking it down! I just pushed and walked away :D

It makes me realize how many variations of Template part, template part and Template Part we have across the codebase.

I've updated to match the constant for now (Template Part). This was what I gleaned from https://make.wordpress.org/marketing/handbook/resources/style-guide-and-brand-book/#capitalizing-wordpress-terms.

I can make a note to unify them once we decide on what it should be 😄

Copy link
Contributor

Choose a reason for hiding this comment

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

It makes me realize how many variations of Template part, template part and Template Part we have across the codebase.

Oh, good point! At least this e2e test is case insensitive so it shouldn't break when we unify them further down the track 🙂

Copy link
Member Author

Choose a reason for hiding this comment

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

Related conversation in #51744


const { enableComplementaryArea } = useDispatch( interfaceStore );
const openTemplateSettings = () =>
Expand Down
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import { useDebounce } from '@wordpress/compose';
import { store as noticesStore } from '@wordpress/notices';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
import { PATTERN_TYPES } from '../../../utils/constants';

export const unescapeString = ( arg ) => {
return decodeEntities( arg );
};
Expand Down Expand Up @@ -171,7 +176,7 @@ export default function PatternCategories( { post } ) {
}

function onUpdateTerms( newTermIds ) {
editEntityRecord( 'postType', 'wp_block', post.id, {
editEntityRecord( 'postType', PATTERN_TYPES.user, post.id, {
wp_pattern_category: newTermIds,
} );
}
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export default function SidebarNavigationScreenPages() {
) }
{ isHomePageBlog && homeTemplate && (
<PageItem
postType="wp_template"
postType={ TEMPLATE_POST_TYPE }
postId={ homeTemplate.id }
key={ homeTemplate.id }
icon={ home }
Expand Down Expand Up @@ -204,7 +204,7 @@ export default function SidebarNavigationScreenPages() {
<VStack spacing={ 0 }>
{ dynamicPageTemplates?.map( ( item ) => (
<PageItem
postType="wp_template"
postType={ TEMPLATE_POST_TYPE }
postId={ item.id }
key={ item.id }
icon={ layout }
Expand Down
3 changes: 2 additions & 1 deletion ...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import { useLink } from '../routes/link';
import SidebarNavigationItem from '../sidebar-navigation-item';
import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';

const EMPTY_OBJECT = {};

Expand All @@ -37,7 +38,7 @@ function TemplateAreaButton( { postId, icon, title } ) {
footer,
};
const linkInfo = useLink( {
postType: 'wp_template_part',
postType: TEMPLATE_PART_POST_TYPE,
postId,
} );

Expand Down
8 changes: 6 additions & 2 deletions packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,19 @@ import { __experimentalUseNavigator as useNavigator } from '@wordpress/component
*/
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import { store as editSiteStore } from '../../store';
import {
TEMPLATE_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
} from '../../utils/constants';

const config = {
wp_template: {
[ TEMPLATE_POST_TYPE ]: {
title: __( 'All templates' ),
description: __(
'Create new templates, or reset any customizations made to the templates supplied by your theme.'
),
},
wp_template_part: {
[ TEMPLATE_PART_POST_TYPE ]: {
title: __( 'All template parts' ),
description: __(
'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
Expand Down
7 changes: 4 additions & 3 deletions packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { useLink } from '../routes/link';
import SidebarNavigationItem from '../sidebar-navigation-item';
import AddNewTemplate from '../add-new-template';
import SidebarButton from '../sidebar-button';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

const TemplateItem = ( { postType, postId, ...props } ) => {
const linkInfo = useLink( {
Expand All @@ -32,7 +33,7 @@ export default function SidebarNavigationScreenTemplates() {

const { records: templates, isResolving: isLoading } = useEntityRecords(
'postType',
'wp_template',
TEMPLATE_POST_TYPE,
{
per_page: -1,
}
Expand All @@ -54,7 +55,7 @@ export default function SidebarNavigationScreenTemplates() {
actions={
canCreate && (
<AddNewTemplate
templateType={ 'wp_template' }
templateType={ TEMPLATE_POST_TYPE }
toggleProps={ {
as: SidebarButton,
} }
Expand All @@ -71,7 +72,7 @@ export default function SidebarNavigationScreenTemplates() {
) }
{ sortedTemplates.map( ( template ) => (
<TemplateItem
postType={ 'wp_template' }
postType={ TEMPLATE_POST_TYPE }
postId={ template.id }
key={ template.id }
withChevron
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/start-template-options/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { store as editSiteStore } from '../../store';
import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

function useFallbackTemplateContent( slug, isCustom = false ) {
const [ templateContent, setTemplateContent ] = useState( '' );
Expand Down Expand Up @@ -198,7 +199,7 @@ export default function StartTemplateOptions() {
shouldOpenModal:
! hasEdits &&
'' === templateRecord.content &&
'wp_template' === _postType &&
TEMPLATE_POST_TYPE === _postType &&
! select( preferencesStore ).get(
'core/edit-site',
'welcomeGuide'
Expand Down
14 changes: 10 additions & 4 deletions packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
*/
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';
import {
TEMPLATE_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
NAVIGATION_POST_TYPE,
PATTERN_TYPES,
} from '../../utils/constants';

const { useLocation } = unlock( routerPrivateApis );

Expand Down Expand Up @@ -42,16 +48,16 @@ export default function useInitEditedEntityFromURL() {
useEffect( () => {
if ( postType && postId ) {
switch ( postType ) {
case 'wp_template':
case TEMPLATE_POST_TYPE:
setTemplate( postId );
break;
case 'wp_template_part':
case TEMPLATE_PART_POST_TYPE:
setTemplatePart( postId );
break;
case 'wp_navigation':
case NAVIGATION_POST_TYPE:
setNavigationMenu( postId );
break;
case 'wp_block':
case PATTERN_TYPES.user:
setEditedEntity( postType, postId );
break;
default:
Expand Down
11 changes: 8 additions & 3 deletions packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import {
TEMPLATE_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
PATTERN_TYPES,
} from '../../utils/constants';

const { useLocation, useHistory } = unlock( routerPrivateApis );

Expand All @@ -18,9 +23,9 @@ export function getPathFromURL( urlParams ) {
// Compute the navigator path based on the URL params.
if ( urlParams?.postType && urlParams?.postId ) {
switch ( urlParams.postType ) {
case 'wp_block':
case 'wp_template':
case 'wp_template_part':
case PATTERN_TYPES.user:
case TEMPLATE_POST_TYPE:
case TEMPLATE_PART_POST_TYPE:
case 'page':
path = `/${ encodeURIComponent(
urlParams.postType
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/template-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { store as editSiteStore } from '../../store';
import isTemplateRemovable from '../../utils/is-template-removable';
import isTemplateRevertable from '../../utils/is-template-revertable';
import RenameMenuItem from './rename-menu-item';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

export default function TemplateActions( {
postType,
Expand Down Expand Up @@ -68,7 +69,7 @@ export default function TemplateActions( {
);
} catch ( error ) {
const fallbackErrorMessage =
template.type === 'wp_template'
template.type === TEMPLATE_POST_TYPE
? __( 'An error occurred while reverting the template.' )
: __(
'An error occurred while reverting the template part.'
Expand Down
7 changes: 4 additions & 3 deletions packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import isTemplateRevertable from '../../utils/is-template-revertable';
import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
import { unlock } from '../../lock-unlock';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

const { useHistory } = unlock( routerPrivateApis );

Expand Down Expand Up @@ -131,7 +132,7 @@ function useManipulateDocumentCommands() {

if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
const label =
template.type === 'wp_template'
template.type === TEMPLATE_POST_TYPE
? /* translators: %1$s: template title */
sprintf(
'Reset template: %s',
Expand All @@ -155,7 +156,7 @@ function useManipulateDocumentCommands() {

if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
const label =
template.type === 'wp_template'
template.type === TEMPLATE_POST_TYPE
? /* translators: %1$s: template title */
sprintf(
'Delete template: %s',
Expand All @@ -167,7 +168,7 @@ function useManipulateDocumentCommands() {
decodeEntities( template.title )
);
const path =
template.type === 'wp_template'
template.type === TEMPLATE_POST_TYPE
? '/wp_template'
: '/wp_template_part/all';
commands.push( {
Expand Down
28 changes: 18 additions & 10 deletions packages/edit-site/src/store/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ import { decodeEntities } from '@wordpress/html-entities';
*/
import { STORE_NAME as editSiteStoreName } from './constants';
import isTemplateRevertable from '../utils/is-template-revertable';

import {
TEMPLATE_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
NAVIGATION_POST_TYPE,
} from '../utils/constants';
/**
* Dispatches an action that toggles a feature flag.
*
Expand Down Expand Up @@ -67,14 +71,18 @@ export const setTemplate =
try {
const template = await registry
.resolveSelect( coreStore )
.getEntityRecord( 'postType', 'wp_template', templateId );
.getEntityRecord(
'postType',
TEMPLATE_POST_TYPE,
templateId
);
templateSlug = template?.slug;
} catch ( error ) {}
}

dispatch( {
type: 'SET_EDITED_POST',
postType: 'wp_template',
postType: TEMPLATE_POST_TYPE,
id: templateId,
context: { templateSlug },
} );
Expand All @@ -92,14 +100,14 @@ export const addTemplate =
async ( { dispatch, registry } ) => {
const newTemplate = await registry
.dispatch( coreStore )
.saveEntityRecord( 'postType', 'wp_template', template );
.saveEntityRecord( 'postType', TEMPLATE_POST_TYPE, template );

if ( template.content ) {
registry
.dispatch( coreStore )
.editEntityRecord(
'postType',
'wp_template',
TEMPLATE_POST_TYPE,
newTemplate.id,
{ blocks: parse( template.content ) },
{ undoIgnore: true }
Expand All @@ -108,7 +116,7 @@ export const addTemplate =

dispatch( {
type: 'SET_EDITED_POST',
postType: 'wp_template',
postType: TEMPLATE_POST_TYPE,
id: newTemplate.id,
context: { templateSlug: newTemplate.slug },
} );
Expand Down Expand Up @@ -178,7 +186,7 @@ export const removeTemplate =
export function setTemplatePart( templatePartId ) {
return {
type: 'SET_EDITED_POST',
postType: 'wp_template_part',
postType: TEMPLATE_PART_POST_TYPE,
id: templatePartId,
};
}
Expand All @@ -193,7 +201,7 @@ export function setTemplatePart( templatePartId ) {
export function setNavigationMenu( navigationMenuId ) {
return {
type: 'SET_EDITED_POST',
postType: 'wp_navigation',
postType: NAVIGATION_POST_TYPE,
id: navigationMenuId,
};
}
Expand Down Expand Up @@ -282,7 +290,7 @@ export const setPage =
const currentTemplate = (
await registry
.resolveSelect( coreStore )
.getEntityRecords( 'postType', 'wp_template', {
.getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
per_page: -1,
} )
)?.find( ( { slug } ) => slug === currentTemplateSlug );
Expand All @@ -305,7 +313,7 @@ export const setPage =

dispatch( {
type: 'SET_EDITED_POST',
postType: 'wp_template',
postType: TEMPLATE_POST_TYPE,
id: template.id,
context: {
...page.context,
Expand Down
Loading