ESLint: Add rule to prevent usage of the word 'sidebar' in translatab…

…le strings (#68894)

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: swissspidy <[email protected]>

.eslintrc.js

@@ -119,6 +119,12 @@ const restrictedSyntax = [
 			'CallExpression[callee.name=/^(__|_x|_n|_nx)$/] > Literal[value=/^toggle\\b/i]',
 		message: "Avoid using the verb 'Toggle' in translatable strings",
 	},
+	{
+		selector:
+			'CallExpression[callee.name=/^(__|_x|_n|_nx)$/] > Literal[value=/(?<![-\\w])sidebar(?![-\\w])/i]',
+		message:
+			"Avoid using the word 'sidebar' in translatable strings. Consider using 'panel' instead.",
+	},
 ];
 
 /** `no-restricted-syntax` rules for components. */

packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -51,6 +51,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					placeholder={ defaultTitle }
 					disabled={ isBusy }
 					help={ __(
+						// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 					) }
 				/>

packages/edit-site/src/components/welcome-guide/page.js

@@ -57,6 +57,7 @@ export default function WelcomeGuidePage() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
+									// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
 								) }
 							</p>

packages/edit-widgets/src/components/sidebar/widget-areas.js

@@ -33,6 +33,7 @@ export default function WidgetAreas( { selectedWidgetAreaId } ) {
 	let description;
 	if ( ! selectedWidgetArea ) {
 		description = __(
+			// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 			'Widget Areas are global parts in your site’s layout that can accept blocks. These vary by theme, but are typically parts like your Sidebar or Footer.'
 		);
 	} else if ( selectedWidgetAreaId === 'wp_inactive_widgets' ) {

packages/editor/src/components/post-template/create-new-template-modal.js

@@ -126,6 +126,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 						placeholder={ DEFAULT_TITLE }
 						disabled={ isBusy }
 						help={ __(
+							// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 						) }
 					/>

packages/editor/src/components/preferences-modal/index.js

@@ -88,7 +88,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									scope="core"
 									featureName="showListViewByDefault"
 									help={ __(
-										'Opens the List View sidebar by default.'
+										'Opens the List View panel by default.'
 									) }
 									label={ __( 'Always open List View' ) }
 								/>

packages/editor/src/components/sidebar/header.js

@@ -22,7 +22,7 @@ const SidebarHeader = ( _, ref ) => {
 		return {
 			documentLabel:
 				// translators: Default label for the Document sidebar tab, not selected.
-				getPostTypeLabel() || _x( 'Document', 'noun, sidebar' ),
+				getPostTypeLabel() || _x( 'Document', 'noun, panel' ),
 		};
 	}, [] );
 

packages/editor/src/components/sidebar/index.js

@@ -103,7 +103,7 @@ const SidebarContent = ( {
 			headerClassName="editor-sidebar__panel-tabs"
 			title={
 				/* translators: button label text should, if possible, be under 16 characters. */
-				_x( 'Settings', 'sidebar button label' )
+				_x( 'Settings', 'panel button label' )
 			}
 			toggleShortcut={ keyboardShortcut }
 			icon={ isRTL() ? drawerLeft : drawerRight }